@tecsinapse/cortex-react 1.0.2 → 1.2.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 (93) hide show
  1. package/LICENSE.md +21 -0
  2. package/dist/cjs/components/Badge.js +27 -0
  3. package/dist/cjs/components/Button.js +11 -0
  4. package/dist/cjs/components/Card.js +19 -0
  5. package/dist/cjs/components/Hint.js +21 -0
  6. package/dist/cjs/components/Input.js +79 -0
  7. package/dist/cjs/components/Modal.js +25 -0
  8. package/dist/cjs/components/SearchInput.js +70 -0
  9. package/dist/cjs/components/Select.js +101 -0
  10. package/dist/cjs/components/Snackbar.js +18 -0
  11. package/dist/cjs/components/Table.js +53 -0
  12. package/dist/cjs/components/Tag.js +18 -0
  13. package/dist/cjs/components/TextArea.js +81 -0
  14. package/dist/cjs/components/Toggle.js +18 -0
  15. package/dist/cjs/hooks/useDebouncedState.js +16 -0
  16. package/dist/cjs/index.js +42 -0
  17. package/dist/esm/components/Badge.js +24 -0
  18. package/dist/esm/components/Button.js +9 -0
  19. package/dist/esm/components/Card.js +17 -0
  20. package/dist/esm/components/Hint.js +19 -0
  21. package/dist/esm/components/Input.js +72 -0
  22. package/dist/esm/components/Modal.js +23 -0
  23. package/dist/esm/components/SearchInput.js +68 -0
  24. package/dist/esm/components/Select.js +96 -0
  25. package/dist/esm/components/Snackbar.js +16 -0
  26. package/dist/esm/components/Table.js +44 -0
  27. package/dist/esm/components/Tag.js +16 -0
  28. package/dist/esm/components/TextArea.js +79 -0
  29. package/dist/esm/components/Toggle.js +16 -0
  30. package/dist/esm/hooks/useDebouncedState.js +14 -0
  31. package/dist/esm/index.js +12 -0
  32. package/dist/types/components/Badge.d.ts +12 -0
  33. package/dist/types/components/Button.d.ts +8 -0
  34. package/dist/types/components/Card.d.ts +6 -0
  35. package/dist/types/components/Hint.d.ts +14 -0
  36. package/dist/types/components/Input.d.ts +34 -0
  37. package/dist/types/components/Modal.d.ts +8 -0
  38. package/dist/types/components/SearchInput.d.ts +11 -0
  39. package/dist/types/components/Select.d.ts +28 -0
  40. package/dist/types/components/Snackbar.d.ts +9 -0
  41. package/dist/types/components/Table.d.ts +13 -0
  42. package/dist/types/components/Tag.d.ts +8 -0
  43. package/dist/types/components/TextArea.d.ts +24 -0
  44. package/dist/types/components/Toggle.d.ts +2 -0
  45. package/{src/components/index.ts → dist/types/components/index.d.ts} +1 -0
  46. package/dist/types/docs/badge-anchor.stories.d.ts +29 -0
  47. package/dist/types/docs/badge.stories.d.ts +27 -0
  48. package/dist/types/docs/button.stories.d.ts +30 -0
  49. package/dist/types/docs/card.stories.d.ts +10 -0
  50. package/dist/types/docs/hint.stories.d.ts +27 -0
  51. package/dist/types/docs/input-custom.stories.d.ts +33 -0
  52. package/dist/types/docs/input.stories.d.ts +33 -0
  53. package/dist/types/docs/modal.stories.d.ts +10 -0
  54. package/dist/types/docs/select-grouped.stories.d.ts +32 -0
  55. package/dist/types/docs/select.stories.d.ts +32 -0
  56. package/dist/types/docs/snackbar.stories.d.ts +21 -0
  57. package/dist/types/docs/table.stories.d.ts +10 -0
  58. package/dist/types/docs/tag.stories.d.ts +21 -0
  59. package/dist/types/docs/text-area.stories.d.ts +39 -0
  60. package/dist/types/docs/toggle.stories.d.ts +10 -0
  61. package/dist/types/docs/utils.d.ts +1 -0
  62. package/dist/types/hooks/useDebouncedState.d.ts +2 -0
  63. package/package.json +19 -14
  64. package/src/components/Badge.tsx +0 -45
  65. package/src/components/Button.tsx +0 -19
  66. package/src/components/Card.tsx +0 -18
  67. package/src/components/Hint.tsx +0 -31
  68. package/src/components/Input.tsx +0 -110
  69. package/src/components/Modal.tsx +0 -24
  70. package/src/components/SearchInput.tsx +0 -86
  71. package/src/components/Select.tsx +0 -170
  72. package/src/components/Snackbar.tsx +0 -26
  73. package/src/components/Tag.tsx +0 -19
  74. package/src/components/TextArea.tsx +0 -121
  75. package/src/components/Toggle.tsx +0 -25
  76. package/src/docs/badge-anchor.stories.tsx +0 -42
  77. package/src/docs/badge.stories.tsx +0 -31
  78. package/src/docs/button.stories.tsx +0 -37
  79. package/src/docs/card.stories.tsx +0 -29
  80. package/src/docs/hint.stories.tsx +0 -32
  81. package/src/docs/input-custom.stories.tsx +0 -45
  82. package/src/docs/input.stories.tsx +0 -40
  83. package/src/docs/modal.stories.tsx +0 -48
  84. package/src/docs/select-grouped.stories.tsx +0 -79
  85. package/src/docs/select.stories.tsx +0 -70
  86. package/src/docs/snackbar.stories.tsx +0 -31
  87. package/src/docs/tag.stories.tsx +0 -37
  88. package/src/docs/text-area.stories.tsx +0 -50
  89. package/src/docs/toggle.stories.tsx +0 -18
  90. package/src/docs/utils.ts +0 -8
  91. package/src/hooks/useDebouncedState.ts +0 -24
  92. /package/{src/hooks/index.ts → dist/types/hooks/index.d.ts} +0 -0
  93. /package/{src/index.ts → dist/types/index.d.ts} +0 -0
