@tecsinapse/cortex-react 1.2.0 → 1.2.2

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 (48) hide show
  1. package/README.md +65 -5
  2. package/dist/cjs/components/Avatar.js +33 -0
  3. package/dist/cjs/components/BreadcrumbItem.js +26 -0
  4. package/dist/cjs/components/Breadcrumbs.js +22 -0
  5. package/dist/cjs/components/Card.js +1 -9
  6. package/dist/cjs/components/Drawer.js +30 -0
  7. package/dist/cjs/components/SearchInput.js +2 -0
  8. package/dist/cjs/components/Skeleton.js +19 -0
  9. package/dist/cjs/components/Table.js +5 -1
  10. package/dist/cjs/components/utils.js +11 -0
  11. package/dist/cjs/index.js +9 -0
  12. package/dist/esm/components/Avatar.js +31 -0
  13. package/dist/esm/components/BreadcrumbItem.js +24 -0
  14. package/dist/esm/components/Breadcrumbs.js +20 -0
  15. package/dist/esm/components/Card.js +1 -9
  16. package/dist/esm/components/Drawer.js +28 -0
  17. package/dist/esm/components/SearchInput.js +2 -0
  18. package/dist/esm/components/Skeleton.js +17 -0
  19. package/dist/esm/components/Table.js +6 -3
  20. package/dist/esm/components/utils.js +9 -0
  21. package/dist/esm/index.js +5 -1
  22. package/dist/types/components/Avatar.d.ts +7 -0
  23. package/dist/types/components/BreadcrumbItem.d.ts +7 -0
  24. package/dist/types/components/Breadcrumbs.d.ts +10 -0
  25. package/dist/types/components/Button.d.ts +1 -1
  26. package/dist/types/components/Card.d.ts +1 -1
  27. package/dist/types/components/Drawer.d.ts +9 -0
  28. package/dist/types/components/Skeleton.d.ts +2 -0
  29. package/dist/types/components/Table.d.ts +1 -0
  30. package/dist/types/components/index.d.ts +4 -0
  31. package/dist/types/components/utils.d.ts +1 -0
  32. package/package.json +3 -3
  33. package/dist/types/docs/badge-anchor.stories.d.ts +0 -29
  34. package/dist/types/docs/badge.stories.d.ts +0 -27
  35. package/dist/types/docs/button.stories.d.ts +0 -30
  36. package/dist/types/docs/card.stories.d.ts +0 -10
  37. package/dist/types/docs/hint.stories.d.ts +0 -27
  38. package/dist/types/docs/input-custom.stories.d.ts +0 -33
  39. package/dist/types/docs/input.stories.d.ts +0 -33
  40. package/dist/types/docs/modal.stories.d.ts +0 -10
  41. package/dist/types/docs/select-grouped.stories.d.ts +0 -32
  42. package/dist/types/docs/select.stories.d.ts +0 -32
  43. package/dist/types/docs/snackbar.stories.d.ts +0 -21
  44. package/dist/types/docs/table.stories.d.ts +0 -10
  45. package/dist/types/docs/tag.stories.d.ts +0 -21
  46. package/dist/types/docs/text-area.stories.d.ts +0 -39
  47. package/dist/types/docs/toggle.stories.d.ts +0 -10
  48. package/dist/types/docs/utils.d.ts +0 -1
package/README.md CHANGED
@@ -1,11 +1,71 @@
1
- # `cortex-react`
1
+ # TecSinapse Design System
2
2
 
