@dreamcommerce/aurora 2.8.12 → 2.9.0-10

package/build/cjs/packages/aurora/src/assets/icon_list_arrow_down.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const IconListArrowDown = () => {
+    return (React__default['default'].createElement("svg", { width: "6", height: "4", viewBox: "0 0 6 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React__default['default'].createElement("path", { id: "Polygon 1", d: "M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z", fill: "#5C657E" })));
+};
+
+exports.IconListArrowDown = IconListArrowDown;
+//# sourceMappingURL=icon_list_arrow_down.js.map

package/build/cjs/packages/aurora/src/assets/icon_list_arrow_down.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/dropdown/components/custom_label.js

@@ -14,9 +14,11 @@ const CustomLabel = ({ children, disabled }) => {
     const { toggleDropdown, isOpen } = index.useDropdownContext();
     const ref = React.useRef(null);
     use_keyboard_open_close.useKeyboardOpenClose(toggleDropdown, isOpen, ref);
-    const handleOnClick = () => {
+    const handleOnClick = (ev) => {
         if (disabled)
             return;
+        ev.preventDefault();
+        ev.stopPropagation();
         toggleDropdown && toggleDropdown();
     };
     return (React__default['default'].createElement("div", { onClick: handleOnClick, ref: ref, tabIndex: 0 }, children));

package/build/cjs/packages/aurora/src/components/dropdown/components/custom_label.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js

@@ -10,5 +10,6 @@ const useKeyboardOpenClose = (toggleDropdown, isOpen, ref) => {
     use_key_down.useKeyDown(['Esc|Escape'], () => isOpen && (toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown()), ref);
 };
 
+exports.default = useKeyboardOpenClose;
 exports.useKeyboardOpenClose = useKeyboardOpenClose;
 //# sourceMappingURL=use_keyboard_open_close.js.map

package/build/cjs/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/stack/index.js

@@ -13,11 +13,24 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-const Stack = ({ children, spacing = 0, className = '', direction = stack_constants.STACK_DIRECTIONS.row, justify = stack_constants.STACK_JUSTIFICATIONS.flexStart, align = stack_constants.STACK_ALIGNMENTS.normal, wrap = stack_constants.STACK_WRAP.nowrap, as = 'div', inline = false, style = {} }) => {
+const Stack = ({ children, spacing = 0, className = '', direction = stack_constants.STACK_DIRECTIONS.row, justify = stack_constants.STACK_JUSTIFICATIONS.flexStart, align = stack_constants.STACK_ALIGNMENTS.normal, wrap = stack_constants.STACK_WRAP.nowrap, as = 'div', inline = false, style = {}, onMouseLeave, onMouseEnter, attributes, onClick }) => {
     const stackClass = classnames__default['default'](main_module['default'][css_classes.cssStack], main_module['default'][stack_constants.STACK_DIRECTIONS_TO_CSS_CLASSES_MAP[direction]], main_module['default'][stack_constants.STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP[align]], main_module['default'][stack_constants.STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP[justify]], main_module['default'][stack_constants.STACK_WRAP_TO_CSS_CLASSES_MAP[wrap]], inline ? main_module['default'][stack_constants.STACK_CSS_CLASSES.inline] : '', className);
+    const stackElRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!stackElRef.current || !attributes)
+            return;
+        Object.entries(attributes).forEach(([key, value]) => {
+            var _a;
+            (_a = stackElRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute(key, value);
+        });
+    }, []);
     return React__default['default'].createElement(as, {
+        ref: stackElRef,
         className: `${stackClass}`,
-        style: { gap: `${spacing}px`, ...style }
+        style: { gap: `${spacing}px`, ...style },
+        onMouseEnter,
+        onMouseLeave,
+        onClick
     }, children);
 };
 

package/build/cjs/packages/aurora/src/components/stack/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/tree/components/tree_node.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classnames = require('classnames');
+var reactTransitionGroup = require('react-transition-group');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/tree/main.module.less.js');
+var tree_hook = require('../hooks/tree_hook.js');
+var tree_node_hook = require('../hooks/tree_node_hook.js');
+var icon_list_arrow_down = require('../../../assets/icon_list_arrow_down.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponent, ...rest }) => {
+    const treeApi = tree_hook.useTree();
+    const node = tree_node_hook.useTreeNode(id, rest);
+    const nodeChildrenRef = React.useRef(null);
+    if (!node)
+        return null;
+    const toggleNode = () => {
+        treeApi.toggleNode(node.id);
+    };
+    const Label = LabelComponent ? (LabelComponent === null || LabelComponent === void 0 ? void 0 : LabelComponent({ node, isLeaf: !children })) : (React__default['default'].createElement("span", { tabIndex: !children ? 0 : -1, className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabelContent], css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabelContent) }, node.label ? node.label : node.id));
+    const Content = ContentComponent ? (ContentComponent === null || ContentComponent === void 0 ? void 0 : ContentComponent({ node, toggleNode, isLeaf: !children })) : (React__default['default'].createElement("div", { className: classnames__default['default'](css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabel, main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeLabel]) },
+        React__default['default'].createElement("button", { className: classnames__default['default'](css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn, main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn], {
+                [css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]: node.expanded,
+                [main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]]: node.expanded
+            }), onClick: toggleNode },
+            React__default['default'].createElement("span", { className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnIcon], css_classes.TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnIcon) },
+                React__default['default'].createElement(icon_list_arrow_down.IconListArrowDown, null))),
+        Label));
+    return (React__default['default'].createElement("li", { role: "treeitem", "aria-expanded": node.expanded, className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNode], css_classes.TREE_NODE_CSS_CLASSES.treeNode, cssClassNames, {
+            [css_classes.TREE_NODE_CSS_CLASSES.treeNodeExpanded]: node.expanded
+        }) },
+        children ? Content : Label,
+        children ? (React__default['default'].createElement(reactTransitionGroup.CSSTransition, { unmountOnExit: true, in: node.expanded, timeout: 250, classNames: {
+                enter: main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeChildrenEnter],
+                enterActive: main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeChildrenEnterActive],
+                exit: main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeChildrenExit],
+                exitActive: main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeChildrenExitActive],
+                exitDone: main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeChildrenExitDone]
+            } },
+            React__default['default'].createElement("ul", { className: classnames__default['default'](main_module['default'][css_classes.TREE_NODE_CSS_CLASSES.treeNodeChildren], css_classes.TREE_NODE_CSS_CLASSES.treeNodeChildren), ref: nodeChildrenRef }, children))) : null));
+};
+
+exports.TreeNode = TreeNode;
+exports.default = TreeNode;
+//# sourceMappingURL=tree_node.js.map

