@grafana/components 0.0.1

package/dist/cjs/index.d.cts

@@ -0,0 +1,132 @@
+import * as react from 'react';
+import react__default, { ReactNode, JSX } from 'react';
+import { ThemeColorMode } from '@grafana/design-tokens';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IconName } from '@grafana/ui';
+import { Placement } from '@floating-ui/react';
+
+interface ColorModeContextType {
+    colorMode: ThemeColorMode;
+    setColorMode: (colorMode: ThemeColorMode) => void;
+}
+interface ColorModeProviderProps {
+    children: ReactNode;
+    defaultColorMode?: ThemeColorMode;
+}
+/**
+ * Provides a shared context for the currently-active theme color mode, and sets
+ * the data-color-mode attribute on the document element whenever it changes.
+ */
+declare const ColorModeProvider: react__default.FC<ColorModeProviderProps>;
+/**
+ * Use this to query the active color mode, or to set it, e.g. with an effect
+ * hook within a component which explicitly changes the active color mode:
+ *
+ * useEffect(() => {
+ *   setColorMode(colorMode);
+ * }, [colorMode]);
+ *
+ */
+declare const useColorMode: () => ColorModeContextType;
+
+interface PopoverProps {
+    /**
+     * Content used to trigger the Popover being displayed
+     */
+    trigger: JSX.Element;
+    /**
+     * Content to render within the Popover
+     */
+    children: JSX.Element;
+    /**
+     * Should the popover be open? Implicitly means the popover visibility is
+     * controlled; if omitted, the popover target will control visibility
+     */
+    isOpen?: boolean;
+    /**
+     * Set to true if you want the tooltip to stay long enough so the user can
+     * move mouse over content to select text or click a link
+     */
+    isInteractive?: boolean;
+    /**
+     * Placement of the Popover relative to the trigger content
+     */
+    placement?: Placement;
+    /**
+     * Transition duration for hide/show effects, in milliseconds
+     */
+    transitionDuration?: number;
+    /**
+     * Additional delay before hiding the popover after mouseout, in milliseconds
+     */
+    hideDelay?: number;
+}
+declare const Popover: react.ForwardRefExoticComponent<PopoverProps & react.RefAttributes<HTMLElement>>;
+
+interface ComparisonTooltipProps extends Omit<PopoverProps, 'children'> {
+    current?: string;
+    previous?: string;
+    previousLabel?: string;
+    currentLabel?: string;
+    title?: string;
+    currentIcon?: IconName;
+    previousIcon?: IconName;
+    hideDelay?: number;
+}
+declare const ComparisonTooltip: ({ trigger, placement, current, previous, previousLabel, currentLabel, title, currentIcon, previousIcon, hideDelay, }: ComparisonTooltipProps) => react_jsx_runtime.JSX.Element;
+
+interface ComparisonBadgeProps extends Pick<ComparisonTooltipProps, 'currentLabel' | 'previousLabel' | 'placement'> {
+    current?: number | null;
+    previous?: number | null;
+    highlight?: boolean;
+    timeframeLabel?: string;
+    tooltip?: boolean;
+}
+declare const ComparisonBadge: ({ current, previous, currentLabel, previousLabel, placement, highlight, timeframeLabel, tooltip, }: ComparisonBadgeProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Shared utility functions for handling comparison calculations across components
+ */
+interface ComparisonResult {
+    hasComparison: boolean;
+    direction: 'up' | 'down' | 'neutral';
+    percentageChange: number;
+    percentageLabel: string;
+}
+/**
+ * Calculate comparison metrics between a current value and a baseline value
+ * @param current - The current value to compare
+ * @param baseline - The baseline value to compare against (optional)
+ * @returns ComparisonResult object with calculated metrics
+ */
+declare const calculateComparison: (current: number | undefined | null, baseline: number | undefined | null) => ComparisonResult;
+
+/**
+ * Number formatting options
+ */
+interface FormatNumberOptions {
+    /** Decimal places (default: 2) */
+    decimals?: number;
+    /** Threshold for compact formatting (default: 1000) */
+    compactThreshold?: number;
+    /** Never use compact formatting (for precise displays) */
+    precise?: boolean;
+}
+/**
+ * Format numbers with optional compact notation (k, m, b)
+ * Components handle their own prefixes/suffixes ($ or %)
+ *
+ * @param value - The number to format (or 'loading' state)
+ * @param options - Formatting options
+ * @returns Formatted number string (no prefixes/suffixes)
+ *
+ * @example
+ * formatNumber(1234) // "1.2k"
+ * formatNumber(1234, { precise: true }) // "1,234.00"
+ * formatNumber(1234, { decimals: 0 }) // "1k"
+ * formatNumber(999) // "999.00"
+ */
+declare const formatNumber: (value: number | string | "loading", options?: FormatNumberOptions) => string;
+
+export { ColorModeProvider, ComparisonBadge, ComparisonTooltip, Popover, calculateComparison, formatNumber, useColorMode };
+export type { ColorModeContextType, ColorModeProviderProps, ComparisonResult, ComparisonTooltipProps, FormatNumberOptions, PopoverProps };

package/dist/esm/_virtual/hoist-non-react-statics.cjs.js

@@ -0,0 +1,4 @@
+import { __require as requireHoistNonReactStatics_cjs } from '../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js';
+
+requireHoistNonReactStatics_cjs();
+//# sourceMappingURL=hoist-non-react-statics.cjs.js.map

package/dist/esm/_virtual/hoist-non-react-statics.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hoist-non-react-statics.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/esm/_virtual/index.js

@@ -0,0 +1,4 @@
+var reactIs = {exports: {}};
+
+export { reactIs as __module };
+//# sourceMappingURL=index.js.map

package/dist/esm/_virtual/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/_virtual/react-is.development.js

@@ -0,0 +1,4 @@
+var reactIs_development = {};
+
+export { reactIs_development as __exports };
+//# sourceMappingURL=react-is.development.js.map

package/dist/esm/_virtual/react-is.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/_virtual/react-is.production.min.js

@@ -0,0 +1,4 @@
+var reactIs_production_min = {};
+
+export { reactIs_production_min as __exports };
+//# sourceMappingURL=react-is.production.min.js.map

package/dist/esm/_virtual/react-is.production.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-is.production.min.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/ColorModeProvider/ColorModeProvider.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useContext } from 'react';
+
+const ColorModeContext = createContext(void 0);
+const ColorModeProvider = ({
+  children,
+  defaultColorMode = "light"
+}) => {
+  const [colorMode, setColorMode] = useState(defaultColorMode);
+  useEffect(() => {
+    console.log("ColorModeProvider", { colorMode });
+    document.documentElement.setAttribute("data-color-mode", colorMode);
+  }, [colorMode]);
+  return /* @__PURE__ */ jsx(ColorModeContext.Provider, { value: { colorMode, setColorMode }, children });
+};
+const useColorMode = () => {
+  const context = useContext(ColorModeContext);
+  if (context === void 0) {
+    throw new Error("useColorMode must be used within a ColorModeProvider");
+  }
+  return context;
+};
+
+export { ColorModeProvider, useColorMode };
+//# sourceMappingURL=ColorModeProvider.js.map

