@rovula/ui 0.1.21 → 0.1.23

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -27,13 +27,13 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-4 pr-4 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
       "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
       "active:opacity-75",
       "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
       "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
@@ -51,8 +51,8 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[154px] overflow-hidden rounded-lg bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      "z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
     )}
     {...props}
     style={{
@@ -73,8 +73,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[154px] overflow-hidden rounded-lg bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        "z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
       )}
       {...props}
       style={{
@@ -90,45 +90,88 @@ const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
+    selected?: boolean;
+    icon?: React.ReactNode;
   }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
-      "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
-      "active:opacity-75",
-      "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
-      "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-));
+>(({ className, inset, selected, icon, children, ...props }, ref) => {
+  const hasIcon = !!icon;
+  return (
+    <DropdownMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        "relative flex cursor-pointer select-none box-border items-center py-4 pl-4 pr-8 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
+        "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
+        "active:opacity-75",
+        "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
+        selected &&
+          "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitle5",
+        "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
+        inset && "pl-8",
+        className,
+        hasIcon ? "gap-4" : "gap-1",
+      )}
+      {...props}
+    >
+      <div className="flex shrink-0 flex-row gap-1">
+        <span className="size-4 flex items-center justify-center">
+          {selected && (
+            <Icon
+              type="heroicons"
+              name="check"
+              className="size-4 text-[var(--dropdown-menu-selected-text)]"
+            />
+          )}
+        </span>
+        {icon}
+      </div>
+      {children}
+    </DropdownMenuPrimitive.Item>
+  );
+});
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+>(({ className, children, checked, disabled, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-4 pr-8 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
       "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
       "active:opacity-75",
       "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
-      "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitle5",
+      "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]",
       "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
-      className
+      className,
     )}
     checked={checked}
+    disabled={disabled}
     {...props}
   >
-    <span className="absolute left-4 flex items-center justify-center">
+    <span
+      className={cn(
+        "shrink-0 size-4 rounded-[2px] border flex items-center justify-center transition-all overflow-hidden",
+        checked &&
+          !disabled &&
+          "bg-[var(--dropdown-menu-checkbox-checked-bg)] border-[var(--dropdown-menu-checkbox-checked-bg)]",
+        checked &&
+          disabled &&
+          "bg-[var(--dropdown-menu-checkbox-disabled-checked-bg)] border-transparent",
+        !checked &&
+          disabled &&
+          "border-[var(--dropdown-menu-checkbox-disabled-border)]",
+        !checked &&
+          !disabled &&
+          "border-[var(--dropdown-menu-checkbox-border)]",
+      )}
+    >
       <DropdownMenuPrimitive.ItemIndicator>
-        <Icon type="heroicons" name="check" className="size-4" />
+        <Icon
+          type="heroicons"
+          name="check"
+          className="size-3 text-[var(--dropdown-menu-checkbox-checked-icon)]"
+        />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -139,29 +182,50 @@ DropdownMenuCheckboxItem.displayName =
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
-      "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
-      "active:opacity-75",
-      "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
-      "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitle5",
-      "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-4 flex items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Icon type="heroicons" name="circle" className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    icon?: React.ReactNode;
+  }
+>(({ className, children, disabled, icon, ...props }, ref) => {
+  const hasIconSlot = !!icon;
+
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        "relative flex cursor-pointer select-none box-border items-center py-4 pl-4 pr-8 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
+        "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
+        "active:opacity-75",
+        "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
+        "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]",
+        "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-radio-disabled-text)]",
+        "data-[state='checked']:data-[disabled]:!text-[var(--dropdown-menu-radio-selected-disabled-text)]",
+        className,
+        hasIconSlot ? "gap-4" : "gap-1",
+      )}
+      {...props}
+      disabled={disabled}
+    >
+      <div className="flex shrink-0 flex-row gap-1">
+        <span className="size-4">
+          <DropdownMenuPrimitive.ItemIndicator className="shrink-0">
+            <Icon
+              type="heroicons"
+              name="check"
+              className={cn(
+                "size-4",
+                disabled
+                  ? "text-[var(--dropdown-menu-radio-selected-disabled-text)]"
+                  : "text-[var(--dropdown-menu-selected-text)]",
+              )}
+            />
+          </DropdownMenuPrimitive.ItemIndicator>
+        </span>
+        {icon}
+      </div>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+});
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
@@ -173,9 +237,9 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-3 pt-4 pb-2 typography-small4 text-text-g-contrast-high",
+      "px-3 py-2 typography-small4 text-text-g-contrast-high",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -188,10 +252,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn(
-      "-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]",
-      className
-    )}
+    className={cn("h-px bg-[var(--dropdown-menu-seperator-bg)]", className)}
     {...props}
   />
 ));

