@rovula/ui 0.0.48 → 0.0.49

package/dist/cjs/types/components/Tree/Tree.d.ts

@@ -1,45 +1,4 @@
-import { FC, ReactNode } from "react";
-export type TreeData = {
-    id: string;
-    title: string;
-    icon?: ReactNode;
-    children?: TreeData[];
-};
-export interface TreeItemProps extends TreeData {
-    isFirstLevel?: boolean;
-    isLastItem: boolean;
-    checkIsExpanded: (id: string) => boolean;
-    checkIsChecked: (id: string) => boolean;
-    onExpandChange?: (id: string, expanded: boolean) => void;
-    onCheckedChange?: (id: string, checked: boolean) => void;
-}
-export type TreeProps = {
-    data: TreeData[];
-    defaultExpandedId?: string[];
-    defaultCheckedId?: string[];
-    checkedId?: string[];
-    onCheckedChange?: (checkedId: string[]) => void;
-    defaultExpandAll?: boolean;
-    defaultCheckAll?: boolean;
-    hierarchicalCheck?: boolean;
-};
-export declare const Tree: FC<TreeProps>;
-/**
- * TODO
- * -----
- * - Custom style
- * - Custom icon, elm and render props -> callback with selected*expanded
- * - OnClick item
- * - OnClick expandButton
- * - disabled props
- * - right section icon
- * - props for show icon, line
- * - props for render item
- * - OnLoad mode
- * -----
- *  - props onLoad item
- *  - props for hasChildren * for check to trigger on load
- *  - animate expand
- *  - check duplicate reversive on updateChildren
- *  - write storybook
- */
+import { FC } from "react";
+import { TreeProps } from "./type";
+declare const Tree: FC<TreeProps>;
+export default Tree;

package/dist/cjs/types/components/Tree/Tree.stories.d.ts

@@ -1,5 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Tree } from "./Tree";
+import Tree from "./Tree";
 declare const meta: Meta<typeof Tree>;
 export default meta;
 export declare const Default: StoryObj<typeof Tree>;
+export declare const onClick: StoryObj<typeof Tree>;
+export declare const CustomIcon: StoryObj<typeof Tree>;
+export declare const renderRightSection: StoryObj<typeof Tree>;
+export declare const ControlShowExpandButton: StoryObj<typeof Tree>;
+export declare const Diabled: StoryObj<typeof Tree>;
+export declare const DiabledEachItem: StoryObj<typeof Tree>;
+export declare const ExpandLoadData: StoryObj<typeof Tree>;

package/dist/cjs/types/components/Tree/TreeItem.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { TreeItemProps } from "./type";
+declare const TreeItem: FC<TreeItemProps>;
+export default TreeItem;

package/dist/cjs/types/components/Tree/index.d.ts

@@ -0,0 +1,4 @@
+import Tree from "./Tree";
+import TreeItem from "./TreeItem";
+export * from "./type";
+export { Tree, TreeItem };

package/dist/cjs/types/components/Tree/type.d.ts

