torch-glare 2.1.5 → 2.2.0

package/apps/lib/components/BadgeField.tsx

@@ -15,6 +15,7 @@ import { Icon, Input, Group, Trilling } from "./Input";
 import { useClickOutside } from "../hooks/useClickOutside";
 import { Badge } from "./Badge";
 import { Tag, useTagSelection } from "../hooks/useTagSelection";
+import { cva } from "class-variance-authority";
 
 interface Props
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "variant"> {
@@ -30,6 +31,7 @@ interface Props
   actionButton?: ReactNode;
   tags: Tag[];
   onValueChange?: (tags: Tag[]) => void;
+  addLabel?: string
 }
 
 export const BadgeField = forwardRef<HTMLInputElement, Props>(
@@ -47,6 +49,8 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
       actionButton,
       theme,
       tags,
+      addLabel = "add",
+      dir,
       children,
       ...props
     },
@@ -98,6 +102,7 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
         >
           <PopoverTrigger asChild>
             <Group
+              dir={dir}
               error={errorMessage !== undefined}
               onTable={onTable}
               data-theme={theme}
@@ -167,37 +172,151 @@ export const BadgeField = forwardRef<HTMLInputElement, Props>(
         </Tooltip>
 
         <PopoverContent
+          dir={dir}
           data-theme={theme}
           ref={popoverContentRef}
           style={{ width: dropDownListWidth }}
           variant={variant}
           onKeyDown={handleKeyDown}
-          className="p-2 flex flex-wrap gap-1"
+          className={cn(menuContentContinerStyles({ variant: "PresentationStyle" }), "p-1 rounded-[17px]")}
+
+        // Reuse the DropdownMenu surface so the list matches the menu design.
         >
-          <>
+          <div
+            className={cn(menuContentStyles({ variant: "PresentationStyle" }), "p-0")}
+
+          >
             {filteredTags.length > 0 ? (
               filteredTags.map((tag, index) => (
-                <Badge
+                <button
+                  type="button"
                   key={tag.id}
-                  size={size}
-                  color={tag.variant as any}
-                  label={tag.name}
                   onClick={() => handleSelectTag(tag.id)}
-                  className={`outline-none ${focusedPopoverIndex === index ? "ring-2 ring-blue-500" : ""}`}
+                  data-highlighted={focusedPopoverIndex === index ? "" : undefined}
                   tabIndex={focusedPopoverIndex === index ? 0 : -1}
-                />
+                  className={cn(
+                    MenuItemStyles({ variant: "Default", size: "M" }),
+                    "w-full p-1 shrink-0 h-fit"
+                  )}
+                >
+                  <div className="flex items-center justify-between w-full">
+                    <Badge size={size} badgeStyle={"solid"} color={tag.variant as any} label={tag.name} />
+
+                    <div className="flex group-hover:opacity-100 opacity-0 px-[4px] py-[2px] items-center rounded-[6px] bg-white-50">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" className="rtl:rotate-180" fill="none">
+                        <path d="M3.91422 5.49995H10V6.49995H3.91422L6.5962 9.1819L5.8891 9.889L2 5.99995L5.8891 2.11084L6.5962 2.81794L3.91422 5.49995Z" fill="black" />
+                      </svg>
+                      <p className="text-black-1000 text-right text-[12px] font-[510] leading-[148%]">
+                        {addLabel}
+                      </p>
+                    </div>
+                  </div>
+                </button>
               ))
             ) : (
-              <div className="text-sm text-gray-500 py-1 px-2">
+              <div className="px-3 py-2 typography-body-small-regular text-white-alpha-75">
                 {tags.length === 0
                   ? "All tags selected"
                   : "No matching tags found"}
               </div>
-            )}
-          </>
+            )} </div>
         </PopoverContent>
-      </Popover>
+      </Popover >
     );
   }
 );
 BadgeField.displayName = "BadgeField";
+
+// Local copies of the menu surface styles so the dropdown list matches the
+// DropdownMenu/ContextMenu design (self-contained — no shared module).
+const menuContentStyles = cva(
+  [
+    "rounded-[10px]",
+    "min-w-[240px]",
+    "outline-none",
+    "overflow-scroll",
+    "data-[state=open]:animate-in",
+    "data-[state=open]:fade-in-0",
+    "overflow-x-hidden",
+    "scrollbar-hide",
+    "flex gap-[1px] flex-col",
+  ],
+  {
+    variants: {
+      variant: {
+        PresentationStyle: [
+        ],
+      },
+      defaultVariants: {
+        variant: "PresentationStyle",
+      },
+    },
+  }
+);
+const menuContentContinerStyles = cva(
+  [
+    "rounded-[14px]",
+    "min-w-[240px]",
+    "outline-none",
+    "overflow-scroll",
+    "data-[state=open]:animate-in",
+    "data-[state=open]:fade-in-0",
+    "overflow-x-hidden",
+    "scrollbar-hide",
+    "backdrop-blur-[21px]",
+    "flex gap-1 flex-col",
+  ],
+  {
+    variants: {
+      variant: {
+        PresentationStyle: [
+          "bg-[rgba(61,64,69,0.72)]",
+          "shadow-[0_0_32px_2px_rgba(0,0,0,0.20),0_0_48px_2px_rgba(0,0,0,0.05)]",
+        ],
+      },
+      defaultVariants: {
+        variant: "PresentationStyle",
+      },
+    },
+  }
+);
+
+const MenuItemStyles = cva(
+  [
+    "text-content-presentation-global-primary-light typography-body-medium-regular",
+    "outline-none",
+    "border",
+    "border-transparent",
+    "flex",
+    "items-center",
+    "justify-start",
+    "text-overflow",
+    "overflow-hidden",
+    "transition-all",
+    "bg-[rgba(184,192,204,0.36)]",
+    "ease-in-out",
+    "duration-300",
+    "flex",
+    "p-1",
+    "w-full",
+    "items-center ",
+    "group",
+  ],
+  {
+    variants: {
+      variant: {
+        Default: [
+          "hover:bg-[rgba(184,192,204,0.50)] ",
+        ],
+      },
+      size: {
+        S: ["typography-body-small-regular", "h-[24px]"],
+        M: ["typography-body-medium-regular", "h-[32px]"],
+      },
+      defaultVariants: {
+        variant: "Default",
+        size: "M",
+      },
+    },
+  }
+);