@l3mpire/ui 2.25.1 → 2.25.2

package/USAGE.md

@@ -794,26 +794,39 @@ import { Tabs, TabList, TabTrigger, TabContent } from "@l3mpire/ui";
 
 ```tsx
 import { BrowserTab, BrowserTabItem } from "@l3mpire/ui";
-
-<BrowserTab activeTabId="1" onTabSelect={(id) => {}}>
-  <BrowserTabItem id="1" label="Page 1" onClose={(id) => {}} />
-  <BrowserTabItem id="2" label="Page 2" onClose={(id) => {}} />
+import { faRocketOutline } from "@l3mpire/icons";
+
+<BrowserTab draggable onReorder={(from, to) => {}} onAddTab={() => {}}>
+  <BrowserTabItem
+    icon={faRocketOutline}
+    label="Campaigns"
+    badge="99"
+    isActive
+    onClick={() => setActive(0)}
+    onClose={() => removeTab(0)}
+    onRename={(newLabel) => renameTab(0, newLabel)}
+  />
+  <BrowserTabItem label="Leads" onClick={() => setActive(1)} onClose={() => removeTab(1)} />
 </BrowserTab>
 ```
 
+Active tabs render with concave bottom corners that fuse into the bar divider (real browser-tab look). Inactive tabs get a hover fill + soft shadow on the inner pill (active tabs keep their bg on hover).
+
 | Prop (BrowserTab) | Values |
 |---|---|
-| `activeTabId` | `string` |
-| `onTabSelect` | `(id: string) => void` |
-| `onNewTab` | `() => void` (shows + button) |
-| `onReorder` | `(ids: string[]) => void` |
+| `onAddTab` | `() => void` (shows + button) |
+| `draggable` | `boolean` |
+| `onReorder` | `(from: number, to: number) => void` |
+| `onOverflowSelect` | `(hiddenIndex: number, lastVisibleIndex: number) => void` |
 
 | Prop (BrowserTabItem) | Values |
 |---|---|
-| `id` | `string` (required) |
-| `label` | `string` |
+| `label` | `string` (required) |
 | `icon` | `IconDefinition` |
-| `onClose` | `(id: string) => void` |
+| `badge` | `string` |
+| `isActive` | `boolean` |
+| `onClose` | `(e) => void` |
+| `onRename` | `(newLabel: string) => void` (enables dbl-click rename) |
 
 ---
 

package/dist/index.js

@@ -564,6 +564,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__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
@@ -571,78 +572,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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_icons3.Icon,
-            {
-              icon: ctx?.draggable && isHovered ? import_icons3.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__ */ (0, import_jsx_runtime3.jsx)(
-            "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__ */ (0, import_jsx_runtime3.jsx)(
-            "span",
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_icons3.Icon,
+                  {
+                    icon: showGrip ? import_icons3.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__ */ (0, import_jsx_runtime3.jsx)(
+                  "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__ */ (0, import_jsx_runtime3.jsx)(
+                  "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__ */ (0, import_jsx_runtime3.jsx)(Badge, { variant: "light", type: "neutral", size: "sm", children: badge }),
+                onClose && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "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__ */ (0, import_jsx_runtime3.jsx)(import_icons3.Icon, { icon: import_icons3.faXmarkOutline, size: "xs" })
+                  }
+                )
+              ]
             }
           ),
-          badge && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Badge, { variant: "light", type: "neutral", size: "sm", children: badge }),
-          onClose && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "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__ */ (0, import_jsx_runtime3.jsx)(import_icons3.Icon, { icon: import_icons3.faXmarkOutline, size: "xs" })
-            }
-          )
+          isActive && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 left-[-1px] w-px h-[8px] bg-browser-tab-item-bg" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 right-[-1px] w-px h-[8px] bg-browser-tab-item-bg" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 left-[-8px] size-[8px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute bottom-0 left-0 right-0 h-px bg-browser-tab-item-bg" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute inset-0 rounded-br-[8px] border-b border-r border-solid border-browser-tab-item-border" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { "aria-hidden": true, className: "pointer-events-none absolute bottom-0 right-[-8px] size-[8px]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute bottom-0 left-0 right-0 h-px bg-browser-tab-item-bg" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute inset-0 rounded-bl-[8px] border-b border-l border-solid border-browser-tab-item-border" })
+            ] })
+          ] })
         ]
       }
     );
@@ -723,7 +747,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,
@@ -732,7 +756,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__ */ (0, import_jsx_runtime3.jsx)(BrowserTabContext.Provider, { value: { ...ctxBase, itemIndex: index }, children: child }, index)),