package/src/components/TextInput/TextInput.tsx

@@ -2,13 +2,13 @@ import React, {
   ReactNode,
   forwardRef,
   useCallback,
-  useImperativeHandle,
   useMemo,
   useRef,
   FocusEvent,
   KeyboardEvent,
   ChangeEvent,
 } from "react";
+import { useStableMergedRef } from "@/utils/mergeRefs";
 import {
   helperTextVariant,
   iconActionVariant,
@@ -19,11 +19,7 @@ import {
   searchIconVariant,
   segmentedIconWrapperVariant,
 } from "./TextInput.styles";
-import {
-  CircleAlert,
-  CircleX,
-  Search,
-} from "lucide-react";
+import { CircleAlert, CircleX, Search } from "lucide-react";
 import { cn } from "@/utils/cn";
 
 export type InputProps = {
@@ -107,10 +103,14 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       normalizeOnCommit,
       ...props
     },
-    ref
+    ref,
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const _id = id || `${type}-${label}-input`;
+
+    // Stable merged ref — identity never changes so Headless UI (or any library
+    // that watches refs) won't trigger detach/re-attach loops.
+    const stableRef = useStableMergedRef(ref, inputRef);
     const hasLeftSectionIcon = !!startIcon || !!renderStartIcon;
     const hasRightSectionIcon = !!endIcon || !!renderEndIcon;
     const feedbackStatus =
@@ -118,16 +118,16 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       (error || !!errorMessage
         ? "error"
         : warning || !!warningMessage
-          ? "warning"
-          : "default");
+        ? "warning"
+        : "default");
     const isError = feedbackStatus === "error";
     const isWarning = feedbackStatus === "warning";
     const feedbackMessage =
       feedbackStatus === "error"
         ? errorMessage
         : feedbackStatus === "warning"
-          ? warningMessage
-          : helperText;
+        ? warningMessage
+        : helperText;
 
     const inputClassname = inputVariant({
       size,
@@ -183,8 +183,6 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       position: "end",
     });
 
-    useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
-
     const handleChange = useCallback(
       (e: ChangeEvent<HTMLInputElement>) => {
         if (normalize) {
@@ -192,7 +190,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         }
         props.onChange?.(e);
       },
-      [normalize, props.onChange]
+      [normalize, props.onChange],
     );
 
     const commitValue = useCallback(
@@ -209,7 +207,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
           } as unknown as ChangeEvent<HTMLInputElement>);
         }
       },
-      [trimOnCommit, normalizeOnCommit, props.onChange]
+      [trimOnCommit, normalizeOnCommit, props.onChange],
     );
 
     const handleBlur = useCallback(
@@ -217,7 +215,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         if (trimOnCommit || normalizeOnCommit) commitValue(e);
         props.onBlur?.(e);
       },
-      [trimOnCommit, normalizeOnCommit, commitValue, props.onBlur]
+      [trimOnCommit, normalizeOnCommit, commitValue, props.onBlur],
     );
 
     const handleKeyDown = useCallback(
@@ -227,7 +225,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         }
         props.onKeyDown?.(e);
       },
-      [trimOnCommit, normalizeOnCommit, commitValue, props.onKeyDown]
+      [trimOnCommit, normalizeOnCommit, commitValue, props.onKeyDown],
     );
 
     const displayValue =
@@ -273,7 +271,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             className={cn(
               inlineStartIconWrapperClassname,
               "flex",
-              classes?.iconSearchWrapper
+              classes?.iconSearchWrapper,
             )}
           >
             {renderStartIcon()}
@@ -286,7 +284,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
           <div
             className={cn(
               inlineStartIconWrapperClassname,
-              classes?.iconSearchWrapper
+              classes?.iconSearchWrapper,
             )}
           >
             <div
@@ -303,7 +301,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         <div
           className={cn(
             startSegmentIconWrapperClassname,
-            classes?.startIconWrapper
+            classes?.startIconWrapper,
           )}
           onClick={handleOnClickLeftSectionIcon}
         >
