@flytedan/flytebot-design-system 0.12.9 → 0.12.11

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,11 +3159,15 @@ 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/padding moved to the .fd-erow stylesheet rule
+        // (MP-114 follow-ups): 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 — and padding specifically is also read back by
+        // .fd-tlist-footer's own indent calc(), as --erow-pad-x, so it has to be a
+        // real, readable stylesheet value rather than a number only this component
+        // ever sees.
         height: "100%",
-        padding: "0 12px",
         cursor: draggable ? "grab" : void 0,
         // Own the gesture on touch too — without this, a touch-drag on a draggable row
         // starts the page scrolling instead of (or as well as) the pointer drag.
@@ -3170,10 +3175,25 @@ 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 ? (
+          // font-size moved to the .fd-erow-grip stylesheet rule, same reason as the
+          // row's own padding above: .fd-tlist-footer's indent reads it back as
+          // --erow-grip-size.
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { className: "ph ph-dots-six-vertical fd-erow-grip", "aria-hidden": "true", style: { 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 +3207,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