@l3mpire/ui 2.25.1 → 2.25.2

package/dist/index.mjs

@@ -343,7 +343,7 @@ var Button = React2.forwardRef(
 Button.displayName = "Button";
 
 // src/components/ui/browser-tab.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var BrowserTabContext = React3.createContext(null);
 var BrowserTabItem = React3.forwardRef(
   ({ className, icon, label, badge, isActive = false, onClose, onRename, ...props }, ref) => {
@@ -380,6 +380,7 @@ var BrowserTabItem = React3.forwardRef(
     } : {};
     const isDragged = ctx?.draggable && ctx.dragIndex === ctx.itemIndex;
     const isDropTarget = ctx?.draggable && ctx.dropIndex === ctx.itemIndex && ctx.dragIndex !== ctx.itemIndex;
+    const showGrip = ctx?.draggable && isHovered;
     return /* @__PURE__ */ jsxs3(
       "div",
       {
@@ -387,78 +388,101 @@ var BrowserTabItem = React3.forwardRef(
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         className: cn(
-          "flex items-center gap-base px-base py-sm rounded-t-base cursor-pointer select-none transition-opacity shrink-0",
-          "bg-browser-tab-item-bg border-browser-tab-item-border border-solid",
-          isActive ? "border-l border-r border-t border-b-0 mb-[-1px] z-10" : "border-0",
+          "relative shrink-0 p-xs rounded-tl-base rounded-tr-base cursor-pointer select-none transition-opacity",
+          "border-solid border-browser-tab-item-border",
+          isActive ? "bg-browser-tab-item-bg border-l border-r border-t mb-[-1px] z-10" : "border-0",
           isDragged && "opacity-40",
-          isDropTarget && "ring-2 ring-inset ring-blue-400 rounded-t-base",
+          isDropTarget && "ring-2 ring-inset ring-blue-400",
           className
         ),
         ...dragProps,
         ...props,
         children: [
-          icon && /* @__PURE__ */ jsx3("div", { className: "shrink-0", children: /* @__PURE__ */ jsx3(
-            Icon3,
-            {
-              icon: ctx?.draggable && isHovered ? faGripDotsVerticalSolid : icon,
-              size: "xs",
-              className: cn(
-                ctx?.draggable && isHovered ? "text-browser-tab-item-hover-icon cursor-grab" : isActive ? "text-browser-tab-item-active-icon" : "text-browser-tab-item-inactive-icon"
-              )
-            }
-          ) }),
-          isEditing ? /* @__PURE__ */ jsx3(
-            "input",
-            {
-              ref: inputRef,
-              value: editValue,
-              onChange: (e) => setEditValue(e.target.value),
-              onBlur: commitRename,
-              onKeyDown: (e) => {
-                if (e.key === "Enter") commitRename();
-                if (e.key === "Escape") cancelRename();
-              },
-              onClick: (e) => e.stopPropagation(),
-              className: cn(
-                "text-sm font-medium leading-sm bg-transparent outline-none p-0 m-0",
-                "border-b border-browser-tab-item-border border-dashed border-t-0 border-l-0 border-r-0",
-                isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
-              ),
-              style: { width: `${Math.max(editValue.length + 1, 2)}ch` }
-            }
-          ) : /* @__PURE__ */ jsx3(
-            "span",
+          /* @__PURE__ */ jsxs3(
+            "div",
             {
               className: cn(
-                "text-sm font-medium leading-sm whitespace-nowrap",
-                isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
+                "flex items-center gap-base px-xs py-2xs transition-[background-color,border-radius,box-shadow]",
+                isHovered && !isActive ? "bg-browser-tab-item-hover-bg rounded-sm shadow-sm" : "bg-browser-tab-item-bg rounded-base"
               ),
-              onDoubleClick: (e) => {
-                if (onRename) {
-                  e.stopPropagation();
-                  setEditValue(label);
-                  setIsEditing(true);
-                }
-              },
-              children: label
+              children: [
+                icon && /* @__PURE__ */ jsx3("div", { className: "shrink-0", children: /* @__PURE__ */ jsx3(
+                  Icon3,
+                  {
+                    icon: showGrip ? faGripDotsVerticalSolid : icon,
+                    size: "xs",
+                    className: cn(
+                      showGrip ? "text-browser-tab-item-hover-icon cursor-grab" : isActive ? "text-browser-tab-item-active-icon" : "text-browser-tab-item-inactive-icon"
+                    )
+                  }
+                ) }),
+                isEditing ? /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    ref: inputRef,
+                    value: editValue,
+                    onChange: (e) => setEditValue(e.target.value),
+                    onBlur: commitRename,
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") commitRename();
+                      if (e.key === "Escape") cancelRename();
+                    },
+                    onClick: (e) => e.stopPropagation(),
+                    className: cn(
+                      "text-sm font-medium leading-sm bg-transparent outline-none p-0 m-0",
+                      "border-b border-browser-tab-item-border border-dashed border-t-0 border-l-0 border-r-0",
+                      isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
+                    ),
+                    style: { width: `${Math.max(editValue.length + 1, 2)}ch` }
+                  }
+                ) : /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    className: cn(
+                      "text-sm font-medium leading-sm whitespace-nowrap",
+                      isActive ? "text-browser-tab-item-active-text" : "text-browser-tab-item-inactive-text"
+                    ),
+                    onDoubleClick: (e) => {
+                      if (onRename) {
+                        e.stopPropagation();
+                        setEditValue(label);
+                        setIsEditing(true);
+                      }
+                    },
+                    children: label
+                  }
+                ),
+                badge && /* @__PURE__ */ jsx3(Badge, { variant: "light", type: "neutral", size: "sm", children: badge }),
+                onClose && /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onClose(e);
+                    },
+                    className: cn(
+                      "shrink-0 flex items-center justify-center cursor-pointer",
+                      isActive ? "text-browser-tab-item-active-icon" : "text-browser-tab-item-inactive-icon"
+                    ),
+                    "aria-label": `Close ${label}`,
+                    children: /* @__PURE__ */ jsx3(Icon3, { icon: faXmarkOutline, size: "xs" })
+                  }
+                )
+              ]
             }
           ),