package/build/cjs/packages/aurora/src/components/tree/components/tree_node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/tree/context/tree_context.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const TreeContext = React.createContext({
+    addNode: () => { },
+    updateNode: () => { },
+    removeNode: () => { },
+    toggleNode: () => { },
+    getNode: () => undefined,
+    hasNode: () => false
+});
+const TreeContextProvider = TreeContext.Provider;
+
+exports.TreeContext = TreeContext;
+exports.TreeContextProvider = TreeContextProvider;
+//# sourceMappingURL=tree_context.js.map

package/build/cjs/packages/aurora/src/components/tree/context/tree_context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/tree/context/tree_provider.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var tree_context = require('./tree_context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const TreeProvider = ({ children }) => {
+    const [nodes, setNodes] = React.useState([]);
+    const value = {
+        addNode(node) {
+            setNodes((nodes) => [...nodes, node]);
+        },
+        updateNode(nodeId, node) {
+            setNodes((nodes) => nodes.map((n) => (n.id === nodeId ? { ...n, ...node } : n)));
+        },
+        getNode(nodeId) {
+            return nodes.find((node) => node.id === nodeId);
+        },
+        removeNode(nodeId) {
+            setNodes((nodes) => nodes.filter((node) => node.id !== nodeId));
+        },
+        toggleNode(nodeId) {
+            setNodes((nodes) => nodes.map((node) => (node.id === nodeId ? { ...node, expanded: !node.expanded } : node)));
+        },
+        hasNode(nodeId) {
+            return !!nodes.find((node) => node.id === nodeId);
+        }
+    };
+    return React__default['default'].createElement(tree_context.TreeContextProvider, { value: value }, children);
+};
+
+exports.TreeProvider = TreeProvider;
+//# sourceMappingURL=tree_provider.js.map

package/build/cjs/packages/aurora/src/components/tree/context/tree_provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/tree/css_classes.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const baseCssClass = 'tree';
+const TREE_CSS_CLASSES = {
+    tree: baseCssClass,
+    treeNode: `${baseCssClass}__node`
+};
+const treeNodeBaseCssClass = `tree-node`;
+const TREE_NODE_CSS_CLASSES = {
+    treeNode: treeNodeBaseCssClass,
+    treeNodeTogglerBtn: `${treeNodeBaseCssClass}__toggler-btn`,
+    treeNodeTogglerBtnExpanded: `${treeNodeBaseCssClass}__toggler-btn_expanded`,
+    treeNodeTogglerBtnIcon: `${treeNodeBaseCssClass}__toggler-btn-icon`,
+    treeNodeLabelContent: `${treeNodeBaseCssClass}__label-content`,
+    treeNodeLabel: `${treeNodeBaseCssClass}__label`,
+    treeNodeChildren: `${treeNodeBaseCssClass}__children`,
+    treeNodeChildrenEnter: `${treeNodeBaseCssClass}__children-enter`,
+    treeNodeChildrenEnterActive: `${treeNodeBaseCssClass}__children-enter-active`,
+    treeNodeChildrenExit: `${treeNodeBaseCssClass}__children-exit`,
+    treeNodeChildrenExitActive: `${treeNodeBaseCssClass}__children-exit-active`,
+    treeNodeChildrenExitDone: `${treeNodeBaseCssClass}__children-exit-done`,
+    treeNodeExpanded: `${treeNodeBaseCssClass}_expanded`,
+    treeNodeDisabled: `${treeNodeBaseCssClass}_disabled`,
+    treeNodeFocused: `${treeNodeBaseCssClass}_focused`
+};
+
+exports.TREE_CSS_CLASSES = TREE_CSS_CLASSES;
+exports.TREE_NODE_CSS_CLASSES = TREE_NODE_CSS_CLASSES;
+//# sourceMappingURL=css_classes.js.map

