@tecsinapse/cortex-react 1.4.2 → 1.5.0-beta.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.
- package/dist/cjs/components/Accordion.js +18 -4
- package/dist/cjs/components/Carousel/Carousel.js +43 -0
- package/dist/cjs/components/Carousel/CarouselItem.js +50 -0
- package/dist/cjs/components/Input/Box.js +1 -2
- package/dist/cjs/components/Menubar/MostUsedList.js +1 -0
- package/dist/cjs/components/Tag.js +2 -2
- package/dist/cjs/index.js +3 -0
- package/dist/cjs/service/SnackbarSonner.js +2 -0
- package/dist/esm/components/Accordion.js +19 -6
- package/dist/esm/components/Carousel/Carousel.js +41 -0
- package/dist/esm/components/Carousel/CarouselItem.js +48 -0
- package/dist/esm/components/Input/Box.js +1 -2
- package/dist/esm/components/Menubar/MostUsedList.js +1 -0
- package/dist/esm/components/Tag.js +2 -2
- package/dist/esm/index.js +2 -1
- package/dist/esm/service/SnackbarSonner.js +2 -0
- package/dist/types/components/Accordion.d.ts +7 -2
- package/dist/types/components/Calendar/Calendar.d.ts +1 -0
- package/dist/types/components/Calendar/CalendarCell.d.ts +1 -0
- package/dist/types/components/Calendar/CalendarGrid.d.ts +1 -0
- package/dist/types/components/Calendar/CalendarGridBodyRows.d.ts +1 -0
- package/dist/types/components/Calendar/CalendarGridHeaderRow.d.ts +1 -0
- package/dist/types/components/Calendar/CalendarHeader.d.ts +1 -0
- package/dist/types/components/Calendar/RangeCalendar.d.ts +1 -0
- package/dist/types/components/Carousel/Carousel.d.ts +23 -0
- package/dist/types/components/Carousel/CarouselItem.d.ts +6 -0
- package/dist/types/components/Carousel/index.d.ts +1 -0
- package/dist/types/components/DatePicker/DateField.d.ts +1 -0
- package/dist/types/components/DatePicker/DatePickerInput.d.ts +1 -0
- package/dist/types/components/DatePicker/DateRangePickerInput.d.ts +1 -0
- package/dist/types/components/DatePicker/DateSegment.d.ts +1 -0
- package/dist/types/components/Input/index.d.ts +1 -0
- package/dist/types/components/Input/types.d.ts +1 -0
- package/dist/types/components/Loading.d.ts +1 -0
- package/dist/types/components/Menubar/Categories.d.ts +1 -0
- package/dist/types/components/Menubar/Dropdown.d.ts +1 -0
- package/dist/types/components/Menubar/DropdownRoot.d.ts +1 -0
- package/dist/types/components/Menubar/Left.d.ts +1 -0
- package/dist/types/components/Menubar/MostUsedItem.d.ts +1 -0
- package/dist/types/components/Menubar/MostUsedList.d.ts +1 -0
- package/dist/types/components/Menubar/Right.d.ts +1 -0
- package/dist/types/components/Menubar/Search.d.ts +1 -0
- package/dist/types/components/Menubar/SubItem.d.ts +1 -0
- package/dist/types/components/Menubar/index.d.ts +1 -0
- package/dist/types/components/Popover/index.d.ts +1 -0
- package/dist/types/components/ProgressBar.d.ts +1 -0
- package/dist/types/components/Select/Content.d.ts +1 -0
- package/dist/types/components/Select/GroupedOptions.d.ts +1 -0
- package/dist/types/components/Select/MultiCheckAllOptions.d.ts +1 -0
- package/dist/types/components/Select/MultiGroupedOptions.d.ts +1 -0
- package/dist/types/components/Select/MultiOption.d.ts +1 -0
- package/dist/types/components/Select/MultiOptions.d.ts +1 -0
- package/dist/types/components/Select/Option.d.ts +1 -0
- package/dist/types/components/Select/Options.d.ts +1 -0
- package/dist/types/components/Select/Popover.d.ts +1 -0
- package/dist/types/components/Select/Root.d.ts +1 -0
- package/dist/types/components/Select/SkeletonOptions.d.ts +1 -0
- package/dist/types/components/Select/Trigger.d.ts +1 -0
- package/dist/types/components/Select/context.d.ts +1 -0
- package/dist/types/components/Select/index.d.ts +1 -0
- package/dist/types/components/Snackbar/DefaultSnack.d.ts +1 -0
- package/dist/types/components/Tag.d.ts +2 -1
- package/dist/types/components/TextArea/index.d.ts +1 -0
- package/dist/types/components/TextArea/types.d.ts +1 -0
- package/dist/types/components/TimeField/TimeField.d.ts +1 -0
- package/dist/types/components/TimeField/TimeFieldInput.d.ts +1 -0
- package/dist/types/components/index.d.ts +1 -0
- package/dist/types/hooks/useCalendarCell.d.ts +1 -0
- package/dist/types/hooks/useDatePickerInput.d.ts +1 -0
- package/dist/types/hooks/useDateRangePickerInput.d.ts +1 -0
- package/dist/types/hooks/useRangeCalendar.d.ts +1 -0
- package/package.json +6 -4
|
@@ -18,7 +18,8 @@ const Trigger = ({
|
|
|
18
18
|
/**
|
|
19
19
|
* Only applied to trigger arrow
|
|
20
20
|
*/
|
|
21
|
-
className
|
|
21
|
+
className,
|
|
22
|
+
onOpen
|
|
22
23
|
}) => {
|
|
23
24
|
const { open, toggle } = useAccordionContext();
|
|
24
25
|
if (!floating && !label) {
|
|
@@ -26,6 +27,12 @@ const Trigger = ({
|
|
|
26
27
|
"A label must be specified if the trigger is not floating variant"
|
|
27
28
|
);
|
|
28
29
|
}
|
|
30
|
+
const action = () => {
|
|
31
|
+
if (!open) {
|
|
32
|
+
onOpen?.();
|
|
33
|
+
}
|
|
34
|
+
toggle?.();
|
|
35
|
+
};
|
|
29
36
|
return /* @__PURE__ */ React.createElement(
|
|
30
37
|
"div",
|
|
31
38
|
{
|
|
@@ -33,7 +40,7 @@ const Trigger = ({
|
|
|
33
40
|
"flex flex-col justify-between align-center px-mili border-r border-secondary-light cursor-pointer",
|
|
34
41
|
{ "mr-deca": floating }
|
|
35
42
|
),
|
|
36
|
-
onClick:
|
|
43
|
+
onClick: action
|
|
37
44
|
},
|
|
38
45
|
/* @__PURE__ */ React.createElement(
|
|
39
46
|
"div",
|
|
@@ -93,8 +100,14 @@ const Face = ({
|
|
|
93
100
|
const toggle = React.useCallback(() => setOpen((prev) => !prev), []);
|
|
94
101
|
return /* @__PURE__ */ React.createElement(Context.Provider, { value: { open, toggle } }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-row" }, children));
|
|
95
102
|
};
|
|
96
|
-
const Root = ({
|
|
97
|
-
|
|
103
|
+
const Root = ({
|
|
104
|
+
children,
|
|
105
|
+
defaultOpen,
|
|
106
|
+
label,
|
|
107
|
+
floating,
|
|
108
|
+
onOpen
|
|
109
|
+
}) => {
|
|
110
|
+
return /* @__PURE__ */ React.createElement(Face, { defaultOpen }, /* @__PURE__ */ React.createElement(Trigger, { label, floating, onOpen }), /* @__PURE__ */ React.createElement(Content, null, children));
|
|
98
111
|
};
|
|
99
112
|
const Accordion = {
|
|
100
113
|
Face,
|
|
@@ -104,3 +117,4 @@ const Accordion = {
|
|
|
104
117
|
};
|
|
105
118
|
|
|
106
119
|
exports.Accordion = Accordion;
|
|
120
|
+
exports.useAccordionContext = useAccordionContext;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var Button = require('../Button.js');
|
|
5
|
+
var reactSpringCarousel = require('react-spring-carousel');
|
|
6
|
+
var io = require('react-icons/io');
|
|
7
|
+
var CarouselItem = require('./CarouselItem.js');
|
|
8
|
+
|
|
9
|
+
const Carousel = ({ images }) => {
|
|
10
|
+
const itemsCarousel = images.map((imageProp, i) => ({
|
|
11
|
+
id: `${imageProp.alt}-${i}`,
|
|
12
|
+
renderItem: /* @__PURE__ */ React.createElement(CarouselItem.CarouselItem, { item: imageProp })
|
|
13
|
+
}));
|
|
14
|
+
const { carouselFragment, slideToNextItem, slideToPrevItem } = reactSpringCarousel.useSpringCarousel({
|
|
15
|
+
withLoop: true,
|
|
16
|
+
items: itemsCarousel
|
|
17
|
+
});
|
|
18
|
+
return /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden w-fit relative" }, itemsCarousel.length > 1 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
19
|
+
Button.Button,
|
|
20
|
+
{
|
|
21
|
+
"data-testid": "button-carousel-prev",
|
|
22
|
+
variants: {
|
|
23
|
+
size: "square",
|
|
24
|
+
className: "z-absolute absolute left-deca top-[50%] transform -translate-y-[50%] p-centi"
|
|
25
|
+
},
|
|
26
|
+
onClick: slideToPrevItem
|
|
27
|
+
},
|
|
28
|
+
/* @__PURE__ */ React.createElement(io.IoIosArrowBack, null)
|
|
29
|
+
), /* @__PURE__ */ React.createElement(
|
|
30
|
+
Button.Button,
|
|
31
|
+
{
|
|
32
|
+
"data-testid": "button-carousel-next",
|
|
33
|
+
variants: {
|
|
34
|
+
size: "square",
|
|
35
|
+
className: "z-absolute absolute right-deca top-[50%] transform -translate-y-[50%] p-centi"
|
|
36
|
+
},
|
|
37
|
+
onClick: slideToNextItem
|
|
38
|
+
},
|
|
39
|
+
/* @__PURE__ */ React.createElement(io.IoIosArrowForward, null)
|
|
40
|
+
)) : /* @__PURE__ */ React.createElement(React.Fragment, null), carouselFragment);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
exports.Carousel = Carousel;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var Button = require('../Button.js');
|
|
6
|
+
|
|
7
|
+
const CarouselItem = ({ item }) => {
|
|
8
|
+
const stylesTitle = {
|
|
9
|
+
color: item.title.color ?? "black",
|
|
10
|
+
fontSize: item.title?.size ?? "1rem"
|
|
11
|
+
};
|
|
12
|
+
const stylesSubTitle = {
|
|
13
|
+
color: item.subtitle.color ?? "white",
|
|
14
|
+
fontSize: item.subtitle?.size ?? "1rem"
|
|
15
|
+
};
|
|
16
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
17
|
+
"img",
|
|
18
|
+
{
|
|
19
|
+
className: "w-full h-[360px] object-fill rounded-mili",
|
|
20
|
+
src: item.src,
|
|
21
|
+
alt: item.alt
|
|
22
|
+
}
|
|
23
|
+
), /* @__PURE__ */ React.createElement(
|
|
24
|
+
"div",
|
|
25
|
+
{
|
|
26
|
+
className: "z-absolute absolute top-[50%] transform -translate-y-[50%] left-[10%] max-w-[60%]"
|
|
27
|
+
},
|
|
28
|
+
/* @__PURE__ */ React.createElement("p", { className: clsx("text-h2 font-bold"), style: stylesTitle }, item.title.text),
|
|
29
|
+
/* @__PURE__ */ React.createElement("p", { className: "text-white text-h2 font-bold", style: stylesSubTitle }, item.subtitle.text)
|
|
30
|
+
), item.button ? /* @__PURE__ */ React.createElement(
|
|
31
|
+
"a",
|
|
32
|
+
{
|
|
33
|
+
href: item.button.link,
|
|
34
|
+
target: item.button.target ?? "_self",
|
|
35
|
+
rel: "noopener noreferrer"
|
|
36
|
+
},
|
|
37
|
+
/* @__PURE__ */ React.createElement(
|
|
38
|
+
Button.Button,
|
|
39
|
+
{
|
|
40
|
+
"data-testid": "button-link-carousel",
|
|
41
|
+
variants: {
|
|
42
|
+
className: "z-absolute absolute bottom-deca left-[10%]"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
item.button.title
|
|
46
|
+
)
|
|
47
|
+
) : /* @__PURE__ */ React.createElement(React.Fragment, null));
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
exports.CarouselItem = CarouselItem;
|
|
@@ -14,8 +14,7 @@ const InputBox = React.forwardRef(
|
|
|
14
14
|
placeholder: placeholder ?? " ",
|
|
15
15
|
className: clsx(cortexCore.inputBox(placeholder, label, className)),
|
|
16
16
|
...rest,
|
|
17
|
-
ref
|
|
18
|
-
"data-testid": "input-box"
|
|
17
|
+
ref
|
|
19
18
|
}
|
|
20
19
|
), /* @__PURE__ */ React.createElement(
|
|
21
20
|
"label",
|
|
@@ -48,6 +48,7 @@ require('../TextArea/Right.js');
|
|
|
48
48
|
require('../TextArea/Root.js');
|
|
49
49
|
require('../Toggle.js');
|
|
50
50
|
require('../Tooltip.js');
|
|
51
|
+
require('react-spring-carousel');
|
|
51
52
|
|
|
52
53
|
const MostUsedList = ({ mostUsed }) => {
|
|
53
54
|
return /* @__PURE__ */ React.createElement(React.Fragment, null, (mostUsed ?? []).map((item, index$1) => {
|
|
@@ -4,8 +4,8 @@ var cortexCore = require('@tecsinapse/cortex-core');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
|
|
6
6
|
const Tag = React.forwardRef((props, ref) => {
|
|
7
|
-
const { label, variants } = props;
|
|
8
|
-
return /* @__PURE__ */ React.createElement("div", { className: cortexCore.tag(variants), ref }, /* @__PURE__ */ React.createElement("p", null, label));
|
|
7
|
+
const { label, variants, children } = props;
|
|
8
|
+
return /* @__PURE__ */ React.createElement("div", { className: cortexCore.tag(variants), ref }, label ? /* @__PURE__ */ React.createElement("p", null, label) : /* @__PURE__ */ React.createElement(React.Fragment, null), children);
|
|
9
9
|
});
|
|
10
10
|
|
|
11
11
|
exports.Tag = Tag;
|
package/dist/cjs/index.js
CHANGED
|
@@ -37,6 +37,7 @@ var Toggle = require('./components/Toggle.js');
|
|
|
37
37
|
var Tooltip = require('./components/Tooltip.js');
|
|
38
38
|
var Kanban = require('./components/Kanban.js');
|
|
39
39
|
var Loading = require('./components/Loading.js');
|
|
40
|
+
var Carousel = require('./components/Carousel/Carousel.js');
|
|
40
41
|
var useCalendar = require('./hooks/useCalendar.js');
|
|
41
42
|
var useCalendarCell = require('./hooks/useCalendarCell.js');
|
|
42
43
|
var useCalendarGrid = require('./hooks/useCalendarGrid.js');
|
|
@@ -58,6 +59,7 @@ var masks = require('./components/Input/masks.js');
|
|
|
58
59
|
|
|
59
60
|
|
|
60
61
|
exports.Accordion = Accordion.Accordion;
|
|
62
|
+
exports.useAccordionContext = Accordion.useAccordionContext;
|
|
61
63
|
exports.Avatar = Avatar.Avatar;
|
|
62
64
|
exports.Badge = Badge.Badge;
|
|
63
65
|
exports.BadgeAnchor = Badge.BadgeAnchor;
|
|
@@ -102,6 +104,7 @@ exports.Toggle = Toggle.Toggle;
|
|
|
102
104
|
exports.Tooltip = Tooltip.Tooltip;
|
|
103
105
|
exports.Kanban = Kanban.Kanban;
|
|
104
106
|
exports.Loading = Loading.Loading;
|
|
107
|
+
exports.Carousel = Carousel.Carousel;
|
|
105
108
|
exports.useCalendar = useCalendar.useCalendar;
|
|
106
109
|
exports.useCalendarCell = useCalendarCell.useCalendarCell;
|
|
107
110
|
exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;
|
|
@@ -59,6 +59,8 @@ require('../components/TextArea/Right.js');
|
|
|
59
59
|
require('../components/TextArea/Root.js');
|
|
60
60
|
require('../components/Toggle.js');
|
|
61
61
|
require('../components/Tooltip.js');
|
|
62
|
+
require('react-spring-carousel');
|
|
63
|
+
require('react-icons/io');
|
|
62
64
|
|
|
63
65
|
class SnackbarSonner {
|
|
64
66
|
custom(Component, options) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
|
-
import React__default, { createContext, useRef, useState, useLayoutEffect, useCallback
|
|
2
|
+
import React__default, { createContext, useContext, useRef, useState, useLayoutEffect, useCallback } from 'react';
|
|
3
3
|
import { LiaAngleRightSolid } from 'react-icons/lia';
|
|
4
4
|
|
|
5
5
|
const Context = createContext({ open: false });
|
|
@@ -16,7 +16,8 @@ const Trigger = ({
|
|
|
16
16
|
/**
|
|
17
17
|
* Only applied to trigger arrow
|
|
18
18
|
*/
|
|
19
|
-
className
|
|
19
|
+
className,
|
|
20
|
+
onOpen
|
|
20
21
|
}) => {
|
|
21
22
|
const { open, toggle } = useAccordionContext();
|
|
22
23
|
if (!floating && !label) {
|
|
@@ -24,6 +25,12 @@ const Trigger = ({
|
|
|
24
25
|
"A label must be specified if the trigger is not floating variant"
|
|
25
26
|
);
|
|
26
27
|
}
|
|
28
|
+
const action = () => {
|
|
29
|
+
if (!open) {
|
|
30
|
+
onOpen?.();
|
|
31
|
+
}
|
|
32
|
+
toggle?.();
|
|
33
|
+
};
|
|
27
34
|
return /* @__PURE__ */ React__default.createElement(
|
|
28
35
|
"div",
|
|
29
36
|
{
|
|
@@ -31,7 +38,7 @@ const Trigger = ({
|
|
|
31
38
|
"flex flex-col justify-between align-center px-mili border-r border-secondary-light cursor-pointer",
|
|
32
39
|
{ "mr-deca": floating }
|
|
33
40
|
),
|
|
34
|
-
onClick:
|
|
41
|
+
onClick: action
|
|
35
42
|
},
|
|
36
43
|
/* @__PURE__ */ React__default.createElement(
|
|
37
44
|
"div",
|
|
@@ -91,8 +98,14 @@ const Face = ({
|
|
|
91
98
|
const toggle = useCallback(() => setOpen((prev) => !prev), []);
|
|
92
99
|
return /* @__PURE__ */ React__default.createElement(Context.Provider, { value: { open, toggle } }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-row" }, children));
|
|
93
100
|
};
|
|
94
|
-
const Root = ({
|
|
95
|
-
|
|
101
|
+
const Root = ({
|
|
102
|
+
children,
|
|
103
|
+
defaultOpen,
|
|
104
|
+
label,
|
|
105
|
+
floating,
|
|
106
|
+
onOpen
|
|
107
|
+
}) => {
|
|
108
|
+
return /* @__PURE__ */ React__default.createElement(Face, { defaultOpen }, /* @__PURE__ */ React__default.createElement(Trigger, { label, floating, onOpen }), /* @__PURE__ */ React__default.createElement(Content, null, children));
|
|
96
109
|
};
|
|
97
110
|
const Accordion = {
|
|
98
111
|
Face,
|
|
@@ -101,4 +114,4 @@ const Accordion = {
|
|
|
101
114
|
Content
|
|
102
115
|
};
|
|
103
116
|
|
|
104
|
-
export { Accordion };
|
|
117
|
+
export { Accordion, useAccordionContext };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { Button } from '../Button.js';
|
|
3
|
+
import { useSpringCarousel } from 'react-spring-carousel';
|
|
4
|
+
import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
|
|
5
|
+
import { CarouselItem } from './CarouselItem.js';
|
|
6
|
+
|
|
7
|
+
const Carousel = ({ images }) => {
|
|
8
|
+
const itemsCarousel = images.map((imageProp, i) => ({
|
|
9
|
+
id: `${imageProp.alt}-${i}`,
|
|
10
|
+
renderItem: /* @__PURE__ */ React__default.createElement(CarouselItem, { item: imageProp })
|
|
11
|
+
}));
|
|
12
|
+
const { carouselFragment, slideToNextItem, slideToPrevItem } = useSpringCarousel({
|
|
13
|
+
withLoop: true,
|
|
14
|
+
items: itemsCarousel
|
|
15
|
+
});
|
|
16
|
+
return /* @__PURE__ */ React__default.createElement("div", { className: "overflow-hidden w-fit relative" }, itemsCarousel.length > 1 ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
|
|
17
|
+
Button,
|
|
18
|
+
{
|
|
19
|
+
"data-testid": "button-carousel-prev",
|
|
20
|
+
variants: {
|
|
21
|
+
size: "square",
|
|
22
|
+
className: "z-absolute absolute left-deca top-[50%] transform -translate-y-[50%] p-centi"
|
|
23
|
+
},
|
|
24
|
+
onClick: slideToPrevItem
|
|
25
|
+
},
|
|
26
|
+
/* @__PURE__ */ React__default.createElement(IoIosArrowBack, null)
|
|
27
|
+
), /* @__PURE__ */ React__default.createElement(
|
|
28
|
+
Button,
|
|
29
|
+
{
|
|
30
|
+
"data-testid": "button-carousel-next",
|
|
31
|
+
variants: {
|
|
32
|
+
size: "square",
|
|
33
|
+
className: "z-absolute absolute right-deca top-[50%] transform -translate-y-[50%] p-centi"
|
|
34
|
+
},
|
|
35
|
+
onClick: slideToNextItem
|
|
36
|
+
},
|
|
37
|
+
/* @__PURE__ */ React__default.createElement(IoIosArrowForward, null)
|
|
38
|
+
)) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), carouselFragment);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export { Carousel };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { Button } from '../Button.js';
|
|
4
|
+
|
|
5
|
+
const CarouselItem = ({ item }) => {
|
|
6
|
+
const stylesTitle = {
|
|
7
|
+
color: item.title.color ?? "black",
|
|
8
|
+
fontSize: item.title?.size ?? "1rem"
|
|
9
|
+
};
|
|
10
|
+
const stylesSubTitle = {
|
|
11
|
+
color: item.subtitle.color ?? "white",
|
|
12
|
+
fontSize: item.subtitle?.size ?? "1rem"
|
|
13
|
+
};
|
|
14
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
|
|
15
|
+
"img",
|
|
16
|
+
{
|
|
17
|
+
className: "w-full h-[360px] object-fill rounded-mili",
|
|
18
|
+
src: item.src,
|
|
19
|
+
alt: item.alt
|
|
20
|
+
}
|
|
21
|
+
), /* @__PURE__ */ React__default.createElement(
|
|
22
|
+
"div",
|
|
23
|
+
{
|
|
24
|
+
className: "z-absolute absolute top-[50%] transform -translate-y-[50%] left-[10%] max-w-[60%]"
|
|
25
|
+
},
|
|
26
|
+
/* @__PURE__ */ React__default.createElement("p", { className: clsx("text-h2 font-bold"), style: stylesTitle }, item.title.text),
|
|
27
|
+
/* @__PURE__ */ React__default.createElement("p", { className: "text-white text-h2 font-bold", style: stylesSubTitle }, item.subtitle.text)
|
|
28
|
+
), item.button ? /* @__PURE__ */ React__default.createElement(
|
|
29
|
+
"a",
|
|
30
|
+
{
|
|
31
|
+
href: item.button.link,
|
|
32
|
+
target: item.button.target ?? "_self",
|
|
33
|
+
rel: "noopener noreferrer"
|
|
34
|
+
},
|
|
35
|
+
/* @__PURE__ */ React__default.createElement(
|
|
36
|
+
Button,
|
|
37
|
+
{
|
|
38
|
+
"data-testid": "button-link-carousel",
|
|
39
|
+
variants: {
|
|
40
|
+
className: "z-absolute absolute bottom-deca left-[10%]"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
item.button.title
|
|
44
|
+
)
|
|
45
|
+
) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export { CarouselItem };
|
|
@@ -12,8 +12,7 @@ const InputBox = React__default.forwardRef(
|
|
|
12
12
|
placeholder: placeholder ?? " ",
|
|
13
13
|
className: clsx(inputBox(placeholder, label, className)),
|
|
14
14
|
...rest,
|
|
15
|
-
ref
|
|
16
|
-
"data-testid": "input-box"
|
|
15
|
+
ref
|
|
17
16
|
}
|
|
18
17
|
), /* @__PURE__ */ React__default.createElement(
|
|
19
18
|
"label",
|
|
@@ -46,6 +46,7 @@ import '../TextArea/Right.js';
|
|
|
46
46
|
import '../TextArea/Root.js';
|
|
47
47
|
import '../Toggle.js';
|
|
48
48
|
import '../Tooltip.js';
|
|
49
|
+
import 'react-spring-carousel';
|
|
49
50
|
|
|
50
51
|
const MostUsedList = ({ mostUsed }) => {
|
|
51
52
|
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (mostUsed ?? []).map((item, index) => {
|
|
@@ -2,8 +2,8 @@ import { tag } from '@tecsinapse/cortex-core';
|
|
|
2
2
|
import React__default, { forwardRef } from 'react';
|
|
3
3
|
|
|
4
4
|
const Tag = forwardRef((props, ref) => {
|
|
5
|
-
const { label, variants } = props;
|
|
6
|
-
return /* @__PURE__ */ React__default.createElement("div", { className: tag(variants), ref }, /* @__PURE__ */ React__default.createElement("p", null, label));
|
|
5
|
+
const { label, variants, children } = props;
|
|
6
|
+
return /* @__PURE__ */ React__default.createElement("div", { className: tag(variants), ref }, label ? /* @__PURE__ */ React__default.createElement("p", null, label) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), children);
|
|
7
7
|
});
|
|
8
8
|
|
|
9
9
|
export { Tag };
|
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Accordion } from './components/Accordion.js';
|
|
1
|
+
export { Accordion, useAccordionContext } from './components/Accordion.js';
|
|
2
2
|
export { Avatar } from './components/Avatar.js';
|
|
3
3
|
export { Badge, BadgeAnchor } from './components/Badge.js';
|
|
4
4
|
export { BreadcrumbItem } from './components/Breadcrumbs/BreadcrumbItem.js';
|
|
@@ -35,6 +35,7 @@ export { Toggle } from './components/Toggle.js';
|
|
|
35
35
|
export { Tooltip } from './components/Tooltip.js';
|
|
36
36
|
export { Kanban } from './components/Kanban.js';
|
|
37
37
|
export { Loading } from './components/Loading.js';
|
|
38
|
+
export { Carousel } from './components/Carousel/Carousel.js';
|
|
38
39
|
export { useCalendar } from './hooks/useCalendar.js';
|
|
39
40
|
export { useCalendarCell } from './hooks/useCalendarCell.js';
|
|
40
41
|
export { useCalendarGrid } from './hooks/useCalendarGrid.js';
|
|
@@ -57,6 +57,8 @@ import '../components/TextArea/Right.js';
|
|
|
57
57
|
import '../components/TextArea/Root.js';
|
|
58
58
|
import '../components/Toggle.js';
|
|
59
59
|
import '../components/Tooltip.js';
|
|
60
|
+
import 'react-spring-carousel';
|
|
61
|
+
import 'react-icons/io';
|
|
60
62
|
|
|
61
63
|
class SnackbarSonner {
|
|
62
64
|
custom(Component, options) {
|
|
@@ -4,11 +4,16 @@ interface AccordionProps {
|
|
|
4
4
|
defaultOpen?: boolean;
|
|
5
5
|
label?: string;
|
|
6
6
|
floating?: boolean;
|
|
7
|
+
onOpen?: () => void;
|
|
7
8
|
}
|
|
9
|
+
export declare const useAccordionContext: () => {
|
|
10
|
+
open: boolean;
|
|
11
|
+
toggle?: (() => void) | undefined;
|
|
12
|
+
};
|
|
8
13
|
export declare const Accordion: {
|
|
9
14
|
Face: ({ children, defaultOpen, }: Pick<AccordionProps, 'children' | 'defaultOpen'>) => JSX.Element;
|
|
10
|
-
Root: ({ children, defaultOpen, label, floating }: AccordionProps) => JSX.Element;
|
|
11
|
-
Trigger: ({ label, floating, className, }: Pick<AccordionProps, 'floating' | 'label'> & {
|
|
15
|
+
Root: ({ children, defaultOpen, label, floating, onOpen, }: AccordionProps) => JSX.Element;
|
|
16
|
+
Trigger: ({ label, floating, className, onOpen, }: Pick<AccordionProps, 'floating' | 'label' | 'onOpen'> & {
|
|
12
17
|
className?: string;
|
|
13
18
|
}) => JSX.Element;
|
|
14
19
|
Content: ({ children }: Pick<AccordionProps, 'children'>) => JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
type TextCarousel = {
|
|
3
|
+
text: string;
|
|
4
|
+
color: string;
|
|
5
|
+
size?: string;
|
|
6
|
+
};
|
|
7
|
+
type ButtonCarousel = {
|
|
8
|
+
title?: string;
|
|
9
|
+
link?: string;
|
|
10
|
+
target?: '_blank' | '_self';
|
|
11
|
+
};
|
|
12
|
+
export type ImageCarousel = {
|
|
13
|
+
src: string;
|
|
14
|
+
alt: string;
|
|
15
|
+
title: TextCarousel;
|
|
16
|
+
subtitle: TextCarousel;
|
|
17
|
+
button?: ButtonCarousel;
|
|
18
|
+
};
|
|
19
|
+
export interface CarouselProps {
|
|
20
|
+
images: ImageCarousel[];
|
|
21
|
+
}
|
|
22
|
+
export declare const Carousel: ({ images }: CarouselProps) => JSX.Element;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Carousel';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export declare const Input: {
|
|
2
3
|
Root: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
3
4
|
Face: import("react").ForwardRefExoticComponent<import("./types").InputFaceProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export declare const Popover: {
|
|
2
3
|
Root: ({ children, placement, trigger, }: import("./Root").PopoverRootProps) => JSX.Element;
|
|
3
4
|
Trigger: ({ children }: import("./Trigger").PopoverTriggerProps) => import("react").FunctionComponentElement<any>;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export declare const Select: {
|
|
2
3
|
Root: <T>({ children, value, keyExtractor, labelExtractor, className, }: import("./types").SelectRootProps<T>) => JSX.Element;
|
|
3
4
|
Trigger: ({ label, placeholder, disabled, multiLabelSelected, }: import("./types").SelectTriggerProps) => JSX.Element;
|
|
@@ -2,7 +2,8 @@ import { TagVariants } from '@tecsinapse/cortex-core';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
interface TagProps {
|
|
4
4
|
variants?: TagVariants;
|
|
5
|
-
label
|
|
5
|
+
label?: string;
|
|
6
|
+
children?: React.ReactNode;
|
|
6
7
|
}
|
|
7
8
|
export declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps & React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
8
9
|
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export declare const TextArea: {
|
|
2
3
|
Root: import("react").ForwardRefExoticComponent<import("./types").TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
3
4
|
Face: import("react").ForwardRefExoticComponent<import("./types").TextAreaFaceProps & import("react").RefAttributes<HTMLDivElement>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/cortex-react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0-beta.0",
|
|
4
4
|
"description": "React components based in @tecsinapse/cortex-core",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"dist"
|
|
11
11
|
],
|
|
12
12
|
"scripts": {
|
|
13
|
-
"dev": "rollup --config --watch",
|
|
13
|
+
"dev:es": "rollup --config --watch",
|
|
14
14
|
"dev:dts": "tsc --project tsconfig.build.json --watch",
|
|
15
15
|
"build:es": "rollup --config",
|
|
16
16
|
"build:dts": "tsc --project tsconfig.build.json",
|
|
@@ -20,11 +20,13 @@
|
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@floating-ui/react": "^0.26.18",
|
|
22
22
|
"@internationalized/date": "*",
|
|
23
|
-
"@tecsinapse/cortex-core": "0.3.
|
|
23
|
+
"@tecsinapse/cortex-core": "0.3.2-beta.0",
|
|
24
24
|
"clsx": "*",
|
|
25
25
|
"react-aria": "^3.33.1",
|
|
26
26
|
"react-icons": "^5.2.1",
|
|
27
27
|
"react-imask": "7.6.1",
|
|
28
|
+
"react-spring": "^9.7.4",
|
|
29
|
+
"react-spring-carousel": "^2.0.19",
|
|
28
30
|
"react-stately": "^3.31.1",
|
|
29
31
|
"sonner": "^1.5.0",
|
|
30
32
|
"tailwind-merge": "*"
|
|
@@ -43,5 +45,5 @@
|
|
|
43
45
|
"react-dom": ">=18.0.0",
|
|
44
46
|
"tailwind": ">=3.3.0"
|
|
45
47
|
},
|
|
46
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "d558fba8fa0ad1dc1548648aba43f95c517b7e5d"
|
|
47
49
|
}
|