-          badge && /* @__PURE__ */ jsx3(Badge, { variant: "light", type: "neutral", size: "sm", children: badge }),
-          onClose && /* @__PURE__ */ jsx3(
-            "button",
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                onClose(e);
-              },
-              className: cn(
-                "shrink-0 flex items-center justify-center cursor-pointer",
-                isActive ? "text-browser-tab-item-active-icon" : "text-browser-tab-item-inactive-icon"
-              ),
-              "aria-label": `Close ${label}`,
-              children: /* @__PURE__ */ jsx3(Icon3, { icon: faXmarkOutline, size: "xs" })
-            }
-          )
+          isActive && /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 left-[-1px] w-px h-[8px] bg-browser-tab-item-bg" }),
+            /* @__PURE__ */ jsx3("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 right-[-1px] w-px h-[8px] bg-browser-tab-item-bg" }),
+            /* @__PURE__ */ jsxs3("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 left-[-8px] size-[8px]", children: [
+              /* @__PURE__ */ jsx3("span", { className: "absolute bottom-0 left-0 right-0 h-px bg-browser-tab-item-bg" }),
+              /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 rounded-br-[8px] border-b border-r border-solid border-browser-tab-item-border" })
+            ] }),
+            /* @__PURE__ */ jsxs3("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 right-[-8px] size-[8px]", children: [
+              /* @__PURE__ */ jsx3("span", { className: "absolute bottom-0 left-0 right-0 h-px bg-browser-tab-item-bg" }),
+              /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 rounded-bl-[8px] border-b border-l border-solid border-browser-tab-item-border" })
+            ] })
+          ] })
         ]
       }
     );