package/dist/esm/components/ColorModeProvider/ColorModeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorModeProvider.js","sources":["../../../../src/components/ColorModeProvider/ColorModeProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';\nimport { ThemeColorMode } from '@grafana/design-tokens';\n\nimport '@grafana/design-tokens/dist/css/legacy/primitives.css';\nimport '@grafana/design-tokens/dist/css/legacy/colors.light.css';\nimport '@grafana/design-tokens/dist/css/legacy/colors.dark.css';\n\nexport interface ColorModeContextType {\n  colorMode: ThemeColorMode;\n  setColorMode: (colorMode: ThemeColorMode) => void;\n}\n\nexport interface ColorModeProviderProps {\n  children: ReactNode;\n  defaultColorMode?: ThemeColorMode;\n}\n\nconst ColorModeContext = createContext<ColorModeContextType | undefined>(undefined);\n\n/**\n * Provides a shared context for the currently-active theme color mode, and sets\n * the data-color-mode attribute on the document element whenever it changes.\n */\nexport const ColorModeProvider: React.FC<ColorModeProviderProps> = ({\n  children,\n  defaultColorMode = 'light',\n}) => {\n  const [colorMode, setColorMode] = useState<ThemeColorMode>(defaultColorMode);\n\n  useEffect(() => {\n    console.log('ColorModeProvider', { colorMode });\n    document.documentElement.setAttribute('data-color-mode', colorMode);\n  }, [colorMode]);\n\n  return (\n    <ColorModeContext.Provider value={{ colorMode, setColorMode }}>\n      {children}\n    </ColorModeContext.Provider>\n  );\n};\n\n/**\n * Use this to query the active color mode, or to set it, e.g. with an effect\n * hook within a component which explicitly changes the active color mode:\n *\n * useEffect(() => {\n *   setColorMode(colorMode);\n * }, [colorMode]);\n *\n */\nexport const useColorMode = () => {\n  const context = useContext(ColorModeContext);\n\n  if (context === undefined) {\n    throw new Error('useColorMode must be used within a ColorModeProvider');\n  }\n\n  return context;\n};\n"],"names":[],"mappings":";;;AAiBA,MAAM,gBAAA,GAAmB,cAAgD,MAAS,CAAA;AAM3E,MAAM,oBAAsD,CAAC;AAAA,EAClE,QAAA;AAAA,EACA,gBAAA,GAAmB;AACrB,CAAA,KAAM;AACJ,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAyB,gBAAgB,CAAA;AAE3E,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,GAAA,CAAI,mBAAA,EAAqB,EAAE,SAAA,EAAW,CAAA;AAC9C,IAAA,QAAA,CAAS,eAAA,CAAgB,YAAA,CAAa,iBAAA,EAAmB,SAAS,CAAA;AAAA,EACpE,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,uBACE,GAAA,CAAC,iBAAiB,QAAA,EAAjB,EAA0B,OAAO,EAAE,SAAA,EAAW,YAAA,EAAa,EACzD,QAAA,EACH,CAAA;AAEJ;AAWO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,OAAA,GAAU,WAAW,gBAAgB,CAAA;AAE3C,EAAA,IAAI,YAAY,MAAA,EAAW;AACzB,IAAA,MAAM,IAAI,MAAM,sDAAsD,CAAA;AAAA,EACxE;AAEA,EAAA,OAAO,OAAA;AACT;;;;"}

