@rovula/ui 0.0.73 → 0.0.75

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

@@ -0,0 +1,38 @@
+import React from "react";
+export type TextAreaProps = {
+    id?: string;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    rounded?: "none" | "normal" | "full";
+    variant?: "flat" | "outline" | "underline";
+    helperText?: string;
+    errorMessage?: string;
+    fullwidth?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    isFloatingLabel?: boolean;
+    keepCloseIconOnValue?: boolean;
+    hasClearIcon?: boolean;
+    labelClassName?: string;
+    className?: string;
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">;
+export declare const TextArea: React.ForwardRefExoticComponent<{
+    id?: string;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    rounded?: "none" | "normal" | "full";
+    variant?: "flat" | "outline" | "underline";
+    helperText?: string;
+    errorMessage?: string;
+    fullwidth?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    isFloatingLabel?: boolean;
+    keepCloseIconOnValue?: boolean;
+    hasClearIcon?: boolean;
+    labelClassName?: string;
+    className?: string;
+} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextArea } from "@/index";
+declare const meta: Meta<typeof TextArea>;
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+export declare const Default: Story;
+export declare const ErrorState: Story;
+export declare const HelperText: Story;
+export declare const Disabled: Story;

package/dist/cjs/types/components/TextArea/TextArea.styles.d.ts

@@ -0,0 +1,27 @@
+export declare const textareaVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "none" | "normal" | "full" | null | undefined;
+    variant?: "outline" | "flat" | "underline" | null | undefined;
+    fullwidth?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+    hasClearIcon?: boolean | null | undefined;
+    isFloatingLabel?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const labelVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    disabled?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+    isFloatingLabel?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const clearIconWrapperVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const clearIconVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const helperTextVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    disabled?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -16,3 +16,4 @@ export declare const Leaf: StoryObj<typeof Tree>;
 export declare const HideCheckboxMode: StoryObj<typeof Tree>;
 export declare const RadioMode: StoryObj<typeof Tree>;
 export declare const CheckAll: StoryObj<typeof Tree>;
+export declare const LongText: StoryObj<typeof Tree>;

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

@@ -2,6 +2,7 @@ import "./theme/global.css";
 import "./icons/iconConfig";
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
+export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
 export { default as Tabs } from "./components/Tabs/Tabs";
 export { default as Dropdown } from "./components/Dropdown/Dropdown";
