@webority/ui-react 0.26.1 → 0.27.1

package/dist/types/components/AppKpiTile.d.ts

@@ -11,6 +11,9 @@
  * @param {import('react').ReactNode} [props.delta] Change text, e.g. "12% vs last month".
  * @param {'up'|'down'|'flat'} [props.deltaDirection] Colours the delta and picks its arrow. Omitted →
  *   inferred from a leading "+"/"-" on `delta` (falls back to 'flat').
+ * @param {'success'|'danger'|'neutral'} [props.deltaTone] The delta's colour, overriding the one its
+ *   direction implies, for a figure where a rise is bad news (refunds, bounce rate, cost). The arrow
+ *   still follows the direction. Omitted: up is success, down is danger, flat is muted.
  * @param {number[]} [props.sparkline] A trend series rendered as a small inline chart.
  * @param {'plain'|'filled'|'accent'|'spotlight'} [props.variant='plain'] The tile surface/layout:
  *   plain (today's bordered card), filled (a subtle surface fill), accent (a brand-tinted fill),
@@ -33,7 +36,7 @@
  * @param {string} [props.deltaClassName] Extra class(es) on the delta.
  * @param {string} [props.sparklineClassName] Extra class(es) on the sparkline.
  */
-export default function AppKpiTile({ label, value, caption, icon, iconTone, delta, deltaDirection, sparkline, variant, size, valueSize, inline, attention, href, linkComponent: Link, className, style, iconClassName, labelClassName, valueClassName, captionClassName, deltaClassName, sparklineClassName, ...rest }: {
+export default function AppKpiTile({ label, value, caption, icon, iconTone, delta, deltaDirection, deltaTone, sparkline, variant, size, valueSize, inline, attention, href, linkComponent: Link, className, style, iconClassName, labelClassName, valueClassName, captionClassName, deltaClassName, sparklineClassName, ...rest }: {
     label: string;
     value: import('react').ReactNode;
     caption?: import('react').ReactNode;
@@ -41,6 +44,7 @@ export default function AppKpiTile({ label, value, caption, icon, iconTone, delt
     iconTone?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
     delta?: import('react').ReactNode;
     deltaDirection?: 'up' | 'down' | 'flat';
+    deltaTone?: 'success' | 'danger' | 'neutral';
     sparkline?: number[];
     variant?: 'plain' | 'filled' | 'accent' | 'spotlight';
     size?: 'sm' | 'md' | 'lg';