@rovula/ui 0.1.21 → 0.1.22

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}
   >
@@ -52,7 +52,7 @@ const DropdownMenuSubContent = React.forwardRef<
     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
+      className,
     )}
     {...props}
     style={{
@@ -74,7 +74,7 @@ const DropdownMenuContent = React.forwardRef<
       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
+        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}
   />
@@ -189,8 +253,8 @@ const DropdownMenuSeparator = React.forwardRef<
   <DropdownMenuPrimitive.Separator
     ref={ref}
     className={cn(
-      "-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]",
-      className
+      "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,
@@ -111,6 +111,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     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 =
@@ -183,7 +187,6 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       position: "end",
     });
 
-    useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
 
     const handleChange = useCallback(
       (e: ChangeEvent<HTMLInputElement>) => {
@@ -382,7 +385,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
           <input
             {...props}
             placeholder=" "
-            ref={inputRef}
+            ref={stableRef}
             type={type}
             id={_id}
             disabled={disabled}

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 {