package/dist/esm/components/ComparisonBadge/ComparisonBadge.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cx } from '@emotion/css';
+import { Icon } from '@grafana/ui';
+import { calculateComparison } from '../../utils/comparison.js';
+import { formatNumber } from '../../utils/formatters.js';
+import { ComparisonTooltip } from '../ComparisonTooltip/ComparisonTooltip.js';
+import { getComparisonBadgeStyles, cssVariables } from './ComparisonBadge.styles.js';
+import { GlobalCSSVariables } from '../../node_modules/@grafana/design-tokens/dist/esm/lib/util/emotion.js';
+
+const formatCurrency = (value) => {
+  return !!value ? `$${formatNumber(value, { precise: true })}` : "N/A";
+};
+const DIRECTION_ICON = {
+  up: "arrow-up",
+  down: "arrow-down",
+  neutral: "minus"
+};
+const ComparisonBadge = ({
+  current,
+  previous,
+  currentLabel,
+  previousLabel,
+  placement,
+  highlight = false,
+  timeframeLabel,
+  tooltip = true
+}) => {
+  const { direction, hasComparison, percentageLabel } = calculateComparison(current, previous);
+  const styles = getComparisonBadgeStyles({ highlight, direction, tooltip });
+  const directionIconStyle = (() => {
+    switch (true) {
+      case direction == "neutral":
+        return styles.dash;
+      default:
+        return void 0;
+    }
+  })();
+  const badgeContent = /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.clockIconWrapper, children: /* @__PURE__ */ jsx(Icon, { name: "clock-nine" }) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.trendLabelContainer, children: [
+      /* @__PURE__ */ jsxs("span", { className: styles.trendLabel, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.trendIconWrapper, children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: DIRECTION_ICON[direction],
+            className: cx(styles.trendIcon, directionIconStyle)
+          }
+        ) }),
+        hasComparison && percentageLabel && /* @__PURE__ */ jsx(Fragment, { children: percentageLabel })
+      ] }),
+      timeframeLabel && /* @__PURE__ */ jsxs("span", { className: styles.timeframeLabel, children: [
+        "vs ",
+        timeframeLabel.toLowerCase()
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(GlobalCSSVariables, { variables: cssVariables(), defaultColorMode: null }),
+    tooltip ? /* @__PURE__ */ jsx(
+      ComparisonTooltip,
+      {
+        trigger: badgeContent,
+        current: formatCurrency(current),
+        previous: formatCurrency(previous),
+        currentLabel,
+        previousLabel,
+        placement
+      }
+    ) : badgeContent
+  ] });
+};
+
+export { ComparisonBadge };
+//# sourceMappingURL=ComparisonBadge.js.map

