@rovula/ui 0.0.72 → 0.0.74

package/dist/esm/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/esm/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/esm/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/index.d.ts

@@ -16,6 +16,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import { ToastProviderProps } from '@radix-ui/react-toast';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { ClassValue } from 'clsx';
 
 type ButtonProps = {
@@ -755,6 +756,9 @@ type FocusedScrollViewProps = {
 };
 declare const FocusedScrollView: React__default.FC<FocusedScrollViewProps>;
 
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
 declare const resloveTimestamp: (timestamp: number) => number;
 declare const getStartDateOfDay: (date: Date) => Date;
 declare const getEndDateOfDay: (date: Date) => Date;
@@ -768,4 +772,4 @@ declare function usePrevious<T>(value: T): T | undefined;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, FocusedScrollView, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, usePrevious, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, type CustomSliderProps, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, FocusedScrollView, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, RadioGroup, RadioGroupItem, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, usePrevious, useToast };

package/dist/index.js

@@ -36,6 +36,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";
 // UTILS
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 // Hooks

package/dist/src/theme/global.css

@@ -2770,6 +2770,10 @@ input[type=number] {
   min-width: fit-content;
 }
 
+.max-w-\[300px\] {
+  max-width: 300px;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -2994,6 +2998,12 @@ input[type=number] {
   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)));
@@ -3058,6 +3068,10 @@ input[type=number] {
   white-space: nowrap;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Label/Label.styles.ts

@@ -2,13 +2,13 @@ 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/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -69,3 +69,30 @@ export const Diabled = {
     );
   },
 } satisfies StoryObj;
+
+export const Horizontal = {
+  args: {
+    disabled: true,
+  },
+  render: (args) => {
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <RadioGroup defaultValue="option1" className="flex flex-row space-x-4">
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="option1" id="option1" />
+          <Label htmlFor="option1">Option 1</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="option2" id="option2" />
+          <Label htmlFor="option2">Option 2</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="option3" id="option3" />
+          <Label htmlFor="option3">Option 3</Label>
+        </div>
+      </RadioGroup>
+    );
+  },
+} satisfies StoryObj;

package/src/components/TextInput/TextInput.tsx

@@ -271,7 +271,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
           )}
           {endIconElement}
 
-          <label htmlFor={_id} className={cn(labelClassname, labelClassName)}>
+          <label htmlFor={_id} className={cn(labelClassname)}>
             {label}{" "}
             {required && (
               <span

package/src/components/Tree/Tree.stories.tsx

@@ -446,3 +446,103 @@ export const CheckAll: StoryObj<typeof Tree> = {
     );
   },
 };
+
+export const LongText: StoryObj<typeof Tree> = {
+  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<string[]>([]);
+
+    return (
+      <div className="flex flex-col gap-4 w-full">
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            onClick={() => setIsCheckedAll(!isCheckedAll)}
+          >
+            {isCheckedAll ? "Unchecked" : "Checked"} All
+          </Button>
+          <Button variant="outline" onClick={() => onCheckedId([])}>
+            Clear
+          </Button>
+        </div>
+        <div className="w-full max-w-[300px]">
+          <Tree
+            {...args}
+            hierarchicalCheck
+            checkedAll={isCheckedAll}
+            checkedId={checkedId}
+            onCheckedChange={(state) => {
+              onCheckedId(Object.keys(state).filter((key) => state?.[key]));
+            }}
+          />
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Tree/TreeItem.tsx

@@ -241,7 +241,7 @@ const TreeItem: FC<TreeItemProps> = ({
               {showIcon ? customIcon || defaultIcon : null}
               <div
                 className={cn(
-                  "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis",
+                  "flex flex-1 cursor-pointer text-subtitle5 text-ellipsis overflow-hidden break-all text-left",
                   classes?.title
                 )}
               >

package/src/index.ts

@@ -41,6 +41,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 component types
 export type { ButtonProps } from "./components/Button/Button";