@rovula/ui 0.1.6 → 0.1.8

package/dist/components/TextInput/TextInput.styles.js

@@ -13,7 +13,7 @@ export const inputVariant = cva([
         },
         rounded: {
             none: "rounded-none",
-            normal: "rounded-md",
+            normal: "",
             full: "rounded-full",
         },
         variant: {
@@ -54,6 +54,16 @@ export const inputVariant = cva([
         },
     },
     compoundVariants: [
+        {
+            rounded: "normal",
+            size: "sm",
+            className: "rounded-sm",
+        },
+        {
+            rounded: "normal",
+            size: ["md", "lg"],
+            className: "rounded-md",
+        },
         {
             variant: "underline",
             className: "rounded-none",
@@ -61,62 +71,62 @@ export const inputVariant = cva([
         {
             hasClearIcon: true,
             size: "sm",
-            class: "focus:pe-6",
+            className: "focus:pe-6",
         },
         {
             hasClearIcon: true,
             size: "md",
-            class: "focus:pe-8",
+            className: "focus:pe-8",
         },
         {
             hasClearIcon: true,
             size: "lg",
-            class: "focus:pe-10",
+            className: "focus:pe-10",
         },
         {
             hasSearchIcon: true,
             size: "sm",
-            class: "!ps-6",
+            className: "!ps-[26px]",
         },
         {
             hasSearchIcon: true,
             size: "md",
-            class: "!ps-9",
+            className: "!ps-[40px]",
         },
         {
             hasSearchIcon: true,
             size: "lg",
-            class: "!ps-11",
+            className: "!ps-[52px]",
         },
         {
             leftSectionIcon: true,
             size: "sm",
-            class: "!ps-[38px]",
+            className: "!ps-[38px]",
         },
         {
             leftSectionIcon: true,
             size: "md",
-            class: "!ps-[46px]",
+            className: "!ps-[46px]",
         },
         {
             leftSectionIcon: true,
             size: "lg",
-            class: "!ps-[72px]",
+            className: "!ps-[72px]",
         },
         {
             rightSectionIcon: true,
             size: "sm",
-            class: "!pe-[38px]",
+            className: "!pe-[38px]",
         },
         {
             rightSectionIcon: true,
             size: "md",
-            class: "!pe-[46px]",
+            className: "!pe-[46px]",
         },
         {
             rightSectionIcon: true,
             size: "lg",
-            class: "!pe-[72px]",
+            className: "!pe-[72px]",
         },
     ],
     defaultVariants: {
@@ -216,7 +226,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "sm",
             className: [
-                "left-6 -top-1.5 typography-label2 bg-input-label-bg",
+                "left-[26px] -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",
             ],
@@ -226,7 +236,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "md",
             className: [
-                "left-9 -top-1.5 typography-label1 bg-input-label-bg",
+                "left-[40px] -top-1.5 typography-label1 bg-input-label-bg",
                 "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
@@ -236,7 +246,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "lg",
             className: [
-                "left-11 -top-1.5 typography-label1 bg-input-label-bg",
+                "left-[52px] -top-1.5 typography-label1 bg-input-label-bg",
                 "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
@@ -247,7 +257,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "sm",
             className: [
-                "left-6 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+                "left-[26px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
             ],
         },
         {
@@ -255,7 +265,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "md",
             className: [
-                "left-9 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
+                "left-[40px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
             ],
         },
         {
@@ -263,7 +273,7 @@ export const labelVariant = cva([
             hasSearchIcon: true,
             size: "lg",
             className: [
-                "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
+                "left-[52px] peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
             ],
         },
         // -------- hasLeftSectionIcon ------
@@ -407,6 +417,18 @@ export const iconActionVariant = cva(["cursor-pointer z-50 select-none"], {
         size: "md",
     },
 });
+export const searchIconVariant = cva(["cursor-pointer z-50 select-none"], {
+    variants: {
+        size: {
+            sm: "size-[14px]",
+            md: "size-5",
+            lg: "size-6",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
 export const segmentedIconWrapperVariant = cva([
     "cursor-pointer",
     "absolute items-center justify-center flex",

package/dist/components/Toast/Toast.js

@@ -36,7 +36,9 @@ const ToastAction = React.forwardRef((_a, ref) => {
 ToastAction.displayName = ToastPrimitives.Action.displayName;
 const ToastClose = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(ToastPrimitives.Close, Object.assign({ ref: ref, className: cn("-mr-2 self-center text-grey-light", className), "toast-close": "" }, props, { asChild: true, children: _jsx(ActionButton, { variant: "icon", size: "sm", children: _jsx(Icon, { type: "heroicons", name: "xmark" }) }) })));
+    return (_jsx(ToastPrimitives.Close, Object.assign({ ref: ref, 
+        // className={cn("-mr-2 self-center text-text-g-contrast-high", className)}
+        className: cn("self-center text-text-g-contrast-high", className), "toast-close": "" }, props, { asChild: true, children: _jsx(ActionButton, { variant: "icon", size: "sm", children: _jsx(Icon, { type: "heroicons", name: "xmark" }) }) })));
 });
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 const ToastTitle = React.forwardRef((_a, ref) => {
@@ -46,7 +48,7 @@ const ToastTitle = React.forwardRef((_a, ref) => {
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 const ToastDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitle4 text-grey-light", className) }, props)));
+    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitle4 text-text-g-contrast-high", className) }, props)));
 });
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };

package/dist/components/Toast/Toast.stories.js

@@ -17,7 +17,7 @@ const meta = {
         },
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "flex max-h-screen w-full bg-white p-4", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "flex max-h-screen w-full bg-bg-bg1 p-4", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/dist/components/Toast/Toast.styles.js

@@ -1,9 +1,9 @@
 import { cva } from "class-variance-authority";
 export const toastVariants = cva([
     "group pointer-events-auto relative flex w-full",
-    "rounded-lg shadow-[0px_8px_16px_0px_rgba(0,0,0,0.12)] px-4 py-3 gap-1",
+    "rounded-lg shadow-[0px_8px_16px_0px_rgba(0,0,0,0.08)] px-4 py-3 gap-1",
     "transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-    "bg-base-popup text-base-popup-foreground",
+    "bg-modal-surface text-text-contrast-low",
 ], {
     variants: {
         variant: {
@@ -68,7 +68,7 @@ export const toastViewportVariants = cva(["fixed z-[1000] flex w-auto flex-col-r
 export const toastIconVariants = cva(["flex items-center justify-center mr-2 rounded-full size-7"], {
     variants: {
         variant: {
-            default: "",
+            default: "text-text-g-contrast-high",
             success: "bg-success-transparent-8 text-success",
             info: "bg-info-transparent-8 text-info",
             warning: "bg-warning-transparent-8 text-warning",
@@ -83,7 +83,7 @@ export const toastContentVariants = cva(["flex flex-1"], {
     variants: {
         contentMode: {
             horizontal: "items-center flex-row gap-2",
-            vertical: "flex-col gap-[2px]",
+            vertical: "items-start flex-col gap-0",
         },
     },
     defaultVariants: {

package/dist/components/Toast/Toaster.js

@@ -36,7 +36,7 @@ export function Toaster(_a) {
                             ? "text-info"
                             : props.variant === "success"
                                 ? "text-success"
-                                : "text-base-popup-foreground";
-                return (_jsxs(Toast, Object.assign({}, props, { children: [_jsx("div", { className: cn(toastIconVariants({ variant: props.variant }), iconWrapperClassName), children: renderIcon ? (renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon()) : (_jsx(Icon, Object.assign({ type: "lucide", name: defaultIconName, className: "size-[22px]" }, iconProps))) }), _jsxs("div", { className: cn(toastContentVariants({ contentMode }), contentClassName), children: [title && (_jsx(ToastTitle, { className: cn(titleToneClass, titleClassName), children: title })), description && (_jsx(ToastDescription, { className: descriptionClassName, children: description }))] }), _jsx("div", { className: cn("self-center ml-[var(--spacing-spacing-xl)]", actionWrapperClassName), children: action }), _jsx(ToastClose, {})] }), id));
+                                : "text-text-g-contrast-high";
+                return (_jsxs(Toast, Object.assign({}, props, { children: [_jsx("div", { className: cn(toastIconVariants({ variant: props.variant }), iconWrapperClassName), children: renderIcon ? (renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon()) : (_jsx(Icon, Object.assign({ type: "lucide", name: defaultIconName, className: "size-[22px]" }, iconProps))) }), _jsxs("div", { className: cn(toastContentVariants({ contentMode }), contentClassName), children: [title && (_jsx(ToastTitle, { className: cn(titleToneClass, titleClassName), children: title })), description && (_jsx(ToastDescription, { className: descriptionClassName, children: description }))] }), action ? (_jsx("div", { className: cn("self-center mx-5", actionWrapperClassName), children: action })) : null, _jsx(ToastClose, {})] }), id));
             }), _jsx(ToastViewport, { position: position, className: viewportClassName })] })));
 }

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

@@ -21,7 +21,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-bg-bg1", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

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 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) }))] }) }));
+                                        : "" })), _jsxs("div", { className: cn("ml-2 gap-1 flex flex-1 items-center text-common-black", 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;