3
- > TODO: description
3
+ [![build workflow](https://github.com/tecsinapse/design-system/actions/workflows/publish.yml/badge.svg)](https://github.com/tecsinapse/design-system/actions/workflows/publish.yml)
4
4
 
5
- ## Usage
5
+ Welcome to [TecSinapse](https://www.tecsinapse.com.br/) Design System. This repo contains core components to build web and mobile applications.
6
+ Our primary goal is to create a system that can be used to build a wide variety of TecSinapse websites and apps,
7
+ while providing a consistent and inclusive user experience to our end users.
8
+ In addition, the design system and component library should be easy to use for developers and designers.
6
9
 
10
+ ## Quick start
11
+
12
+ Please refer to the official [documentation](https://tecsinapse.github.io/design-system).
13
+
14
+ ## Packages
15
+
16
+ | Package | Content | Version |
17
+ | --------------------------------------------------------------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
18
+ | **[@tecsinapse/react-core](./packages/react-core)** | core primitives for `CSS-in-JS` packages | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-core) |
19
+ | **[@tecsinapse/react-web-kit](./packages/react-web-kit)** | emotion `styled-components` for browsers with `react-native-web` | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit) |
20
+ | **[@tecsinapse/react-native-kit](./packages/react-native-kit)** | emotion native `styled-components` for `react-native` cross platform development | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit) |
21
+ | **[@tecsinapse/react-charts](./packages/react-charts)** | charts for react & react-native based on SVG | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-charts.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-charts) |
22
+ | **[@tecsinapse/cortex-core](./packages/cortex-core)** | core primitives for `tailwindcss` packages | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Fcortex-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Fcortex-core) |
23
+ | **[@tecsinapse/cortex-react](./packages/cortex-react)** | `html` based components using `cortex-core` primitives | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Fcortex-react.svg)](https://badge.fury.io/js/%40tecsinapse%2Fcortex-react) |
24
+
25
+ ## Code of conduct
26
+
27
+ We want to foster an inclusive and friendly community around our Open Source efforts. This project follows the Contributor Covenant Code of Conduct.
28
+ Please, [read it and follow it](./CODE_OF_CONDUCT.md).
29
+
30
+ If you feel another member of the community violated our code or you are experiencing problems participating in our community because of another individual's behavior,
31
+ please get in touch with our maintainers.
32
+
33
+ ## Running locally
34
+
35
+ Recommended requirements:
36
+
37
+ - `pnpm` >= 9
38
+ - `node` >= 20
39
+
40
+ To run locally, you should install the dependencies first:
41
+
42
+ ```
43
+ pnpm i
7
44
  ```
8
- const index = require('cortex-react');
9
45
 
10
- // TODO: DEMONSTRATE API
46
+ After this script, all packages will build. When developing, for a better experience, also use:
47
+
11
48
  ```
49
+ pnpm dev
50
+ ```
51
+
52
+ This script watch for changes on any package and rebuild files to reflect on live mode. To run storybook with all components, use:
53
+
54
+ ```
55
+ pnpm storybook
56
+ ```
57
+
58
+ For web development this is sufficient. For mobile, follow additional steps on [rn-playground](./packages/rn-playground).
59
+
60
+ ## How to make local changes available for other projects?
61
+
62
+ Check [these docs](https://pnpm.io/cli/link).
63
+
64
+ ## Contributing
65
+
66
+ If you have ideas for how we could improve this readme or the project in general, [let us know](https://github.com/tecsinapse/design-system/issues)!
67
+
68
+ ## About TecSinapse
69
+
70
+ [TecSinapse](https://www.tecsinapse.com.br/) is a specialist in the automotive industry for over 15 years.
71
+ We operate with diverse integrated solutions, from client prospecting to after-sales, plus market indicators tools and process improvement for complete management.\_
@@ -0,0 +1,33 @@
1
+ 'use strict';
2
+
3
+ var clsx = require('clsx');
4
+ var React = require('react');
5
+ var utils = require('./utils.js');
6
+
7
+ const Avatar = ({ src, name, className, ...rest }) => {
8
+ const [hasError, setHasError] = React.useState(false);
9
+ React.useEffect(() => {
10
+ setHasError(false);
11
+ }, [src]);
12
+ return /* @__PURE__ */ React.createElement(
13
+ "div",
14
+ {
15
+ ...rest,
16
+ className: clsx(
17
+ "rounded-pill bg-secondary-dark w-mega h-mega flex items-center justify-center cursor-pointer",
18
+ className
19
+ )
20
+ },
21
+ src && !hasError ? /* @__PURE__ */ React.createElement(
22
+ "img",
23
+ {
24
+ src,
25
+ alt: name,
26
+ className: "rounded-pill",
27
+ onError: () => setHasError(true)
28
+ }
29
+ ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base" }, utils.getInitialsName(name))
30
+ );
31
+ };
32
+
33
+ exports.Avatar = Avatar;
@@ -0,0 +1,26 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var md = require('react-icons/md');
5
+
6
+ const BreadcrumbItem = ({
7
+ isLast,
8
+ Component,
9
+ componentProps,
10
+ title
11
+ }) => {
12
+ return /* @__PURE__ */ React.createElement(Component, { ...componentProps, key: title }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-mili items-center" }, /* @__PURE__ */ React.createElement(
13
+ "p",
14
+ {
15
+ className: isLast ? "text-secondary-medium" : "text-secondary-xdark"
16
+ },
17
+ title
18
+ ), !isLast ? /* @__PURE__ */ React.createElement(
19
+ md.MdOutlineKeyboardDoubleArrowRight,
20
+ {
21
+ className: "mt-[0.125rem] text-primary-medium"
22
+ }
23
+ ) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
24
+ };
25
+
26
+ exports.BreadcrumbItem = BreadcrumbItem;
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var Card = require('./Card.js');
5
+ var BreadcrumbItem = require('./BreadcrumbItem.js');
6
+
7
+ const Breadcrumbs = (props) => {
8
+ const { breadcrumbs, ...rest } = props;
9
+ return /* @__PURE__ */ React.createElement(Card.Card, { className: "flex gap-x-mili w-full items-center py-mili", ...rest }, breadcrumbs.map((item, index) => {
10
+ const isLast = index === breadcrumbs.length - 1;
11
+ return /* @__PURE__ */ React.createElement(
12
+ BreadcrumbItem.BreadcrumbItem,
13
+ {
14
+ key: `${item.title}-${index}`,
15
+ ...item,
16
+ isLast
17
+ }
18
+ );
19
+ }));
20
+ };
21
+
22
+ exports.Breadcrumbs = Breadcrumbs;
@@ -5,15 +5,7 @@ var cortexCore = require('@tecsinapse/cortex-core');
5
5
 
6
6
  const Card = React.forwardRef((props, ref) => {
7
7
  const { children, className, ...rest } = props;
8
- return /* @__PURE__ */ React.createElement(
9
- "div",
10
- {
11
- className: cortexCore.card({ className }),
12
- ref,
13
- ...rest
14
- },
15
- children
16
- );
8
+ return /* @__PURE__ */ React.createElement("div", { className: cortexCore.card({ className }), ref, ...rest }, children);
17
9
  });
18
10
 
19
11
  exports.Card = Card;
@@ -0,0 +1,30 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var cortexCore = require('@tecsinapse/cortex-core');
5
+
6
+ const Drawer = ({
7
+ children,
8
+ onClose,
9
+ open,
10
+ position = "right"
11
+ }) => {
12
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
13
+ "div",
14
+ {
15
+ className: cortexCore.overlay({ show: open }),
16
+ onClick: () => onClose(false)
17
+ }
18
+ ), /* @__PURE__ */ React.createElement(
19
+ "div",
20
+ {
21
+ className: cortexCore.drawer({
22
+ position,
23
+ open
24
+ })
25
+ },
26
+ children
27
+ ));
28
+ };
29
+
30
+ exports.Drawer = Drawer;
@@ -13,6 +13,8 @@ require('./Tag.js');
13
13
  require('./Toggle.js');
14
14
  require('./TextArea.js');
15
15
  require('@tecsinapse/cortex-core');
16
+ require('react-icons/md');
17
+ require('clsx');
16
18
  var ai = require('react-icons/ai');
17
19
  var io5 = require('react-icons/io5');
18
20
  var useDebouncedState = require('../hooks/useDebouncedState.js');
@@ -0,0 +1,19 @@
1
+ 'use strict';
2
+
3
+ var clsx = require('clsx');
4
+ var React = require('react');
5
+
6
+ const Skeleton = ({
7
+ className,
8
+ ...rest
9
+ }) => {
10
+ return /* @__PURE__ */ React.createElement(
11
+ "div",
12
+ {
13
+ ...rest,
14
+ className: clsx("animate-pulse bg-secondary-light", className)
15
+ }
16
+ );
17
+ };
18
+
19
+ exports.Skeleton = Skeleton;
@@ -18,6 +18,9 @@ const THeadCell = ({
18
18
  className,
19
19
  ...rest
20
20
  }) => /* @__PURE__ */ React.createElement("th", { className: cortexCore.tHeadCell({ className }), ...rest }, children);
21
+ const TRowHeader = ({
22
+ children
23
+ }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, children), /* @__PURE__ */ React.createElement("tr", { className: cortexCore.tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: cortexCore.hr() }))));
21
24
  const TCell = ({
22
25
  children,
23
26
  className,
@@ -41,7 +44,7 @@ const Hr = ({
41
44
  const Td = ({
42
45
  children,
43
46
  ...rest
44
- }) => /* @__PURE__ */ React.createElement("td", { colSpan: 99, ...rest }, children);
47
+ }) => /* @__PURE__ */ React.createElement("td", { ...rest }, children);
45
48
 
46
49
  exports.Hr = Hr;
47
50
  exports.TCell = TCell;
@@ -49,5 +52,6 @@ exports.TFoot = TFoot;
49
52
  exports.THead = THead;
50
53
  exports.THeadCell = THeadCell;
51
54
  exports.TRow = TRow;
55
+ exports.TRowHeader = TRowHeader;
52
56
  exports.Table = Table;
53
57
  exports.Td = Td;
@@ -0,0 +1,11 @@
1
+ 'use strict';
2
+
3
+ const getInitialsName = (name) => {
4
+ const nameSplit = name.split(" ");
5
+ if (nameSplit.length > 1) {
6
+ return nameSplit.slice(0, 2).map((name2) => name2[0]).join("");
7
+ }
8
+ return name[0];
9
+ };
10
+
11
+ exports.getInitialsName = getInitialsName;
package/dist/cjs/index.js CHANGED
@@ -12,6 +12,10 @@ var Tag = require('./components/Tag.js');
12
12
  var Toggle = require('./components/Toggle.js');
13
13
  var TextArea = require('./components/TextArea.js');
14
14
  var Table = require('./components/Table.js');
15
+ var Drawer = require('./components/Drawer.js');
16
+ var Breadcrumbs = require('./components/Breadcrumbs.js');
17
+ var Avatar = require('./components/Avatar.js');
18
+ var Skeleton = require('./components/Skeleton.js');
15
19
 
16
20
 
17
21
 
@@ -38,5 +42,10 @@ exports.TFoot = Table.TFoot;
38
42
  exports.THead = Table.THead;
39
43
  exports.THeadCell = Table.THeadCell;
40
44
  exports.TRow = Table.TRow;
45
+ exports.TRowHeader = Table.TRowHeader;
41
46
  exports.Table = Table.Table;
42
47
  exports.Td = Table.Td;
48
+ exports.Drawer = Drawer.Drawer;
49
+ exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
50
+ exports.Avatar = Avatar.Avatar;
51
+ exports.Skeleton = Skeleton.Skeleton;
@@ -0,0 +1,31 @@
1
+ import clsx from 'clsx';
2
+ import React from 'react';
3
+ import { getInitialsName } from './utils.js';
4
+
5
+ const Avatar = ({ src, name, className, ...rest }) => {
6
+ const [hasError, setHasError] = React.useState(false);
7
+ React.useEffect(() => {
8
+ setHasError(false);
9
+ }, [src]);
10
+ return /* @__PURE__ */ React.createElement(
11
+ "div",
12
+ {
13
+ ...rest,
14
+ className: clsx(
15
+ "rounded-pill bg-secondary-dark w-mega h-mega flex items-center justify-center cursor-pointer",
16
+ className
17
+ )
18
+ },
19
+ src && !hasError ? /* @__PURE__ */ React.createElement(
20
+ "img",
21
+ {
22
+ src,
23
+ alt: name,
24
+ className: "rounded-pill",
25
+ onError: () => setHasError(true)
26
+ }
27
+ ) : /* @__PURE__ */ React.createElement("p", { className: "font-bold text-white text-base" }, getInitialsName(name))
28
+ );
29
+ };
30
+
31
+ export { Avatar };
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import { MdOutlineKeyboardDoubleArrowRight } from 'react-icons/md';
3
+
4
+ const BreadcrumbItem = ({
5
+ isLast,
6
+ Component,
7
+ componentProps,
8
+ title
9
+ }) => {
10
+ return /* @__PURE__ */ React.createElement(Component, { ...componentProps, key: title }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-mili items-center" }, /* @__PURE__ */ React.createElement(
11
+ "p",
12
+ {
13
+ className: isLast ? "text-secondary-medium" : "text-secondary-xdark"
14
+ },
15
+ title
16
+ ), !isLast ? /* @__PURE__ */ React.createElement(
17
+ MdOutlineKeyboardDoubleArrowRight,
18
+ {
19
+ className: "mt-[0.125rem] text-primary-medium"
20
+ }
21
+ ) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
22
+ };
23
+
24
+ export { BreadcrumbItem };
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ import { Card } from './Card.js';
3
+ import { BreadcrumbItem } from './BreadcrumbItem.js';
4
+
5
+ const Breadcrumbs = (props) => {
6
+ const { breadcrumbs, ...rest } = props;
7
+ return /* @__PURE__ */ React.createElement(Card, { className: "flex gap-x-mili w-full items-center py-mili", ...rest }, breadcrumbs.map((item, index) => {
8
+ const isLast = index === breadcrumbs.length - 1;
9
+ return /* @__PURE__ */ React.createElement(
10
+ BreadcrumbItem,
11
+ {
12
+ key: `${item.title}-${index}`,
13
+ ...item,
14
+ isLast
15
+ }
16
+ );
17
+ }));
18
+ };
19
+
20
+ export { Breadcrumbs };
@@ -3,15 +3,7 @@ import { card } from '@tecsinapse/cortex-core';
3
3
 
4
4
  const Card = forwardRef((props, ref) => {
5
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
- );
6
+ return /* @__PURE__ */ React.createElement("div", { className: card({ className }), ref, ...rest }, children);
15
7
  });
16
8
 
17
9
  export { Card };
@@ -0,0 +1,28 @@
1
+ import React from 'react';
2
+ import { overlay, drawer } from '@tecsinapse/cortex-core';
3
+
4
+ const Drawer = ({
5
+ children,
6
+ onClose,
7
+ open,
8
+ position = "right"
9
+ }) => {
10
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
11
+ "div",
12
+ {
13
+ className: overlay({ show: open }),
14
+ onClick: () => onClose(false)
15
+ }
16
+ ), /* @__PURE__ */ React.createElement(
17
+ "div",
18
+ {
19
+ className: drawer({
20
+ position,
21
+ open
22
+ })
23
+ },
24
+ children
25
+ ));
26
+ };
27
+
28
+ export { Drawer };
@@ -11,6 +11,8 @@ import './Tag.js';
11
11
  import './Toggle.js';
