@rovula/ui 0.0.72 → 0.0.74

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

@@ -298,3 +298,9 @@ export declare const Diabled: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const Horizontal: {
+    args: {
+        disabled: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -34,6 +34,7 @@ export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
 export * from "./components/Tree";
 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 { DropdownProps, Options } from "./components/Dropdown/Dropdown";

package/dist/components/Label/Label.styles.js

@@ -1,11 +1,11 @@
 import { cva } from "class-variance-authority";
 export const labelVariant = cva([
-    "block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active",
+    "block cursor-pointer duration-450 transition-all px-[2px] text-foreground peer-focus:text-input-text-active",
 ], {
     variants: {
         size: {
             sm: "typography-small1",
-            md: "typography-subtitile4",
+            md: "typography-subtitile2",
             lg: "typography-subtitile1",
         },
         disabled: {

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -31,3 +31,12 @@ export const Diabled = {
         return (_jsx("div", { className: "flex items-center space-x-2", children: _jsxs(RadioGroup, { defaultValue: "option-one", disabled: true, children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-one", id: "option-one" }), _jsx(Label, { htmlFor: "option-one", children: "Option One" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-two", id: "option-two" }), _jsx(Label, { htmlFor: "option-two", children: "Option Two" })] })] }) }));
     },
 };
+export const Horizontal = {
+    args: {
+        disabled: true,
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs(RadioGroup, { defaultValue: "option1", className: "flex flex-row space-x-4", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option1", id: "option1" }), _jsx(Label, { htmlFor: "option1", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option2", id: "option2" }), _jsx(Label, { htmlFor: "option2", children: "Option 2" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option3", id: "option3" }), _jsx(Label, { htmlFor: "option3", children: "Option 3" })] })] }));
+    },
+};

package/dist/components/TextInput/TextInput.js

@@ -123,7 +123,7 @@ export const TextInput = forwardRef((_a, ref) => {
     ]);
     return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx(MagnifyingGlassIcon, { className: iconClassname }) })), _jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: iconWrapperClassname, style: {
                             display: keepCloseIconOnValue && props.value ? "flex" : undefined,
-                        }, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), endIconElement, _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
+                        }, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), endIconElement, _jsxs("label", { htmlFor: _id, className: cn(labelClassname), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
                                     "text-input-disable-text": disabled,
                                 }), children: "*" }))] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx("span", { className: "h-full", children: _jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }) }), errorMessage || helperText] }))] }));
 });

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%;
 }
@@ -1159,6 +1162,11 @@ input[type=number] {
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-x-4 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-y-2 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1209,6 +1217,9 @@ input[type=number] {
 .whitespace-nowrap{
   white-space: nowrap;
 }
+.break-all{
+  word-break: break-all;
+}
 .rounded{
   border-radius: 0.25rem;
 }