package/build/cjs/packages/aurora/src/components/tree/css_classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/tree/hooks/tree_hook.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var tree_context = require('../context/tree_context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const useTree = () => {
+    const context = React__default['default'].useContext(tree_context.TreeContext);
+    if (!context) {
+        throw new Error('useTree must be used within a TreeContextProvider');
+    }
+    return context;
+};
+
+exports.useTree = useTree;
+//# sourceMappingURL=tree_hook.js.map

package/build/cjs/packages/aurora/src/components/tree/hooks/tree_hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/tree/hooks/tree_node_hook.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var tree_hook = require('./tree_hook.js');
+
+const useTreeNode = (nodeId, props) => {
+    const treeApi = tree_hook.useTree();
+    React.useEffect(() => {
+        if (treeApi.hasNode(nodeId) && props)
+            treeApi.updateNode(nodeId, props);
+    }, [props === null || props === void 0 ? void 0 : props.expanded]);
+    React.useEffect(() => {
+        if (!treeApi.hasNode(nodeId))
+            treeApi.addNode({ id: nodeId, ...props });
+        return () => treeApi.removeNode(nodeId);
+    }, []);
+    return treeApi.getNode(nodeId);
+};
+
+exports.useTreeNode = useTreeNode;
+//# sourceMappingURL=tree_node_hook.js.map

package/build/cjs/packages/aurora/src/components/tree/hooks/tree_node_hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/tree/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classnames = require('classnames');
+var tree_provider = require('./context/tree_provider.js');
+var css_classes = require('./css_classes.js');
+var main_module = require('../../css/tree/main.module.less.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+const Tree = ({ children, cssClassNames }) => {
+    return (React__default['default'].createElement(tree_provider.TreeProvider, null,
+        React__default['default'].createElement("ul", { className: classnames__default['default'](main_module['default'][css_classes.TREE_CSS_CLASSES.tree], css_classes.TREE_CSS_CLASSES.tree, cssClassNames) }, children)));
+};
+
+exports.Tree = Tree;
+exports.default = Tree;
+//# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/components/tree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/css/tree/main.module.less.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".main-module_tree__3D4e3 {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.main-module_tree-node__toggler-btn__s9KoL {\n  display: flex;\n  padding: 0 4px 8px 4px;\n  cursor: pointer;\n}\n.main-module_tree-node__toggler-btn__s9KoL svg {\n  transition: rotate 250ms ease-out;\n  rotate: -95deg;\n}\n.main-module_tree-node__toggler-btn_expanded__17Joe svg {\n  rotate: 0deg;\n}\n.main-module_tree-node__label__DT728 {\n  display: flex;\n  align-items: center;\n  background: none;\n  gap: 8px;\n}\n.main-module_tree-node__children__QyEOR {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 8px;\n  transform-origin: top center;\n  transition: opacity 250ms ease-out, scale 250ms ease-out;\n  padding-left: 16px;\n  list-style: none;\n  will-change: true;\n}\n.main-module_tree-node__children-enter__vxFO- {\n  opacity: 0;\n  scale: 1 0;\n}\n.main-module_tree-node__children-enter-active__T6XIS {\n  opacity: 1;\n  scale: 1 1;\n}\n.main-module_tree-node__children-exit__1NXHe {\n  opacity: 1;\n  scale: 1 1;\n}\n.main-module_tree-node__children-exit-active__vdqAI {\n  opacity: 0;\n  scale: 1 0;\n}\n";
+var cssClasses = {"tree":"main-module_tree__3D4e3","tree-node__toggler-btn":"main-module_tree-node__toggler-btn__s9KoL","tree-node__toggler-btn_expanded":"main-module_tree-node__toggler-btn_expanded__17Joe","tree-node__label":"main-module_tree-node__label__DT728","tree-node__children":"main-module_tree-node__children__QyEOR","tree-node__children-enter":"main-module_tree-node__children-enter__vxFO-","tree-node__children-enter-active":"main-module_tree-node__children-enter-active__T6XIS","tree-node__children-exit":"main-module_tree-node__children-exit__1NXHe","tree-node__children-exit-active":"main-module_tree-node__children-exit-active__vdqAI"};
+styleInject_es['default'](css_248z);
+
+exports.default = cssClasses;
+//# sourceMappingURL=main.module.less.js.map

package/build/cjs/packages/aurora/src/css/tree/main.module.less.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/index.js

@@ -81,6 +81,8 @@ var tabs_wrapper = require('./components/tabs/components/tabs_wrapper.js');
 var index$2 = require('./components/tooltip/index.js');
 var index$J = require('./components/with_loader/index.js');
 var values_syncer = require('./components/controls/components/values_syncer.js');
