@flytedan/flytebot-design-system 0.12.9 → 0.12.11

package/dist/index.d.cts

@@ -31,12 +31,16 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     size?: "sm" | "md" | "lg";
     /** "ghost" and "outline" are quiet: no fill, the glyph carries the tone. "solid" is a
      *  filled button in the tone's colour — for the one action on a surface that has to be
-     *  found at a glance, like the add/remove button on every row of a transfer list. */
-    variant?: "ghost" | "outline" | "solid";
-    /** What the action does. On "solid" it picks the fill; on "ghost"/"outline" it tints the
-     *  glyph. "neutral" is the default look of each variant, which for "solid" is the brand
-     *  fill. Every tone has hover, pressed and focus states and is legible in both themes —
-     *  the fills are the --btn-solid-* tokens, measured against light and dark grounds. */
+     *  found at a glance, like the add/remove button on every row of a transfer list. "soft"
+     *  is the same idea with a lighter, less saturated fill and a visibly darker border
+     *  drawn around it, for a caller that wants the button to read as a button without the
+     *  full-saturation "solid" look — only "ok" and "danger" tones are defined for it. */
+    variant?: "ghost" | "outline" | "solid" | "soft";
+    /** What the action does. On "solid"/"soft" it picks the fill; on "ghost"/"outline" it
+     *  tints the glyph. "neutral" is the default look of each variant, which for "solid" is
+     *  the brand fill ("soft" has no neutral fill — pass "ok" or "danger"). Every tone has
+     *  hover, pressed and focus states and is legible in both themes — the fills are the
+     *  --btn-solid-* / --btn-soft-* tokens, measured against light and dark grounds. */
     tone?: "neutral" | "ok" | "danger";
     round?: boolean;
     disabled?: boolean;
@@ -1346,10 +1350,11 @@ interface EntityRowAction {
     label: string;
     onClick: () => void;
     /** Picks the fill — "add" is the constructive (ok) fill, "remove" the destructive
-     *  (danger) fill, and no tone the brand fill. The button is always a filled
-     *  IconButton (variant "solid"): it is the one action on the row, repeated down a long
-     *  list, and has to be findable at a glance on a default card and on a danger-toned one
-     *  alike. No effect on layout, so a caller can still pass any icon. */
+     *  (danger) fill, and no tone the brand fill. The button is always a filled IconButton
+     *  (variant "soft": a lighter fill with a darker border, MP-52): it is the one action on
+     *  the row, repeated down a long list, and has to be findable at a glance on a default
+     *  card and on a danger-toned one alike. No effect on layout, so a caller can still pass
+     *  any icon. */
     tone?: "add" | "remove";
 }
 /** Width in px a metric cell takes when it doesn't ask for its own. Wide enough for a
@@ -1390,8 +1395,23 @@ interface EntityRowMetric {
  * as the drag ghost) hands one of these around whole, so a prop added here can't be
  * silently dropped by the second render site the way individually-spread props were.
  */