@@ -0,0 +1,76 @@
+import { CSSProperties, ReactNode } from "react";
+export type TreeData = {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    onClickItem?: (id: string) => void;
+    children?: TreeData[];
+    renderIcon?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+};
+export interface TreeItemProps extends TreeData {
+    isFirstLevel?: boolean;
+    isLastItem: boolean;
+    disabled?: boolean;
+    showIcon?: boolean;
+    showExpandButton?: boolean;
+    enableSeparatorLine?: boolean;
+    checkIsExpanded: (id: string) => boolean;
+    checkIsChecked: (id: string) => boolean;
+    checkIsLoading?: (id: string) => void;
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    onCheckedChange?: (id: string, checked: boolean) => void;
+    renderRightSection?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    renderElement?: (params: {
+        id: string;
+        expanded: boolean;
+        selected: boolean;
+        children: ReactNode;
+        styles: {
+            branch: CSSProperties;
+            horizontalLine: CSSProperties;
+            expandButton: CSSProperties;
+            childPadding: CSSProperties;
+        };
+        onClick?: TreeItemProps["onClickItem"];
+    }) => ReactNode;
+    renderTitle?: (params: {
+        id: string;
+        title: string;
+        expanded: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    classes?: Partial<{
+        elementWrapper: string;
+        branch: string;
+        itemWrapper: string;
+        itemContainer: string;
+        horizontalLine: string;
+        expandButton: string;
+        separatorLine: string;
+        checkbox: string;
+        item: string;
+        title: string;
+        childrenWrapper: string;
+    }>;
+}
+export interface TreeProps extends Pick<TreeItemProps, "renderIcon" | "renderRightSection" | "renderElement" | "renderTitle" | "showIcon" | "disabled" | "enableSeparatorLine" | "classes"> {
+    data: TreeData[];
+    defaultExpandedId?: string[];
+    defaultCheckedId?: string[];
+    checkedId?: string[];
+    loadingId?: string[];
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    onCheckedChange?: (checkedId: string[]) => void;
+    defaultExpandAll?: boolean;
+    defaultCheckAll?: boolean;
+    hierarchicalCheck?: boolean;
+}

package/dist/cjs/types/index.d.ts

@@ -32,6 +32,7 @@ export * from "./components/Tooltip/TooltipSimple";
 export * from "./components/Toast/Toast";
 export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
+export * from "./components/Tree";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";

package/dist/components/Tree/Tree.js

@@ -1,48 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ActionButton, Checkbox, Icon, cn } from "@/index";
-import { useCallback, useMemo, useState, useEffect, } from "react";
-const TreeItem = ({ id, title, children, isFirstLevel = false, isLastItem, checkIsExpanded, checkIsChecked, onExpandChange, onCheckedChange, }) => {
-    const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
-    const isExpanded = useMemo(() => checkIsExpanded(id), [checkIsExpanded, id]);
-    const hasChildren = useMemo(() => !!(children === null || children === void 0 ? void 0 : children.length), [children]);
-    const handleExpandToggle = useCallback(() => {
-        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, !isExpanded);
-    }, [id, isExpanded, onExpandChange]);
-    // TODO move to props
-    const lineSize = 2;
-    const horizontalLineWidth = 4;
-    const expandButtonSize = 30;
-    const spacing = 2;
-    const styles = {
-        branch: {
-            height: isLastItem
-                ? `calc(50% + ${lineSize}px)`
-                : `calc(100% + ${lineSize}px)`,
-            width: lineSize,
-            marginTop: -lineSize,
-            borderBottomLeftRadius: lineSize / 2,
-        },
-        horizontalLine: {
-            height: lineSize,
-            width: lineSize +
-                horizontalLineWidth +
-                (hasChildren ? 0 : expandButtonSize + spacing),
-            marginLeft: -lineSize + 0.1,
-            borderBottomLeftRadius: lineSize / 2,
-        },
-        expandButton: {
-            width: expandButtonSize,
-            height: expandButtonSize,
-        },
-        childPadding: {
-            paddingLeft: isFirstLevel
-                ? expandButtonSize / 2 - lineSize / 2
-                : expandButtonSize / 2 + horizontalLineWidth - lineSize / 2,
-        },
-    };
-    return (_jsxs("div", { className: "flex flex-row w-full", children: [_jsx("div", { className: cn("bg-grey-150", { "h-1/2": isLastItem }), style: styles.branch }), _jsxs("div", { className: "flex flex-col w-full", children: [_jsxs("div", { className: "flex items-center py-2 min-h-10", children: [!isFirstLevel && (_jsx("div", { className: "bg-grey-150", style: styles.horizontalLine })), isFirstLevel && !hasChildren && (_jsx("div", { className: "flex mr-[2px]", style: styles.expandButton })), hasChildren && (_jsx("div", { className: "flex mr-[2px]", style: styles.expandButton, children: _jsx(ActionButton, { variant: "icon", size: "sm", onClick: handleExpandToggle, children: _jsx(Icon, { name: isExpanded ? "chevron-down" : "chevron-right" }) }) })), _jsx(Checkbox, { id: id, className: "size-[16pt]", checked: isChecked, onCheckedChange: (newChecked) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(id, newChecked) }), _jsxs("div", { className: "ml-2 gap-1 flex items-center text-foreground", children: [_jsx(Icon, { name: isExpanded ? "folder-open" : "folder", className: "fill-warning" }), _jsx("label", { htmlFor: id, className: "flex-1 cursor-pointer text-subtitle5 text-ellipsis", children: title })] })] }), isExpanded && hasChildren && (_jsx("div", { className: "flex flex-col", style: styles.childPadding, children: children === null || children === void 0 ? void 0 : children.map((child, idx) => (_jsx(TreeItem, Object.assign({}, child, { isLastItem: idx === children.length - 1, checkIsExpanded: checkIsExpanded, checkIsChecked: checkIsChecked, onExpandChange: onExpandChange, onCheckedChange: onCheckedChange }), child.id))) }))] })] }));
-};
-export const Tree = ({ data, defaultExpandedId = [], defaultCheckedId = [], checkedId, onCheckedChange, defaultExpandAll = false, defaultCheckAll = false, hierarchicalCheck = false, }) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import TreeItem from "./TreeItem";
+const Tree = ({ classes, data, defaultExpandedId = [], defaultCheckedId = [], checkedId, loadingId, renderIcon, renderRightSection, renderElement, renderTitle, onExpandChange, onCheckedChange, defaultExpandAll = false, defaultCheckAll = false, hierarchicalCheck = false, showIcon = true, disabled, enableSeparatorLine = true, }) => {
     const [checkedState, setCheckedState] = useState({});
     const [expandedState, setExpandedState] = useState({});
     const traverseTree = (nodes, callback) => {
@@ -61,7 +20,7 @@ export const Tree = ({ data, defaultExpandedId = [], defaultCheckedId = [], chec
             });
             setExpandedState(allExpanded);
         }
-        else {
+        else if (defaultExpandedId === null || defaultExpandedId === void 0 ? void 0 : defaultExpandedId.length) {
             const initialExpandedState = defaultExpandedId.reduce((acc, id) => {
                 acc[id] = true;
                 return acc;
@@ -77,7 +36,7 @@ export const Tree = ({ data, defaultExpandedId = [], defaultCheckedId = [], chec
             });
             setCheckedState(allChecked);
         }
-        else if (!checkedId) {
+        else if (!checkedId && (defaultCheckedId === null || defaultCheckedId === void 0 ? void 0 : defaultCheckedId.length)) {
             const initialCheckedState = defaultCheckedId.reduce((acc, id) => {
                 acc[id] = true;
                 return acc;
@@ -86,8 +45,9 @@ export const Tree = ({ data, defaultExpandedId = [], defaultCheckedId = [], chec
         }
     }, [data, defaultCheckedId, checkedId, defaultCheckAll]);
     const handleExpandChange = useCallback((id, expanded) => {
+        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, expanded);
         setExpandedState((prev) => (Object.assign(Object.assign({}, prev), { [id]: expanded })));
-    }, []);
+    }, [onExpandChange]);
     const handleCheckedChange = useCallback((id, checked) => {
         let newState = Object.assign(Object.assign({}, checkedState), { [id]: checked });
         if (hierarchicalCheck) {
@@ -134,5 +94,11 @@ export const Tree = ({ data, defaultExpandedId = [], defaultCheckedId = [], chec
         }
         return !!checkedState[id];
     }, [checkedId, checkedState]);
-    return (_jsx("div", { className: "w-full", children: data.map((item, idx) => (_jsx(TreeItem, Object.assign({}, item, { isFirstLevel: true, isLastItem: idx === data.length - 1, checkIsExpanded: checkIsExpanded, checkIsChecked: checkIsChecked, onExpandChange: handleExpandChange, onCheckedChange: handleCheckedChange }), item.id))) }));
+    const checkIsLoading = useCallback((id) => {
+        if (loadingId) {
+            return loadingId.includes(id);
+        }
+    }, [loadingId]);
+    return (_jsx("div", { className: "w-full", children: data.map((item, idx) => (_jsx(TreeItem, Object.assign({ classes: classes, isFirstLevel: true, isLastItem: idx === data.length - 1, checkIsExpanded: checkIsExpanded, checkIsChecked: checkIsChecked, onExpandChange: handleExpandChange, onCheckedChange: handleCheckedChange, checkIsLoading: checkIsLoading, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, renderRightSection: renderRightSection, enableSeparatorLine: enableSeparatorLine, disabled: disabled, showIcon: showIcon }, item), item.id))) }));
 };
+export default Tree;

package/dist/components/Tree/Tree.stories.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Tree } from "./Tree";
-// Example data for testing the Tree component (as plain objects)
+import { useState } from "react";
+import Tree from "./Tree";
+import { ActionButton, Icon } from "@/index";
 const exampleData = [
     {
         id: "1",
@@ -24,6 +25,15 @@ const exampleData = [
     },
     { id: "3", title: "Parent Folder 3" },
 ];
+const commonProps = {
+    defaultExpandedId: ["1", "1.1"],
+    defaultCheckedId: ["1.1"],
+    defaultExpandAll: true,
+    defaultCheckAll: true,
+    hierarchicalCheck: true,
+    disabled: false,
+    showIcon: true,
+};
 // Storybook metadata
 const meta = {
     title: "Components/Tree",
@@ -39,15 +49,114 @@ const meta = {
 export default meta;
 // Default story
 export const Default = {
+    args: Object.assign(Object.assign({ data: exampleData }, commonProps), { showIcon: true }),
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args)) }));
+    },
+};
+export const onClick = {
+    args: Object.assign({ data: exampleData.map((item) => (Object.assign(Object.assign({}, item), { onClickItem: (id) => alert("Click item " + id) }))) }, commonProps),
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args)) }));
+    },
+};
+export const CustomIcon = {
+    args: Object.assign({ data: exampleData.map((item, idx) => (Object.assign(Object.assign(Object.assign({}, item), (idx === 0 && {
+            icon: _jsx(Icon, { name: "home" }),
+        })), (idx === 1 && {
+            renderIcon: ({ expanded, selected }) => (_jsx(Icon, { name: expanded ? "home" : "home-modern", className: selected ? "fill-info" : "fill-error" })),
+        })))) }, commonProps),
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args, { renderIcon: ({ expanded, selected }) => (_jsx(Icon, { name: expanded ? "bell" : "bell-slash", className: selected ? "fill-primary" : "fill-secondary" })) })) }));
+    },
+};
+export const renderRightSection = {
+    args: Object.assign({ data: exampleData }, commonProps),
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args, { renderRightSection: () => (_jsx(ActionButton, { variant: "icon", onClick: () => alert("Say hi!"), children: _jsx(Icon, { name: "ellipsis-vertical" }) })) })) }));
+    },
+};
+export const ControlShowExpandButton = {
     args: {
-        data: exampleData,
-        defaultExpandedId: ["1", "1.1"],
-        defaultCheckedId: ["1.1"],
-        defaultExpandAll: true,
-        defaultCheckAll: true,
-        hierarchicalCheck: true,
+        data: exampleData.map((item) => (Object.assign(Object.assign({}, item), { showExpandButton: true }))),
     },
     render: (args) => {
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args)) }));
     },
 };