+var index$N = require('./components/tree/index.js');
+var tree_node = require('./components/tree/components/tree_node.js');
 
 
 
@@ -165,4 +167,6 @@ exports.TabsWrapper = tabs_wrapper['default'];
 exports.Tooltip = index$2['default'];
 exports.WithLoader = index$J['default'];
 exports.ValuesSyncer = values_syncer['default'];
+exports.Tree = index$N.Tree;
+exports.TreeNode = tree_node.TreeNode;
 //# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/assets/icon_list_arrow_down.d.ts

@@ -0,0 +1 @@
+export declare const IconListArrowDown: () => JSX.Element;

package/build/esm/packages/aurora/src/assets/icon_list_arrow_down.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const IconListArrowDown = () => {
+    return (React.createElement("svg", { width: "6", height: "4", viewBox: "0 0 6 4", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { id: "Polygon 1", d: "M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z", fill: "#5C657E" })));
+};
+
+export { IconListArrowDown };
+//# sourceMappingURL=icon_list_arrow_down.js.map

package/build/esm/packages/aurora/src/assets/icon_list_arrow_down.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/components/custom_label.js

@@ -6,9 +6,11 @@ const CustomLabel = ({ children, disabled }) => {
     const { toggleDropdown, isOpen } = useDropdownContext();
     const ref = useRef(null);
     useKeyboardOpenClose(toggleDropdown, isOpen, ref);
-    const handleOnClick = () => {
+    const handleOnClick = (ev) => {
         if (disabled)
             return;
+        ev.preventDefault();
+        ev.stopPropagation();
         toggleDropdown && toggleDropdown();
     };
     return (React.createElement("div", { onClick: handleOnClick, ref: ref, tabIndex: 0 }, children));

package/build/esm/packages/aurora/src/components/dropdown/components/custom_label.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.d.ts

@@ -1,2 +1,3 @@
 import { RefObject } from 'react';
 export declare const useKeyboardOpenClose: (toggleDropdown?: () => void, isOpen?: boolean, ref?: RefObject<HTMLElement>) => void;
+export default useKeyboardOpenClose;

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js

@@ -6,5 +6,6 @@ const useKeyboardOpenClose = (toggleDropdown, isOpen, ref) => {
     useKeyDown(['Esc|Escape'], () => isOpen && (toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown()), ref);
 };
 
+export default useKeyboardOpenClose;
 export { useKeyboardOpenClose };
 //# sourceMappingURL=use_keyboard_open_close.js.map

package/build/esm/packages/aurora/src/components/dropdown/hooks/use_keyboard_open_close.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/stack/index.js

@@ -1,14 +1,27 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import { STACK_DIRECTIONS, STACK_JUSTIFICATIONS, STACK_ALIGNMENTS, STACK_WRAP, STACK_DIRECTIONS_TO_CSS_CLASSES_MAP, STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP, STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP, STACK_WRAP_TO_CSS_CLASSES_MAP, STACK_CSS_CLASSES } from './stack_constants.js';
 import cssClasses from '../../css/stack/main.module.less.js';
 import { cssStack } from './css_classes.js';
 
-const Stack = ({ children, spacing = 0, className = '', direction = STACK_DIRECTIONS.row, justify = STACK_JUSTIFICATIONS.flexStart, align = STACK_ALIGNMENTS.normal, wrap = STACK_WRAP.nowrap, as = 'div', inline = false, style = {} }) => {
+const Stack = ({ children, spacing = 0, className = '', direction = STACK_DIRECTIONS.row, justify = STACK_JUSTIFICATIONS.flexStart, align = STACK_ALIGNMENTS.normal, wrap = STACK_WRAP.nowrap, as = 'div', inline = false, style = {}, onMouseLeave, onMouseEnter, attributes, onClick }) => {
     const stackClass = classnames(cssClasses[cssStack], cssClasses[STACK_DIRECTIONS_TO_CSS_CLASSES_MAP[direction]], cssClasses[STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP[align]], cssClasses[STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP[justify]], cssClasses[STACK_WRAP_TO_CSS_CLASSES_MAP[wrap]], inline ? cssClasses[STACK_CSS_CLASSES.inline] : '', className);
+    const stackElRef = useRef(null);
+    useEffect(() => {
+        if (!stackElRef.current || !attributes)
+            return;
+        Object.entries(attributes).forEach(([key, value]) => {
+            var _a;
+            (_a = stackElRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute(key, value);
+        });
+    }, []);
     return React.createElement(as, {
+        ref: stackElRef,
         className: `${stackClass}`,
-        style: { gap: `${spacing}px`, ...style }
+        style: { gap: `${spacing}px`, ...style },
+        onMouseEnter,
+        onMouseLeave,
+        onClick
     }, children);
 };
 

package/build/esm/packages/aurora/src/components/stack/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/stack/stack_types.d.ts

@@ -12,6 +12,10 @@ export declare type TStackProps = {
     as?: string;
     inline?: boolean;
     style?: Record<any, any>;
+    onMouseEnter?: (event: React.MouseEvent) => void;
+    onMouseLeave?: (event: React.MouseEvent) => void;
+    attributes?: Record<string, any>;
+    onClick?: (event: React.MouseEvent) => void;
 };
 export declare type TStackJustify = Any.Keys<typeof STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP>;
 export declare type TStackDirection = Any.Keys<typeof STACK_DIRECTIONS_TO_CSS_CLASSES_MAP>;

package/build/esm/packages/aurora/src/components/tree/components/tree_node.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TPropsWithChildren } from "../../../typings/general";
+import { ITreeNode } from "../context/tree_context";
+declare type TTreeContentComponentProps = {
+    node: ITreeNode;
+    toggleNode: () => void;
+    isLeaf: boolean;
+};
+declare type TTreeLabelComponentProps = {
+    node: ITreeNode;
+    isLeaf: boolean;
+};
+declare type TTreeNodeProps = TPropsWithChildren<ITreeNode & {
+    cssClassNames?: string;
+    collapseIcon?: React.ReactNode;
+    expandIcon?: React.ReactNode;
+    LabelComponent?: (props: TTreeLabelComponentProps) => React.ReactNode;
+    ContentComponent?: (props: TTreeContentComponentProps) => React.ReactNode;
+}>;
+export declare const TreeNode: ({ children, id, cssClassNames, ContentComponent, LabelComponent, ...rest }: TTreeNodeProps) => JSX.Element | null;
+export default TreeNode;

package/build/esm/packages/aurora/src/components/tree/components/tree_node.js

@@ -0,0 +1,44 @@
+import React, { useRef } from 'react';
+import classnames from 'classnames';
+import { CSSTransition } from 'react-transition-group';
+import { TREE_NODE_CSS_CLASSES } from '../css_classes.js';
+import cssClasses from '../../../css/tree/main.module.less.js';
+import { useTree } from '../hooks/tree_hook.js';
+import { useTreeNode } from '../hooks/tree_node_hook.js';
+import { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
+
+const TreeNode = ({ children, id, cssClassNames, ContentComponent, LabelComponent, ...rest }) => {
+    const treeApi = useTree();
+    const node = useTreeNode(id, rest);
+    const nodeChildrenRef = useRef(null);
+    if (!node)
+        return null;
+    const toggleNode = () => {
+        treeApi.toggleNode(node.id);
+    };
+    const Label = LabelComponent ? (LabelComponent === null || LabelComponent === void 0 ? void 0 : LabelComponent({ node, isLeaf: !children })) : (React.createElement("span", { tabIndex: !children ? 0 : -1, className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNodeLabelContent], TREE_NODE_CSS_CLASSES.treeNodeLabelContent) }, node.label ? node.label : node.id));
+    const Content = ContentComponent ? (ContentComponent === null || ContentComponent === void 0 ? void 0 : ContentComponent({ node, toggleNode, isLeaf: !children })) : (React.createElement("div", { className: classnames(TREE_NODE_CSS_CLASSES.treeNodeLabel, cssClasses[TREE_NODE_CSS_CLASSES.treeNodeLabel]) },
+        React.createElement("button", { className: classnames(TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn, cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerBtn], {
+                [TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]: node.expanded,
+                [cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnExpanded]]: node.expanded
+            }), onClick: toggleNode },
+            React.createElement("span", { className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnIcon], TREE_NODE_CSS_CLASSES.treeNodeTogglerBtnIcon) },
+                React.createElement(IconListArrowDown, null))),
+        Label));
+    return (React.createElement("li", { role: "treeitem", "aria-expanded": node.expanded, className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNode], TREE_NODE_CSS_CLASSES.treeNode, cssClassNames, {
+            [TREE_NODE_CSS_CLASSES.treeNodeExpanded]: node.expanded
+        }) },
+        children ? Content : Label,
+        children ? (React.createElement(CSSTransition, { unmountOnExit: true, in: node.expanded, timeout: 250, classNames: {
+                enter: cssClasses[TREE_NODE_CSS_CLASSES.treeNodeChildrenEnter],
+                enterActive: cssClasses[TREE_NODE_CSS_CLASSES.treeNodeChildrenEnterActive],
+                exit: cssClasses[TREE_NODE_CSS_CLASSES.treeNodeChildrenExit],
+                exitActive: cssClasses[TREE_NODE_CSS_CLASSES.treeNodeChildrenExitActive],
+                exitDone: cssClasses[TREE_NODE_CSS_CLASSES.treeNodeChildrenExitDone]
+            } },
+            React.createElement("ul", { className: classnames(cssClasses[TREE_NODE_CSS_CLASSES.treeNodeChildren], TREE_NODE_CSS_CLASSES.treeNodeChildren), ref: nodeChildrenRef }, children))) : null));
+};
+
+export default TreeNode;
+export { TreeNode };
+//# sourceMappingURL=tree_node.js.map