12
12
  import './TextArea.js';
13
13
  import '@tecsinapse/cortex-core';
14
+ import 'react-icons/md';
15
+ import 'clsx';
14
16
  import { AiOutlineLoading } from 'react-icons/ai';
15
17
  import { IoSearchOutline } from 'react-icons/io5';
16
18
  import { useDebouncedState } from '../hooks/useDebouncedState.js';
@@ -0,0 +1,17 @@
1
+ import clsx from 'clsx';
2
+ import React from 'react';
3
+
4
+ const Skeleton = ({
5
+ className,
6
+ ...rest
7
+ }) => {
8
+ return /* @__PURE__ */ React.createElement(
9
+ "div",
10
+ {
11
+ ...rest,
12
+ className: clsx("animate-pulse bg-secondary-light", className)
13
+ }
14
+ );
15
+ };
16
+
17
+ export { Skeleton };
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { tHead, tRow, tHeadCell, tCell, tFoot, tRoot, hr } from '@tecsinapse/cortex-core';
2
+ import { tHead, tRow, tHeadCell, hr, tCell, tFoot, tRoot } from '@tecsinapse/cortex-core';
3
3
 
4
4
  const THead = ({
5
5
  children,
@@ -16,6 +16,9 @@ const THeadCell = ({
16
16
  className,
17
17
  ...rest
18
18
  }) => /* @__PURE__ */ React.createElement("th", { className: tHeadCell({ className }), ...rest }, children);
19
+ const TRowHeader = ({
20
+ children
21
+ }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("tr", { className: tRow() }, children), /* @__PURE__ */ React.createElement("tr", { className: tRow() }, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement("hr", { className: hr() }))));
19
22
  const TCell = ({
20
23
  children,
21
24
  className,
@@ -39,6 +42,6 @@ const Hr = ({
39
42
  const Td = ({
40
43
  children,
41
44
  ...rest
42
- }) => /* @__PURE__ */ React.createElement("td", { colSpan: 99, ...rest }, children);
45
+ }) => /* @__PURE__ */ React.createElement("td", { ...rest }, children);
43
46
 
44
- export { Hr, TCell, TFoot, THead, THeadCell, TRow, Table, Td };
47
+ export { Hr, TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td };
@@ -0,0 +1,9 @@
1
+ const getInitialsName = (name) => {
2
+ const nameSplit = name.split(" ");
3
+ if (nameSplit.length > 1) {
4
+ return nameSplit.slice(0, 2).map((name2) => name2[0]).join("");
5
+ }
6
+ return name[0];
7
+ };
8
+
9
+ export { getInitialsName };
package/dist/esm/index.js CHANGED
@@ -9,4 +9,8 @@ export { Snackbar } from './components/Snackbar.js';
9
9
  export { Tag } from './components/Tag.js';
10
10
  export { Toggle } from './components/Toggle.js';
11
11
  export { TextArea } from './components/TextArea.js';
12
- export { Hr, TCell, TFoot, THead, THeadCell, TRow, Table, Td } from './components/Table.js';
12
+ export { Hr, TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
13
+ export { Drawer } from './components/Drawer.js';
14
+ export { Breadcrumbs } from './components/Breadcrumbs.js';
15
+ export { Avatar } from './components/Avatar.js';
16
+ export { Skeleton } from './components/Skeleton.js';
@@ -0,0 +1,7 @@
1
+ import { HTMLAttributes } from 'react';
2
+ interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
3
+ src?: string;
4
+ name: string;
5
+ }
6
+ export declare const Avatar: ({ src, name, className, ...rest }: AvatarProps) => JSX.Element;
7
+ export {};
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ import { BreadcrumbType } from '../components';
3
+ interface BreadcrumbItemProps extends BreadcrumbType {
4
+ isLast: boolean;
5
+ }
6
+ export declare const BreadcrumbItem: ({ isLast, Component, componentProps, title, }: BreadcrumbItemProps) => JSX.Element;
7
+ export {};
@@ -0,0 +1,10 @@
1
+ import React, { ElementType } from 'react';
2
+ export interface BreadcrumbType {
3
+ title: string;
4
+ Component: ElementType;
5
+ componentProps?: any;
6
+ }
7
+ export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
8
+ breadcrumbs: BreadcrumbType[];
9
+ }
10
+ export declare const Breadcrumbs: (props: BreadcrumbsProps) => JSX.Element;
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { ButtonVariants } from '@tecsinapse/cortex-core';
3
3
  interface ButtonProps {
4
4
  variants?: ButtonVariants;
5
- children?: JSX.Element;
5
+ children?: React.ReactNode;
6
6
  }
7
7
  export declare const Button: React.ForwardRefExoticComponent<ButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className"> & React.RefAttributes<HTMLButtonElement>>;
8
8
  export {};
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  interface CardProps {
3
- children: JSX.Element;
3
+ children?: React.ReactNode;
4
4
  }
5
5
  export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps & React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
6
6
  export {};
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ interface DrawerProps {
3
+ open: boolean;
4
+ onClose: (open: boolean) => void;
5
+ position?: 'left' | 'right';
6
+ children?: React.ReactNode;
7
+ }
8
+ export declare const Drawer: ({ children, onClose, open, position, }: DrawerProps) => JSX.Element;
9
+ export {};
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const Skeleton: ({ className, ...rest }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
@@ -5,6 +5,7 @@ interface TableCommon {
5
5
  export declare const THead: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;
6
6
  export declare const TRow: ({ children, className, ...rest }: TableCommon & React.HTMLAttributes<HTMLTableRowElement>) => JSX.Element;
7
7
  export declare const THeadCell: ({ children, className, ...rest }: TableCommon & ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
8
+ export declare const TRowHeader: ({ children, }: TableCommon & ThHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
8
9
  export declare const TCell: ({ children, className, ...rest }: TableCommon & TdHTMLAttributes<HTMLTableCellElement>) => JSX.Element;
9
10
  export declare const TFoot: ({ children, className, ...rest }: TableCommon & HTMLAttributes<HTMLTableSectionElement>) => JSX.Element;
10
11
  export declare const Table: ({ children, className, ...rest }: TableCommon & TableHTMLAttributes<HTMLTableElement>) => JSX.Element;
@@ -10,3 +10,7 @@ export * from './Tag';
10
10
  export * from './Toggle';
11
11
  export * from './TextArea';
12
12
  export * from './Table';
13
+ export * from './Drawer';
14
+ export * from './Breadcrumbs';
15
+ export * from './Avatar';
16
+ export * from './Skeleton';
@@ -0,0 +1 @@
1
+ export declare const getInitialsName: (name: string) => string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tecsinapse/cortex-react",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "description": "React components based in @tecsinapse/cortex-core",
5
5
  "license": "MIT",
6
6
  "main": "dist/esm/index.js",
@@ -16,7 +16,7 @@
16
16
  "build:dts": "tsc --project tsconfig.build.json"
17
17
  },
18
18
  "dependencies": {
19
- "@tecsinapse/cortex-core": "0.2.0",
19
+ "@tecsinapse/cortex-core": "0.2.1",
20
20
  "clsx": "*",
21
21
  "react-icons": "^5.2.1"
22
22
  },
@@ -34,5 +34,5 @@
34
34
  "react-dom": ">=18.0.0",
35
35
  "tailwind": ">=3.3.0"
36
36
  },
37
- "gitHead": "5fdf13313937b667682216c4f86b6b84fa4612a4"
37
+ "gitHead": "6d7f265c8000b3a2a970efb0116483e5af4828b0"
38
38
  }
@@ -1,29 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- args: {
6
- value: number;
7
- intent: string;
8
- };
9
- argTypes: {
10
- intent: {
11
- options: string[];
12
- control: {
13
- type: string;
14
- };
15
- };
16
- value: {
17
- control: {
18
- type: string;
19
- };
20
- min: number;
21
- max: number;
22
- };
23
- };
24
- };
25
- export default _default;
26
- export declare const Base: {
27
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
28
- args: {};
29
- };
@@ -1,27 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- args: {
6
- value: string;
7
- intent: string;
8
- };
9
- argTypes: {
10
- intent: {
11
- options: string[];
12
- control: {
13
- type: string;
14
- };
15
- };
16
- value: {
17
- control: {
18
- type: string;
19
- };
20
- };
21
- };
22
- };
23
- export default _default;
24
- export declare const Base: {
25
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
26
- args: {};
27
- };
@@ -1,30 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- argTypes: {
6
- intent: {
7
- options: string[];
8
- control: {
9
- type: string;
10
- };
11
- };
12
- variant: {
13
- options: string[];
14
- control: {
15
- type: string;
16
- };
17
- };
18
- size: {
19
- options: string[];
20
- control: {
21
- type: string;
22
- };
23
- };
24
- };
25
- };
26
- export default _default;
27
- export declare const Base: {
28
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
29
- args: {};
30
- };
@@ -1,10 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- };
6
- export default _default;
7
- export declare const Base: {
8
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
9
- args: {};
10
- };
@@ -1,27 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- args: {
6
- intent: string;
7
- description: string;
8
- };
9
- argTypes: {
10
- intent: {
11
- options: string[];
12
- control: {
13
- type: string;
14
- };
15
- };
16
- description: {
17
- control: {
18
- type: string;
19
- };
20
- };
21
- };
22
- };
23
- export default _default;
24
- export declare const Base: {
25
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
26
- args: {};
27
- };
@@ -1,33 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- args: {
6
- label: string;
7
- placeholder: string;
8
- intent: string;
9
- };
10
- argTypes: {
11
- intent: {
12
- options: string[];
13
- control: {
14
- type: string;
15
- };
16
- };
17
- label: {
18
- control: {
19
- type: string;
20
- };
21
- };
22
- placeholder: {
23
- control: {
24
- type: string;
25
- };
26
- };
27
- };
28
- };
29
- export default _default;
30
- export declare const Base: {
31
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
32
- args: {};
33
- };
@@ -1,33 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- args: {
6
- label: string;
7
- placeholder: string;
8
- intent: string;
9
- };
10
- argTypes: {
11
- intent: {
12
- options: string[];
13
- control: {
14
- type: string;
15
- };
16
- };
17
- label: {
18
- control: {
19
- type: string;
20
- };
21
- };
22
- placeholder: {
23
- control: {
24
- type: string;
25
- };
26
- };
27
- };
28
- };
29
- export default _default;
30
- export declare const Base: {
31
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
32
- args: {};
33
- };
@@ -1,10 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- };
6
- export default _default;
7
- export declare const Base: {
8
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
9
- args: {};
10
- };
@@ -1,32 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- argTypes: {
6
- variant: {
7
- options: string[];
8
- control: {
9
- type: string;
10
- };
11
- };
12
- label: {
13
- control: {
14
- type: string;
15
- };
16
- };
17
- placeholderSearchInput: {
18
- control: {
19
- type: string;
20
- };
21
- };
22
- };
23
- };
24
- export default _default;
25
- export declare const Base: {
26
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
27
- args: {
28
- variant: string;
29
- label: string;
30
- placeholderSearchInput: string;
31
- };
32
- };
@@ -1,32 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- argTypes: {
6
- variant: {
7
- options: string[];
8
- control: {
9
- type: string;
10
- };
11
- };
12
- label: {
13
- control: {
14
- type: string;
15
- };
16
- };
17
- placeholderSearchInput: {
18
- control: {
19
- type: string;
20
- };
21
- };
22
- };
23
- };
24
- export default _default;
25
- export declare const Base: {
26
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
27
- args: {
28
- variant: string;
29
- label: string;
30
- placeholderSearchInput: string;
31
- };
32
- };
@@ -1,21 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- args: {
6
- intent: string;
7
- };
8
- argTypes: {
9
- intent: {
10
- options: string[];
11
- control: {
12
- type: string;
13
- };
14
- };
15
- };
16
- };
17
- export default _default;
18
- export declare const Base: {
19
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
20
- args: {};
21
- };
@@ -1,10 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- };
6
- export default _default;
7
- export declare const Base: {
8
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
9
- args: {};
10
- };
@@ -1,21 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- args: {
6
- intent: string;
7
- };
8
- argTypes: {
9
- intent: {
10
- options: string[];
11
- control: {
12
- type: string;
13
- };
14
- };
15
- };
16
- };
17
- export default _default;
18
- export declare const Base: {
19
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
20
- args: {};
21
- };
@@ -1,39 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- args: {
6
- rows: number;
7
- intent: string;
8
- label: string;
9
- placeholder: string;
10
- };
11
- argTypes: {
12
- intent: {
13
- options: string[];
14
- control: {
15
- type: string;
16
- };
17
- };
18
- rows: {
19
- control: {
20
- type: string;
21
- };
22
- };
23
- label: {
24
- control: {
25
- type: string;
26
- };
27
- };
28
- placeholder: {
29
- control: {
30
- type: string;
31
- };
32
- };
33
- };
34
- };
35
- export default _default;
36
- export declare const Base: {
37
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
38
- args: {};
39
- };
@@ -1,10 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: {
3
- title: string;
4
- component: JSX.Element;
5
- };
6
- export default _default;
7
- export declare const Base: {
8
- render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
9
- args: {};
10
- };
@@ -1 +0,0 @@
1
- export declare const defaultIntents: string[];