@tecsinapse/cortex-react 1.9.2 → 1.9.4
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/Content.js +49 -0
- package/dist/cjs/components/Accordion/Face.js +25 -0
- package/dist/cjs/components/Accordion/Root.js +31 -0
- package/dist/cjs/components/Accordion/Trigger.js +94 -0
- package/dist/cjs/components/Accordion/context.js +15 -0
- package/dist/cjs/components/Accordion/index.js +18 -0
- package/dist/cjs/index.js +19 -17
- package/dist/esm/components/Accordion/Content.js +47 -0
- package/dist/esm/components/Accordion/Face.js +23 -0
- package/dist/esm/components/Accordion/Root.js +29 -0
- package/dist/esm/components/Accordion/Trigger.js +92 -0
- package/dist/esm/components/Accordion/context.js +12 -0
- package/dist/esm/components/Accordion/index.js +14 -0
- package/dist/esm/index.js +3 -2
- package/dist/types/components/Accordion/Content.d.ts +3 -0
- package/dist/types/components/Accordion/Face.d.ts +3 -0
- package/dist/types/components/Accordion/Root.d.ts +3 -0
- package/dist/types/components/Accordion/Trigger.d.ts +5 -0
- package/dist/types/components/Accordion/context.d.ts +9 -0
- package/dist/types/components/Accordion/index.d.ts +10 -0
- package/dist/types/components/Accordion/types.d.ts +11 -0
- package/dist/types/components/index.d.ts +1 -1
- package/package.json +2 -2
- package/dist/cjs/components/Accordion.js +0 -135
- package/dist/esm/components/Accordion.js +0 -132
- package/dist/types/components/Accordion.d.ts +0 -23
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var clsx = require('clsx');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var context = require('./context.js');
|
|
6
|
+
|
|
7
|
+
const AccordionContent = ({
|
|
8
|
+
children,
|
|
9
|
+
direction = "horizontal"
|
|
10
|
+
}) => {
|
|
11
|
+
const container = React.useRef(null);
|
|
12
|
+
const [width, setWidth] = React.useState(void 0);
|
|
13
|
+
const [height, setHeight] = React.useState(void 0);
|
|
14
|
+
const { open } = context.useAccordionContext();
|
|
15
|
+
React.useLayoutEffect(() => {
|
|
16
|
+
if (direction === "horizontal") {
|
|
17
|
+
const widthSize = Array.from(
|
|
18
|
+
container.current?.children || []
|
|
19
|
+
).reduce((prev, curr) => prev + curr.clientWidth, 0);
|
|
20
|
+
setWidth(`${widthSize}px`);
|
|
21
|
+
} else {
|
|
22
|
+
const heightSize = Array.from(
|
|
23
|
+
container.current?.children || []
|
|
24
|
+
).reduce((prev, curr) => prev + curr.clientHeight, 0);
|
|
25
|
+
setHeight(`${heightSize}px`);
|
|
26
|
+
}
|
|
27
|
+
}, [direction]);
|
|
28
|
+
return /* @__PURE__ */ React.createElement(
|
|
29
|
+
"div",
|
|
30
|
+
{
|
|
31
|
+
className: clsx(
|
|
32
|
+
`overflow-hidden ease-in-out duration-200`,
|
|
33
|
+
{ "transition-[width]": direction === "horizontal" },
|
|
34
|
+
{ "w-0": direction === "horizontal" && !open },
|
|
35
|
+
{ "transition-[height]": direction === "vertical" },
|
|
36
|
+
{ "h-0": direction === "vertical" && !open }
|
|
37
|
+
),
|
|
38
|
+
style: {
|
|
39
|
+
width: direction === "horizontal" && open ? width : void 0,
|
|
40
|
+
height: direction === "vertical" && open ? height : void 0
|
|
41
|
+
},
|
|
42
|
+
ref: container,
|
|
43
|
+
"data-testid": "accordion-container"
|
|
44
|
+
},
|
|
45
|
+
children
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
exports.AccordionContent = AccordionContent;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var clsx = require('clsx');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var context = require('./context.js');
|
|
6
|
+
|
|
7
|
+
const AccordionFace = ({
|
|
8
|
+
children,
|
|
9
|
+
defaultOpen = false,
|
|
10
|
+
direction = "horizontal"
|
|
11
|
+
}) => {
|
|
12
|
+
const [open, setOpen] = React.useState(defaultOpen);
|
|
13
|
+
const toggle = React.useCallback(() => setOpen((prev) => !prev), []);
|
|
14
|
+
return /* @__PURE__ */ React.createElement(context.Context.Provider, { value: { open, toggle } }, /* @__PURE__ */ React.createElement(
|
|
15
|
+
"div",
|
|
16
|
+
{
|
|
17
|
+
className: clsx("flex", {
|
|
18
|
+
"flex flex-col": direction === "vertical"
|
|
19
|
+
})
|
|
20
|
+
},
|
|
21
|
+
children
|
|
22
|
+
));
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
exports.AccordionFace = AccordionFace;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var Content = require('./Content.js');
|
|
5
|
+
var Face = require('./Face.js');
|
|
6
|
+
var Trigger = require('./Trigger.js');
|
|
7
|
+
|
|
8
|
+
const AccordionRoot = ({
|
|
9
|
+
children,
|
|
10
|
+
defaultOpen,
|
|
11
|
+
label,
|
|
12
|
+
floating,
|
|
13
|
+
onOpen,
|
|
14
|
+
invertedArrow,
|
|
15
|
+
onClose,
|
|
16
|
+
direction = "horizontal"
|
|
17
|
+
}) => {
|
|
18
|
+
return /* @__PURE__ */ React.createElement(Face.AccordionFace, { defaultOpen, direction }, /* @__PURE__ */ React.createElement(
|
|
19
|
+
Trigger.AccordionTrigger,
|
|
20
|
+
{
|
|
21
|
+
label,
|
|
22
|
+
floating,
|
|
23
|
+
onOpen,
|
|
24
|
+
onClose,
|
|
25
|
+
invertedArrow,
|
|
26
|
+
direction
|
|
27
|
+
}
|
|
28
|
+
), /* @__PURE__ */ React.createElement(Content.AccordionContent, { direction }, children));
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
exports.AccordionRoot = AccordionRoot;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var clsx = require('clsx');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var lia = require('react-icons/lia');
|
|
6
|
+
var context = require('./context.js');
|
|
7
|
+
|
|
8
|
+
const AccordionTrigger = ({
|
|
9
|
+
label,
|
|
10
|
+
floating = false,
|
|
11
|
+
/**
|
|
12
|
+
* Only applied to trigger arrow
|
|
13
|
+
*/
|
|
14
|
+
className,
|
|
15
|
+
onOpen,
|
|
16
|
+
onClose,
|
|
17
|
+
invertedArrow = false,
|
|
18
|
+
direction = "horizontal"
|
|
19
|
+
}) => {
|
|
20
|
+
const { open, toggle } = context.useAccordionContext();
|
|
21
|
+
if (!floating && !label) {
|
|
22
|
+
throw new Error(
|
|
23
|
+
"A label must be specified if the trigger is not floating variant"
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
const action = () => {
|
|
27
|
+
if (!open) {
|
|
28
|
+
onOpen?.();
|
|
29
|
+
} else {
|
|
30
|
+
onClose?.();
|
|
31
|
+
}
|
|
32
|
+
toggle?.();
|
|
33
|
+
};
|
|
34
|
+
return /* @__PURE__ */ React.createElement(
|
|
35
|
+
"div",
|
|
36
|
+
{
|
|
37
|
+
className: clsx(
|
|
38
|
+
"flex justify-between align-center border-secondary-light cursor-pointer",
|
|
39
|
+
{ "mr-deca": floating && direction === "horizontal" },
|
|
40
|
+
{ "mb-deca": floating && direction === "vertical" },
|
|
41
|
+
{ "border-r flex-col px-mili": direction === "horizontal" },
|
|
42
|
+
{ "border-b py-mili": direction === "vertical" }
|
|
43
|
+
),
|
|
44
|
+
onClick: action
|
|
45
|
+
},
|
|
46
|
+
/* @__PURE__ */ React.createElement(
|
|
47
|
+
"div",
|
|
48
|
+
{
|
|
49
|
+
className: clsx(
|
|
50
|
+
"rounded-mili border border-secondary-light flex align-center justify-center p-micro",
|
|
51
|
+
{
|
|
52
|
+
"absolute -translate-x-micro translate-y-deca bg-white": floating && direction === "horizontal"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"absolute -translate-y-micro translate-x-deca bg-white": floating && direction === "vertical"
|
|
56
|
+
},
|
|
57
|
+
className
|
|
58
|
+
)
|
|
59
|
+
},
|
|
60
|
+
direction === "horizontal" ? /* @__PURE__ */ React.createElement(
|
|
61
|
+
lia.LiaAngleRightSolid,
|
|
62
|
+
{
|
|
63
|
+
className: clsx(
|
|
64
|
+
"text-secondary-medium transition-transform duration-200",
|
|
65
|
+
{
|
|
66
|
+
"rotate-180": invertedArrow ? !open : open
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
) : /* @__PURE__ */ React.createElement(
|
|
71
|
+
lia.LiaAngleDownSolid,
|
|
72
|
+
{
|
|
73
|
+
className: clsx(
|
|
74
|
+
"text-secondary-medium transition-transform duration-200",
|
|
75
|
+
{
|
|
76
|
+
"rotate-180": invertedArrow ? !open : open
|
|
77
|
+
}
|
|
78
|
+
)
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
),
|
|
82
|
+
!floating ? /* @__PURE__ */ React.createElement(
|
|
83
|
+
"span",
|
|
84
|
+
{
|
|
85
|
+
className: clsx({
|
|
86
|
+
"-rotate-180 [writing-mode:vertical-lr]": direction === "horizontal"
|
|
87
|
+
})
|
|
88
|
+
},
|
|
89
|
+
label
|
|
90
|
+
) : null
|
|
91
|
+
);
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
exports.AccordionTrigger = AccordionTrigger;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
const Context = React.createContext({ open: false });
|
|
6
|
+
const useAccordionContext = () => {
|
|
7
|
+
const context = React.useContext(Context);
|
|
8
|
+
if (!context) {
|
|
9
|
+
throw new Error("useAccordionContext must be used within a Accordion");
|
|
10
|
+
}
|
|
11
|
+
return context;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
exports.Context = Context;
|
|
15
|
+
exports.useAccordionContext = useAccordionContext;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var Content = require('./Content.js');
|
|
4
|
+
var Face = require('./Face.js');
|
|
5
|
+
var Root = require('./Root.js');
|
|
6
|
+
var Trigger = require('./Trigger.js');
|
|
7
|
+
var context = require('./context.js');
|
|
8
|
+
|
|
9
|
+
const Accordion = {
|
|
10
|
+
Root: Root.AccordionRoot,
|
|
11
|
+
Face: Face.AccordionFace,
|
|
12
|
+
Content: Content.AccordionContent,
|
|
13
|
+
Trigger: Trigger.AccordionTrigger
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
exports.Context = context.Context;
|
|
17
|
+
exports.useAccordionContext = context.useAccordionContext;
|
|
18
|
+
exports.Accordion = Accordion;
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var index = require('./components/Accordion/index.js');
|
|
4
4
|
var Avatar = require('./components/Avatar.js');
|
|
5
5
|
var Badge = require('./components/Badge.js');
|
|
6
6
|
var BreadcrumbItem = require('./components/Breadcrumbs/BreadcrumbItem.js');
|
|
@@ -20,27 +20,27 @@ var Divider = require('./components/Divider.js');
|
|
|
20
20
|
var Drawer = require('./components/Drawer.js');
|
|
21
21
|
var GroupButton = require('./components/GroupButton.js');
|
|
22
22
|
var Hint = require('./components/Hint.js');
|
|
23
|
-
var index = require('./components/Input/index.js');
|
|
23
|
+
var index$1 = require('./components/Input/index.js');
|
|
24
24
|
var Kanban = require('./components/Kanban.js');
|
|
25
25
|
var Loading = require('./components/Loading.js');
|
|
26
|
-
var index$
|
|
26
|
+
var index$2 = require('./components/Menubar/index.js');
|
|
27
27
|
var Modal = require('./components/Modal.js');
|
|
28
|
-
var index$
|
|
28
|
+
var index$3 = require('./components/Popover/index.js');
|
|
29
29
|
var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
|
|
30
30
|
var RadioButton = require('./components/RadioButton.js');
|
|
31
|
-
var index$
|
|
31
|
+
var index$4 = require('./components/Select/index.js');
|
|
32
32
|
var Skeleton = require('./components/Skeleton.js');
|
|
33
33
|
var BaseSnackbar = require('./components/Snackbar/BaseSnackbar.js');
|
|
34
34
|
var DefaultSnack = require('./components/Snackbar/DefaultSnack.js');
|
|
35
|
+
var index$5 = require('./components/Stepper/index.js');
|
|
35
36
|
var Table = require('./components/Table.js');
|
|
36
37
|
var Tag = require('./components/Tag.js');
|
|
37
|
-
var index$
|
|
38
|
+
var index$6 = require('./components/TextArea/index.js');
|
|
38
39
|
var TimeField = require('./components/TimeField/TimeField.js');
|
|
39
40
|
var TimeFieldInput = require('./components/TimeField/TimeFieldInput.js');
|
|
40
41
|
var Toggle = require('./components/Toggle.js');
|
|
41
42
|
var Tooltip = require('./components/Tooltip.js');
|
|
42
|
-
var index$
|
|
43
|
-
var index$6 = require('./components/Stepper/index.js');
|
|
43
|
+
var index$7 = require('./components/Uploader/index.js');
|
|
44
44
|
var useCalendar = require('./hooks/useCalendar.js');
|
|
45
45
|
var useCalendarCell = require('./hooks/useCalendarCell.js');
|
|
46
46
|
var useCalendarGrid = require('./hooks/useCalendarGrid.js');
|
|
@@ -61,14 +61,14 @@ var MenubarProvider = require('./provider/MenubarProvider.js');
|
|
|
61
61
|
var SnackbarProvider = require('./provider/SnackbarProvider.js');
|
|
62
62
|
var MenubarContext = require('./provider/MenubarContext.js');
|
|
63
63
|
var useMenubar = require('./provider/useMenubar.js');
|
|
64
|
+
var context = require('./components/Accordion/context.js');
|
|
64
65
|
var masks = require('./components/Input/masks.js');
|
|
65
66
|
var Root = require('./components/Uploader/Root.js');
|
|
66
67
|
var types = require('./components/Uploader/types.js');
|
|
67
68
|
|
|
68
69
|
|
|
69
70
|
|
|
70
|
-
exports.Accordion =
|
|
71
|
-
exports.useAccordionContext = Accordion.useAccordionContext;
|
|
71
|
+
exports.Accordion = index.Accordion;
|
|
72
72
|
exports.Avatar = Avatar.Avatar;
|
|
73
73
|
exports.Badge = Badge.Badge;
|
|
74
74
|
exports.BadgeAnchor = Badge.BadgeAnchor;
|
|
@@ -89,18 +89,19 @@ exports.Divider = Divider.Divider;
|
|
|
89
89
|
exports.Drawer = Drawer.Drawer;
|
|
90
90
|
exports.GroupButton = GroupButton.GroupButton;
|
|
91
91
|
exports.Hint = Hint.Hint;
|
|
92
|
-
exports.Input = index.Input;
|
|
92
|
+
exports.Input = index$1.Input;
|
|
93
93
|
exports.Kanban = Kanban.Kanban;
|
|
94
94
|
exports.Loading = Loading.Loading;
|
|
95
|
-
exports.Menubar = index$
|
|
95
|
+
exports.Menubar = index$2.Menubar;
|
|
96
96
|
exports.Modal = Modal.Modal;
|
|
97
|
-
exports.Popover = index$
|
|
97
|
+
exports.Popover = index$3.Popover;
|
|
98
98
|
exports.ProgressBar = ProgressBar.ProgressBar;
|
|
99
99
|
exports.RadioButton = RadioButton.RadioButton;
|
|
100
|
-
exports.Select = index$
|
|
100
|
+
exports.Select = index$4.Select;
|
|
101
101
|
exports.Skeleton = Skeleton.Skeleton;
|
|
102
102
|
exports.BaseSnackbar = BaseSnackbar.BaseSnackbar;
|
|
103
103
|
exports.DefaultSnack = DefaultSnack.DefaultSnack;
|
|
104
|
+
exports.Stepper = index$5.Stepper;
|
|
104
105
|
exports.TCell = Table.TCell;
|
|
105
106
|
exports.TFoot = Table.TFoot;
|
|
106
107
|
exports.THead = Table.THead;
|
|
@@ -110,13 +111,12 @@ exports.TRowHeader = Table.TRowHeader;
|
|
|
110
111
|
exports.Table = Table.Table;
|
|
111
112
|
exports.Td = Table.Td;
|
|
112
113
|
exports.Tag = Tag.Tag;
|
|
113
|
-
exports.TextArea = index$
|
|
114
|
+
exports.TextArea = index$6.TextArea;
|
|
114
115
|
exports.TimeField = TimeField.TimeField;
|
|
115
116
|
exports.TimeFieldInput = TimeFieldInput.TimeFieldInput;
|
|
116
117
|
exports.Toggle = Toggle.Toggle;
|
|
117
118
|
exports.Tooltip = Tooltip.Tooltip;
|
|
118
|
-
exports.Uploader = index$
|
|
119
|
-
exports.Stepper = index$6.Stepper;
|
|
119
|
+
exports.Uploader = index$7.Uploader;
|
|
120
120
|
exports.useCalendar = useCalendar.useCalendar;
|
|
121
121
|
exports.useCalendarCell = useCalendarCell.useCalendarCell;
|
|
122
122
|
exports.useCalendarGrid = useCalendarGrid.useCalendarGrid;
|
|
@@ -141,6 +141,8 @@ exports.SnackbarProvider = SnackbarProvider.SnackbarProvider;
|
|
|
141
141
|
exports.useSnackbar = SnackbarProvider.useSnackbar;
|
|
142
142
|
exports.MenubarContext = MenubarContext.MenubarContext;
|
|
143
143
|
exports.useMenubar = useMenubar.useMenubar;
|
|
144
|
+
exports.Context = context.Context;
|
|
145
|
+
exports.useAccordionContext = context.useAccordionContext;
|
|
144
146
|
exports.BRLMask = masks.BRLMask;
|
|
145
147
|
exports.CurrencyIMask = masks.CurrencyIMask;
|
|
146
148
|
exports.ExpressionMasks = masks.ExpressionMasks;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
import React__default, { useRef, useState, useLayoutEffect } from 'react';
|
|
3
|
+
import { useAccordionContext } from './context.js';
|
|
4
|
+
|
|
5
|
+
const AccordionContent = ({
|
|
6
|
+
children,
|
|
7
|
+
direction = "horizontal"
|
|
8
|
+
}) => {
|
|
9
|
+
const container = useRef(null);
|
|
10
|
+
const [width, setWidth] = useState(void 0);
|
|
11
|
+
const [height, setHeight] = useState(void 0);
|
|
12
|
+
const { open } = useAccordionContext();
|
|
13
|
+
useLayoutEffect(() => {
|
|
14
|
+
if (direction === "horizontal") {
|
|
15
|
+
const widthSize = Array.from(
|
|
16
|
+
container.current?.children || []
|
|
17
|
+
).reduce((prev, curr) => prev + curr.clientWidth, 0);
|
|
18
|
+
setWidth(`${widthSize}px`);
|
|
19
|
+
} else {
|
|
20
|
+
const heightSize = Array.from(
|
|
21
|
+
container.current?.children || []
|
|
22
|
+
).reduce((prev, curr) => prev + curr.clientHeight, 0);
|
|
23
|
+
setHeight(`${heightSize}px`);
|
|
24
|
+
}
|
|
25
|
+
}, [direction]);
|
|
26
|
+
return /* @__PURE__ */ React__default.createElement(
|
|
27
|
+
"div",
|
|
28
|
+
{
|
|
29
|
+
className: clsx(
|
|
30
|
+
`overflow-hidden ease-in-out duration-200`,
|
|
31
|
+
{ "transition-[width]": direction === "horizontal" },
|
|
32
|
+
{ "w-0": direction === "horizontal" && !open },
|
|
33
|
+
{ "transition-[height]": direction === "vertical" },
|
|
34
|
+
{ "h-0": direction === "vertical" && !open }
|
|
35
|
+
),
|
|
36
|
+
style: {
|
|
37
|
+
width: direction === "horizontal" && open ? width : void 0,
|
|
38
|
+
height: direction === "vertical" && open ? height : void 0
|
|
39
|
+
},
|
|
40
|
+
ref: container,
|
|
41
|
+
"data-testid": "accordion-container"
|
|
42
|
+
},
|
|
43
|
+
children
|
|
44
|
+
);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export { AccordionContent };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
import React__default, { useState, useCallback } from 'react';
|
|
3
|
+
import { Context } from './context.js';
|
|
4
|
+
|
|
5
|
+
const AccordionFace = ({
|
|
6
|
+
children,
|
|
7
|
+
defaultOpen = false,
|
|
8
|
+
direction = "horizontal"
|
|
9
|
+
}) => {
|
|
10
|
+
const [open, setOpen] = useState(defaultOpen);
|
|
11
|
+
const toggle = useCallback(() => setOpen((prev) => !prev), []);
|
|
12
|
+
return /* @__PURE__ */ React__default.createElement(Context.Provider, { value: { open, toggle } }, /* @__PURE__ */ React__default.createElement(
|
|
13
|
+
"div",
|
|
14
|
+
{
|
|
15
|
+
className: clsx("flex", {
|
|
16
|
+
"flex flex-col": direction === "vertical"
|
|
17
|
+
})
|
|
18
|
+
},
|
|
19
|
+
children
|
|
20
|
+
));
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { AccordionFace };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { AccordionContent } from './Content.js';
|
|
3
|
+
import { AccordionFace } from './Face.js';
|
|
4
|
+
import { AccordionTrigger } from './Trigger.js';
|
|
5
|
+
|
|
6
|
+
const AccordionRoot = ({
|
|
7
|
+
children,
|
|
8
|
+
defaultOpen,
|
|
9
|
+
label,
|
|
10
|
+
floating,
|
|
11
|
+
onOpen,
|
|
12
|
+
invertedArrow,
|
|
13
|
+
onClose,
|
|
14
|
+
direction = "horizontal"
|
|
15
|
+
}) => {
|
|
16
|
+
return /* @__PURE__ */ React__default.createElement(AccordionFace, { defaultOpen, direction }, /* @__PURE__ */ React__default.createElement(
|
|
17
|
+
AccordionTrigger,
|
|
18
|
+
{
|
|
19
|
+
label,
|
|
20
|
+
floating,
|
|
21
|
+
onOpen,
|
|
22
|
+
onClose,
|
|
23
|
+
invertedArrow,
|
|
24
|
+
direction
|
|
25
|
+
}
|
|
26
|
+
), /* @__PURE__ */ React__default.createElement(AccordionContent, { direction }, children));
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export { AccordionRoot };
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { LiaAngleRightSolid, LiaAngleDownSolid } from 'react-icons/lia';
|
|
4
|
+
import { useAccordionContext } from './context.js';
|
|
5
|
+
|
|
6
|
+
const AccordionTrigger = ({
|
|
7
|
+
label,
|
|
8
|
+
floating = false,
|
|
9
|
+
/**
|
|
10
|
+
* Only applied to trigger arrow
|
|
11
|
+
*/
|
|
12
|
+
className,
|
|
13
|
+
onOpen,
|
|
14
|
+
onClose,
|
|
15
|
+
invertedArrow = false,
|
|
16
|
+
direction = "horizontal"
|
|
17
|
+
}) => {
|
|
18
|
+
const { open, toggle } = useAccordionContext();
|
|
19
|
+
if (!floating && !label) {
|
|
20
|
+
throw new Error(
|
|
21
|
+
"A label must be specified if the trigger is not floating variant"
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
const action = () => {
|
|
25
|
+
if (!open) {
|
|
26
|
+
onOpen?.();
|
|
27
|
+
} else {
|
|
28
|
+
onClose?.();
|
|
29
|
+
}
|
|
30
|
+
toggle?.();
|
|
31
|
+
};
|
|
32
|
+
return /* @__PURE__ */ React__default.createElement(
|
|
33
|
+
"div",
|
|
34
|
+
{
|
|
35
|
+
className: clsx(
|
|
36
|
+
"flex justify-between align-center border-secondary-light cursor-pointer",
|
|
37
|
+
{ "mr-deca": floating && direction === "horizontal" },
|
|
38
|
+
{ "mb-deca": floating && direction === "vertical" },
|
|
39
|
+
{ "border-r flex-col px-mili": direction === "horizontal" },
|
|
40
|
+
{ "border-b py-mili": direction === "vertical" }
|
|
41
|
+
),
|
|
42
|
+
onClick: action
|
|
43
|
+
},
|
|
44
|
+
/* @__PURE__ */ React__default.createElement(
|
|
45
|
+
"div",
|
|
46
|
+
{
|
|
47
|
+
className: clsx(
|
|
48
|
+
"rounded-mili border border-secondary-light flex align-center justify-center p-micro",
|
|
49
|
+
{
|
|
50
|
+
"absolute -translate-x-micro translate-y-deca bg-white": floating && direction === "horizontal"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"absolute -translate-y-micro translate-x-deca bg-white": floating && direction === "vertical"
|
|
54
|
+
},
|
|
55
|
+
className
|
|
56
|
+
)
|
|
57
|
+
},
|
|
58
|
+
direction === "horizontal" ? /* @__PURE__ */ React__default.createElement(
|
|
59
|
+
LiaAngleRightSolid,
|
|
60
|
+
{
|
|
61
|
+
className: clsx(
|
|
62
|
+
"text-secondary-medium transition-transform duration-200",
|
|
63
|
+
{
|
|
64
|
+
"rotate-180": invertedArrow ? !open : open
|
|
65
|
+
}
|
|
66
|
+
)
|
|
67
|
+
}
|
|
68
|
+
) : /* @__PURE__ */ React__default.createElement(
|
|
69
|
+
LiaAngleDownSolid,
|
|
70
|
+
{
|
|
71
|
+
className: clsx(
|
|
72
|
+
"text-secondary-medium transition-transform duration-200",
|
|
73
|
+
{
|
|
74
|
+
"rotate-180": invertedArrow ? !open : open
|
|
75
|
+
}
|
|
76
|
+
)
|
|
77
|
+
}
|
|
78
|
+
)
|
|
79
|
+
),
|
|
80
|
+
!floating ? /* @__PURE__ */ React__default.createElement(
|
|
81
|
+
"span",
|
|
82
|
+
{
|
|
83
|
+
className: clsx({
|
|
84
|
+
"-rotate-180 [writing-mode:vertical-lr]": direction === "horizontal"
|
|
85
|
+
})
|
|
86
|
+
},
|
|
87
|
+
label
|
|
88
|
+
) : null
|
|
89
|
+
);
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
export { AccordionTrigger };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { createContext, useContext } from 'react';
|
|
2
|
+
|
|
3
|
+
const Context = createContext({ open: false });
|
|
4
|
+
const useAccordionContext = () => {
|
|
5
|
+
const context = useContext(Context);
|
|
6
|
+
if (!context) {
|
|
7
|
+
throw new Error("useAccordionContext must be used within a Accordion");
|
|
8
|
+
}
|
|
9
|
+
return context;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export { Context, useAccordionContext };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { AccordionContent } from './Content.js';
|
|
2
|
+
import { AccordionFace } from './Face.js';
|
|
3
|
+
import { AccordionRoot } from './Root.js';
|
|
4
|
+
import { AccordionTrigger } from './Trigger.js';
|
|
5
|
+
export { Context, useAccordionContext } from './context.js';
|
|
6
|
+
|
|
7
|
+
const Accordion = {
|
|
8
|
+
Root: AccordionRoot,
|
|
9
|
+
Face: AccordionFace,
|
|
10
|
+
Content: AccordionContent,
|
|
11
|
+
Trigger: AccordionTrigger
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { Accordion };
|
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Accordion
|
|
1
|
+
export { Accordion } from './components/Accordion/index.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';
|
|
@@ -30,6 +30,7 @@ export { Select } from './components/Select/index.js';
|
|
|
30
30
|
export { Skeleton } from './components/Skeleton.js';
|
|
31
31
|
export { BaseSnackbar } from './components/Snackbar/BaseSnackbar.js';
|
|
32
32
|
export { DefaultSnack } from './components/Snackbar/DefaultSnack.js';
|
|
33
|
+
export { Stepper } from './components/Stepper/index.js';
|
|
33
34
|
export { TCell, TFoot, THead, THeadCell, TRow, TRowHeader, Table, Td } from './components/Table.js';
|
|
34
35
|
export { Tag } from './components/Tag.js';
|
|
35
36
|
export { TextArea } from './components/TextArea/index.js';
|
|
@@ -38,7 +39,6 @@ export { TimeFieldInput } from './components/TimeField/TimeFieldInput.js';
|
|
|
38
39
|
export { Toggle } from './components/Toggle.js';
|
|
39
40
|
export { Tooltip } from './components/Tooltip.js';
|
|
40
41
|
export { Uploader } from './components/Uploader/index.js';
|
|
41
|
-
export { Stepper } from './components/Stepper/index.js';
|
|
42
42
|
export { useCalendar } from './hooks/useCalendar.js';
|
|
43
43
|
export { useCalendarCell } from './hooks/useCalendarCell.js';
|
|
44
44
|
export { useCalendarGrid } from './hooks/useCalendarGrid.js';
|
|
@@ -59,6 +59,7 @@ export { MenubarProvider } from './provider/MenubarProvider.js';
|
|
|
59
59
|
export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';
|
|
60
60
|
export { MenubarContext } from './provider/MenubarContext.js';
|
|
61
61
|
export { useMenubar } from './provider/useMenubar.js';
|
|
62
|
+
export { Context, useAccordionContext } from './components/Accordion/context.js';
|
|
62
63
|
export { BRLMask, CurrencyIMask, ExpressionMasks, Masks, NumberIMask, PercentageIMask, PercentageMask } from './components/Input/masks.js';
|
|
63
64
|
export { Root } from './components/Uploader/Root.js';
|
|
64
65
|
export { AcceptSpecificMap, FileStatus } from './components/Uploader/types.js';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { AccordionProps } from './types';
|
|
3
|
+
export declare const AccordionTrigger: ({ label, floating, className, onOpen, onClose, invertedArrow, direction, }: Pick<AccordionProps, 'floating' | 'label' | 'onOpen' | 'onClose' | 'invertedArrow' | 'direction'> & {
|
|
4
|
+
className?: string;
|
|
5
|
+
}) => JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const Accordion: {
|
|
3
|
+
Root: ({ children, defaultOpen, label, floating, onOpen, invertedArrow, onClose, direction, }: import("./types").AccordionProps) => JSX.Element;
|
|
4
|
+
Face: ({ children, defaultOpen, direction, }: Pick<import("./types").AccordionProps, "children" | "direction" | "defaultOpen">) => JSX.Element;
|
|
5
|
+
Content: ({ children, direction, }: Pick<import("./types").AccordionProps, "children" | "direction">) => JSX.Element;
|
|
6
|
+
Trigger: ({ label, floating, className, onOpen, onClose, invertedArrow, direction, }: Pick<import("./types").AccordionProps, "direction" | "label" | "floating" | "onOpen" | "onClose" | "invertedArrow"> & {
|
|
7
|
+
className?: string | undefined;
|
|
8
|
+
}) => JSX.Element;
|
|
9
|
+
};
|
|
10
|
+
export * from './context';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface AccordionProps {
|
|
3
|
+
children?: React.ReactNode;
|
|
4
|
+
defaultOpen?: boolean;
|
|
5
|
+
label?: string;
|
|
6
|
+
floating?: boolean;
|
|
7
|
+
onOpen?: () => void;
|
|
8
|
+
onClose?: () => void;
|
|
9
|
+
invertedArrow?: boolean;
|
|
10
|
+
direction?: 'vertical' | 'horizontal';
|
|
11
|
+
}
|
|
@@ -23,6 +23,7 @@ export * from './RadioButton';
|
|
|
23
23
|
export * from './Select';
|
|
24
24
|
export * from './Skeleton';
|
|
25
25
|
export * from './Snackbar';
|
|
26
|
+
export * from './Stepper';
|
|
26
27
|
export * from './Table';
|
|
27
28
|
export * from './Tag';
|
|
28
29
|
export * from './TextArea';
|
|
@@ -30,4 +31,3 @@ export * from './TimeField';
|
|
|
30
31
|
export * from './Toggle';
|
|
31
32
|
export * from './Tooltip';
|
|
32
33
|
export * from './Uploader';
|
|
33
|
-
export * from './Stepper';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/cortex-react",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.4",
|
|
4
4
|
"description": "React components based in @tecsinapse/cortex-core",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"react-dom": ">=18.0.0",
|
|
49
49
|
"tailwind": ">=3.3.0"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "38e77d1e02141b6ada9add7199a4e2dae99d2ed3"
|
|
52
52
|
}
|
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var clsx = require('clsx');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var lia = require('react-icons/lia');
|
|
6
|
-
|
|
7
|
-
const Context = React.createContext({ open: false });
|
|
8
|
-
const useAccordionContext = () => {
|
|
9
|
-
const context = React.useContext(Context);
|
|
10
|
-
if (!context) {
|
|
11
|
-
throw new Error("useAccordionContext must be used within a Accordion");
|
|
12
|
-
}
|
|
13
|
-
return context;
|
|
14
|
-
};
|
|
15
|
-
const Trigger = ({
|
|
16
|
-
label,
|
|
17
|
-
floating = false,
|
|
18
|
-
/**
|
|
19
|
-
* Only applied to trigger arrow
|
|
20
|
-
*/
|
|
21
|
-
className,
|
|
22
|
-
onOpen,
|
|
23
|
-
onClose,
|
|
24
|
-
invertedArrow = false
|
|
25
|
-
}) => {
|
|
26
|
-
const { open, toggle } = useAccordionContext();
|
|
27
|
-
if (!floating && !label) {
|
|
28
|
-
throw new Error(
|
|
29
|
-
"A label must be specified if the trigger is not floating variant"
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
const action = () => {
|
|
33
|
-
if (!open) {
|
|
34
|
-
onOpen?.();
|
|
35
|
-
} else {
|
|
36
|
-
onClose?.();
|
|
37
|
-
}
|
|
38
|
-
toggle?.();
|
|
39
|
-
};
|
|
40
|
-
return /* @__PURE__ */ React.createElement(
|
|
41
|
-
"div",
|
|
42
|
-
{
|
|
43
|
-
className: clsx(
|
|
44
|
-
"flex flex-col justify-between align-center px-mili border-r border-secondary-light cursor-pointer",
|
|
45
|
-
{ "mr-deca": floating }
|
|
46
|
-
),
|
|
47
|
-
onClick: action
|
|
48
|
-
},
|
|
49
|
-
/* @__PURE__ */ React.createElement(
|
|
50
|
-
"div",
|
|
51
|
-
{
|
|
52
|
-
className: clsx(
|
|
53
|
-
"rounded-mili border border-secondary-light flex align-center justify-center p-micro",
|
|
54
|
-
{
|
|
55
|
-
"absolute -translate-x-micro translate-y-deca bg-white": floating
|
|
56
|
-
},
|
|
57
|
-
className
|
|
58
|
-
)
|
|
59
|
-
},
|
|
60
|
-
/* @__PURE__ */ React.createElement(
|
|
61
|
-
lia.LiaAngleRightSolid,
|
|
62
|
-
{
|
|
63
|
-
className: clsx(
|
|
64
|
-
"text-secondary-medium transition-transform duration-200",
|
|
65
|
-
{
|
|
66
|
-
"rotate-180": invertedArrow ? !open : open
|
|
67
|
-
}
|
|
68
|
-
)
|
|
69
|
-
}
|
|
70
|
-
)
|
|
71
|
-
),
|
|
72
|
-
!floating ? /* @__PURE__ */ React.createElement("span", { className: "-rotate-180 [writing-mode:vertical-lr]" }, label) : null
|
|
73
|
-
);
|
|
74
|
-
};
|
|
75
|
-
const Content = ({ children }) => {
|
|
76
|
-
const container = React.useRef(null);
|
|
77
|
-
const [width, setWidth] = React.useState(null);
|
|
78
|
-
const { open } = useAccordionContext();
|
|
79
|
-
React.useLayoutEffect(() => {
|
|
80
|
-
const size = Array.from(
|
|
81
|
-
container.current?.children || []
|
|
82
|
-
).reduce((prev, curr) => prev + curr.clientWidth, 0);
|
|
83
|
-
setWidth(`${size}px`);
|
|
84
|
-
}, []);
|
|
85
|
-
return /* @__PURE__ */ React.createElement(
|
|
86
|
-
"div",
|
|
87
|
-
{
|
|
88
|
-
className: clsx(
|
|
89
|
-
`overflow-hidden transition-[width] ease-in-out duration-200`,
|
|
90
|
-
{ [`w-[${width}]`]: !!width && open },
|
|
91
|
-
{ "w-0": !open }
|
|
92
|
-
),
|
|
93
|
-
ref: container,
|
|
94
|
-
"data-testid": "accordion-container"
|
|
95
|
-
},
|
|
96
|
-
children
|
|
97
|
-
);
|
|
98
|
-
};
|
|
99
|
-
const Face = ({
|
|
100
|
-
children,
|
|
101
|
-
defaultOpen = false
|
|
102
|
-
}) => {
|
|
103
|
-
const [open, setOpen] = React.useState(defaultOpen);
|
|
104
|
-
const toggle = React.useCallback(() => setOpen((prev) => !prev), []);
|
|
105
|
-
return /* @__PURE__ */ React.createElement(Context.Provider, { value: { open, toggle } }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-row" }, children));
|
|
106
|
-
};
|
|
107
|
-
const Root = ({
|
|
108
|
-
children,
|
|
109
|
-
defaultOpen,
|
|
110
|
-
label,
|
|
111
|
-
floating,
|
|
112
|
-
onOpen,
|
|
113
|
-
invertedArrow,
|
|
114
|
-
onClose
|
|
115
|
-
}) => {
|
|
116
|
-
return /* @__PURE__ */ React.createElement(Face, { defaultOpen }, /* @__PURE__ */ React.createElement(
|
|
117
|
-
Trigger,
|
|
118
|
-
{
|
|
119
|
-
label,
|
|
120
|
-
floating,
|
|
121
|
-
onOpen,
|
|
122
|
-
onClose,
|
|
123
|
-
invertedArrow
|
|
124
|
-
}
|
|
125
|
-
), /* @__PURE__ */ React.createElement(Content, null, children));
|
|
126
|
-
};
|
|
127
|
-
const Accordion = {
|
|
128
|
-
Face,
|
|
129
|
-
Root,
|
|
130
|
-
Trigger,
|
|
131
|
-
Content
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
exports.Accordion = Accordion;
|
|
135
|
-
exports.useAccordionContext = useAccordionContext;
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import clsx from 'clsx';
|
|
2
|
-
import React__default, { createContext, useContext, useRef, useState, useLayoutEffect, useCallback } from 'react';
|
|
3
|
-
import { LiaAngleRightSolid } from 'react-icons/lia';
|
|
4
|
-
|
|
5
|
-
const Context = createContext({ open: false });
|
|
6
|
-
const useAccordionContext = () => {
|
|
7
|
-
const context = useContext(Context);
|
|
8
|
-
if (!context) {
|
|
9
|
-
throw new Error("useAccordionContext must be used within a Accordion");
|
|
10
|
-
}
|
|
11
|
-
return context;
|
|
12
|
-
};
|
|
13
|
-
const Trigger = ({
|
|
14
|
-
label,
|
|
15
|
-
floating = false,
|
|
16
|
-
/**
|
|
17
|
-
* Only applied to trigger arrow
|
|
18
|
-
*/
|
|
19
|
-
className,
|
|
20
|
-
onOpen,
|
|
21
|
-
onClose,
|
|
22
|
-
invertedArrow = false
|
|
23
|
-
}) => {
|
|
24
|
-
const { open, toggle } = useAccordionContext();
|
|
25
|
-
if (!floating && !label) {
|
|
26
|
-
throw new Error(
|
|
27
|
-
"A label must be specified if the trigger is not floating variant"
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
|
-
const action = () => {
|
|
31
|
-
if (!open) {
|
|
32
|
-
onOpen?.();
|
|
33
|
-
} else {
|
|
34
|
-
onClose?.();
|
|
35
|
-
}
|
|
36
|
-
toggle?.();
|
|
37
|
-
};
|
|
38
|
-
return /* @__PURE__ */ React__default.createElement(
|
|
39
|
-
"div",
|
|
40
|
-
{
|
|
41
|
-
className: clsx(
|
|
42
|
-
"flex flex-col justify-between align-center px-mili border-r border-secondary-light cursor-pointer",
|
|
43
|
-
{ "mr-deca": floating }
|
|
44
|
-
),
|
|
45
|
-
onClick: action
|
|
46
|
-
},
|
|
47
|
-
/* @__PURE__ */ React__default.createElement(
|
|
48
|
-
"div",
|
|
49
|
-
{
|
|
50
|
-
className: clsx(
|
|
51
|
-
"rounded-mili border border-secondary-light flex align-center justify-center p-micro",
|
|
52
|
-
{
|
|
53
|
-
"absolute -translate-x-micro translate-y-deca bg-white": floating
|
|
54
|
-
},
|
|
55
|
-
className
|
|
56
|
-
)
|
|
57
|
-
},
|
|
58
|
-
/* @__PURE__ */ React__default.createElement(
|
|
59
|
-
LiaAngleRightSolid,
|
|
60
|
-
{
|
|
61
|
-
className: clsx(
|
|
62
|
-
"text-secondary-medium transition-transform duration-200",
|
|
63
|
-
{
|
|
64
|
-
"rotate-180": invertedArrow ? !open : open
|
|
65
|
-
}
|
|
66
|
-
)
|
|
67
|
-
}
|
|
68
|
-
)
|
|
69
|
-
),
|
|
70
|
-
!floating ? /* @__PURE__ */ React__default.createElement("span", { className: "-rotate-180 [writing-mode:vertical-lr]" }, label) : null
|
|
71
|
-
);
|
|
72
|
-
};
|
|
73
|
-
const Content = ({ children }) => {
|
|
74
|
-
const container = useRef(null);
|
|
75
|
-
const [width, setWidth] = useState(null);
|
|
76
|
-
const { open } = useAccordionContext();
|
|
77
|
-
useLayoutEffect(() => {
|
|
78
|
-
const size = Array.from(
|
|
79
|
-
container.current?.children || []
|
|
80
|
-
).reduce((prev, curr) => prev + curr.clientWidth, 0);
|
|
81
|
-
setWidth(`${size}px`);
|
|
82
|
-
}, []);
|
|
83
|
-
return /* @__PURE__ */ React__default.createElement(
|
|
84
|
-
"div",
|
|
85
|
-
{
|
|
86
|
-
className: clsx(
|
|
87
|
-
`overflow-hidden transition-[width] ease-in-out duration-200`,
|
|
88
|
-
{ [`w-[${width}]`]: !!width && open },
|
|
89
|
-
{ "w-0": !open }
|
|
90
|
-
),
|
|
91
|
-
ref: container,
|
|
92
|
-
"data-testid": "accordion-container"
|
|
93
|
-
},
|
|
94
|
-
children
|
|
95
|
-
);
|
|
96
|
-
};
|
|
97
|
-
const Face = ({
|
|
98
|
-
children,
|
|
99
|
-
defaultOpen = false
|
|
100
|
-
}) => {
|
|
101
|
-
const [open, setOpen] = useState(defaultOpen);
|
|
102
|
-
const toggle = useCallback(() => setOpen((prev) => !prev), []);
|
|
103
|
-
return /* @__PURE__ */ React__default.createElement(Context.Provider, { value: { open, toggle } }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-row" }, children));
|
|
104
|
-
};
|
|
105
|
-
const Root = ({
|
|
106
|
-
children,
|
|
107
|
-
defaultOpen,
|
|
108
|
-
label,
|
|
109
|
-
floating,
|
|
110
|
-
onOpen,
|
|
111
|
-
invertedArrow,
|
|
112
|
-
onClose
|
|
113
|
-
}) => {
|
|
114
|
-
return /* @__PURE__ */ React__default.createElement(Face, { defaultOpen }, /* @__PURE__ */ React__default.createElement(
|
|
115
|
-
Trigger,
|
|
116
|
-
{
|
|
117
|
-
label,
|
|
118
|
-
floating,
|
|
119
|
-
onOpen,
|
|
120
|
-
onClose,
|
|
121
|
-
invertedArrow
|
|
122
|
-
}
|
|
123
|
-
), /* @__PURE__ */ React__default.createElement(Content, null, children));
|
|
124
|
-
};
|
|
125
|
-
const Accordion = {
|
|
126
|
-
Face,
|
|
127
|
-
Root,
|
|
128
|
-
Trigger,
|
|
129
|
-
Content
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
export { Accordion, useAccordionContext };
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
interface AccordionProps {
|
|
3
|
-
children?: React.ReactNode;
|
|
4
|
-
defaultOpen?: boolean;
|
|
5
|
-
label?: string;
|
|
6
|
-
floating?: boolean;
|
|
7
|
-
onOpen?: () => void;
|
|
8
|
-
onClose?: () => void;
|
|
9
|
-
invertedArrow?: boolean;
|
|
10
|
-
}
|
|
11
|
-
export declare const useAccordionContext: () => {
|
|
12
|
-
open: boolean;
|
|
13
|
-
toggle?: (() => void) | undefined;
|
|
14
|
-
};
|
|
15
|
-
export declare const Accordion: {
|
|
16
|
-
Face: ({ children, defaultOpen, }: Pick<AccordionProps, 'children' | 'defaultOpen'>) => JSX.Element;
|
|
17
|
-
Root: ({ children, defaultOpen, label, floating, onOpen, invertedArrow, onClose, }: AccordionProps) => JSX.Element;
|
|
18
|
-
Trigger: ({ label, floating, className, onOpen, onClose, invertedArrow, }: Pick<AccordionProps, 'floating' | 'label' | 'onOpen' | 'onClose' | 'invertedArrow'> & {
|
|
19
|
-
className?: string;
|
|
20
|
-
}) => JSX.Element;
|
|
21
|
-
Content: ({ children }: Pick<AccordionProps, 'children'>) => JSX.Element;
|
|
22
|
-
};
|
|
23
|
-
export {};
|