package/build/esm/packages/aurora/src/components/tree/components/tree_node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tree/context/tree_context.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare type ITreeNode = {
+    id: string;
+    label?: string;
+    expanded?: boolean;
+    disabled?: boolean;
+};
+export interface ITreeContext {
+    addNode(node: ITreeNode): void;
+    updateNode(nodeId: string, node: Partial<ITreeNode>): void;
+    hasNode(nodeId: string): boolean;
+    getNode(nodeId: string): ITreeNode | undefined;
+    removeNode(nodeId: string): void;
+    toggleNode(nodeId: string): void;
+}
+export declare const TreeContext: import("react").Context<ITreeContext>;
+export declare const TreeContextProvider: import("react").Provider<ITreeContext>;

package/build/esm/packages/aurora/src/components/tree/context/tree_context.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+const TreeContext = createContext({
+    addNode: () => { },
+    updateNode: () => { },
+    removeNode: () => { },
+    toggleNode: () => { },
+    getNode: () => undefined,
+    hasNode: () => false
+});
+const TreeContextProvider = TreeContext.Provider;
+
+export { TreeContext, TreeContextProvider };
+//# sourceMappingURL=tree_context.js.map

package/build/esm/packages/aurora/src/components/tree/context/tree_context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tree/context/tree_provider.d.ts