@@ -330,7 +328,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             className={cn(
               inlineEndIconWrapperClassname,
               "flex",
-              classes?.iconWrapper
+              classes?.iconWrapper,
             )}
           >
             {renderEndIcon()}
@@ -344,7 +342,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             className={cn(
               inlineEndIconWrapperClassname,
               "flex",
-              classes?.iconWrapper
+              classes?.iconWrapper,
             )}
           >
             <div
@@ -359,7 +357,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
       return (
         <div
-          className={cn(endSegmentIconWrapperClassname, classes?.endIconWrapper)}
+          className={cn(
+            endSegmentIconWrapperClassname,
+            classes?.endIconWrapper,
+          )}
           onClick={handleOnClickRightSectionIcon}
         >
           {endIcon}
@@ -382,21 +383,27 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
           <input
             {...props}
             placeholder=" "
-            ref={inputRef}
+            ref={stableRef}
             type={type}
             id={_id}
             disabled={disabled}
             value={displayValue}
             className={cn(inputClassname, props.className)}
             onChange={normalize ? handleChange : props.onChange}
-            onBlur={trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur}
-            onKeyDown={trimOnCommit || normalizeOnCommit ? handleKeyDown : props.onKeyDown}
+            onBlur={
+              trimOnCommit || normalizeOnCommit ? handleBlur : props.onBlur
+            }
+            onKeyDown={
+              trimOnCommit || normalizeOnCommit
+                ? handleKeyDown
+                : props.onKeyDown
+            }
           />
           {hasSearchIcon && !hasLeftSectionIcon && (
             <div
               className={cn(
                 inlineStartIconWrapperClassname,
-                classes?.iconSearchWrapper
+                classes?.iconSearchWrapper,
               )}
             >
               <Search className={cn(searchIconClassname, classes?.icon)} />
@@ -406,7 +413,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
           {hasClearIcon && !hasRightSectionIcon && (
             <div
-              className={cn(inlineEndIconWrapperClassname, classes?.iconWrapper)}
+              className={cn(
+                inlineEndIconWrapperClassname,
+                classes?.iconWrapper,
+              )}
               style={{
                 display:
                   keepCloseIconOnValue && props.value ? "flex" : undefined,
@@ -417,7 +427,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
                   iconActionClassname,
                   // 'fill-none stroke-current',
                   // "fill-none stroke-input-default-text hover:stroke-input-filled-text active:stroke-input-filled-text",
-                  classes?.icon
+                  classes?.icon,
                 )}
                 onMouseDown={handleClearInput}
               />
@@ -450,8 +460,8 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
                     isError
                       ? "text-input-error"
                       : isWarning
-                        ? "text-warning"
-                        : "text-input-filled-text"
+                      ? "text-warning"
+                      : "text-input-filled-text",
                   )}
                 />
               </span>
@@ -464,7 +474,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         )}
       </div>
     );
-  }
+  },
 );
 
 export default TextInput;

package/src/index.ts

@@ -19,6 +19,7 @@ export { Navbar } from "./components/Navbar";
 export { Footer } from "./components/Footer";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
+export { Badge, SeverityBadge } from "./components/Badge";
 export { Collapsible } from "./components/Collapsible";
 export { Calendar } from "./components/Calendar";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
@@ -41,7 +42,6 @@ export * from "./components/InputFilter/InputFilter";
 export * from "./components/Slider/Slider";
 export * from "./components/Switch/Switch";
 export * from "./components/DropdownMenu/DropdownMenu";
-export * from "./components/Menu/Menu";
 export * from "./components/Tooltip/Tooltip";
 export * from "./components/Tooltip/TooltipSimple";
 export * from "./components/Toast/Toast";
@@ -56,6 +56,7 @@ export * from "./components/Form";
 // Patterns
 export * from "./patterns/confirm-dialog/ConfirmDialog";
 export * from "./patterns/form-dialog/FormDialog";
+export * from "./patterns/menu/Menu";
 
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";
@@ -74,6 +75,7 @@ export type { NavbarProps, NavbarVariant } from "./components/Navbar/Navbar";
 export type { FooterProps, FooterVariant } from "./components/Footer/Footer";
 export type { AvatarProps } from "./components/Avatar/Avatar";
 export type { AvatarGroupProps } from "./components/Avatar/AvatarGroup";
+export type { BadgeProps, BadgeColor, SeverityBadgeProps, SeverityLevel } from "./components/Badge/Badge";
 
 // UTILS
 export {