@@ -0,0 +1,17 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { card } from '@tecsinapse/cortex-core';
3
+
4
+ const Card = forwardRef((props, ref) => {
5
+ const { children, className, ...rest } = props;
6
+ return /* @__PURE__ */ React.createElement(
7
+ "div",
8
+ {
9
+ className: card({ className }),
10
+ ref,
11
+ ...rest
12
+ },
13
+ children
14
+ );
15
+ });
16
+
17
+ export { Card };
@@ -0,0 +1,19 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { hint } from '@tecsinapse/cortex-core';
3
+
4
+ const Hint = forwardRef(
5
+ (props, ref) => {
6
+ const { description, children, variants } = props;
7
+ return /* @__PURE__ */ React.createElement(
8
+ "div",
9
+ {
10
+ className: hint(variants),
11
+ ref
12
+ },
13
+ description ? /* @__PURE__ */ React.createElement("p", null, description) : /* @__PURE__ */ React.createElement(React.Fragment, null),
14
+ children
15
+ );
16
+ }
17
+ );
18
+
19
+ export { Hint };
@@ -0,0 +1,72 @@
1
+ import React from 'react';
2
+ import { inputBox, labelStyle, input } from '@tecsinapse/cortex-core';
3
+ import { clsx } from 'clsx';
4
+
5
+ const getValidChildren = (children) => {
6
+ return React.Children.toArray(children).filter(
7
+ (el) => React.isValidElement(el)
8
+ );
9
+ };
10
+ const Box = React.forwardRef(
11
+ ({ id, name, variants, label, placeholder, className, ...rest }, ref) => {
12
+ return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
13
+ "input",
14
+ {
15
+ id: id ?? name,
16
+ name,
17
+ placeholder: placeholder ?? " ",
18
+ className: clsx(inputBox(placeholder, label, className)),
19
+ ...rest,
20
+ ref
21
+ }
22
+ ), /* @__PURE__ */ React.createElement(
23
+ "label",
24
+ {
25
+ htmlFor: id ?? name,
26
+ className: labelStyle({ intent: variants?.intent, placeholder })
27
+ },
28
+ label
29
+ ));
30
+ }
31
+ );
32
+ const Face = React.forwardRef(
33
+ ({ children, variants, className, ...rest }, ref) => {
34
+ const clones = getValidChildren(children).map((el) => {
35
+ return React.cloneElement(el, { ...el.props, variants });
36
+ });
37
+ return /* @__PURE__ */ React.createElement(
38
+ "div",
39
+ {
40
+ ...rest,
41
+ className: clsx(input(variants), className),
42
+ id: "input-face",
43
+ ref
44
+ },
45
+ clones
46
+ );
47
+ }
48
+ );
49
+ const Root = React.forwardRef(
50
+ ({ variants, className, ...rest }, ref) => {
51
+ return /* @__PURE__ */ React.createElement(Face, { variants, className }, /* @__PURE__ */ React.createElement(Box, { ...rest, ref }));
52
+ }
53
+ );
54
+ const Left = React.forwardRef(
55
+ ({ children, className, ...rest }, ref) => {
56
+ return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
57
+ }
58
+ );
59
+ const Right = React.forwardRef(
60
+ ({ children, className, ...rest }, ref) => {
61
+ return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
62
+ }
63
+ );
64
+ const Input = {
65
+ Root,
66
+ Face,
67
+ Box,
68
+ Left,
69
+ Right
70
+ };
71
+
72
+ export { Box, Face, Input, Left, Right, Root };
@@ -0,0 +1,23 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { overlay, modal } from '@tecsinapse/cortex-core';
3
+
4
+ const Modal = forwardRef((props, ref) => {
5
+ const { open, onClose, children, className } = props;
6
+ return /* @__PURE__ */ React.createElement(
7
+ "div",
8
+ {
9
+ ref,
10
+ ...props
11
+ },
12
+ /* @__PURE__ */ React.createElement(
13
+ "div",
14
+ {
15
+ className: overlay({ show: open }),
16
+ onClick: onClose
17
+ }
18
+ ),
19
+ /* @__PURE__ */ React.createElement("dialog", { className: modal({ open, className }) }, children)
20
+ );
21
+ });
22
+
23
+ export { Modal };
@@ -0,0 +1,68 @@
1
+ import React, { useState, useEffect } from 'react';
2
+ import './Badge.js';
3
+ import { Button } from './Button.js';
4
+ import './Card.js';
5
+ import './Hint.js';
6
+ import { Input } from './Input.js';
7
+ import './Modal.js';
8
+ import './Select.js';
9
+ import './Snackbar.js';
10
+ import './Tag.js';
11
+ import './Toggle.js';
12
+ import './TextArea.js';
13
+ import '@tecsinapse/cortex-core';
14
+ import { AiOutlineLoading } from 'react-icons/ai';
15
+ import { IoSearchOutline } from 'react-icons/io5';
16
+ import { useDebouncedState } from '../hooks/useDebouncedState.js';
17
+
18
+ const inputFace = "bg-white w-full";
19
+ const inputLeft = "flex items-center";
20
+ const SearchInput = ({
21
+ label,
22
+ placeholder,
23
+ isSubmitting = false,
24
+ onChange,
25
+ onClick,
26
+ BOUNCE_TIMEOUT = 1e3
27
+ }) => {
28
+ const [bouncedText, setBouncedText] = useState("");
29
+ const [searchInput, setSearchInput] = useDebouncedState(
30
+ "",
31
+ setBouncedText,
32
+ BOUNCE_TIMEOUT
33
+ );
34
+ useEffect(() => {
35
+ if (onChange) {
36
+ onChange(bouncedText);
37
+ }
38
+ }, [bouncedText]);
39
+ const handleEnterKey = (e) => {
40
+ if (e.key === "Enter" && onClick && searchInput) {
41
+ onClick(searchInput);
42
+ }
43
+ };
44
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full space-x-mili" }, /* @__PURE__ */ React.createElement(Input.Face, { variants: { className: inputFace } }, !onClick && /* @__PURE__ */ React.createElement(Input.Left, { className: inputLeft }, /* @__PURE__ */ React.createElement(IoSearchOutline, null)), /* @__PURE__ */ React.createElement(
45
+ Input.Box,
46
+ {
47
+ placeholder,
48
+ label,
49
+ onChange: (e) => setSearchInput(e.target.value),
50
+ onKeyDown: handleEnterKey,
51
+ disabled: isSubmitting
52
+ }
53
+ )), onClick && /* @__PURE__ */ React.createElement(
54
+ Button,
55
+ {
56
+ variants: {
57
+ intent: "primary",
58
+ size: "square",
59
+ className: "h-11"
60
+ },
61
+ onClick: () => onClick(searchInput),
62
+ disabled: !searchInput || isSubmitting
63
+ },
64
+ isSubmitting ? /* @__PURE__ */ React.createElement("div", { className: "animate-spin" }, /* @__PURE__ */ React.createElement(AiOutlineLoading, null)) : /* @__PURE__ */ React.createElement(IoSearchOutline, null)
65
+ ));
66
+ };
67
+
68
+ export { SearchInput as default };
@@ -0,0 +1,96 @@
1
+ import { selectVariants, option } from '@tecsinapse/cortex-core';
2
+ import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react';
3
+ import { Hint } from './Hint.js';
4
+ import { IoChevronDownOutline } from 'react-icons/io5';
5
+ import { IoIosCloseCircleOutline } from 'react-icons/io';
6
+ import SearchInput from './SearchInput.js';
7
+
8
+ const { button, dropdown, groupedTitle, containerGrouped, hintBody } = selectVariants();
9
+ const Select = (props) => {
10
+ const {
11
+ label,
12
+ keyExtractor,
13
+ labelExtractor,
14
+ options,
15
+ value,
16
+ onSelect,
17
+ onSearch,
18
+ disabled,
19
+ grouped,
20
+ groupedLabelExtractor,
21
+ hint,
22
+ placeholderSearchInput,
23
+ variant = "default"
24
+ } = props;
25
+ const [open, setOpen] = useState(false);
26
+ const placeholder = useMemo(
27
+ () => value ? labelExtractor(value) : label,
28
+ [label, labelExtractor, value]
29
+ );
30
+ const ref = useRef(null);
31
+ const handleClickOutside = useCallback((event) => {
32
+ if (ref.current && !ref.current.contains(event.target)) {
33
+ setOpen(false);
34
+ }
35
+ }, []);
36
+ const handleSelect = useCallback(
37
+ (option) => {
38
+ onSelect(option);
39
+ setOpen(false);
40
+ },
41
+ [onSelect]
42
+ );
43
+ useEffect(() => {
44
+ document.addEventListener("click", handleClickOutside, true);
45
+ return () => {
46
+ document.removeEventListener("click", handleClickOutside, true);
47
+ };
48
+ }, [handleClickOutside]);
49
+ const Option = ({ option: option$1 }) => /* @__PURE__ */ React.createElement(
50
+ "li",
51
+ {
52
+ onClick: () => handleSelect(option$1),
53
+ className: option(),
54
+ role: "option"
55
+ },
56
+ labelExtractor(option$1)
57
+ );
58
+ const GroupedOptions = ({ options: options2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, [...options2 ?? []].map(([key, value2]) => /* @__PURE__ */ React.createElement("div", { key, className: containerGrouped() }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value2.map((option) => /* @__PURE__ */ React.createElement(Option, { option, key: keyExtractor(option) })))));
59
+ const DefaultOptions = ({ options: options2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, (options2 ?? []).map((option) => /* @__PURE__ */ React.createElement(Option, { option, key: keyExtractor(option) })));
60
+ return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, /* @__PURE__ */ React.createElement(
61
+ "button",
62
+ {
63
+ className: button({ disabled, intent: variant }),
64
+ onClick: () => setOpen((prevState) => !prevState),
65
+ disabled
66
+ },
67
+ /* @__PURE__ */ React.createElement("span", null, placeholder),
68
+ /* @__PURE__ */ React.createElement(IoChevronDownOutline, null)
69
+ ), /* @__PURE__ */ React.createElement(
70
+ "ul",
71
+ {
72
+ role: "select",
73
+ className: dropdown({
74
+ open
75
+ })
76
+ },
77
+ onSearch ? /* @__PURE__ */ React.createElement("div", { className: "m-mili" }, /* @__PURE__ */ React.createElement(
78
+ SearchInput,
79
+ {
80
+ placeholder: placeholderSearchInput,
81
+ onChange: onSearch
82
+ }
83
+ )) : /* @__PURE__ */ React.createElement(React.Fragment, null),
84
+ grouped ? /* @__PURE__ */ React.createElement(GroupedOptions, { options }) : /* @__PURE__ */ React.createElement(DefaultOptions, { options })
85
+ ), hint && /* @__PURE__ */ React.createElement(
86
+ Hint,
87
+ {
88
+ variants: {
89
+ intent: variant
90
+ }
91
+ },
92
+ /* @__PURE__ */ React.createElement("div", { className: hintBody() }, variant === "error" ? /* @__PURE__ */ React.createElement(IoIosCloseCircleOutline, null) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement("span", null, hint))
93
+ ));
94
+ };
95
+
96
+ export { Select, Select as default };
@@ -0,0 +1,16 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { snackbar } from '@tecsinapse/cortex-core';
3
+
4
+ const Snackbar = forwardRef((props, ref) => {
5
+ const { children, show, variants } = props;
6
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, show ? /* @__PURE__ */ React.createElement(
7
+ "div",
8
+ {
9
+ className: snackbar(variants),
10
+ ref
11
+ },
12
+ children
13
+ ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
14
+ });
15
+
16
+ export { Snackbar };
@@ -0,0 +1,44 @@
1
+ import React from 'react';
2
+ import { tHead, tRow, tHeadCell, tCell, tFoot, tRoot, hr } from '@tecsinapse/cortex-core';
3
+
4
+ const THead = ({
5
+ children,
6
+ className,
7
+ ...rest
8
+ }) => /* @__PURE__ */ React.createElement("thead", { className: tHead({ className }), ...rest }, children);
9
+ const TRow = ({
10
+ children,
11
+ className,
12
+ ...rest
13
+ }) => /* @__PURE__ */ React.createElement("tr", { className: tRow({ className }), ...rest }, children);
14
+ const THeadCell = ({
15
+ children,
16
+ className,
17
+ ...rest
18
+ }) => /* @__PURE__ */ React.createElement("th", { className: tHeadCell({ className }), ...rest }, children);
19
+ const TCell = ({
20
+ children,
21
+ className,
22
+ ...rest
23
+ }) => /* @__PURE__ */ React.createElement("td", { className: tCell({ className }), ...rest }, children);
24
+ const TFoot = ({
25
+ children,
26
+ className,
27
+ ...rest
28
+ }) => /* @__PURE__ */ React.createElement("tfoot", { className: tFoot({ className }), ...rest }, children);
29
+ const Table = ({
30
+ children,
31
+ className,
32
+ ...rest
33
+ }) => /* @__PURE__ */ React.createElement("table", { className: tRoot({ className }), ...rest }, children);
34
+ const Hr = ({
35
+ children,
36
+ className,
37
+ ...rest
38
+ }) => /* @__PURE__ */ React.createElement("hr", { className: hr({ className }), ...rest }, children);
39
+ const Td = ({
40
+ children,
41
+ ...rest
42
+ }) => /* @__PURE__ */ React.createElement("td", { colSpan: 99, ...rest }, children);
43
+
44
+ export { Hr, TCell, TFoot, THead, THeadCell, TRow, Table, Td };
@@ -0,0 +1,16 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { tag } from '@tecsinapse/cortex-core';
3
+
4
+ const Tag = forwardRef((props, ref) => {
5
+ const { label, variants } = props;
6
+ return /* @__PURE__ */ React.createElement(
7
+ "div",
8
+ {
9
+ className: tag(variants),
10
+ ref
11
+ },
12
+ /* @__PURE__ */ React.createElement("p", null, label)
13
+ );
14
+ });
15
+
16
+ export { Tag };
@@ -0,0 +1,79 @@
1
+ import React from 'react';
2
+ import { inputBox, labelStyle, input } from '@tecsinapse/cortex-core';
3
+ import { clsx } from 'clsx';
4
+
5
+ const getValidChildren = (children) => {
6
+ return React.Children.toArray(children).filter(
7
+ (el) => React.isValidElement(el)
8
+ );
9
+ };
10
+ const Box = React.forwardRef(
11
+ ({ id, name, variants, label, placeholder, rows, className, ...rest }, ref) => {
12
+ return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
13
+ "textarea",
14
+ {
15
+ ref,
16
+ id: id ?? name,
17
+ name,
18
+ placeholder: placeholder ?? " ",
19
+ className: clsx(
20
+ inputBox(placeholder, label, className),
21
+ "resize-none mt-mili"
22
+ ),
23
+ rows,
24
+ ...rest
25
+ }
26
+ ), /* @__PURE__ */ React.createElement(
27
+ "label",
28
+ {
29
+ htmlFor: id ?? name,
30
+ className: labelStyle({
31
+ intent: variants?.intent,
32
+ placeholder
33
+ })
34
+ },
35
+ label
36
+ ));
37
+ }
38
+ );
39
+ const Face = React.forwardRef(
40
+ ({ children, variants, className, ...rest }, ref) => {
41
+ const clones = getValidChildren(children).map((el) => {
42
+ return React.cloneElement(el, { ...el.props, variants });
43
+ });
44
+ return /* @__PURE__ */ React.createElement(
45
+ "div",
46
+ {
47
+ ref,
48
+ className: clsx(input(variants), className),
49
+ id: "textarea-face",
50
+ ...rest
51
+ },
52
+ clones
53
+ );
54
+ }
55
+ );
56
+ const Root = React.forwardRef(
57
+ ({ variants, className, ...rest }, ref) => {
58
+ return /* @__PURE__ */ React.createElement(Face, { variants, className }, /* @__PURE__ */ React.createElement(Box, { ref, ...rest }));
59
+ }
60
+ );
61
+ const Left = React.forwardRef(
62
+ ({ children, className, ...rest }, ref) => {
63
+ return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
64
+ }
65
+ );
66
+ const Right = React.forwardRef(
67
+ ({ children, className, ...rest }, ref) => {
68
+ return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
69
+ }
70
+ );
71
+ const TextArea = {
72
+ Root,
73
+ Face,
74
+ Box,
75
+ Left,
76
+ Right
77
+ };
78
+
79
+ export { TextArea };
@@ -0,0 +1,16 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { styleLabelElement, styleInputElement, toggle } from '@tecsinapse/cortex-core';
3
+
4
+ const Toggle = forwardRef((props, ref) => {
5
+ return /* @__PURE__ */ React.createElement("div", { className: "flex flex-row items-center gap-x-centi" }, /* @__PURE__ */ React.createElement("label", { className: styleLabelElement() }, /* @__PURE__ */ React.createElement(
6
+ "input",
7
+ {
8
+ type: "checkbox",
9
+ className: styleInputElement(),
10
+ ref,
11
+ ...props
12
+ }
13
+ ), /* @__PURE__ */ React.createElement("div", { className: toggle() })));
14
+ });
15
+
16
+ export { Toggle };
@@ -0,0 +1,14 @@
1
+ import { useRef, useState, useEffect } from 'react';
2
+
3
+ function useDebouncedState(initialState, timeoutCallback, timeoutMs = 166) {
4
+ const timeoutId = useRef();
5
+ const [state, setState] = useState(initialState);
6
+ useEffect(() => {
7
+ if (timeoutId.current) clearTimeout(timeoutId.current);
8
+ if (timeoutCallback)
9
+ timeoutId.current = setTimeout(() => timeoutCallback(state), timeoutMs);
10
+ }, [state]);
11
+ return [state, setState];
12
+ }
13
+
14
+ export { useDebouncedState };
@@ -0,0 +1,12 @@
1
+ export { Badge, BadgeAnchor } from './components/Badge.js';
2
+ export { Button } from './components/Button.js';
3
+ export { Card } from './components/Card.js';
4
+ export { Hint } from './components/Hint.js';
5
+ export { Box, Face, Input, Left, Right, Root } from './components/Input.js';
6
+ export { Modal } from './components/Modal.js';
7
+ export { Select } from './components/Select.js';
8
+ export { Snackbar } from './components/Snackbar.js';
9
+ export { Tag } from './components/Tag.js';
10
+ export { Toggle } from './components/Toggle.js';
11
+ export { TextArea } from './components/TextArea.js';
12
+ export { Hr, TCell, TFoot, THead, THeadCell, TRow, Table, Td } from './components/Table.js';
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { BadgeVariants } from '@tecsinapse/cortex-core';
3
+ interface BadgeProps {
4
+ value: string | number;
5
+ variants?: BadgeVariants;
6
+ }
7
+ interface BadgeAnchorProps extends BadgeProps {
8
+ children: JSX.Element;
9
+ }
10
+ export declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps & Omit<React.HTMLProps<HTMLDivElement>, "className">, "ref"> & React.RefAttributes<HTMLDivElement>>;
11
+ export declare const BadgeAnchor: React.ForwardRefExoticComponent<Omit<BadgeAnchorProps & Omit<React.HTMLProps<HTMLDivElement>, "className">, "ref"> & React.RefAttributes<HTMLDivElement>>;
12
+ export {};
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { ButtonVariants } from '@tecsinapse/cortex-core';
3
+ interface ButtonProps {
4
+ variants?: ButtonVariants;
5
+ children?: JSX.Element;
6
+ }
7
+ export declare const Button: React.ForwardRefExoticComponent<ButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className"> & React.RefAttributes<HTMLButtonElement>>;
8
+ export {};
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ interface CardProps {
3
+ children: JSX.Element;
4
+ }
5
+ export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps & React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
6
+ export {};
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { HintVariants } from '@tecsinapse/cortex-core';
3
+ interface HintProps {
4
+ children?: never;
5
+ description: string;
6
+ variants?: HintVariants;
7
+ }
8
+ interface HintPropsWithChildrenProps {
9
+ children: JSX.Element;
10
+ description?: never;
11
+ variants?: HintVariants;
12
+ }
13
+ export declare const Hint: React.ForwardRefExoticComponent<(Omit<HintProps & Omit<React.HTMLProps<HTMLDivElement>, "className">, "ref"> | Omit<HintPropsWithChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, "className">, "ref">) & React.RefAttributes<HTMLDivElement>>;
14
+ export {};
@@ -0,0 +1,34 @@
1
+ import React from 'react';
2
+ import { InputBaseVariants } from '@tecsinapse/cortex-core';
3
+ interface InputPropsBase {
4
+ variants?: InputBaseVariants;
5
+ label?: string;
6
+ }
7
+ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, InputPropsBase {
8
+ }
9
+ export declare const Box: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
10
+ type DivBaseProps = React.HTMLAttributes<HTMLDivElement>;
11
+ export declare const Face: React.ForwardRefExoticComponent<DivBaseProps & Pick<InputPropsBase, "variants"> & React.RefAttributes<HTMLDivElement>>;
12
+ export declare const Root: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
13
+ export declare const Left: React.ForwardRefExoticComponent<DivBaseProps & {
14
+ children: React.ReactNode;
15
+ className?: string | undefined;
16
+ } & React.RefAttributes<HTMLDivElement>>;
17
+ export declare const Right: React.ForwardRefExoticComponent<DivBaseProps & {
18
+ children: React.ReactNode;
19
+ className?: string | undefined;
20
+ } & React.RefAttributes<HTMLDivElement>>;
21
+ export declare const Input: {
22
+ Root: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
23
+ Face: React.ForwardRefExoticComponent<DivBaseProps & Pick<InputPropsBase, "variants"> & React.RefAttributes<HTMLDivElement>>;
24
+ Box: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
25
+ Left: React.ForwardRefExoticComponent<DivBaseProps & {
26
+ children: React.ReactNode;
27
+ className?: string | undefined;
28
+ } & React.RefAttributes<HTMLDivElement>>;
29
+ Right: React.ForwardRefExoticComponent<DivBaseProps & {
30
+ children: React.ReactNode;
31
+ className?: string | undefined;
32
+ } & React.RefAttributes<HTMLDivElement>>;
33
+ };
34
+ export {};
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ interface ModalProps {
3
+ open: boolean;
4
+ onClose: () => void;
5
+ children: JSX.Element;
6
+ }
7
+ export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLDivElement>>;
8
+ export {};
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ interface SearchInputProps {
3
+ label?: string;
4
+ placeholder?: string;
5
+ isSubmitting?: boolean;
6
+ onChange?: (value: string) => void;
7
+ onClick?: (value: string) => void;
8
+ BOUNCE_TIMEOUT?: number;
9
+ }
10
+ declare const SearchInput: ({ label, placeholder, isSubmitting, onChange, onClick, BOUNCE_TIMEOUT, }: SearchInputProps) => JSX.Element;
11
+ export default SearchInput;
@@ -0,0 +1,28 @@
1
+ /// <reference types="react" />
2
+ interface CommonProps<T> {
3
+ label: string;
4
+ value: T | undefined;
5
+ onSelect: (value: T) => void;
6
+ keyExtractor: (value: T) => string;
7
+ labelExtractor: (value: T) => string;
8
+ onSearch?: (search: string) => void;
9
+ disabled?: boolean;
10
+ grouped?: boolean;
11
+ variant?: 'error' | 'default';
12
+ hint?: string;
13
+ placeholderSearchInput?: string;
14
+ }
15
+ interface GroupedProps<T> {
16
+ options?: Map<string, T[]>;
17
+ groupedLabelExtractor: (value: string) => string;
18
+ grouped: true;
19
+ }
20
+ interface DefaultProps<T> {
21
+ options?: T[];
22
+ groupedLabelExtractor?: never;
23
+ grouped?: never;
24
+ }
25
+ type ConditionalProps<T> = GroupedProps<T> | DefaultProps<T>;
26
+ type SelectProps<T> = CommonProps<T> & ConditionalProps<T>;
27
+ export declare const Select: <T>(props: SelectProps<T>) => JSX.Element;
28
+ export default Select;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { SnackbarVariants } from '@tecsinapse/cortex-core';
3
+ interface SnackbarProps {
4
+ variants?: SnackbarVariants;
5
+ children: JSX.Element;
6
+ show: boolean;
7
+ }
8
+ export declare const Snackbar: React.ForwardRefExoticComponent<SnackbarProps & React.RefAttributes<HTMLDivElement>>;
9
+ export {};
@@ -0,0 +1,13 @@
1
+ import React, { HTMLAttributes, ReactNode, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
2
+ interface TableCommon {
3
+ children?: ReactNode;
4
+ }
5
+ export declare const THead: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;
6
+ export declare const TRow: ({ children, className, ...rest }: TableCommon & React.HTMLAttributes<HTMLTableRowElement>) => JSX.Element;
7
+ export declare const THeadCell: ({ children, className, ...rest }: TableCommon & ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
8
+ export declare const TCell: ({ children, className, ...rest }: TableCommon & TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
9
+ export declare const TFoot: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;
10
+ export declare const Table: ({ children, className, ...rest }: TableCommon & TableHTMLAttributes<HTMLTableElement>) => JSX.Element;
11
+ export declare const Hr: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLHRElement>) => JSX.Element;
12
+ export declare const Td: ({ children, ...rest }: TableCommon & TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
13
+ export {};