@@ -0,0 +1,2 @@
+import { TPropsWithChildren } from "../../../typings/general";
+export declare const TreeProvider: ({ children }: TPropsWithChildren) => JSX.Element;

package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { TreeContextProvider } from './tree_context.js';
+
+const TreeProvider = ({ children }) => {
+    const [nodes, setNodes] = useState([]);
+    const value = {
+        addNode(node) {
+            setNodes((nodes) => [...nodes, node]);
+        },
+        updateNode(nodeId, node) {
+            setNodes((nodes) => nodes.map((n) => (n.id === nodeId ? { ...n, ...node } : n)));
+        },
+        getNode(nodeId) {
+            return nodes.find((node) => node.id === nodeId);
+        },
+        removeNode(nodeId) {
+            setNodes((nodes) => nodes.filter((node) => node.id !== nodeId));
+        },
+        toggleNode(nodeId) {
+            setNodes((nodes) => nodes.map((node) => (node.id === nodeId ? { ...node, expanded: !node.expanded } : node)));
+        },
+        hasNode(nodeId) {
+            return !!nodes.find((node) => node.id === nodeId);
+        }
+    };
+    return React.createElement(TreeContextProvider, { value: value }, children);
+};
+
+export { TreeProvider };
+//# sourceMappingURL=tree_provider.js.map

package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tree/css_classes.d.ts

@@ -0,0 +1,21 @@
+export declare const TREE_CSS_CLASSES: {
+    readonly tree: "tree";
+    readonly treeNode: "tree__node";
+};
+export declare const TREE_NODE_CSS_CLASSES: {
+    readonly treeNode: "tree-node";
+    readonly treeNodeTogglerBtn: "tree-node__toggler-btn";
+    readonly treeNodeTogglerBtnExpanded: "tree-node__toggler-btn_expanded";
+    readonly treeNodeTogglerBtnIcon: "tree-node__toggler-btn-icon";
+    readonly treeNodeLabelContent: "tree-node__label-content";
+    readonly treeNodeLabel: "tree-node__label";
+    readonly treeNodeChildren: "tree-node__children";
+    readonly treeNodeChildrenEnter: "tree-node__children-enter";
+    readonly treeNodeChildrenEnterActive: "tree-node__children-enter-active";
+    readonly treeNodeChildrenExit: "tree-node__children-exit";
+    readonly treeNodeChildrenExitActive: "tree-node__children-exit-active";
+    readonly treeNodeChildrenExitDone: "tree-node__children-exit-done";
+    readonly treeNodeExpanded: "tree-node_expanded";
+    readonly treeNodeDisabled: "tree-node_disabled";
+    readonly treeNodeFocused: "tree-node_focused";
+};

package/build/esm/packages/aurora/src/components/tree/css_classes.js

@@ -0,0 +1,26 @@
+const baseCssClass = 'tree';
+const TREE_CSS_CLASSES = {
+    tree: baseCssClass,
+    treeNode: `${baseCssClass}__node`
+};
+const treeNodeBaseCssClass = `tree-node`;
+const TREE_NODE_CSS_CLASSES = {
+    treeNode: treeNodeBaseCssClass,
+    treeNodeTogglerBtn: `${treeNodeBaseCssClass}__toggler-btn`,
+    treeNodeTogglerBtnExpanded: `${treeNodeBaseCssClass}__toggler-btn_expanded`,
+    treeNodeTogglerBtnIcon: `${treeNodeBaseCssClass}__toggler-btn-icon`,
+    treeNodeLabelContent: `${treeNodeBaseCssClass}__label-content`,
+    treeNodeLabel: `${treeNodeBaseCssClass}__label`,
+    treeNodeChildren: `${treeNodeBaseCssClass}__children`,
+    treeNodeChildrenEnter: `${treeNodeBaseCssClass}__children-enter`,
+    treeNodeChildrenEnterActive: `${treeNodeBaseCssClass}__children-enter-active`,
+    treeNodeChildrenExit: `${treeNodeBaseCssClass}__children-exit`,
+    treeNodeChildrenExitActive: `${treeNodeBaseCssClass}__children-exit-active`,
+    treeNodeChildrenExitDone: `${treeNodeBaseCssClass}__children-exit-done`,
+    treeNodeExpanded: `${treeNodeBaseCssClass}_expanded`,
+    treeNodeDisabled: `${treeNodeBaseCssClass}_disabled`,
+    treeNodeFocused: `${treeNodeBaseCssClass}_focused`
+};
+
+export { TREE_CSS_CLASSES, TREE_NODE_CSS_CLASSES };
+//# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/tree/css_classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tree/hooks/tree_hook.d.ts