package/dist/esm/components/ComparisonBadge/ComparisonBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonBadge.js","sources":["../../../../src/components/ComparisonBadge/ComparisonBadge.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { GlobalCSSVariables } from '@grafana/design-tokens';\nimport { Icon, IconName } from '@grafana/ui';\nimport { calculateComparison } from '../../utils/comparison';\nimport { formatNumber } from '../../utils/formatters';\nimport { ComparisonTooltipProps, ComparisonTooltip } from '../ComparisonTooltip';\nimport { cssVariables, getComparisonBadgeStyles } from './ComparisonBadge.styles';\n\nconst formatCurrency = (value: number | undefined | null): string => {\n  return !!value ? `$${formatNumber(value, { precise: true })}` : 'N/A';\n};\n\nexport interface ComparisonBadgeProps\n  extends Pick<ComparisonTooltipProps, 'currentLabel' | 'previousLabel' | 'placement'> {\n  current?: number | null;\n  previous?: number | null;\n  highlight?: boolean;\n  timeframeLabel?: string;\n  tooltip?: boolean;\n}\n\nconst DIRECTION_ICON: Record<'up' | 'down' | 'neutral', IconName> = {\n  up: 'arrow-up',\n  down: 'arrow-down',\n  neutral: 'minus',\n};\n\nexport const ComparisonBadge = ({\n  current,\n  previous,\n  currentLabel,\n  previousLabel,\n  placement,\n  highlight = false,\n  timeframeLabel,\n  tooltip = true,\n}: ComparisonBadgeProps) => {\n  const { direction, hasComparison, percentageLabel } = calculateComparison(current, previous);\n  const styles = getComparisonBadgeStyles({ highlight, direction, tooltip });\n\n  const directionIconStyle = (() => {\n    switch (true) {\n      case direction == 'neutral':\n        return styles.dash;\n      default:\n        return undefined;\n    }\n  })();\n\n  const badgeContent = (\n    <div className={styles.container}>\n      <div className={styles.clockIconWrapper}>\n        <Icon name=\"clock-nine\" />\n      </div>\n      <div className={styles.trendLabelContainer}>\n        <span className={styles.trendLabel}>\n          <span className={styles.trendIconWrapper}>\n            <Icon\n              name={DIRECTION_ICON[direction]}\n              className={cx(styles.trendIcon, directionIconStyle)}\n            />\n          </span>\n          {hasComparison && percentageLabel && <>{percentageLabel}</>}\n        </span>\n        {timeframeLabel && (\n          <span className={styles.timeframeLabel}>vs {timeframeLabel.toLowerCase()}</span>\n        )}\n      </div>\n    </div>\n  );\n\n  return (\n    <>\n      <GlobalCSSVariables variables={cssVariables()} defaultColorMode={null} />\n      {tooltip ? (\n        <ComparisonTooltip\n          trigger={badgeContent}\n          current={formatCurrency(current)}\n          previous={formatCurrency(previous)}\n          currentLabel={currentLabel}\n          previousLabel={previousLabel}\n          placement={placement}\n        />\n      ) : (\n        badgeContent\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAQA,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA6C;AACnE,EAAA,OAAO,CAAC,CAAC,KAAA,GAAQ,CAAA,CAAA,EAAI,YAAA,CAAa,KAAA,EAAO,EAAE,OAAA,EAAS,IAAA,EAAM,CAAC,CAAA,CAAA,GAAK,KAAA;AAClE,CAAA;AAWA,MAAM,cAAA,GAA8D;AAAA,EAClE,EAAA,EAAI,UAAA;AAAA,EACJ,IAAA,EAAM,YAAA;AAAA,EACN,OAAA,EAAS;AACX,CAAA;AAEO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,cAAA;AAAA,EACA,OAAA,GAAU;AACZ,CAAA,KAA4B;AAC1B,EAAA,MAAM,EAAE,SAAA,EAAW,aAAA,EAAe,iBAAgB,GAAI,mBAAA,CAAoB,SAAS,QAAQ,CAAA;AAC3F,EAAA,MAAM,SAAS,wBAAA,CAAyB,EAAE,SAAA,EAAW,SAAA,EAAW,SAAS,CAAA;AAEzE,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,QAAQ,IAAA;AAAM,MACZ,KAAK,SAAA,IAAa,SAAA;AAChB,QAAA,OAAO,MAAA,CAAO,IAAA;AAAA,MAChB;AACE,QAAA,OAAO,MAAA;AAAA;AACX,EACF,CAAA,GAAG;AAEH,EAAA,MAAM,YAAA,mBACJ,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,SAAA,EACrB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,gBAAA,EACrB,8BAAC,IAAA,EAAA,EAAK,IAAA,EAAK,cAAa,CAAA,EAC1B,CAAA;AAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,mBAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,UAAA,EACtB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,gBAAA,EACtB,QAAA,kBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,eAAe,SAAS,CAAA;AAAA,YAC9B,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,SAAA,EAAW,kBAAkB;AAAA;AAAA,SACpD,EACF,CAAA;AAAA,QACC,aAAA,IAAiB,eAAA,oBAAmB,GAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,eAAA,EAAgB;AAAA,OAAA,EAC1D,CAAA;AAAA,MACC,cAAA,oBACC,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,cAAA,EAAgB,QAAA,EAAA;AAAA,QAAA,KAAA;AAAA,QAAI,eAAe,WAAA;AAAY,OAAA,EAAE;AAAA,KAAA,EAE7E;AAAA,GAAA,EACF,CAAA;AAGF,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,EAAa,EAAG,kBAAkB,IAAA,EAAM,CAAA;AAAA,IACtE,OAAA,mBACC,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,YAAA;AAAA,QACT,OAAA,EAAS,eAAe,OAAO,CAAA;AAAA,QAC/B,QAAA,EAAU,eAAe,QAAQ,CAAA;AAAA,QACjC,YAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA;AAAA,KACF,GAEA;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/esm/components/ComparisonBadge/ComparisonBadge.styles.js

@@ -0,0 +1,112 @@
+import { css } from '@emotion/css';
+import { getDesignTokens } from '../../node_modules/@grafana/design-tokens/dist/esm/lib/getDesignTokens/getDesignTokens.js';
+
+const cssVariables = () => {
+  const { legacy } = getDesignTokens({ valueType: "css" });
+  return {
+    dark: {
+      "comparison-badge-icon-background-color": legacy.colors.background.secondary,
+      "comparison-badge-icon-highlight-background-color": legacy.palette.whiteBaseOpacity10
+    },
+    light: {
+      "comparison-badge-icon-background-color": legacy.colors.background.canvas,
+      "comparison-badge-icon-highlight-background-color": legacy.palette.blackBaseOpacity8
+    }
+  };
+};
+const BADGE_HEIGHT = 28;
+const TREND_ICON_SIZE = 20;
+const getComparisonBadgeStyles = ({
+  highlight,
+  direction,
+  tooltip
+}) => {
+  const {
+    legacy,
+    primitives: { spacing, typography }
+  } = getDesignTokens({ valueType: "css" });
+  const labelColor = (() => {
+    switch (true) {
+      case highlight:
+      case direction === "up":
+        return legacy.colors.text.maxContrast;
+      default:
+        return legacy.colors.primary.text;
+    }
+  })();
+  return {
+    container: css({
+      boxSizing: "border-box",
+      background: "transparent",
+      borderRadius: legacy.borderRadius.pill,
+      border: `1px solid
+        ${highlight ? legacy.colors.border.strong : legacy.colors.border.weak}`,
+      padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xxs}`,
+      textAlign: "left",
+      display: "inline-flex",
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center",
+      fontFamily: typography.fontFamily.ui,
+      fontSize: typography.fontSize.ui.sm,
+      height: `${BADGE_HEIGHT}px`,
+      position: "relative",
+      transition: "background 0.2s ease-in-out",
+      ...tooltip ? {
+        cursor: "pointer",
+        "&:hover": {
+          background: legacy.colors.background.secondary
+        }
+      } : {}
+    }),
+    clockIconWrapper: css({
+      background: highlight ? "var(--comparison-badge-icon-highlight-background-color)" : "var(--comparison-badge-icon-background-color)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "22px",
+      height: "22px",
+      borderRadius: legacy.borderRadius.pill,
+      color: legacy.colors.text.primary
+    }),
+    trendLabelContainer: css({
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: spacing.xxs,
+      paddingLeft: spacing.xxs,
+      fontWeight: typography.fontWeight.medium
+    }),
+    trendLabel: css({
+      display: "flex",
+      alignItems: "center",
+      color: labelColor,
+      lineHeight: `${BADGE_HEIGHT}px`,
+      fontWeight: typography.fontWeight.medium,
+      fontVariantNumeric: "tabular-nums"
+    }),
+    timeframeLabel: css({
+      color: highlight ? legacy.colors.text.maxContrast : legacy.colors.text.primary,
+      paddingLeft: spacing.xxs,
+      lineHeight: `${BADGE_HEIGHT}px`,
+      fontWeight: typography.fontWeight.normal
+    }),
+    trendIconWrapper: css({
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "16px",
+      height: "16px"
+    }),
+    trendIcon: css({
+      width: `${TREND_ICON_SIZE}px`,
+      height: `${TREND_ICON_SIZE}px`
+    }),
+    dash: css({
+      color: legacy.colors.text.secondary
+    })
+  };
+};
+
+export { cssVariables, getComparisonBadgeStyles };
+//# sourceMappingURL=ComparisonBadge.styles.js.map

package/dist/esm/components/ComparisonBadge/ComparisonBadge.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonBadge.styles.js","sources":["../../../../src/components/ComparisonBadge/ComparisonBadge.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { CSSVariables, getDesignTokens } from '@grafana/design-tokens';\n\nexport const cssVariables = (): CSSVariables => {\n  const { legacy } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    dark: {\n      'comparison-badge-icon-background-color': legacy.colors.background.secondary,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.whiteBaseOpacity10,\n    },\n    light: {\n      'comparison-badge-icon-background-color': legacy.colors.background.canvas,\n      'comparison-badge-icon-highlight-background-color': legacy.palette.blackBaseOpacity8,\n    },\n  };\n};\n\nconst BADGE_HEIGHT = 28;\nconst TREND_ICON_SIZE = 20;\n\nexport const getComparisonBadgeStyles = ({\n  highlight,\n  direction,\n  tooltip,\n}: {\n  highlight: boolean;\n  direction: string;\n  tooltip?: boolean;\n}) => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  const labelColor = (() => {\n    switch (true) {\n      case highlight:\n      case direction === 'up':\n        return legacy.colors.text.maxContrast;\n      default:\n        return legacy.colors.primary.text;\n    }\n  })();\n\n  return {\n    container: css({\n      boxSizing: 'border-box',\n      background: 'transparent',\n      borderRadius: legacy.borderRadius.pill,\n      border: `1px solid\n        ${highlight ? legacy.colors.border.strong : legacy.colors.border.weak}`,\n      padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xxs}`,\n      textAlign: 'left',\n      display: 'inline-flex',\n      flexDirection: 'row',\n      justifyContent: 'center',\n      alignItems: 'center',\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      height: `${BADGE_HEIGHT}px`,\n      position: 'relative',\n      transition: 'background 0.2s ease-in-out',\n      ...(tooltip\n        ? {\n            cursor: 'pointer',\n            '&:hover': {\n              background: legacy.colors.background.secondary,\n            },\n          }\n        : {}),\n    }),\n    clockIconWrapper: css({\n      background: highlight\n        ? 'var(--comparison-badge-icon-highlight-background-color)'\n        : 'var(--comparison-badge-icon-background-color)',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '22px',\n      height: '22px',\n      borderRadius: legacy.borderRadius.pill,\n      color: legacy.colors.text.primary,\n    }),\n    trendLabelContainer: css({\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: spacing.xxs,\n      paddingLeft: spacing.xxs,\n      fontWeight: typography.fontWeight.medium,\n    }),\n    trendLabel: css({\n      display: 'flex',\n      alignItems: 'center',\n      color: labelColor,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.medium,\n      fontVariantNumeric: 'tabular-nums',\n    }),\n    timeframeLabel: css({\n      color: highlight ? legacy.colors.text.maxContrast : legacy.colors.text.primary,\n      paddingLeft: spacing.xxs,\n      lineHeight: `${BADGE_HEIGHT}px`,\n      fontWeight: typography.fontWeight.normal,\n    }),\n    trendIconWrapper: css({\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '16px',\n      height: '16px',\n    }),\n    trendIcon: css({\n      width: `${TREND_ICON_SIZE}px`,\n      height: `${TREND_ICON_SIZE}px`,\n    }),\n    dash: css({\n      color: legacy.colors.text.secondary,\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/ComparisonTooltip/ComparisonTooltip.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Icon } from '@grafana/ui';
+import { Popover } from '../Popover/Popover.js';
+import { getStyles } from './ComparisonTooltip.styles.js';
+
+const ComparisonTooltip = ({
+  trigger,
+  placement = "top",
+  current,
+  previous,
+  previousLabel,
+  currentLabel = "Current",
+  title,
+  currentIcon = "eye",
+  previousIcon = "clock-nine",
+  hideDelay
+}) => {
+  const styles = getStyles();
+  return /* @__PURE__ */ jsx(Popover, { trigger, placement, hideDelay, children: /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    title && /* @__PURE__ */ jsx("div", { className: styles.heading, children: title }),
+    /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children: currentLabel }),
+        /* @__PURE__ */ jsxs("div", { className: styles.value, children: [
+          /* @__PURE__ */ jsx(Icon, { name: currentIcon, size: "sm", className: styles.icon }),
+          /* @__PURE__ */ jsx("span", { children: current || "N/A" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children: previousLabel }),
+        /* @__PURE__ */ jsxs("div", { className: styles.value, children: [
+          /* @__PURE__ */ jsx(Icon, { name: previousIcon, size: "sm", className: styles.icon }),
+          /* @__PURE__ */ jsx("span", { children: previous || "N/A" })
+        ] })
+      ] })
+    ] })
+  ] }) });
+};
+
+export { ComparisonTooltip };
+//# sourceMappingURL=ComparisonTooltip.js.map

