@kaio-xyz/design-system 1.1.86 → 1.1.88
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/index.cjs.js +22 -22
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +3 -2
- package/dist/index.esm.js +21 -21
- package/dist/index.esm.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -5,10 +5,10 @@ var clsx = require('clsx');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var ReactSelect = require('react-select');
|
|
7
7
|
var reactHookForm = require('react-hook-form');
|
|
8
|
+
var RTooltip = require('@radix-ui/react-tooltip');
|
|
8
9
|
var RAccordion = require('@radix-ui/react-accordion');
|
|
9
10
|
var reactDom = require('react-dom');
|
|
10
11
|
var RDropdownMenu = require('@radix-ui/react-dropdown-menu');
|
|
11
|
-
var RTooltip = require('@radix-ui/react-tooltip');
|
|
12
12
|
var recharts = require('recharts');
|
|
13
13
|
var DataTable = require('react-data-table-component');
|
|
14
14
|
var RTabs = require('@radix-ui/react-tabs');
|
|
@@ -32,9 +32,9 @@ function _interopNamespaceDefault(e) {
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
35
|
+
var RTooltip__namespace = /*#__PURE__*/_interopNamespaceDefault(RTooltip);
|
|
35
36
|
var RAccordion__namespace = /*#__PURE__*/_interopNamespaceDefault(RAccordion);
|
|
36
37
|
var RDropdownMenu__namespace = /*#__PURE__*/_interopNamespaceDefault(RDropdownMenu);
|
|
37
|
-
var RTooltip__namespace = /*#__PURE__*/_interopNamespaceDefault(RTooltip);
|
|
38
38
|
var RTabs__namespace = /*#__PURE__*/_interopNamespaceDefault(RTabs);
|
|
39
39
|
|
|
40
40
|
/******************************************************************************
|
|
@@ -590,9 +590,16 @@ var List$1 = function (_a) {
|
|
|
590
590
|
|
|
591
591
|
var style$e = {"root":"list-item-module__root__-fOHc","label":"list-item-module__label__rMBF5","value":"list-item-module__value__A3HYb"};
|
|
592
592
|
|
|
593
|
+
var style$d = {"trigger":"tooltip-module__trigger__8Eylk","content":"tooltip-module__content__9x6LA","title":"tooltip-module__title__Vkj38","icon":"tooltip-module__icon__4oV3Q","body":"tooltip-module__body__TQO-V","description":"tooltip-module__description__WSiRK","arrow":"tooltip-module__arrow__7pf9p"};
|
|
594
|
+
|
|
595
|
+
var Tooltip = function (_a) {
|
|
596
|
+
var children = _a.children, title = _a.title, description = _a.description, rest = __rest(_a, ["children", "title", "description"]);
|
|
597
|
+
return (jsxRuntime.jsx(RTooltip__namespace.Provider, { children: jsxRuntime.jsxs(RTooltip__namespace.Root, __assign({}, rest, { children: [jsxRuntime.jsx(RTooltip__namespace.Trigger, { className: style$d.trigger, asChild: true, children: children }), jsxRuntime.jsx(RTooltip__namespace.Portal, { children: jsxRuntime.jsxs(RTooltip__namespace.Content, { className: style$d.content, sideOffset: 2, children: [jsxRuntime.jsx(SvgInfo, { className: style$d.icon, width: 20, height: 20 }), jsxRuntime.jsxs("div", { className: style$d.body, children: [jsxRuntime.jsx("span", { className: style$d.title, children: title }), description && jsxRuntime.jsx("span", { className: style$d.description, children: description })] }), jsxRuntime.jsx(RTooltip__namespace.Arrow, { className: style$d.arrow })] }) })] })) }));
|
|
598
|
+
};
|
|
599
|
+
|
|
593
600
|
var ListItem = function (_a) {
|
|
594
601
|
var value = _a.value, label = _a.label, key = _a.key;
|
|
595
|
-
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { space: "m", className: style$e.root,
|
|
602
|
+
return (jsxRuntime.jsx("li", { children: jsxRuntime.jsxs(Stack, { space: "m", className: style$e.root, children: [jsxRuntime.jsx("span", { className: style$e.label, children: label }), jsxRuntime.jsx(Tooltip, { title: label, description: value, children: jsxRuntime.jsx("span", { className: style$e.value, children: value }) })] }) }, key));
|
|
596
603
|
};
|
|
597
604
|
|
|
598
605
|
var AccordionRoot = function (_a) {
|
|
@@ -600,38 +607,38 @@ var AccordionRoot = function (_a) {
|
|
|
600
607
|
return (jsxRuntime.jsx(RAccordion__namespace.Root, __assign({}, rest, { children: children })));
|
|
601
608
|
};
|
|
602
609
|
|
|
603
|
-
var style$
|
|
610
|
+
var style$c = {"content":"accordion-content-module__content__e93RL","childrenContainer":"accordion-content-module__childrenContainer__tAVvX","children":"accordion-content-module__children__Hihsf"};
|
|
604
611
|
|
|
605
612
|
var AccordionContent = React.forwardRef(function (_a, forwardedRef) {
|
|
606
613
|
var children = _a.children, className = _a.className, hasChildrenPadding = _a.hasChildrenPadding, rest = __rest(_a, ["children", "className", "hasChildrenPadding"]);
|
|
607
|
-
return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$
|
|
614
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Content, __assign({ className: clsx(style$c.content, className), ref: forwardedRef }, rest, { children: jsxRuntime.jsx("div", { className: style$c.childrenContainer, children: jsxRuntime.jsx("div", { className: style$c.children, "data-has-padding": hasChildrenPadding, children: children }) }) })));
|
|
608
615
|
});
|
|
609
616
|
AccordionContent.displayName = "AccordionContent";
|
|
610
617
|
|
|
611
|
-
var style$
|
|
618
|
+
var style$b = {"header":"accordion-trigger-module__header__2LR3z","trigger":"accordion-trigger-module__trigger__jzCw0"};
|
|
612
619
|
|
|
613
620
|
var AccordionTrigger = React.forwardRef(function (_a, forwardedRef) {
|
|
614
621
|
var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, dataTest = _a.dataTest, rest = __rest(_a, ["children", "className", "dataTest"]);
|
|
615
|
-
return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$
|
|
622
|
+
return (jsxRuntime.jsx(RAccordion__namespace.Header, { className: style$b.header, children: jsxRuntime.jsx(RAccordion__namespace.Trigger, __assign({ className: clsx(style$b.trigger, className), ref: forwardedRef, "data-test": dataTest }, rest, { children: children })) }));
|
|
616
623
|
});
|
|
617
624
|
AccordionTrigger.displayName = "AccordionTrigger";
|
|
618
625
|
|
|
619
|
-
var style$
|
|
626
|
+
var style$a = {"root":"accordion-item-module__root__1Yk4f"};
|
|
620
627
|
|
|
621
628
|
var AccordionItem = React.forwardRef(function (_a, forwardedRef) {
|
|
622
629
|
var value = _a.value, trigger = _a.trigger, triggerClassName = _a.triggerClassName, children = _a.children, dataTest = _a.dataTest, _b = _a.hasChildrenPadding, hasChildrenPadding = _b === void 0 ? true : _b;
|
|
623
|
-
return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$
|
|
630
|
+
return (jsxRuntime.jsxs(RAccordion__namespace.Item, { className: style$a.root, value: value, ref: forwardedRef, "data-test": dataTest, children: [jsxRuntime.jsx(AccordionTrigger, { className: triggerClassName, children: trigger }), jsxRuntime.jsx(AccordionContent, { hasChildrenPadding: hasChildrenPadding, children: children })] }));
|
|
624
631
|
});
|
|
625
632
|
AccordionItem.displayName = "AccordionItem";
|
|
626
633
|
|
|
627
634
|
var Accordion = { Root: AccordionRoot, Item: AccordionItem };
|
|
628
635
|
|
|
629
|
-
var style$
|
|
636
|
+
var style$9 = {"modal":"modal-module__modal__X2VmM","content":"modal-module__content__Hrybc","header":"modal-module__header__vvu8s","backdrop":"modal-module__backdrop__yqE8l","body":"modal-module__body__ax2L0","bodyWrapper":"modal-module__bodyWrapper__uj88Q","actions":"modal-module__actions__uueCa"};
|
|
630
637
|
|
|
631
638
|
var ModalElement = function (_a) {
|
|
632
639
|
var id = _a.id, children = _a.children, className = _a.className, _b = _a.title, title = _b === void 0 ? "No title" : _b, _c = _a.size, size = _c === void 0 ? "default" : _c, onClose = _a.onClose, _d = _a.actions, actions = _d === void 0 ? [] : _d, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? true : _e, _f = _a.isScrollable, isScrollable = _f === void 0 ? false : _f, visible = _a.visible, attributes = __rest(_a, ["id", "children", "className", "title", "size", "onClose", "actions", "isFullWidth", "isScrollable", "visible"]);
|
|
633
640
|
var modalRef = React.useRef(null);
|
|
634
|
-
return (jsxRuntime.jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$
|
|
641
|
+
return (jsxRuntime.jsxs("dialog", __assign({ ref: modalRef, "aria-modal": "true", "aria-labelledby": id, className: clsx(style$9.modal, className), "data-test": "Modal__Div__content", "data-visible": visible, "data-is-not-closable": !onClose }, attributes, { children: [jsxRuntime.jsx("dialog", { className: style$9.backdrop }), jsxRuntime.jsx("div", { className: style$9.content, "data-size": size, "data-shadow-direction": "top", "data-is-full-width": isFullWidth, "data-is-scrollable": isScrollable, children: jsxRuntime.jsxs("div", { className: style$9.bodyWrapper, children: __spreadArray([title && (jsxRuntime.jsxs("div", { className: style$9.header, children: [jsxRuntime.jsx("h2", { id: id, children: title }), jsxRuntime.jsx(SvgCross, { "data-icon": true, onClick: onClose })] })), jsxRuntime.jsx("div", { className: style$9.body, children: children })], actions.map(function (i, idx) { return jsxRuntime.jsx("div", { className: style$9.actions, children: i }, "".concat(id, "_").concat(idx)); }), true) }) })] })));
|
|
635
642
|
};
|
|
636
643
|
var Modal = function (_a) {
|
|
637
644
|
var visible = _a.visible, props = __rest(_a, ["visible"]);
|
|
@@ -662,30 +669,23 @@ var InfoModal = function (_a) {
|
|
|
662
669
|
return (jsxRuntime.jsx(Modal, __assign({ onClose: onClose, actions: actions, size: "small" }, props, { children: children })));
|
|
663
670
|
};
|
|
664
671
|
|
|
665
|
-
var style$
|
|
672
|
+
var style$8 = {"content":"dropdown-menu-module__content__sSYNC","arrow":"dropdown-menu-module__arrow__AFHzK","trigger":"dropdown-menu-module__trigger__GLDRV"};
|
|
666
673
|
|
|
667
674
|
var DropdownMenu$1 = function (_a) {
|
|
668
675
|
var text = _a.text, children = _a.children, Icon = _a.icon, disabled = _a.disabled, body = _a.body, variant = _a.variant, rest = __rest(_a, ["text", "children", "icon", "disabled", "body", "variant"]);
|
|
669
676
|
var defaultBody = !text ? Icon && jsxRuntime.jsx(Icon, { viewBox: "0 0 24 24" }) : jsxRuntime.jsx(Button, { icon: Icon, variant: variant, children: text });
|
|
670
|
-
return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$
|
|
677
|
+
return (jsxRuntime.jsxs(RDropdownMenu__namespace.Root, { children: [jsxRuntime.jsx(RDropdownMenu__namespace.Trigger, __assign({}, rest, { asChild: !!text, className: style$8.trigger, disabled: disabled, children: body ? body : defaultBody })), jsxRuntime.jsx(RDropdownMenu__namespace.Portal, { children: jsxRuntime.jsxs(RDropdownMenu__namespace.Content, { className: style$8.content, sideOffset: 5, children: [children, jsxRuntime.jsx(RDropdownMenu__namespace.Arrow, { className: style$8.arrow })] }) })] }));
|
|
671
678
|
};
|
|
672
679
|
|
|
673
|
-
var style$
|
|
680
|
+
var style$7 = {"root":"dropdown-menu-item-module__root__zs510"};
|
|
674
681
|
|
|
675
682
|
var DropdownMenuItem = function (_a) {
|
|
676
683
|
var children = _a.children, disabled = _a.disabled, onClick = _a.onClick, rest = __rest(_a, ["children", "disabled", "onClick"]);
|
|
677
|
-
return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$
|
|
684
|
+
return (jsxRuntime.jsx(RDropdownMenu__namespace.Item, __assign({ className: style$7.root, onClick: !disabled ? onClick : undefined, disabled: disabled }, rest, { children: children })));
|
|
678
685
|
};
|
|
679
686
|
|
|
680
687
|
var DropdownMenu = { Root: DropdownMenu$1, Item: DropdownMenuItem };
|
|
681
688
|
|
|
682
|
-
var style$7 = {"trigger":"tooltip-module__trigger__8Eylk","content":"tooltip-module__content__9x6LA","title":"tooltip-module__title__Vkj38","icon":"tooltip-module__icon__4oV3Q","body":"tooltip-module__body__TQO-V","description":"tooltip-module__description__WSiRK","arrow":"tooltip-module__arrow__7pf9p"};
|
|
683
|
-
|
|
684
|
-
var Tooltip = function (_a) {
|
|
685
|
-
var children = _a.children, title = _a.title, description = _a.description;
|
|
686
|
-
return (jsxRuntime.jsx(RTooltip__namespace.Provider, { children: jsxRuntime.jsxs(RTooltip__namespace.Root, { children: [jsxRuntime.jsx(RTooltip__namespace.Trigger, { className: style$7.trigger, asChild: true, children: children }), jsxRuntime.jsx(RTooltip__namespace.Portal, { children: jsxRuntime.jsxs(RTooltip__namespace.Content, { className: style$7.content, sideOffset: 2, children: [jsxRuntime.jsx(SvgInfo, { className: style$7.icon, width: 20, height: 20 }), jsxRuntime.jsxs("div", { className: style$7.body, children: [jsxRuntime.jsx("span", { className: style$7.title, children: title }), description && jsxRuntime.jsx("span", { className: style$7.description, children: description })] }), jsxRuntime.jsx(RTooltip__namespace.Arrow, { className: style$7.arrow })] }) })] }) }));
|
|
687
|
-
};
|
|
688
|
-
|
|
689
689
|
var isEnter = function (e) { return e.key === "Enter"; };
|
|
690
690
|
var dateFormatOptions = {
|
|
691
691
|
year: "numeric",
|