@inf-monkeys-tech/monkeys-design 1.0.41 → 1.0.42

package/dist/index.js

@@ -22926,14 +22926,13 @@ function WorkbenchCollection({
     const content = renderItem(entry.item, context);
     const titleConfig = config.item?.title;
     const visibility = titleConfig?.visibility ?? "always";
-    if (!titleConfig || visibility === "never") return content;
-    const title = titleConfig.getContent?.(entry.item, context) ?? context.renderSlot("title");
-    if (!hasRenderableNode(title)) return content;
-    const placement = titleConfig.placement ?? "below";
-    const overlay2 = placement.startsWith("overlay-");
-    const maxLines = normalizeTitleMaxLines(titleConfig.maxLines);
-    const surface = titleConfig.surface ?? (overlay2 ? "scrim" : "none");
-    const titleNode = /* @__PURE__ */ jsxRuntime.jsx(
+    const title = titleConfig && visibility !== "never" ? titleConfig.getContent?.(entry.item, context) ?? context.renderSlot("title") : null;
+    const hasTitle = Boolean(titleConfig && hasRenderableNode(title));
+    const placement = titleConfig?.placement ?? "below";
+    const titleOverlay = hasTitle && placement.startsWith("overlay-");
+    const maxLines = normalizeTitleMaxLines(titleConfig?.maxLines);
+    const surface = titleConfig?.surface ?? (titleOverlay ? "scrim" : "none");
+    const titleNode = hasTitle ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         "data-collection-item-title": "",
@@ -22941,10 +22940,10 @@ function WorkbenchCollection({
         "data-title-visibility": visibility,
         className: cn(
           "min-w-0 px-1 py-2 text-sm font-medium text-foreground",
-          titleConfig.align === "center" && "text-center",
-          titleConfig.align === "end" && "text-right",
-          visibility === "hover" && "opacity-0 transition-opacity group-hover/workbench-collection-item:opacity-100 group-focus-within/workbench-collection-item:opacity-100",
-          overlay2 && "pointer-events-none absolute inset-x-0 z-10 px-3 py-2",
+          titleConfig?.align === "center" && "text-center",
+          titleConfig?.align === "end" && "text-right",
+          visibility === "hover" && "!opacity-0 transition-opacity group-hover/workbench-collection-item:!opacity-100 group-focus-within/workbench-collection-item:!opacity-100",
+          titleOverlay && "pointer-events-none absolute inset-x-0 z-10 px-3 py-2",
           placement === "overlay-top" && "top-0",
           placement === "overlay-center" && "top-1/2 -translate-y-1/2 motion-reduce:transform-none",
           placement === "overlay-bottom" && "bottom-0",
@@ -22958,20 +22957,51 @@ function WorkbenchCollection({
         style: maxLines ? { WebkitLineClamp: maxLines } : void 0,
         children: title
       }
-    );
+    ) : null;
+    const actionsConfig = config.item?.actions;
+    const actionsVisibility = actionsConfig?.visibility ?? "always";
+    const actions = actionsConfig && actionsVisibility !== "never" ? context.renderSlot("actions") : null;
+    const hasActions = Boolean(actionsConfig && hasRenderableNode(actions));
+    const actionsPlacement = actionsConfig?.placement ?? "overlay-bottom";
+    const actionsOverlay = hasActions && actionsPlacement.startsWith("overlay-");
+    const actionsNode = hasActions ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-collection-item-actions": "",
+        "data-actions-placement": actionsPlacement,
+        "data-actions-align": actionsConfig?.align ?? "center",
+        "data-actions-visibility": actionsVisibility,
+        className: cn(
+          "flex min-w-0 items-center gap-2 px-2 py-2",
+          actionsConfig?.align === "start" && "justify-start",
+          (actionsConfig?.align === void 0 || actionsConfig.align === "center") && "justify-center",
+          actionsConfig?.align === "end" && "justify-end",
+          actionsConfig?.wrap !== false && "flex-wrap",
+          actionsVisibility === "hover" && "!opacity-0 transition-opacity group-hover/workbench-collection-item:!opacity-100 group-focus-within/workbench-collection-item:!opacity-100 [@media(hover:none)]:!opacity-100",
+          actionsOverlay && "pointer-events-none absolute inset-x-0 z-20",
+          actionsPlacement === "overlay-top" && "top-1",
+          actionsPlacement === "overlay-bottom" && "bottom-1",
+          classNames?.itemActions
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pointer-events-auto flex items-center gap-2", actionsConfig?.wrap !== false && "flex-wrap"), children: actions })
+      }
+    ) : null;
+    if (!hasTitle && !hasActions) return content;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("min-w-0", overlay2 && "relative", classNames?.itemContent),
+        className: cn("min-w-0", (titleOverlay || actionsOverlay) && "relative", classNames?.itemContent),
         "data-collection-item-content": "",
         children: [
           placement === "above" ? titleNode : null,
+          actionsPlacement === "above" ? actionsNode : null,
           content,
-          placement === "below" || overlay2 ? titleNode : null
+          placement === "below" || titleOverlay ? titleNode : null,
+          actionsPlacement === "below" || actionsOverlay ? actionsNode : null
         ]
       }
     );
-  }, [classNames?.itemContent, classNames?.itemTitle, config.item?.title, renderItem]);
+  }, [classNames?.itemActions, classNames?.itemContent, classNames?.itemTitle, config.item, renderItem]);
   const renderEntry = React2.useCallback((entry, layout, includeShell = true) => {
     const context = createItemContext(entry, layout);
     const content = renderItemContent2(entry, context);