@@ -37,6 +38,7 @@ export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
+export type { TextAreaProps } from "./components/TextArea/TextArea";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export type { NavbarProps } from "./components/Navbar/Navbar";
 export type { AvatarProps } from "./components/Avatar/Avatar";

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,55 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
+import { cn } from "@/utils/cn";
+import { textareaVariant, labelVariant as textareaLabelVariant, helperTextVariant as textareaHelperTextVariant, clearIconWrapperVariant, clearIconVariant, } from "./TextArea.styles";
+import { XCircleIcon } from "@heroicons/react/16/solid";
+export const TextArea = forwardRef((_a, ref) => {
+    var { id, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, hasClearIcon = true, labelClassName, className } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "isFloatingLabel", "keepCloseIconOnValue", "hasClearIcon", "labelClassName", "className"]);
+    const textareaRef = useRef(null);
+    const _id = id || `textarea-${label !== null && label !== void 0 ? label : ""}`;
+    useImperativeHandle(ref, () => textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current);
+    // Reuse TextInput visual language via utility classes to stay consistent
+    const containerClassName = useMemo(() => `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, [fullwidth]);
+    const textareaClassName = textareaVariant({
+        size,
+        rounded,
+        variant,
+        fullwidth,
+        disabled,
+        error,
+        hasClearIcon,
+        isFloatingLabel,
+    });
+    return (_jsxs("div", { className: containerClassName, children: [_jsxs("div", { className: "relative", children: [_jsx("textarea", Object.assign({}, props, { id: _id, ref: textareaRef, disabled: disabled, placeholder: isFloatingLabel ? " " : props.placeholder, className: cn(textareaClassName, className) })), hasClearIcon && (_jsx("div", { className: clearIconWrapperVariant({ size }), style: {
+                            display: keepCloseIconOnValue && props.value ? "flex" : undefined,
+                        }, children: _jsx(XCircleIcon, { type: "button", className: clearIconVariant({ size }), onMouseDown: (e) => {
+                                e.preventDefault();
+                                if (textareaRef.current) {
+                                    const prev = textareaRef.current.value;
+                                    textareaRef.current.value = "";
+                                    if (props.onChange && prev !== "") {
+                                        props.onChange({ target: { value: "" } });
+                                    }
+                                    textareaRef.current.focus();
+                                }
+                            } }) })), label && (_jsxs("label", { htmlFor: _id, className: cn(textareaLabelVariant({
+                            size,
+                            disabled,
+                            error,
+                            isFloatingLabel,
+                        }), labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
+                                    "text-input-disable-text": disabled,
+                                }), children: "*" }))] }))] }), (errorMessage || helperText) && (_jsx("span", { className: textareaHelperTextVariant({ size, disabled, error }), children: errorMessage || helperText }))] }));
+});
+export default TextArea;

package/dist/components/TextArea/TextArea.stories.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextArea } from "@/index";
+const meta = {
+    title: "Components/TextArea",
+    component: TextArea,
+    parameters: {
+        layout: "fullscreen",
+    },
+    tags: ["autodocs"],
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex h-screen w-full bg-base-bg2", children: _jsx(Story, {}) })),
+    ],
+    argTypes: {
+        size: {
+            control: { type: "radio" },
+            options: ["sm", "md", "lg"],
+        },
+        rounded: {
+            control: { type: "radio" },
+            options: ["none", "normal", "full"],
+        },
+        variant: {
+            control: { type: "radio" },
+            options: ["flat", "outline", "underline"],
+        },
+        isFloatingLabel: { control: "boolean" },
+        fullwidth: { control: "boolean" },
+        disabled: { control: "boolean" },
+        error: { control: "boolean" },
+        required: { control: "boolean" },
+    },
+    args: {
+        label: "Description",
+        placeholder: "Type here...",
+        size: "md",
+        rounded: "normal",
+        variant: "outline",
+        isFloatingLabel: true,
+        fullwidth: true,
+        disabled: false,
+        error: false,
+        required: true,
+        hasClearIcon: true,
+        rows: 2,
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextArea, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(TextArea, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(TextArea, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const ErrorState = {
+    args: {
+        error: true,
+        errorMessage: "This field is required",
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextArea, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(TextArea, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(TextArea, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const HelperText = {
+    args: {
+        helperText: "You can write up to 500 characters.",
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextArea, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(TextArea, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(TextArea, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+        value: "Disabled text area",
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextArea, Object.assign({ id: "1" }, props, { size: "lg" })), _jsx(TextArea, Object.assign({ id: "2" }, props, { size: "md" })), _jsx(TextArea, Object.assign({ id: "3" }, props, { size: "sm" }))] }));
+    },
+};

package/dist/components/TextArea/TextArea.styles.js

@@ -0,0 +1,207 @@
+import { cva } from "class-variance-authority";
+export const textareaVariant = cva([
+    "peer block w-full bg-transparent outline-none placeholder:text-transparent resize-y ui-scrollbar",
+    "text-input-filled-text caret-primary",
+], {
+    variants: {
+        size: {
+            sm: "p-2 px-3 typography-small1",
+            md: "py-2 px-3 typography-subtitile4",
+            lg: "p-4 typography-subtitile1",
+        },
+        rounded: {
+            none: "rounded-none",
+            normal: "rounded-md",
+            full: "rounded-full",
+        },
+        variant: {
+            flat: "",
+            outline: [
+                "ring-1 ring-inset ring-input-default-stroke",
+                "hover:ring-input-active-stroke",
+                "focus:ring-1 focus:ring-inset focus:ring-input-active-stroke",
+            ],
+            underline: "border-b-2 border-input-default-stroke transition-colors hover:border-input-active-stroke focus:border-input-stroke",
+        },
+        fullwidth: {
+            true: "w-full",
+        },
+        disabled: {
+            true: [
+                "bg-input-disable-bg text-input-disable-text ring-input-disable-stroke placeholder:text-input-disable-text",
+                "hover:ring-input-disable-stroke",
+                "cursor-not-allowed",
+            ],
+        },
+        error: {
+            true: "ring-input-error focus:ring-input-error",
+        },
+        hasClearIcon: {
+            true: "",
+        },
+        isFloatingLabel: {
+            true: "",
+            false: "placeholder:text-input-placeholder",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "underline",
+            className: "rounded-none",
+        },
+        {
+            hasClearIcon: true,
+            size: "sm",
+            class: "focus:pe-6",
+        },
+        {
+            hasClearIcon: true,
+            size: "md",
+            class: "focus:pe-8",
+        },
+        {
+            hasClearIcon: true,
+            size: "lg",
+            class: "focus:pe-10",
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        variant: "outline",
+        rounded: "normal",
+        fullwidth: false,
+        disabled: false,
+        error: false,
+        hasClearIcon: false,
+        isFloatingLabel: true,
+    },
+});
+export const labelVariant = cva([
+    "absolute block duration-450 transition-all px-[2px] text-input-default-text",
+    "peer-focus:text-input-filled-text peer-focus:bg-input-label-bg",
+], {
+    variants: {
+        size: {
+            sm: [],
+            md: [],
+            lg: [],
+        },
+        disabled: {
+            true: "text-input-default-text placeholder:text-input-default-text",
+        },
+        error: {
+            true: "ring-error",
+        },
+        isFloatingLabel: {
+            false: "hidden peer-placeholder-shown:block peer-focus:bg-transparent",
+        },
+    },
+    compoundVariants: [
+        // floating = true
+        {
+            isFloatingLabel: true,
+            size: "sm",
+            className: [
+                "left-3 -top-1.5 typography-label2 bg-input-label-bg",
+                "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label2",
+            ],
+        },
+        {
+            isFloatingLabel: true,
+            size: "md",
+            className: [
+                "left-3 -top-1.5 typography-label1 bg-input-label-bg",
+                "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label1",
+            ],
+        },
+        {
+            isFloatingLabel: true,
+            size: "lg",
+            className: [
+                "left-4 -top-1.5 typography-label1 bg-input-label-bg",
+                "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label1",
+            ],
+        },
+        // --------------
+        // floating = false
+        {
+            isFloatingLabel: false,
+            size: "sm",
+            className: [
+                "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+            ],
+        },
+        {
+            isFloatingLabel: false,
+            size: "md",
+            className: [
+                "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+            ],
+        },
+        {
+            isFloatingLabel: false,
+            size: "lg",
+            className: [
+                "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+            ],
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        disabled: false,
+        error: false,
+        isFloatingLabel: true,
+    },
+});
+export const clearIconWrapperVariant = cva([
+    "absolute inset-y-0 right-0 items-start justify-center hidden peer-focus:flex",
+], {
+    variants: {
+        size: {
+            sm: "mr-2 pt-2",
+            md: "mr-3 pt-2",
+            lg: "mr-4 pt-4",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+export const clearIconVariant = cva([
+    "cursor-pointer z-50 fill-input-active-stroke hover:fill-input-default-text",
+], {
+    variants: {
+        size: {
+            sm: "size-3",
+            md: "size-4",
+            lg: "size-5",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+export const helperTextVariant = cva(["text-small1 flex flex-row items-center gap-1"], {
+    variants: {
+        size: {
+            sm: "mt-1",
+            md: "mt-[6px]",
+            lg: "mt-[6px]",
+        },
+        disabled: {
+            true: "text-input-disable-text",
+        },
+        error: {
+            true: "text-input-error",
+            false: "text-input-filled-text",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        disabled: false,
+        error: false,
+    },
+});

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

@@ -222,3 +222,76 @@ export const CheckAll = {
                     } }))] }));
     },
 };
+export const LongText = {
+    args: {
+        data: [
+            {
+                id: "2699d80b-6772-4878-9639-75e370786e79",
+                title: "Level1 RUNLINE_LV_2_00000000000000000000000000000000000000000000000000000000",
+                children: [
+                    {
+                        id: "9b4511f4-ad9a-42e0-8376-60d5edbeffb3",
+                        title: "Level1 RUNLINE_LV_3_0000000000000000000000000000000000000000000000000000",
+                        children: [
+                            {
+                                id: "c8d5dfb5-6c61-482b-88fe-186eb7685479",
+                                title: "2025-07-27_05-25-53",
+                                children: [],
+                            },
+                            {
+                                id: "81ff1dd0-b283-4f60-864e-5d814e99d903",
+                                title: "2025-07-27_06-05-53",
+                                children: [],
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                id: "ad79c17b-2861-431a-af0e-3f1c73164508",
+                title: "RUNLINE_LV_2",
+                children: [
+                    {
+                        id: "46ee87c4-4ea7-48f8-9ed9-14833e4dacc2",
+                        title: "2025-07-27_06-25-53",
+                        children: [],
+                    },
+                    {
+                        id: "1379b081-9f7f-4d82-8470-8321d9b7de0c",
+                        title: "RUNLINE_LV_3",
+                        children: [
+                            {
+                                id: "cf9145d4-ad06-4433-8384-4c10d266a6aa",
+                                title: "2025-07-26_19-01-31",
+                                children: [],
+                            },
+                            {
+                                id: "f247313c-01cb-4363-a390-a72b889c72d3",
+                                title: "2025-07-26_19-11-31",
+                                children: [],
+                            },
+                            {
+                                id: "0b7c650a-0d78-4e6e-8399-5dbaeb510751",
+                                title: "Lv4",
+                                children: [
+                                    {
+                                        id: "88d89572-462d-46c9-b4d0-4df736117799",
+                                        title: "Lv 5",
+                                        children: [],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+    render: (args) => {
+        const [isCheckedAll, setIsCheckedAll] = useState(false);
+        const [checkedId, onCheckedId] = useState([]);
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full", children: [_jsxs("div", { className: "flex gap-2", children: [_jsxs(Button, { variant: "outline", onClick: () => setIsCheckedAll(!isCheckedAll), children: [isCheckedAll ? "Unchecked" : "Checked", " All"] }), _jsx(Button, { variant: "outline", onClick: () => onCheckedId([]), children: "Clear" })] }), _jsx("div", { className: "w-full max-w-[300px]", children: _jsx(Tree, Object.assign({}, args, { hierarchicalCheck: true, checkedAll: isCheckedAll, checkedId: checkedId, onCheckedChange: (state) => {
+                            onCheckedId(Object.keys(state).filter((key) => state === null || state === void 0 ? void 0 : state[key]));
+                        } })) })] }));
+    },
+};

package/dist/components/Tree/TreeItem.js

@@ -85,6 +85,6 @@ const TreeItem = ({ id, title, classes, children, isFirstLevel = false, isLeaf =
                                     !isLastItem &&
                                     ((isExpanded && (hasChildren || isLoading)) || !isExpanded) && (_jsx("div", { className: cn("flex w-[2px] h-1/2 bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch }))] }), _jsxs("div", { className: cn("flex flex-1 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" })) }) })), shouldShowCheckbox ? (_jsx(Checkbox, { id: id, className: cn("size-[16px]", 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, itemData) })) : (_jsx("div", { className: isFirstLevel && checkable
                                         ? cn("size-[16px]", classes === null || classes === void 0 ? void 0 : classes.checkbox)
-                                        : "" })), _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 && currentLevel < (maxLevel || Infinity) && (_jsxs("div", { className: cn("flex flex-row overflow-hidden", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapper), children: [!isFirstLevel && !isLastItem && (_jsx("div", { className: cn("flex w-[2px] h-full bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch })), _jsx("div", { className: cn("flex flex-col overflow-hidden", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapperInner), 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, checkAutoDisabled: checkAutoDisabled, checkIsLoading: checkIsLoading, onExpandChange: onExpandChange, onCheckedChange: onCheckedChange, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, disabled: checkAutoDisabled(child.id), showIcon: showIcon, lineSize: lineSize, horizontalLineWidth: horizontalLineWidth, expandButtonSize: expandButtonSize, spacing: spacing, notifyClickItem: notifyClickItem, maxLevel: maxLevel, currentLevel: currentLevel + 1, checkable: checkable }, 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) }))] }) }));
+                                        : "" })), _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 overflow-hidden break-all text-left", classes === null || classes === void 0 ? void 0 : classes.title), children: titleContent })] }), rightIcon] })] }), isExpanded && hasChildren && currentLevel < (maxLevel || Infinity) && (_jsxs("div", { className: cn("flex flex-row overflow-hidden", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapper), children: [!isFirstLevel && !isLastItem && (_jsx("div", { className: cn("flex w-[2px] h-full bg-grey-150", classes === null || classes === void 0 ? void 0 : classes.branch), style: styles.branch })), _jsx("div", { className: cn("flex flex-col overflow-hidden", classes === null || classes === void 0 ? void 0 : classes.expandedChildrenWrapperInner), 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, checkAutoDisabled: checkAutoDisabled, checkIsLoading: checkIsLoading, onExpandChange: onExpandChange, onCheckedChange: onCheckedChange, renderIcon: renderIcon, renderElement: renderElement, renderTitle: renderTitle, disabled: checkAutoDisabled(child.id), showIcon: showIcon, lineSize: lineSize, horizontalLineWidth: horizontalLineWidth, expandButtonSize: expandButtonSize, spacing: spacing, notifyClickItem: notifyClickItem, maxLevel: maxLevel, currentLevel: currentLevel + 1, checkable: checkable }, 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/esm/bundle.css

@@ -987,6 +987,9 @@ input[type=number] {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
+.max-w-\[300px\]{
+  max-width: 300px;
+}
 .max-w-full{
   max-width: 100%;
 }
@@ -1038,6 +1041,9 @@ input[type=number] {
 .cursor-default{
   cursor: default;
 }
+.cursor-not-allowed{
+  cursor: not-allowed;
+}
 .cursor-pointer{
   cursor: pointer;
 }
@@ -1049,6 +1055,9 @@ input[type=number] {
      -moz-user-select: none;
           user-select: none;
 }
+.resize-y{
+  resize: vertical;
+}
 .resize{
   resize: both;
 }
@@ -1214,6 +1223,9 @@ input[type=number] {
 .whitespace-nowrap{
   white-space: nowrap;
 }
+.break-all{
+  word-break: break-all;
+}
 .rounded{
   border-radius: 0.25rem;
 }
@@ -3056,6 +3068,12 @@ input[type=number] {
 .pr-xxl{
   padding-right: var(--spacing-spacing-xxl);
 }
+.pt-2{
+  padding-top: 0.5rem;
+}
+.pt-4{
+  padding-top: 1rem;
+}
 .text-left{
   text-align: left;
 }
@@ -3800,6 +3818,24 @@ input[type=number] {
   line-height: var(--button-button-ms-line-height, 22px);
   font-weight: var(--button-button-ms-weight, 700);
 }
+.ui-scrollbar::-webkit-scrollbar {
+    height: 6px;
+    width: 6px;
+    background: rgba(0, 0, 0, 0.08);
+  }
+.ui-scrollbar::-webkit-scrollbar-thumb {
+    border-radius: 6px;
+    background: rgba(121, 141, 150, 0.48);
+    width: 6px;
+  }
+.ui-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: rgba(251, 252, 253, 0.48);
+    cursor: pointer;
+  }
+.ui-scrollbar::-webkit-scrollbar-corner {
+    display: none;
+    /* background: transparent; */
+  }
 .placeholder\:text-input-default-text::-moz-placeholder{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);