@@ -539,7 +563,7 @@ var BrowserTab = React3.forwardRef(
       {
         ref,
         className: cn(
-          "flex items-end w-full h-[44px] border-b border-browser-tab-border px-lg",
+          "flex items-end w-full h-[44px] border-b border-browser-tab-border pl-base pr-lg",
           className
         ),
         ...props,
@@ -548,7 +572,7 @@ var BrowserTab = React3.forwardRef(
             "div",
             {
               ref: tabsContainerRef,
-              className: "flex items-center flex-1 min-w-0",
+              className: "flex items-center flex-1 min-w-0 pl-base",
               style: { overflowX: "clip", overflowY: "visible" },
               children: [
                 childArray.map((child, index) => /* @__PURE__ */ jsx3(BrowserTabContext.Provider, { value: { ...ctxBase, itemIndex: index }, children: child }, index)),
@@ -1780,7 +1804,7 @@ var ProductLogo = React13.forwardRef(
 ProductLogo.displayName = "ProductLogo";
 
 // src/components/ui/sidebar.tsx
-import { Fragment, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var SidebarContext = React14.createContext({
   isCollapsed: false,
   isHovered: false,
@@ -1816,7 +1840,7 @@ var SidebarHeader = React14.forwardRef(
           ) : /* @__PURE__ */ jsx14(ProductLogo, { product: "lemlist", size: "sm", hasText: false })
         ) : (
           // Expanded: logo + collapse button
-          /* @__PURE__ */ jsxs13(Fragment, { children: [
+          /* @__PURE__ */ jsxs13(Fragment2, { children: [
             /* @__PURE__ */ jsx14(ProductLogo, { product: "lemlist", size: "sm", hasText: true }),
             /* @__PURE__ */ jsx14(
               "button",
@@ -1870,7 +1894,7 @@ var Sidebar = React14.forwardRef(
             const rest = childArray.filter(
               (child) => !(React14.isValidElement(child) && child.type?.displayName === "SidebarFooter")
             );
-            return /* @__PURE__ */ jsxs13(Fragment, { children: [
+            return /* @__PURE__ */ jsxs13(Fragment2, { children: [
               /* @__PURE__ */ jsx14("div", { className: "flex flex-col gap-lg p-lg flex-1 overflow-y-auto", children: rest }),
               footer
             ] });
@@ -1914,7 +1938,7 @@ var SidebarFooter = React14.forwardRef(
 SidebarFooter.displayName = "SidebarFooter";
 
 // src/components/ui/search-bar.tsx
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var searchBarVariants = cva8(
   [
     "inline-flex w-full items-center rounded-md border transition-colors",
@@ -1976,7 +2000,7 @@ var SearchBar = React15.forwardRef(
           className: "shrink-0 text-search-bar-icon"
         }
       ),
-      !isCollapsed && /* @__PURE__ */ jsxs14(Fragment2, { children: [
+      !isCollapsed && /* @__PURE__ */ jsxs14(Fragment3, { children: [
         /* @__PURE__ */ jsx15(
           "input",
           {
@@ -2387,7 +2411,7 @@ SidebarHeadingItem.displayName = "SidebarHeadingItem";
 import * as React21 from "react";
 import { cva as cva10 } from "class-variance-authority";
 import { Icon as Icon15, faChevronDownSolid as faChevronDownSolid2, faStarsOutline } from "@l3mpire/icons";
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var sidebarItemVariants = cva10(
   [
     "flex items-center gap-base rounded-base transition-colors cursor-pointer"
@@ -2457,7 +2481,7 @@ var SidebarItem = React21.forwardRef(
               className: cn("shrink-0", iconColorClass)
             }
           ) : null,
-          !isCollapsed && /* @__PURE__ */ jsxs19(Fragment3, { children: [
+          !isCollapsed && /* @__PURE__ */ jsxs19(Fragment4, { children: [
             /* @__PURE__ */ jsx21(
               "span",
               {
@@ -8190,7 +8214,7 @@ var FilterNodeActions = ({
 FilterNodeActions.displayName = "FilterNodeActions";
 
 // src/components/ui/filter/advanced-row.tsx
-import { Fragment as Fragment4, jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
 var selectBtnStyle = [
   "flex items-center gap-base",
   "px-base py-sm",
@@ -8396,7 +8420,7 @@ var AdvancedRow = ({
             type: "button",
             className: cn(selectBtnStyle, "flex-1 min-w-[80px] justify-between overflow-hidden"),
             children: [
-              multiTags && multiTags.length > 0 ? /* @__PURE__ */ jsx59(ValueTagRow, { tags: multiTags }) : /* @__PURE__ */ jsxs53(Fragment4, { children: [
+              multiTags && multiTags.length > 0 ? /* @__PURE__ */ jsx59(ValueTagRow, { tags: multiTags }) : /* @__PURE__ */ jsxs53(Fragment5, { children: [
                 valueLeadingIcon && /* @__PURE__ */ jsx59(
                   Icon37,
                   {