@flytedan/flytebot-design-system 0.12.9 → 0.12.10

package/dist/index.cjs

@@ -275,7 +275,7 @@ function IconButton({
   const overflowRow = useOverflowRow();
   const cls = [
     "fd-btn-icon",
-    variant === "outline" ? "fd-btn-icon-outline" : variant === "solid" ? "fd-btn-icon-solid" : "",
+    variant === "outline" ? "fd-btn-icon-outline" : variant === "solid" ? "fd-btn-icon-solid" : variant === "soft" ? "fd-btn-icon-soft" : "",
     tone !== "neutral" ? "is-" + tone : "",
     size === "sm" ? "fd-btn-icon-sm" : size === "lg" ? "fd-btn-icon-lg" : "",
     round ? "fd-btn-icon-round" : "",
@@ -3141,6 +3141,7 @@ function EntityRowMetrics({ metrics, className = "", style }) {
 }
 function EntityRow({
   title,
+  titleIcon,
   meta,
   metrics,
   accessory,
@@ -3158,9 +3159,11 @@ function EntityRow({
       onPointerDown,
       className: ["fd-erow", tone === "danger" ? "fd-erow-danger" : "", className].filter(Boolean).join(" "),
       style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 10,
+        // display/alignItems/gap moved to the .fd-erow stylesheet rule (MP-114
+        // follow-up): an inline style always wins over a stylesheet rule regardless of
+        // specificity or media/container query, which would have made it impossible
+        // for the narrow-container rule below to ever switch this row from a flex row
+        // to a grid (see that rule's own comment for why it needs to).
         height: "100%",
         padding: "0 12px",
         cursor: draggable ? "grab" : void 0,
@@ -3170,10 +3173,20 @@ function EntityRow({
         ...style
       },
       children: [
-        draggable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { className: "ph ph-dots-six-vertical", "aria-hidden": "true", style: { fontSize: 14, flex: "none", color: "var(--text-muted)" } }) : null,
+        draggable ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { className: "ph ph-dots-six-vertical fd-erow-grip", "aria-hidden": "true", style: { fontSize: 14, flex: "none", color: "var(--text-muted)" } }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "fd-erow-body", children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "fd-erow-titleline", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-title fd-body-sm", children: title }),
+            titleIcon ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Tooltip, { label: titleIcon.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: ["fd-erow-title-icon", titleIcon.tone ? "is-" + titleIcon.tone : ""].filter(Boolean).join(" "),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { className: "ph ph-" + titleIcon.icon, "aria-hidden": "true" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-title fd-body-sm", children: title })
+                ]
+              }
+            ) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-title fd-body-sm", children: title }),
             meta ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "fd-erow-meta", children: meta }) : null
           ] }),
           hasStrip ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "fd-erow-strip", children: [
@@ -3187,7 +3200,7 @@ function EntityRow({
             icon: action.icon,
             label: action.label,
             size: "sm",
-            variant: "solid",
+            variant: action.tone ? "soft" : "solid",
             tone: action.tone === "add" ? "ok" : action.tone === "remove" ? "danger" : "neutral",
             className: "fd-erow-action",
             onClick: action.onClick