+export const Diabled = {
+    args: Object.assign(Object.assign({ data: exampleData }, commonProps), { disabled: true }),
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args, { renderRightSection: () => (_jsx(ActionButton, { variant: "icon", onClick: () => alert("Say hi!"), children: _jsx(Icon, { name: "ellipsis-vertical" }) })) })) }));
+    },
+};
+export const DiabledEachItem = {
+    args: Object.assign(Object.assign({ data: exampleData.map((item, i) => (Object.assign(Object.assign({}, item), { disabled: i === 0 }))) }, commonProps), { disabled: undefined }),
+    render: (args) => {
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args, { renderRightSection: () => (_jsx(ActionButton, { variant: "icon", onClick: () => alert("Say hi!"), children: _jsx(Icon, { name: "ellipsis-vertical" }) })) })) }));
+    },
+};
+export const ExpandLoadData = {
+    args: {},
+    render: (args) => {
+        const [data, setData] = useState([
+            {
+                id: "1",
+                title: "Parent Folder 1",
+                showExpandButton: true,
+                children: [],
+            },
+            {
+                id: "2",
+                title: "Parent Folder 2",
+                showExpandButton: true,
+                children: [],
+            },
+            {
+                id: "3",
+                title: "Parent Folder 3",
+                showExpandButton: true,
+                children: [],
+            },
+        ]);
+        const [loadingId, setLoadingId] = useState([]);
+        const [loadedId, setLoadedId] = useState([]);
+        const updateNode = (nodes, id, newChildren) => nodes.map((node) => {
+            var _a;
+            if (node.id === id) {
+                return Object.assign(Object.assign({}, node), { children: newChildren });
+            }
+            if ((_a = node.children) === null || _a === void 0 ? void 0 : _a.length) {
+                return Object.assign(Object.assign({}, node), { children: updateNode(node.children, id, newChildren) });
+            }
+            return node;
+        });
+        const handleOnExpandChange = (id, isExpand) => {
+            // *Note can you other way for improve should load if need with other way without loadedId
+            if (isExpand && !loadingId.includes(id) && !loadedId.includes(id)) {
+                setLoadingId((prev) => [...prev, id]);
+                setTimeout(() => {
+                    // Mock child data
+                    const newChildren = [
+                        {
+                            id: Date.now() + "1",
+                            title: `Child of ${id} - 1`,
+                            children: [],
+                            showExpandButton: true,
+                        },
+                        {
+                            id: Date.now() + "2",
+                            title: `Child of ${id} - 2`,
+                            children: [],
+                            showExpandButton: true,
+                        },
+                    ];
+                    setData((prevData) => updateNode(prevData, id, newChildren));
+                    setLoadingId((prev) => prev.filter((val) => val !== id));
+                    setLoadedId((prev) => [...prev, id]);
+                }, 1500);
+            }
+        };
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tree, Object.assign({}, args, { data: data, loadingId: loadingId, onExpandChange: handleOnExpandChange })) }));
+    },
+};