+/** An icon shown before the row's title, itself the Tooltip trigger together with the
+ *  title text (MP-52: "hovering EITHER the icon or the name" opens the same explanation —
+ *  one hoverable/focusable region rather than two separate targets that could disagree). */
+interface EntityRowTitleIcon {
+    /** Phosphor icon name, e.g. "warning". */
+    icon: string;
+    tone?: "danger";
+    /** The long-form explanation, shown in the kit's Tooltip on hover, keyboard focus and
+     *  tap — never a native `title`, so it is never truncated to a browser tooltip. */
+    tooltip: React.ReactNode;
+}
 interface EntityRowContent {
     title: string;
+    /** Renders before `title`, wrapped with it in the kit Tooltip. Drive this from the
+     *  row's own existing state (e.g. the same signal that sets `tone: "danger"`) — it is
+     *  not a second source of truth, just a second thing that one signal explains. */
+    titleIcon?: EntityRowTitleIcon;
     /** A secondary line — a count, a subtitle, whatever the caller's data has that a raw
      *  title doesn't. Optional because plenty of rows are fine with just a name. Sits
      *  inline after the title; for numbers that must line up row-to-row use `metrics`. */
@@ -1470,7 +1490,7 @@ declare function EntityRowMetrics({ metrics, className, style }: EntityRowMetric
  * same move — pointer-only and keyboard users get an equally real affordance, not a
  * degraded fallback.
  */
-declare function EntityRow({ title, meta, metrics, accessory, tone, action, draggable, onPointerDown, style, className, }: EntityRowProps): React.JSX.Element;
+declare function EntityRow({ title, titleIcon, meta, metrics, accessory, tone, action, draggable, onPointerDown, style, className, }: EntityRowProps): React.JSX.Element;
 
 type TransferListSide = "left" | "right";
 interface TransferListSideProps<T> {

package/dist/index.d.ts

@@ -31,12 +31,16 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     size?: "sm" | "md" | "lg";
     /** "ghost" and "outline" are quiet: no fill, the glyph carries the tone. "solid" is a
      *  filled button in the tone's colour — for the one action on a surface that has to be
-     *  found at a glance, like the add/remove button on every row of a transfer list. */
-    variant?: "ghost" | "outline" | "solid";
-    /** What the action does. On "solid" it picks the fill; on "ghost"/"outline" it tints the
-     *  glyph. "neutral" is the default look of each variant, which for "solid" is the brand
-     *  fill. Every tone has hover, pressed and focus states and is legible in both themes —
-     *  the fills are the --btn-solid-* tokens, measured against light and dark grounds. */
+     *  found at a glance, like the add/remove button on every row of a transfer list. "soft"
+     *  is the same idea with a lighter, less saturated fill and a visibly darker border
+     *  drawn around it, for a caller that wants the button to read as a button without the
+     *  full-saturation "solid" look — only "ok" and "danger" tones are defined for it. */
+    variant?: "ghost" | "outline" | "solid" | "soft";
+    /** What the action does. On "solid"/"soft" it picks the fill; on "ghost"/"outline" it
+     *  tints the glyph. "neutral" is the default look of each variant, which for "solid" is
+     *  the brand fill ("soft" has no neutral fill — pass "ok" or "danger"). Every tone has
+     *  hover, pressed and focus states and is legible in both themes — the fills are the
+     *  --btn-solid-* / --btn-soft-* tokens, measured against light and dark grounds. */
     tone?: "neutral" | "ok" | "danger";
     round?: boolean;
     disabled?: boolean;
@@ -1346,10 +1350,11 @@ interface EntityRowAction {
     label: string;
     onClick: () => void;
     /** Picks the fill — "add" is the constructive (ok) fill, "remove" the destructive
-     *  (danger) fill, and no tone the brand fill. The button is always a filled
-     *  IconButton (variant "solid"): it is the one action on the row, repeated down a long
-     *  list, and has to be findable at a glance on a default card and on a danger-toned one
-     *  alike. No effect on layout, so a caller can still pass any icon. */
+     *  (danger) fill, and no tone the brand fill. The button is always a filled IconButton
+     *  (variant "soft": a lighter fill with a darker border, MP-52): it is the one action on
+     *  the row, repeated down a long list, and has to be findable at a glance on a default
+     *  card and on a danger-toned one alike. No effect on layout, so a caller can still pass
+     *  any icon. */
     tone?: "add" | "remove";
 }
 /** Width in px a metric cell takes when it doesn't ask for its own. Wide enough for a
@@ -1390,8 +1395,23 @@ interface EntityRowMetric {
  * as the drag ghost) hands one of these around whole, so a prop added here can't be
  * silently dropped by the second render site the way individually-spread props were.
  */
+/** An icon shown before the row's title, itself the Tooltip trigger together with the
+ *  title text (MP-52: "hovering EITHER the icon or the name" opens the same explanation —
+ *  one hoverable/focusable region rather than two separate targets that could disagree). */
+interface EntityRowTitleIcon {
+    /** Phosphor icon name, e.g. "warning". */
+    icon: string;
+    tone?: "danger";
+    /** The long-form explanation, shown in the kit's Tooltip on hover, keyboard focus and
+     *  tap — never a native `title`, so it is never truncated to a browser tooltip. */
+    tooltip: React.ReactNode;
+}
 interface EntityRowContent {
     title: string;
+    /** Renders before `title`, wrapped with it in the kit Tooltip. Drive this from the
+     *  row's own existing state (e.g. the same signal that sets `tone: "danger"`) — it is
+     *  not a second source of truth, just a second thing that one signal explains. */
+    titleIcon?: EntityRowTitleIcon;
     /** A secondary line — a count, a subtitle, whatever the caller's data has that a raw
      *  title doesn't. Optional because plenty of rows are fine with just a name. Sits
      *  inline after the title; for numbers that must line up row-to-row use `metrics`. */
@@ -1470,7 +1490,7 @@ declare function EntityRowMetrics({ metrics, className, style }: EntityRowMetric
  * same move — pointer-only and keyboard users get an equally real affordance, not a
  * degraded fallback.
  */
-declare function EntityRow({ title, meta, metrics, accessory, tone, action, draggable, onPointerDown, style, className, }: EntityRowProps): React.JSX.Element;
+declare function EntityRow({ title, titleIcon, meta, metrics, accessory, tone, action, draggable, onPointerDown, style, className, }: EntityRowProps): React.JSX.Element;
 
 type TransferListSide = "left" | "right";
 interface TransferListSideProps<T> {

package/dist/index.js

@@ -71,7 +71,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" : "",
@@ -2937,6 +2937,7 @@ function EntityRowMetrics({ metrics, className = "", style }) {
 }
 function EntityRow({
   title,
+  titleIcon,
   meta,
   metrics,
   accessory,
@@ -2954,11 +2955,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.
@@ -2966,10 +2971,25 @@ function EntityRow({
         ...style
       },
       children: [
-        draggable ? /* @__PURE__ */ jsx39("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__ */ jsx39("i", { className: "ph ph-dots-six-vertical fd-erow-grip", "aria-hidden": "true", style: { flex: "none", color: "var(--text-muted)" } })
+        ) : null,
         /* @__PURE__ */ jsxs36("span", { className: "fd-erow-body", children: [
           /* @__PURE__ */ jsxs36("span", { className: "fd-erow-titleline", children: [
-            /* @__PURE__ */ jsx39("span", { className: "fd-erow-title fd-body-sm", children: title }),
+            titleIcon ? /* @__PURE__ */ jsx39(Tooltip, { label: titleIcon.tooltip, children: /* @__PURE__ */ jsxs36(
+              "button",
+              {
+                type: "button",
+                className: ["fd-erow-title-icon", titleIcon.tone ? "is-" + titleIcon.tone : ""].filter(Boolean).join(" "),
+                children: [
+                  /* @__PURE__ */ jsx39("i", { className: "ph ph-" + titleIcon.icon, "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx39("span", { className: "fd-erow-title fd-body-sm", children: title })
+                ]
+              }
+            ) }) : /* @__PURE__ */ jsx39("span", { className: "fd-erow-title fd-body-sm", children: title }),
             meta ? /* @__PURE__ */ jsx39("span", { className: "fd-erow-meta", children: meta }) : null
           ] }),
           hasStrip ? /* @__PURE__ */ jsxs36("span", { className: "fd-erow-strip", children: [
@@ -2983,7 +3003,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