@@ -0,0 +1 @@
+export declare const useTree: () => import("../context/tree_context").ITreeContext;

package/build/esm/packages/aurora/src/components/tree/hooks/tree_hook.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TreeContext } from '../context/tree_context.js';
+
+const useTree = () => {
+    const context = React.useContext(TreeContext);
+    if (!context) {
+        throw new Error('useTree must be used within a TreeContextProvider');
+    }
+    return context;
+};
+
+export { useTree };
+//# sourceMappingURL=tree_hook.js.map

package/build/esm/packages/aurora/src/components/tree/hooks/tree_hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.d.ts

@@ -0,0 +1,2 @@
+import { ITreeNode } from "../context/tree_context";
+export declare const useTreeNode: (nodeId: string, props?: Partial<ITreeNode>) => ITreeNode | undefined;

package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useTree } from './tree_hook.js';
+
+const useTreeNode = (nodeId, props) => {
+    const treeApi = useTree();
+    useEffect(() => {
+        if (treeApi.hasNode(nodeId) && props)
+            treeApi.updateNode(nodeId, props);
+    }, [props === null || props === void 0 ? void 0 : props.expanded]);
+    useEffect(() => {
+        if (!treeApi.hasNode(nodeId))
+            treeApi.addNode({ id: nodeId, ...props });
+        return () => treeApi.removeNode(nodeId);
+    }, []);
+    return treeApi.getNode(nodeId);
+};
+
+export { useTreeNode };
+//# sourceMappingURL=tree_node_hook.js.map

package/build/esm/packages/aurora/src/components/tree/hooks/tree_node_hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/tree/index.d.ts

@@ -0,0 +1,6 @@
+import { TPropsWithChildren } from "../../typings/general";
+declare type TTreeProps = {
+    cssClassNames?: string;
+};
+export declare const Tree: ({ children, cssClassNames }: TPropsWithChildren<TTreeProps>) => JSX.Element;
+export default Tree;

package/build/esm/packages/aurora/src/components/tree/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import classnames from 'classnames';
+import { TreeProvider } from './context/tree_provider.js';
+import { TREE_CSS_CLASSES } from './css_classes.js';
+import cssClasses from '../../css/tree/main.module.less.js';
+
+const Tree = ({ children, cssClassNames }) => {
+    return (React.createElement(TreeProvider, null,
+        React.createElement("ul", { className: classnames(cssClasses[TREE_CSS_CLASSES.tree], TREE_CSS_CLASSES.tree, cssClassNames) }, children)));
+};
+
+export default Tree;
+export { Tree };
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/tree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/css/tree/main.module.less.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".main-module_tree__3D4e3 {\n  list-style: none;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.main-module_tree-node__toggler-btn__s9KoL {\n  display: flex;\n  padding: 0 4px 8px 4px;\n  cursor: pointer;\n}\n.main-module_tree-node__toggler-btn__s9KoL svg {\n  transition: rotate 250ms ease-out;\n  rotate: -95deg;\n}\n.main-module_tree-node__toggler-btn_expanded__17Joe svg {\n  rotate: 0deg;\n}\n.main-module_tree-node__label__DT728 {\n  display: flex;\n  align-items: center;\n  background: none;\n  gap: 8px;\n}\n.main-module_tree-node__children__QyEOR {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin-top: 8px;\n  transform-origin: top center;\n  transition: opacity 250ms ease-out, scale 250ms ease-out;\n  padding-left: 16px;\n  list-style: none;\n  will-change: true;\n}\n.main-module_tree-node__children-enter__vxFO- {\n  opacity: 0;\n  scale: 1 0;\n}\n.main-module_tree-node__children-enter-active__T6XIS {\n  opacity: 1;\n  scale: 1 1;\n}\n.main-module_tree-node__children-exit__1NXHe {\n  opacity: 1;\n  scale: 1 1;\n}\n.main-module_tree-node__children-exit-active__vdqAI {\n  opacity: 0;\n  scale: 1 0;\n}\n";
+var cssClasses = {"tree":"main-module_tree__3D4e3","tree-node__toggler-btn":"main-module_tree-node__toggler-btn__s9KoL","tree-node__toggler-btn_expanded":"main-module_tree-node__toggler-btn_expanded__17Joe","tree-node__label":"main-module_tree-node__label__DT728","tree-node__children":"main-module_tree-node__children__QyEOR","tree-node__children-enter":"main-module_tree-node__children-enter__vxFO-","tree-node__children-enter-active":"main-module_tree-node__children-enter-active__T6XIS","tree-node__children-exit":"main-module_tree-node__children-exit__1NXHe","tree-node__children-exit-active":"main-module_tree-node__children-exit-active__vdqAI"};
+styleInject(css_248z);
+
+export default cssClasses;
+//# sourceMappingURL=main.module.less.js.map