package/dist/esm/components/ComparisonTooltip/ComparisonTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonTooltip.js","sources":["../../../../src/components/ComparisonTooltip/ComparisonTooltip.tsx"],"sourcesContent":["import { Icon, IconName } from '@grafana/ui';\nimport { Popover, PopoverProps } from '../Popover';\nimport { getStyles } from './ComparisonTooltip.styles';\n\nexport interface ComparisonTooltipProps extends Omit<PopoverProps, 'children'> {\n  current?: string;\n  previous?: string;\n  previousLabel?: string;\n  currentLabel?: string;\n  title?: string;\n  currentIcon?: IconName;\n  previousIcon?: IconName;\n  hideDelay?: number;\n}\n\nexport const ComparisonTooltip = ({\n  trigger,\n  placement = 'top',\n  current,\n  previous,\n  previousLabel,\n  currentLabel = 'Current',\n  title,\n  currentIcon = 'eye',\n  previousIcon = 'clock-nine',\n  hideDelay,\n}: ComparisonTooltipProps) => {\n  const styles = getStyles();\n\n  return (\n    <Popover trigger={trigger} placement={placement} hideDelay={hideDelay}>\n      <div className={styles.wrapper}>\n        {title && <div className={styles.heading}>{title}</div>}\n        <div className={styles.content}>\n          <div className={styles.section}>\n            <div className={styles.sectionTitle}>{currentLabel}</div>\n            <div className={styles.value}>\n              <Icon name={currentIcon} size=\"sm\" className={styles.icon} />\n              <span>{current || 'N/A'}</span>\n            </div>\n          </div>\n          <div className={styles.section}>\n            <div className={styles.sectionTitle}>{previousLabel}</div>\n            <div className={styles.value}>\n              <Icon name={previousIcon} size=\"sm\" className={styles.icon} />\n              <span>{previous || 'N/A'}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Popover>\n  );\n};\n"],"names":[],"mappings":";;;;;AAeO,MAAM,oBAAoB,CAAC;AAAA,EAChC,OAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,OAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,KAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,YAAA,GAAe,YAAA;AAAA,EACf;AACF,CAAA,KAA8B;AAC5B,EAAA,MAAM,SAAS,SAAA,EAAU;AAEzB,EAAA,uBACE,GAAA,CAAC,WAAQ,OAAA,EAAkB,SAAA,EAAsB,WAC/C,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACpB,QAAA,EAAA;AAAA,IAAA,KAAA,oBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,SAAU,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,oBACjD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EAAe,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,wBACnD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAK,IAAA,EAAM,WAAA,EAAa,MAAK,IAAA,EAAK,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,0BAC3D,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,OAAA,IAAW,KAAA,EAAM;AAAA,SAAA,EAC1B;AAAA,OAAA,EACF,CAAA;AAAA,sBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EACrB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,YAAA,EAAe,QAAA,EAAA,aAAA,EAAc,CAAA;AAAA,wBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,KAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAK,IAAA,EAAM,YAAA,EAAc,MAAK,IAAA,EAAK,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,0BAC5D,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,QAAA,IAAY,KAAA,EAAM;AAAA,SAAA,EAC3B;AAAA,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/esm/components/ComparisonTooltip/ComparisonTooltip.styles.js

@@ -0,0 +1,61 @@
+import { css } from '@emotion/css';
+import { getDesignTokens } from '../../node_modules/@grafana/design-tokens/dist/esm/lib/getDesignTokens/getDesignTokens.js';
+
+const getStyles = () => {
+  const {
+    legacy,
+    primitives: { spacing, typography }
+  } = getDesignTokens({ valueType: "css" });
+  return {
+    wrapper: css({
+      display: "flex",
+      flexDirection: "column",
+      gap: spacing.xs
+    }),
+    heading: css({
+      padding: `${spacing.sm} ${spacing.md}`,
+      fontFamily: typography.fontFamily.ui,
+      fontSize: typography.fontSize.ui.sm,
+      fontWeight: typography.fontWeight.bold,
+      color: legacy.colors.text.primary,
+      background: legacy.colors.background.secondary,
+      borderRadius: legacy.borderRadius.md
+    }),
+    content: css({
+      display: "flex",
+      gap: spacing.xs
+    }),
+    section: css({
+      display: "flex",
+      flex: 1,
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      gap: spacing.xs,
+      background: legacy.colors.background.secondary,
+      borderRadius: legacy.borderRadius.md,
+      padding: `${spacing.sm} ${spacing.md}`,
+      minWidth: `80px`
+    }),
+    sectionTitle: css({
+      fontFamily: typography.fontFamily.ui,
+      fontSize: typography.fontSize.ui.sm,
+      fontWeight: typography.fontWeight.medium,
+      color: legacy.colors.text.primary,
+      whiteSpace: "nowrap"
+    }),
+    value: css({
+      display: "flex",
+      alignItems: "center",
+      gap: spacing.xs,
+      fontFamily: typography.fontFamily.monospace,
+      fontSize: typography.fontSize.monospace.sm,
+      color: legacy.colors.text.secondary
+    }),
+    icon: css({
+      flexShrink: 0
+    })
+  };
+};
+
+export { getStyles };
+//# sourceMappingURL=ComparisonTooltip.styles.js.map

package/dist/esm/components/ComparisonTooltip/ComparisonTooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComparisonTooltip.styles.js","sources":["../../../../src/components/ComparisonTooltip/ComparisonTooltip.styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport { getDesignTokens } from '@grafana/design-tokens';\n\nexport const getStyles = () => {\n  const {\n    legacy,\n    primitives: { spacing, typography },\n  } = getDesignTokens({ valueType: 'css' });\n\n  return {\n    wrapper: css({\n      display: 'flex',\n      flexDirection: 'column',\n      gap: spacing.xs,\n    }),\n    heading: css({\n      padding: `${spacing.sm} ${spacing.md}`,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.bold,\n      color: legacy.colors.text.primary,\n      background: legacy.colors.background.secondary,\n      borderRadius: legacy.borderRadius.md,\n    }),\n    content: css({\n      display: 'flex',\n      gap: spacing.xs,\n    }),\n    section: css({\n      display: 'flex',\n      flex: 1,\n      flexDirection: 'column',\n      justifyContent: 'flex-end',\n      gap: spacing.xs,\n      background: legacy.colors.background.secondary,\n      borderRadius: legacy.borderRadius.md,\n      padding: `${spacing.sm} ${spacing.md}`,\n      minWidth: `80px`,\n    }),\n    sectionTitle: css({\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n      color: legacy.colors.text.primary,\n      whiteSpace: 'nowrap',\n    }),\n    value: css({\n      display: 'flex',\n      alignItems: 'center',\n      gap: spacing.xs,\n      fontFamily: typography.fontFamily.monospace,\n      fontSize: typography.fontSize.monospace.sm,\n      color: legacy.colors.text.secondary,\n    }),\n    icon: css({\n      flexShrink: 0,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;AAGO,MAAM,YAAY,MAAM;AAC7B,EAAA,MAAM;AAAA,IACJ,MAAA;AAAA,IACA,UAAA,EAAY,EAAE,OAAA,EAAS,UAAA;AAAW,GACpC,GAAI,eAAA,CAAgB,EAAE,SAAA,EAAW,OAAO,CAAA;AAExC,EAAA,OAAO;AAAA,IACL,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,aAAA,EAAe,QAAA;AAAA,MACf,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA,CAAA;AAAA,MACpC,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,IAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,MACrC,YAAA,EAAc,OAAO,YAAA,CAAa;AAAA,KACnC,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,KAAK,OAAA,CAAQ;AAAA,KACd,CAAA;AAAA,IACD,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,MAAA;AAAA,MACT,IAAA,EAAM,CAAA;AAAA,MACN,aAAA,EAAe,QAAA;AAAA,MACf,cAAA,EAAgB,UAAA;AAAA,MAChB,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA,EAAY,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,SAAA;AAAA,MACrC,YAAA,EAAc,OAAO,YAAA,CAAa,EAAA;AAAA,MAClC,SAAS,CAAA,EAAG,OAAA,CAAQ,EAAE,CAAA,CAAA,EAAI,QAAQ,EAAE,CAAA,CAAA;AAAA,MACpC,QAAA,EAAU,CAAA,IAAA;AAAA,KACX,CAAA;AAAA,IACD,cAAc,GAAA,CAAI;AAAA,MAChB,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW,MAAA;AAAA,MAClC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAA,CAAI;AAAA,MACT,OAAA,EAAS,MAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,KAAK,OAAA,CAAQ,EAAA;AAAA,MACb,UAAA,EAAY,WAAW,UAAA,CAAW,SAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,SAAA,CAAU,EAAA;AAAA,MACxC,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK;AAAA,KAC3B,CAAA;AAAA,IACD,MAAM,GAAA,CAAI;AAAA,MACR,UAAA,EAAY;AAAA,KACb;AAAA,GACH;AACF;;;;"}