package/dist/components/Tree/TreeItem.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionButton, Checkbox, Loading } from "@/index";
+import { cn } from "@/utils/cn";
+import { useCallback, useEffect, useMemo } from "react";
+import Icon from "../Icon/Icon";
+const TreeItem = ({ id, title, classes, children, isFirstLevel = false, disabled, icon, showIcon, showExpandButton, enableSeparatorLine = true, isLastItem, checkIsExpanded, checkIsChecked, checkIsLoading, onExpandChange, onCheckedChange, onClickItem, renderIcon, renderElement, renderTitle, renderRightSection, }) => {
+    const isLoading = useMemo(() => checkIsLoading === null || checkIsLoading === void 0 ? void 0 : checkIsLoading(id), [checkIsLoading, id]);
+    const isChecked = useMemo(() => checkIsChecked(id), [checkIsChecked, id]);
+    const isExpanded = useMemo(() => checkIsExpanded(id), [checkIsExpanded, id]);
+    const hasChildren = useMemo(() => !!(children === null || children === void 0 ? void 0 : children.length), [children]);
+    const shouldExpandButton = useMemo(() => (showExpandButton !== undefined ? showExpandButton : hasChildren), [hasChildren, showExpandButton]);
+    const handleExpandToggle = useCallback(() => {
+        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(id, !isExpanded);
+    }, [id, isExpanded, onExpandChange]);
+    // TODO move to props
+    const lineSize = 2;
+    const horizontalLineWidth = 4;
+    const expandButtonSize = 30;
+    const spacing = 2;
+    const styles = {
+        branch: {
+            height: isLastItem
+                ? `calc(50% + ${lineSize}px)`
+                : `calc(100% + ${lineSize}px)`,
+            width: lineSize,
+            marginTop: -lineSize,
+            borderBottomLeftRadius: lineSize / 2,
+        },
+        horizontalLine: {
+            height: lineSize,
+            width: lineSize +
+                horizontalLineWidth +
+                (shouldExpandButton ? 0 : expandButtonSize + spacing),
+            marginLeft: -lineSize + 0.1,
+            borderBottomLeftRadius: lineSize / 2,
+        },
+        expandButton: {
+            width: expandButtonSize,
+            height: expandButtonSize,
+        },
+        childPadding: {
+            paddingLeft: isFirstLevel
+                ? expandButtonSize / 2 - lineSize / 2
+                : expandButtonSize / 2 + horizontalLineWidth - lineSize / 2,
+        },
+    };
+    useEffect(() => {
+        if (isExpanded && !isLoading && !hasChildren) {
+            handleExpandToggle();
+        }
+    }, [isLoading, handleExpandToggle]);
+    const handleOnClickItem = useCallback(() => {
+        onClickItem === null || onClickItem === void 0 ? void 0 : onClickItem(id);
+    }, [onClickItem, id]);
+    const defaultIcon = (_jsx(Icon, { name: isExpanded ? "folder-open" : "folder", className: "fill-warning" }));
+    const customIcon = icon !== null && icon !== void 0 ? icon : renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon({
+        id,
+        expanded: isExpanded,
+        selected: isChecked,
+    });
+    const rightIcon = renderRightSection === null || renderRightSection === void 0 ? void 0 : renderRightSection({
+        id,
+        expanded: isExpanded,
+        selected: isChecked,
+    });
+    const titleContent = renderTitle
+        ? renderTitle({ id, title, expanded: isExpanded, selected: isChecked })
+        : title;
+    const elementWrapper = (content) => renderElement
+        ? renderElement({
+            id,
+            expanded: isExpanded,
+            selected: isChecked,
+            children: content,
+            styles,
+            onClick: handleOnClickItem,
+        })
+        : content;
+    return elementWrapper(_jsxs("div", { className: cn("flex flex-row w-full", classes === null || classes === void 0 ? void 0 : classes.elementWrapper), children: [_jsx("div", { className: cn("bg-grey-150", { "h-1/2": isLastItem }, classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch }), _jsxs("div", { className: cn("flex flex-col w-full", classes === null || classes === void 0 ? void 0 : classes.itemWrapper), children: [_jsxs("div", { className: cn("flex items-center py-2 min-h-10", classes === null || classes === void 0 ? void 0 : classes.itemContainer), children: [!isFirstLevel && (_jsx("div", { className: cn("bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.horizontalLine), style: styles.horizontalLine })), isFirstLevel && !shouldExpandButton && (_jsx("div", { className: cn("flex mr-[2px]", classes === null || classes === void 0 ? void 0 : classes.expandButton), style: styles.expandButton })), shouldExpandButton && (_jsx("div", { className: cn("flex mr-[2px]", classes === null || classes === void 0 ? void 0 : classes.expandButton), style: styles.expandButton, onClick: !isLoading && handleExpandToggle, children: _jsx(ActionButton, { variant: "icon", size: "sm", children: isLoading ? (_jsx(Loading, {})) : (_jsx(Icon, { name: isExpanded ? "chevron-down" : "chevron-right" })) }) })), _jsx(Checkbox, { id: id, className: cn("size-[16pt]", classes === null || classes === void 0 ? void 0 : classes.checkbox), checked: isChecked, disabled: disabled, onCheckedChange: (newChecked) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(id, newChecked) }), _jsxs("div", { className: cn("ml-2 gap-1 flex flex-1 items-center text-foreground", classes === null || classes === void 0 ? void 0 : classes.item), onClick: handleOnClickItem, children: [showIcon ? customIcon || defaultIcon : null, _jsx("div", { className: cn("flex flex-1 cursor-pointer text-subtitle5 text-ellipsis", classes === null || classes === void 0 ? void 0 : classes.title), children: titleContent })] }), rightIcon] }), isExpanded && hasChildren && (_jsx("div", { className: cn("flex flex-col", classes === null || classes === void 0 ? void 0 : classes.childrenWrapper), style: styles.childPadding, children: children === null || children === void 0 ? void 0 : children.map((child, idx) => (_jsx(TreeItem, Object.assign({ classes: classes, isLastItem: idx === children.length - 1, checkIsExpanded: checkIsExpanded, checkIsChecked: checkIsChecked, checkIsLoading: checkIsLoading, onExpandChange: onExpandChange, onCheckedChange: onCheckedChange, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, disabled: disabled, showIcon: showIcon }, child), child.id))) })), enableSeparatorLine && isFirstLevel && !isLastItem && (_jsx("div", { className: cn("bg-grey-150 w-full h-[2px] rounded", classes === null || classes === void 0 ? void 0 : classes.separatorLine) }))] })] }));
+};
+export default TreeItem;

package/dist/components/Tree/index.js

@@ -0,0 +1,4 @@
+import Tree from "./Tree";
+import TreeItem from "./TreeItem";
+export * from "./type";
+export { Tree, TreeItem };

package/dist/components/Tree/type.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/bundle.css

@@ -829,6 +829,9 @@ input[type=number] {
 .h-\[24px\]{
   height: 24px;
 }
+.h-\[2px\]{
+  height: 2px;
+}
 .h-\[32px\]{
   height: 32px;
 }
@@ -2717,6 +2720,9 @@ input[type=number] {
 .fill-error{
   fill: color-mix(in srgb, var(--state-color-error-default) calc(100% * 1), transparent);
 }
+.fill-info{
+  fill: color-mix(in srgb, var(--state-color-info-default) calc(100% * 1), transparent);
+}
 .fill-inherit{
   fill: inherit;
 }
@@ -2735,6 +2741,9 @@ input[type=number] {
 .fill-primary-default{
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
+.fill-secondary{
+  fill: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * 1), transparent);
+}
 .fill-warning{
   fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
 }