package/build/esm/packages/aurora/src/css/tree/main.module.less.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/index.d.ts

@@ -105,13 +105,15 @@ import { useSearchList } from "./components/search_list/use_search_list";
 import { useToggle } from "./components/dropdown/hooks";
 import XhrImagePicker from "./components/xhr_image_picker";
 import ValuesSyncer from "./components/controls/components/values_syncer";
+import { Tree } from "./components/tree";
+import { TreeNode } from "./components/tree/components/tree_node";
 /**
  * export hooks
  */
 /**
  * export components
  */
-export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect, Label, Stack, Control, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ControlColorPicker, ControlDatepicker, ControlFilePicker, ControlXhrImagePicker, Heading, Typography, Modal, ModalProvider, AbsoluteModal, RelativeModal, TabsWrapper, Tabs, TabsItem, TabsItemList, TabsPanel, TabsPanelList, SearchList, SearchListInput, SearchListResults, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ImagePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader, useDropdownContext, FlashMessengerContext, FlashMessagesList, Link, IconTablet, IconMobile, IconLaptop, IconDesktop, IconWarning, useToggle, useSearchList, Slide, SlideWrapper, SlideHeader, SlideSubHeader, SlideContent, SlideFooter, XhrImagePicker, ValuesSyncer };
+export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect, Label, Stack, Control, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ControlColorPicker, ControlDatepicker, ControlFilePicker, ControlXhrImagePicker, Heading, Typography, Modal, ModalProvider, AbsoluteModal, RelativeModal, TabsWrapper, Tabs, TabsItem, TabsItemList, TabsPanel, TabsPanelList, SearchList, SearchListInput, SearchListResults, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ImagePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader, useDropdownContext, FlashMessengerContext, FlashMessagesList, Link, IconTablet, IconMobile, IconLaptop, IconDesktop, IconWarning, useToggle, useSearchList, Slide, SlideWrapper, SlideHeader, SlideSubHeader, SlideContent, SlideFooter, XhrImagePicker, ValuesSyncer, Tree, TreeNode };
 /**
  * export types
  */

package/build/esm/packages/aurora/src/index.js

@@ -77,4 +77,6 @@ export { default as TabsWrapper } from './components/tabs/components/tabs_wrappe
 export { default as Tooltip } from './components/tooltip/index.js';
 export { default as WithLoader } from './components/with_loader/index.js';
 export { default as ValuesSyncer } from './components/controls/components/values_syncer.js';
+export { Tree } from './components/tree/index.js';
+export { TreeNode } from './components/tree/components/tree_node.js';
 //# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/typings/general.d.ts

@@ -1,6 +1,7 @@
 import { HORIZONTAL_POSITION, VERTICAL_POSITION } from "../constants/positions";
 import { DIRECTION } from "../constants/directions";
 import { CSS_THEME_VARIABLES } from "../constants/css_theme_variables";
+import { ReactNode } from 'react';
 export declare type EnumLiteralsOf<T extends object> = T[keyof T];
 export declare type THorizontalPosition = EnumLiteralsOf<typeof HORIZONTAL_POSITION>;
 export declare type TVerticalPosition = EnumLiteralsOf<typeof VERTICAL_POSITION>;
@@ -12,3 +13,6 @@ export declare type TCssPositions = {
 };
 export declare type TDirection = EnumLiteralsOf<typeof DIRECTION>;
 export declare type TThemeColorsVariables = keyof typeof CSS_THEME_VARIABLES;
+export declare type TPropsWithChildren<P = {}> = P & {
+    children?: ReactNode;
+};

package/build/esm/packages/aurora/src/typings/general.js

@@ -1,4 +1,5 @@
 import '@auroraConstants/positions';
 import '@auroraConstants/directions';
 import '@auroraConstants/css_theme_variables';
+import 'react';
 //# sourceMappingURL=general.js.map

package/build/esm/packages/aurora/src/typings/general.js.map

@@ -1 +1 @@
-{"version":3,"file":"general.js","sourceRoot":"","sources":["../../../../../../src/typings/general.ts"],"names":[],"mappings":"AAAA,OAAuD,4BAA4B,CAAC;AAEpF,OAA0B,6BAA6B,CAAC;AACxD,OAAoC,sCAAsC,CAAC"}
+{"version":3,"file":"general.js","sourceRoot":"","sources":["../../../../../../src/typings/general.ts"],"names":[],"mappings":"AAAA,OAAuD,4BAA4B,CAAC;AAEpF,OAA0B,6BAA6B,CAAC;AACxD,OAAoC,sCAAsC,CAAC;AAC3E,OAA0B,OAAO,CAAC"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "2.8.12",
+  "version": "2.9.0-10",
   "description": "aurora",
   "author": "k0ssak",
   "license": "MIT",