@flytedan/flytebot-design-system 0.24.0 → 0.25.0

package/dist/index.d.cts

@@ -1117,14 +1117,22 @@ interface StatTileProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     value?: React.ReactNode;
     sub?: React.ReactNode;
-    /** "+12.4%" or "-3.1%" — colour and arrow follow the sign. */
+    /** "+12.4%" or "-3.1%" — the arrow direction always follows the sign (up for a
+     *  positive delta, down for a negative one). Colour follows the sign too, UNLESS
+     *  `invert` is set. */
     delta?: string;
+    /** Set for a metric where a larger number is the bad outcome (an opt-out rate, an
+     *  error rate, a churn rate, ...) — flips which sign colours as good (ok) vs bad
+     *  (danger), without changing which way the arrow points. A rising opt-out rate is
+     *  still an up arrow (the number really did go up) but rendered in the danger
+     *  colour, not the ok one a plain increase would otherwise get. */
+    invert?: boolean;
     loading?: boolean;
     /** Thin one-line variant for stat rows above tables. */
     compact?: boolean;
     className?: string;
 }
-declare function StatTile({ label, value, sub, delta, loading, compact, className, ...rest }: StatTileProps): React.JSX.Element;
+declare function StatTile({ label, value, sub, delta, invert, loading, compact, className, ...rest }: StatTileProps): React.JSX.Element;
 
 declare function languageLabel(lang?: string): string;
 /** Tokenise source into [{t, c}] where c is a token class or null for plain text. */

package/dist/index.d.ts

@@ -1117,14 +1117,22 @@ interface StatTileProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     value?: React.ReactNode;
     sub?: React.ReactNode;
-    /** "+12.4%" or "-3.1%" — colour and arrow follow the sign. */
+    /** "+12.4%" or "-3.1%" — the arrow direction always follows the sign (up for a
+     *  positive delta, down for a negative one). Colour follows the sign too, UNLESS
+     *  `invert` is set. */
     delta?: string;
+    /** Set for a metric where a larger number is the bad outcome (an opt-out rate, an
+     *  error rate, a churn rate, ...) — flips which sign colours as good (ok) vs bad
+     *  (danger), without changing which way the arrow points. A rising opt-out rate is
+     *  still an up arrow (the number really did go up) but rendered in the danger
+     *  colour, not the ok one a plain increase would otherwise get. */
+    invert?: boolean;
     loading?: boolean;
     /** Thin one-line variant for stat rows above tables. */
     compact?: boolean;
     className?: string;
 }
-declare function StatTile({ label, value, sub, delta, loading, compact, className, ...rest }: StatTileProps): React.JSX.Element;
+declare function StatTile({ label, value, sub, delta, invert, loading, compact, className, ...rest }: StatTileProps): React.JSX.Element;
 
 declare function languageLabel(lang?: string): string;
 /** Tokenise source into [{t, c}] where c is a token class or null for plain text. */

package/dist/index.js

@@ -2890,12 +2890,14 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
 
 // src/components/data/StatTile.tsx
 import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
-function StatTile({ label, value, sub, delta, loading = false, compact: compact3 = false, className = "", ...rest }) {
+function StatTile({ label, value, sub, delta, invert = false, loading = false, compact: compact3 = false, className = "", ...rest }) {
+  const isDecrease = delta?.startsWith("-") ?? false;
+  const isGood = invert ? isDecrease : !isDecrease;
   return /* @__PURE__ */ jsxs36("div", { className: ["fd-stat", compact3 ? "fd-stat-compact" : "", className].filter(Boolean).join(" "), ...rest, children: [
     loading ? /* @__PURE__ */ jsx42("span", { className: "fd-skel fd-skel-text", style: { display: "block", height: compact3 ? 20 : 28, width: "62%" } }) : /* @__PURE__ */ jsxs36("span", { className: "fd-stat-top", children: [
       /* @__PURE__ */ jsx42("span", { className: "fd-stat-figure", children: value }),
-      delta ? /* @__PURE__ */ jsxs36("span", { className: delta.startsWith("-") ? "fd-stat-delta-down" : "fd-stat-delta-up", style: { fontWeight: 600, fontSize: "var(--body-sm-size)", flex: "none" }, children: [
-        /* @__PURE__ */ jsx42("i", { className: "ph ph-arrow-" + (delta.startsWith("-") ? "down" : "up") + "-right", "aria-hidden": "true" }),
+      delta ? /* @__PURE__ */ jsxs36("span", { className: isGood ? "fd-stat-delta-up" : "fd-stat-delta-down", style: { fontWeight: 600, fontSize: "var(--body-sm-size)", flex: "none" }, children: [
+        /* @__PURE__ */ jsx42("i", { className: "ph ph-arrow-" + (isDecrease ? "down" : "up") + "-right", "aria-hidden": "true" }),
         " ",
         delta
       ] }) : null