@grafana/components 0.0.1

package/dist/esm/components/Popover/Popover.js

@@ -0,0 +1,120 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useId, useState, useCallback, cloneElement } from 'react';
+import { useFloating, autoUpdate, useInteractions, useDismiss, useHover, useFocus, safePolygon, useTransitionStyles, FloatingArrow, flip, shift, offset, arrow } from '@floating-ui/react';
+import { Portal } from '@grafana/ui';
+import { getStyles } from './Popover.styles.js';
+
+const POPOVER_OFFSET = 8;
+const getMiddleware = ({
+  placement,
+  arrowRef
+}) => {
+  var _a;
+  const BOUNDARY_ELEMENT_ID = "floating-boundary";
+  const _flip = flip({
+    // Ensure we flip to the perpendicular axis if it doesn't fit
+    // on narrow viewports.
+    crossAxis: "alignment",
+    fallbackAxisSideDirection: "end",
+    boundary: (_a = document.getElementById(BOUNDARY_ELEMENT_ID)) != null ? _a : void 0
+  });
+  const middleware = (placement == null ? void 0 : placement.includes("-")) ? [_flip, shift()] : [shift(), _flip];
+  return [
+    offset(POPOVER_OFFSET),
+    ...middleware,
+    arrow({
+      element: arrowRef
+    })
+  ];
+};
+const Popover = forwardRef(
+  ({
+    trigger,
+    children,
+    isOpen: isOpenControlled,
+    isInteractive = false,
+    placement = "bottom",
+    transitionDuration = 200,
+    hideDelay = 500
+  }, forwardedRef) => {
+    const arrowRef = useRef(null);
+    const closeTimer = useRef(void 0);
+    const popoverId = useId();
+    const [isOpenState, setOpen] = useState(isOpenControlled);
+    const [isDelayedOpen, setDelayedOpen] = useState(isOpenControlled);
+    const isOpen = isOpenControlled != null ? isOpenControlled : isOpenState;
+    const middleware = getMiddleware({ placement, arrowRef });
+    const styles = getStyles();
+    const { context, refs, floatingStyles } = useFloating({
+      open: isOpen,
+      placement,
+      onOpenChange: (open) => {
+        setOpen(open);
+        clearTimeout(closeTimer.current);
+        if (!open) {
+          closeTimer.current = setTimeout(() => {
+            setDelayedOpen(open);
+          }, transitionDuration + hideDelay);
+        } else {
+          setDelayedOpen(open);
+        }
+      },
+      middleware,
+      whileElementsMounted: autoUpdate
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+      useDismiss(context),
+      useHover(context, {
+        handleClose: isInteractive ? safePolygon() : void 0,
+        move: false,
+        delay: {
+          open: 0,
+          close: hideDelay
+        }
+      }),
+      useFocus(context)
+    ]);
+    const { styles: transitionStyles } = useTransitionStyles(context, {
+      duration: transitionDuration,
+      initial: ({ side }) => ({
+        opacity: 0,
+        transform: side === "top" || side === "bottom" ? `translateY(${POPOVER_OFFSET}px)` : `translateX(${POPOVER_OFFSET}px)`
+      }),
+      open: ({ side }) => ({
+        opacity: 1,
+        transform: side === "top" || side === "bottom" ? `translateY(0)` : `translateX(0)`
+      }),
+      close: ({ side }) => ({
+        opacity: 0,
+        transform: side === "top" || side === "bottom" ? `translateY(${POPOVER_OFFSET}px)` : `translateX(${POPOVER_OFFSET}px)`
+      })
+    });
+    const handleRef = useCallback(
+      (ref) => {
+        refs.setReference(ref);
+        if (typeof forwardedRef === "function") {
+          forwardedRef(ref);
+        } else if (forwardedRef) {
+          forwardedRef.current = ref;
+        }
+      },
+      [forwardedRef, refs]
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      cloneElement(trigger, {
+        ref: handleRef,
+        tabIndex: 0,
+        "aria-describedby": isOpen ? popoverId : void 0,
+        ...getReferenceProps()
+      }),
+      (isDelayedOpen || isOpen) && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", { ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: /* @__PURE__ */ jsxs("div", { style: transitionStyles, className: styles.shadow, children: [
+        /* @__PURE__ */ jsx(FloatingArrow, { className: styles.arrow, ref: arrowRef, context }),
+        /* @__PURE__ */ jsx("div", { id: popoverId, role: "tooltip", className: styles.container, children })
+      ] }) }) })
+    ] });
+  }
+);
+Popover.displayName = "Popover";
+
+export { Popover };
+//# sourceMappingURL=Popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { forwardRef, cloneElement, useCallback, useId, useRef, useState, JSX } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingArrow,\n  offset,\n  Placement,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useTransitionStyles,\n} from '@floating-ui/react';\nimport { Portal } from '@grafana/ui';\nimport { getStyles } from './Popover.styles';\n\nexport interface PopoverProps {\n  /**\n   * Content used to trigger the Popover being displayed\n   */\n  trigger: JSX.Element;\n\n  /**\n   * Content to render within the Popover\n   */\n  children: JSX.Element;\n  /**\n   * Should the popover be open? Implicitly means the popover visibility is\n   * controlled; if omitted, the popover target will control visibility\n   */\n  isOpen?: boolean;\n\n  /**\n   * Set to true if you want the tooltip to stay long enough so the user can\n   * move mouse over content to select text or click a link\n   */\n  isInteractive?: boolean;\n\n  /**\n   * Placement of the Popover relative to the trigger content\n   */\n  placement?: Placement;\n\n  /**\n   * Transition duration for hide/show effects, in milliseconds\n   */\n  transitionDuration?: number;\n\n  /**\n   * Additional delay before hiding the popover after mouseout, in milliseconds\n   */\n  hideDelay?: number;\n}\n\nconst POPOVER_OFFSET = 8;\n\nconst getMiddleware = ({\n  placement,\n  arrowRef,\n}: {\n  placement?: Placement;\n  arrowRef: React.RefObject<null>;\n}) => {\n  const BOUNDARY_ELEMENT_ID = 'floating-boundary';\n  const _flip = flip({\n    // Ensure we flip to the perpendicular axis if it doesn't fit\n    // on narrow viewports.\n    crossAxis: 'alignment',\n    fallbackAxisSideDirection: 'end',\n    boundary: document.getElementById(BOUNDARY_ELEMENT_ID) ?? undefined,\n  });\n\n  const middleware = placement?.includes('-') ? [_flip, shift()] : [shift(), _flip];\n\n  // the order of middleware is important!\n  // `arrow` should almost always be at the end\n  // see https://floating-ui.com/docs/arrow#order\n  return [\n    offset(POPOVER_OFFSET),\n    ...middleware,\n    arrow({\n      element: arrowRef,\n    }),\n  ];\n};\n\nexport const Popover = forwardRef<HTMLElement, PopoverProps>(\n  (\n    {\n      trigger,\n      children,\n      isOpen: isOpenControlled,\n      isInteractive = false,\n      placement = 'bottom',\n      transitionDuration = 200,\n      hideDelay = 500,\n    },\n    forwardedRef,\n  ) => {\n    const arrowRef = useRef(null);\n    const closeTimer = useRef<number | undefined>(undefined);\n    const popoverId = useId();\n    const [isOpenState, setOpen] = useState(isOpenControlled);\n    const [isDelayedOpen, setDelayedOpen] = useState(isOpenControlled);\n    const isOpen = isOpenControlled ?? isOpenState;\n    const middleware = getMiddleware({ placement, arrowRef });\n    const styles = getStyles();\n\n    const { context, refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement,\n      onOpenChange: (open) => {\n        setOpen(open);\n        clearTimeout(closeTimer.current);\n\n        if (!open) {\n          closeTimer.current = setTimeout(() => {\n            setDelayedOpen(open);\n          }, transitionDuration + hideDelay);\n        } else {\n          setDelayedOpen(open);\n        }\n      },\n      middleware,\n      whileElementsMounted: autoUpdate,\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n      useDismiss(context),\n      useHover(context, {\n        handleClose: isInteractive ? safePolygon() : undefined,\n        move: false,\n        delay: {\n          open: 0,\n          close: hideDelay,\n        },\n      }),\n      useFocus(context),\n    ]);\n\n    const { styles: transitionStyles } = useTransitionStyles(context, {\n      duration: transitionDuration,\n      initial: ({ side }) => ({\n        opacity: 0,\n        transform:\n          side === 'top' || side === 'bottom'\n            ? `translateY(${POPOVER_OFFSET}px)`\n            : `translateX(${POPOVER_OFFSET}px)`,\n      }),\n      open: ({ side }) => ({\n        opacity: 1,\n        transform: side === 'top' || side === 'bottom' ? `translateY(0)` : `translateX(0)`,\n      }),\n      close: ({ side }) => ({\n        opacity: 0,\n        transform:\n          side === 'top' || side === 'bottom'\n            ? `translateY(${POPOVER_OFFSET}px)`\n            : `translateX(${POPOVER_OFFSET}px)`,\n      }),\n    });\n\n    const handleRef = useCallback(\n      (ref: HTMLElement | null) => {\n        refs.setReference(ref);\n\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(ref);\n        } else if (forwardedRef) {\n          forwardedRef.current = ref;\n        }\n      },\n      [forwardedRef, refs],\n    );\n\n    return (\n      <>\n        {/* element to trigger displaying the popover */}\n        {cloneElement(trigger, {\n          ref: handleRef,\n          tabIndex: 0,\n          'aria-describedby': isOpen ? popoverId : undefined,\n          ...getReferenceProps(),\n        })}\n        {/* content to render inside the popover when open */}\n        {(isDelayedOpen || isOpen) && (\n          <Portal>\n            <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>\n              <div style={transitionStyles} className={styles.shadow}>\n                <FloatingArrow className={styles.arrow} ref={arrowRef} context={context} />\n                <div id={popoverId} role=\"tooltip\" className={styles.container}>\n                  {children}\n                </div>\n              </div>\n            </div>\n          </Portal>\n        )}\n      </>\n    );\n  },\n);\n\nPopover.displayName = 'Popover';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+import { css } from '@emotion/css';
+import { getDesignTokens } from '../../node_modules/@grafana/design-tokens/dist/esm/lib/getDesignTokens/getDesignTokens.js';
+
+const getStyles$1 = () => {
+  const {
+    legacy,
+    primitives: { spacing, typography }
+  } = getDesignTokens({ valueType: "css" });
+  const backgroundColor = legacy.colors.background.primary;
+  return {
+    arrow: css({
+      fill: backgroundColor
+    }),
+    shadow: css({
+      filter: `drop-shadow(${legacy.boxShadows.z2})`
+    }),
+    container: css({
+      backgroundColor,
+      borderRadius: `calc(${legacy.borderRadius.md} + ${spacing.xs})`,
+      padding: spacing.xs,
+      color: legacy.colors.text.primary,
+      fontFamily: typography.fontFamily.ui,
+      fontSize: typography.fontSize.ui.sm,
+      fontWeight: typography.fontWeight.medium
+    })
+  };
+};
+
+export { getStyles$1 as getStyles };
+//# sourceMappingURL=Popover.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.styles.js","sources":["../../../../src/components/Popover/Popover.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  const backgroundColor = legacy.colors.background.primary;\n\n  return {\n    arrow: css({\n      fill: backgroundColor,\n    }),\n    shadow: css({\n      filter: `drop-shadow(${legacy.boxShadows.z2})`,\n    }),\n    container: css({\n      backgroundColor,\n      borderRadius: `calc(${legacy.borderRadius.md} + ${spacing.xs})`,\n      padding: spacing.xs,\n      color: legacy.colors.text.primary,\n      fontFamily: typography.fontFamily.ui,\n      fontSize: typography.fontSize.ui.sm,\n      fontWeight: typography.fontWeight.medium,\n    }),\n  };\n};\n"],"names":["getStyles"],"mappings":";;;AAGO,MAAMA,cAAY,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;AACxC,EAAA,MAAM,eAAA,GAAkB,MAAA,CAAO,MAAA,CAAO,UAAA,CAAW,OAAA;AAEjD,EAAA,OAAO;AAAA,IACL,OAAO,GAAA,CAAI;AAAA,MACT,IAAA,EAAM;AAAA,KACP,CAAA;AAAA,IACD,QAAQ,GAAA,CAAI;AAAA,MACV,MAAA,EAAQ,CAAA,YAAA,EAAe,MAAA,CAAO,UAAA,CAAW,EAAE,CAAA,CAAA;AAAA,KAC5C,CAAA;AAAA,IACD,WAAW,GAAA,CAAI;AAAA,MACb,eAAA;AAAA,MACA,cAAc,CAAA,KAAA,EAAQ,MAAA,CAAO,aAAa,EAAE,CAAA,GAAA,EAAM,QAAQ,EAAE,CAAA,CAAA,CAAA;AAAA,MAC5D,SAAS,OAAA,CAAQ,EAAA;AAAA,MACjB,KAAA,EAAO,MAAA,CAAO,MAAA,CAAO,IAAA,CAAK,OAAA;AAAA,MAC1B,UAAA,EAAY,WAAW,UAAA,CAAW,EAAA;AAAA,MAClC,QAAA,EAAU,UAAA,CAAW,QAAA,CAAS,EAAA,CAAG,EAAA;AAAA,MACjC,UAAA,EAAY,WAAW,UAAA,CAAW;AAAA,KACnC;AAAA,GACH;AACF;;;;"}

package/dist/esm/css/components.css

@@ -0,0 +1,298 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-legacy-white: #ffffff;
+  --color-legacy-black: #000000;
+  --color-legacy-grey90: #fbfbfb;
+  --color-legacy-grey100: #f4f5f5;
+  --color-legacy-grey80: #d0d1d3;
+  --color-legacy-grey25: #2c3235;
+  --color-legacy-grey15: #22252b;
+  --color-legacy-grey10: #181b1f;
+  --color-legacy-grey05: #111217;
+  --color-legacy-blue-dark-main: #3d71d9;
+  --color-legacy-blue-dark-shade: #5a86de;
+  --color-legacy-blue-dark-text: #6e9fff;
+  --color-legacy-red-dark-main: #d10e5c;
+  --color-legacy-red-dark-text: #ff5286;
+  --color-legacy-red-dark-shade: #d73274;
+  --color-legacy-green-dark-main: #1a7f4b;
+  --color-legacy-green-dark-text: #6ccf8e;
+  --color-legacy-green-dark-shade: #3c9266;
+  --color-legacy-orange-dark-main: #ff9900;
+  --color-legacy-orange-dark-text: #fbad37;
+  --color-legacy-orange-dark-shade: #ffa826;
+  --color-legacy-blue-light-main: #3871dc;
+  --color-legacy-blue-light-shade: #2c5ab0;
+  --color-legacy-blue-light-text: #1f62e0;
+  --color-legacy-red-light-main: #e0226e;
+  --color-legacy-red-light-text: #cf0e5b;
+  --color-legacy-red-light-shade: #b31b58;
+  --color-legacy-green-light-main: #1b855e;
+  --color-legacy-green-light-text: #0a764e;
+  --color-legacy-green-light-shade: #156a4b;
+  --color-legacy-orange-light-main: #ff9900;
+  --color-legacy-orange-light-text: #b5510d;
+  --color-legacy-orange-light-shade: #cc7a00;
+  --color-legacy-white-base: #ccccdc;
+  --color-legacy-black-base: #24292e;
+  --color-legacy-orange-brand-gradient-a: #f55f3e;
+  --color-legacy-orange-brand-gradient-b: #ff8833;
+  --color-legacy-orange-brand-gradient-c: #f53e4c;
+  --color-legacy-grey10-opacity20: rgb(24 27 31 / 20%);
+  --color-legacy-grey10-opacity18: rgb(24 27 31 / 18%);
+  --color-legacy-black-opacity75: rgb(0 0 0 / 75%);
+  --color-legacy-white-base-opacity4: rgb(204 204 220 / 4%);
+  --color-legacy-white-base-opacity8: rgb(204 204 220 / 8%);
+  --color-legacy-white-base-opacity10: rgb(204 204 220 / 10%);
+  --color-legacy-white-base-opacity12: rgb(204 204 220 / 12%);
+  --color-legacy-white-base-opacity14: rgb(204 204 220 / 14%);
+  --color-legacy-white-base-opacity16: rgb(204 204 220 / 16%);
+  --color-legacy-white-base-opacity20: rgb(204 204 220 / 20%);
+  --color-legacy-white-base-opacity25: rgb(204 204 220 / 25%);
+  --color-legacy-white-base-opacity30: rgb(204 204 220 / 30%);
+  --color-legacy-white-base-opacity61: rgb(204 204 220 / 61%);
+  --color-legacy-white-base-opacity65: rgb(204 204 220 / 65%);
+  --color-legacy-blue-dark-main-opacity15: rgb(61 113 217 / 15%);
+  --color-legacy-blue-dark-text-opacity25: rgb(110 159 255 / 25%);
+  --color-legacy-red-dark-main-opacity15: rgb(209 14 92 / 15%);
+  --color-legacy-red-dark-text-opacity25: rgb(255 82 134 / 25%);
+  --color-legacy-green-dark-main-opacity15: rgb(26 127 75 / 15%);
+  --color-legacy-green-dark-text-opacity25: rgb(108 207 142 / 25%);
+  --color-legacy-orange-dark-main-opacity15: rgb(255 153 0 / 15%);
+  --color-legacy-orange-dark-text-opacity25: rgb(251 173 55 / 25%);
+  --color-legacy-black-base-opacity4: rgb(36 41 46 / 4%);
+  --color-legacy-black-base-opacity8: rgb(36 41 46 / 8%);
+  --color-legacy-black-base-opacity12: rgb(36 41 46 / 12%);
+  --color-legacy-black-base-opacity15: rgb(36 41 46 / 15%);
+  --color-legacy-black-base-opacity25: rgb(36 41 46 / 25%);
+  --color-legacy-black-base-opacity30: rgb(36 41 46 / 30%);
+  --color-legacy-black-base-opacity40: rgb(36 41 46 / 40%);
+  --color-legacy-black-base-opacity65: rgb(36 41 46 / 65%);
+  --color-legacy-black-base-opacity75: rgb(36 41 46 / 75%);
+  --color-legacy-blue-light-main-opacity15: rgb(56 113 220 / 15%);
+  --color-legacy-blue-light-text-opacity25: rgb(31 98 224 / 25%);
+  --color-legacy-red-light-main-opacity15: rgb(224 34 110 / 15%);
+  --color-legacy-red-light-text-opacity25: rgb(207 14 91 / 25%);
+  --color-legacy-green-light-main-opacity15: rgb(27 133 94 / 15%);
+  --color-legacy-green-light-text-opacity25: rgb(10 118 78 / 25%);
+  --color-legacy-orange-light-main-opacity15: rgb(255 153 0 / 15%);
+  --color-legacy-orange-light-text-opacity25: rgb(181 81 13 / 25%);
+  --border-radius-sm: 4px;
+  --border-radius-md: 6px;
+  --border-radius-lg: 10px;
+  --border-radius-pill: 9999px;
+  --border-radius-circle: 100%;
+  --typography-font-family-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /** Default UI font family */
+  --typography-font-family-monospace: 'Roboto Mono', monospace; /** Monospace font family */
+  --typography-font-size-ui-xs: 10px;
+  --typography-font-size-ui-sm: 12px;
+  --typography-font-size-ui-md: 14px;
+  --typography-font-size-ui-lg: 18px;
+  --typography-font-size-monospace-xs: 10px;
+  --typography-font-size-monospace-sm: 12px;
+  --typography-font-size-monospace-md: 14px;
+  --typography-font-size-monospace-lg: 18px;
+  --typography-font-weight-light: 300;
+  --typography-font-weight-normal: 400;
+  --typography-font-weight-medium: 500;
+  --typography-font-weight-bold: 700;
+  --spacing-zero: 0;
+  --spacing-xxs: 2px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-xxl: 24px;
+  --spacing-xxxl: 32px;
+  --spacing-huge: 40px;
+}
+
+/**
+ * This file is generated automatically - do not edit it directly. To update its
+ * values, run yarn update:tokens
+ */
+
+[data-color-mode='light'] {
+  --color-action-hover-opacity: 0.08;
+  --color-action-disabled-opacity: 0.38;
+  --color-primary-name: primary;
+  --color-secondary-name: secondary;
+  --color-info-name: info;
+  --color-error-name: error;
+  --color-success-name: success;
+  --color-warning-name: warning;
+  --color-text-primary: var(--color-legacy-black-base); /** Primary text color in light mode */
+  --color-text-secondary: var(
+    --color-legacy-black-base-opacity75
+  ); /** Secondary text color in light mode */
+  --color-text-disabled: var(
+    --color-legacy-black-base-opacity65
+  ); /** Secondary text color in light mode */
+  --color-text-max-contrast: var(--color-legacy-black); /** Max contrast text color in light mode */
+  --color-action-hover: var(--color-legacy-black-base-opacity12);
+  --color-action-selected: var(--color-legacy-black-base-opacity8);
+  --color-action-selected-border: var(--color-legacy-orange-light-main);
+  --color-action-focus: var(--color-legacy-black-base-opacity12);
+  --color-action-disabled-text: var(--color-legacy-black-base-opacity65);
+  --color-action-disabled-background: var(--color-legacy-black-base-opacity4);
+  --color-primary-main: var(--color-legacy-blue-light-main);
+  --color-primary-text: var(--color-legacy-blue-light-text);
+  --color-primary-border: var(--color-legacy-blue-light-text);
+  --color-primary-shade: var(--color-legacy-blue-light-shade);
+  --color-primary-transparent: var(--color-legacy-blue-light-main-opacity15);
+  --color-primary-contrast-text: var(--color-legacy-white);
+  --color-primary-border-transparent: var(--color-legacy-blue-light-text-opacity25);
+  --color-border-weak: var(--color-legacy-black-base-opacity12);
+  --color-border-medium: var(--color-legacy-black-base-opacity30);
+  --color-border-strong: var(--color-legacy-black-base-opacity40);
+  --color-secondary-main: var(--color-legacy-black-base-opacity8);
+  --color-secondary-shade: var(--color-legacy-black-base-opacity15);
+  --color-secondary-transparent: var(--color-legacy-black-base-opacity8);
+  --color-secondary-contrast-text: var(--color-legacy-black-base);
+  --color-secondary-border-transparent: var(--color-legacy-black-base-opacity25);
+  --color-info-main: var(--color-legacy-blue-light-main);
+  --color-info-text: var(--color-legacy-blue-light-text);
+  --color-info-border: var(--color-legacy-blue-light-text);
+  --color-info-shade: var(--color-legacy-blue-light-shade);
+  --color-info-transparent: var(--color-legacy-blue-light-main-opacity15);
+  --color-info-contrast-text: var(--color-legacy-white);
+  --color-info-border-transparent: var(--color-legacy-blue-light-text-opacity25);
+  --color-error-main: var(--color-legacy-red-light-main);
+  --color-error-text: var(--color-legacy-red-light-text);
+  --color-error-border: var(--color-legacy-red-light-text);
+  --color-error-shade: var(--color-legacy-red-light-shade);
+  --color-error-transparent: var(--color-legacy-red-light-main-opacity15);
+  --color-error-contrast-text: var(--color-legacy-white);
+  --color-error-border-transparent: var(--color-legacy-red-light-text-opacity25);
+  --color-success-main: var(--color-legacy-green-light-main);
+  --color-success-text: var(--color-legacy-green-light-text);
+  --color-success-border: var(--color-legacy-green-light-text);
+  --color-success-shade: var(--color-legacy-green-light-shade);
+  --color-success-transparent: var(--color-legacy-green-light-main-opacity15);
+  --color-success-contrast-text: var(--color-legacy-white);
+  --color-success-border-transparent: var(--color-legacy-green-light-text-opacity25);
+  --color-warning-main: var(--color-legacy-orange-light-main);
+  --color-warning-text: var(--color-legacy-orange-light-text);
+  --color-warning-border: var(--color-legacy-orange-light-text);
+  --color-warning-shade: var(--color-legacy-orange-light-shade);
+  --color-warning-transparent: var(--color-legacy-orange-light-main-opacity15);
+  --color-warning-contrast-text: var(--color-legacy-black);
+  --color-warning-border-transparent: var(--color-legacy-orange-light-text-opacity25);
+  --color-background-canvas: var(--color-legacy-grey90);
+  --color-background-primary: var(--color-legacy-white);
+  --color-background-secondary: var(--color-legacy-grey100);
+  --color-background-elevated: var(--color-legacy-white);
+  --color-gradients-brand-horizontal: linear-gradient(
+    270deg,
+    var(--color-legacy-orange-brand-gradient-b) 0%,
+    var(--color-legacy-orange-brand-gradient-c) 100%
+  );
+  --color-gradients-brand-vertical: linear-gradient(
+    0.01deg,
+    var(--color-legacy-orange-brand-gradient-c) -31.2%,
+    var(--color-legacy-orange-brand-gradient-b) 113.07%
+  );
+  --boxshadow-z1: 0 1px var(--spacing-xxs) var(--color-legacy-grey10-opacity20);
+  --boxshadow-z2: 0 var(--spacing-xs) var(--spacing-sm) var(--color-legacy-grey10-opacity20);
+  --boxshadow-z3: 0 var(--spacing-sm) var(--spacing-xxl) var(--color-legacy-grey10-opacity18);
+  --color-text-link: var(--color-text-primary); /** Link text color in light mode */
+  --color-secondary-text: var(--color-text-primary);
+  --color-secondary-border: var(--color-border-weak);
+}
+
+/**
+ * This file is generated automatically - do not edit it directly. To update its
+ * values, run yarn update:tokens
+ */
+
+[data-color-mode='dark'] {
+  --color-action-hover-opacity: 0.08;
+  --color-action-disabled-opacity: 0.38;
+  --color-primary-name: primary;
+  --color-secondary-name: secondary;
+  --color-info-name: info;
+  --color-error-name: error;
+  --color-success-name: success;
+  --color-warning-name: warning;
+  --color-text-primary: var(--color-legacy-white-base); /** Primary text color in dark mode */
+  --color-text-secondary: var(
+    --color-legacy-white-base-opacity65
+  ); /** Secondary text color in dark mode */
+  --color-text-disabled: var(
+    --color-legacy-white-base-opacity61
+  ); /** Secondary text color in dark mode */
+  --color-text-link: var(--color-legacy-blue-dark-text); /** Link text color in dark mode */
+  --color-text-max-contrast: var(--color-legacy-white); /** Max contrast text color in dark mode */
+  --color-action-hover: var(--color-legacy-white-base-opacity16);
+  --color-action-selected: var(--color-legacy-white-base-opacity12);
+  --color-action-selected-border: var(--color-legacy-orange-dark-main);
+  --color-action-focus: var(--color-legacy-white-base-opacity16);
+  --color-action-disabled-text: var(--color-legacy-white-base-opacity61);
+  --color-action-disabled-background: var(--color-legacy-white-base-opacity4);
+  --color-primary-main: var(--color-legacy-blue-dark-main);
+  --color-primary-text: var(--color-legacy-blue-dark-text);
+  --color-primary-border: var(--color-legacy-blue-dark-text);
+  --color-primary-shade: var(--color-legacy-blue-dark-shade);
+  --color-primary-transparent: var(--color-legacy-blue-dark-main-opacity15);
+  --color-primary-contrast-text: var(--color-legacy-white);
+  --color-primary-border-transparent: var(--color-legacy-blue-dark-text-opacity25);
+  --color-border-weak: var(--color-legacy-white-base-opacity12);
+  --color-border-medium: var(--color-legacy-white-base-opacity20);
+  --color-border-strong: var(--color-legacy-white-base-opacity30);
+  --color-secondary-main: var(--color-legacy-white-base-opacity10);
+  --color-secondary-shade: var(--color-legacy-white-base-opacity14);
+  --color-secondary-transparent: var(--color-legacy-white-base-opacity8);
+  --color-secondary-contrast-text: var(--color-legacy-white-base);
+  --color-secondary-border: var(--color-legacy-white-base-opacity8);
+  --color-secondary-border-transparent: var(--color-legacy-white-base-opacity25);
+  --color-info-main: var(--color-legacy-blue-dark-main);
+  --color-info-text: var(--color-legacy-blue-dark-text);
+  --color-info-border: var(--color-legacy-blue-dark-text);
+  --color-info-shade: var(--color-legacy-blue-dark-shade);
+  --color-info-transparent: var(--color-legacy-blue-dark-main-opacity15);
+  --color-info-contrast-text: var(--color-legacy-white);
+  --color-info-border-transparent: var(--color-legacy-blue-dark-text-opacity25);
+  --color-error-main: var(--color-legacy-red-dark-main);
+  --color-error-text: var(--color-legacy-red-dark-text);
+  --color-error-border: var(--color-legacy-red-dark-text);
+  --color-error-shade: var(--color-legacy-red-dark-shade);
+  --color-error-transparent: var(--color-legacy-red-dark-main-opacity15);
+  --color-error-contrast-text: var(--color-legacy-white);
+  --color-error-border-transparent: var(--color-legacy-red-dark-text-opacity25);
+  --color-success-main: var(--color-legacy-green-dark-main);
+  --color-success-text: var(--color-legacy-green-dark-text);
+  --color-success-border: var(--color-legacy-green-dark-text);
+  --color-success-shade: var(--color-legacy-green-dark-shade);
+  --color-success-transparent: var(--color-legacy-green-dark-main-opacity15);
+  --color-success-contrast-text: var(--color-legacy-white);
+  --color-success-border-transparent: var(--color-legacy-green-dark-text-opacity25);
+  --color-warning-main: var(--color-legacy-orange-dark-main);
+  --color-warning-text: var(--color-legacy-orange-dark-text);
+  --color-warning-border: var(--color-legacy-orange-dark-text);
+  --color-warning-shade: var(--color-legacy-orange-dark-shade);
+  --color-warning-transparent: var(--color-legacy-orange-dark-main-opacity15);
+  --color-warning-contrast-text: var(--color-legacy-black);
+  --color-warning-border-transparent: var(--color-legacy-orange-dark-text-opacity25);
+  --color-background-canvas: var(--color-legacy-grey05);
+  --color-background-primary: var(--color-legacy-grey10);
+  --color-background-secondary: var(--color-legacy-grey15);
+  --color-background-elevated: var(--color-legacy-grey15);
+  --color-gradients-brand-horizontal: linear-gradient(
+    270deg,
+    var(--color-legacy-orange-brand-gradient-a) 0%,
+    var(--color-legacy-orange-brand-gradient-b) 100%
+  );
+  --color-gradients-brand-vertical: linear-gradient(
+    0.01deg,
+    var(--color-legacy-orange-brand-gradient-a) 0.01%,
+    var(--color-legacy-orange-brand-gradient-b) 99.99%
+  );
+  --boxshadow-z1: 0 1px var(--spacing-xxs) var(--color-legacy-black-opacity75);
+  --boxshadow-z2: 0 var(--spacing-xs) var(--spacing-sm) var(--color-legacy-black-opacity75);
+  --boxshadow-z3: 0 var(--spacing-sm) var(--spacing-xxl) var(--color-legacy-black);
+  --color-secondary-text: var(--color-text-primary);
+}

package/dist/esm/index.d.ts

@@ -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/index.js

@@ -0,0 +1,7 @@
+export { ColorModeProvider, useColorMode } from './components/ColorModeProvider/ColorModeProvider.js';
+export { ComparisonBadge } from './components/ComparisonBadge/ComparisonBadge.js';
+export { ComparisonTooltip } from './components/ComparisonTooltip/ComparisonTooltip.js';
+export { Popover } from './components/Popover/Popover.js';
+export { calculateComparison } from './utils/comparison.js';
+export { formatNumber } from './utils/formatters.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/esm/utils/comparison.js

@@ -0,0 +1,34 @@
+import { formatNumber } from './formatters.js';
+
+const calculateComparison = (current, baseline) => {
+  if (current === void 0 || current === null || baseline === void 0 || baseline === null || baseline === 0) {
+    return {
+      hasComparison: false,
+      direction: "neutral",
+      percentageChange: 0,
+      percentageLabel: ""
+    };
+  }
+  if (current === baseline) {
+    return {
+      hasComparison: true,
+      direction: "neutral",
+      percentageChange: 0,
+      percentageLabel: "0%"
+    };
+  }
+  const percentageChange = Math.abs((current - baseline) / baseline * 100);
+  const direction = current > baseline ? "up" : "down";
+  return {
+    hasComparison: true,
+    direction,
+    percentageChange,
+    percentageLabel: `${formatNumber(percentageChange, {
+      compactThreshold: 1e4,
+      decimals: 2
+    })}%`
+  };
+};
+
+export { calculateComparison };
+//# sourceMappingURL=comparison.js.map

package/dist/esm/utils/comparison.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison.js","sources":["../../../src/utils/comparison.ts"],"sourcesContent":["/**\n * Shared utility functions for handling comparison calculations across components\n */\n\nimport { formatNumber } from './formatters';\n\nexport interface ComparisonResult {\n  hasComparison: boolean;\n  direction: 'up' | 'down' | 'neutral';\n  percentageChange: number;\n  percentageLabel: string;\n}\n\n/**\n * Calculate comparison metrics between a current value and a baseline value\n * @param current - The current value to compare\n * @param baseline - The baseline value to compare against (optional)\n * @returns ComparisonResult object with calculated metrics\n */\nexport const calculateComparison = (\n  current: number | undefined | null,\n  baseline: number | undefined | null,\n): ComparisonResult => {\n  // If either value is missing, null, undefined, or baseline is 0, return neutral state\n  if (\n    current === undefined ||\n    current === null ||\n    baseline === undefined ||\n    baseline === null ||\n    baseline === 0\n  ) {\n    return {\n      hasComparison: false,\n      direction: 'neutral',\n      percentageChange: 0,\n      percentageLabel: '',\n    };\n  }\n\n  // If values are equal, return neutral state\n  if (current === baseline) {\n    return {\n      hasComparison: true,\n      direction: 'neutral',\n      percentageChange: 0,\n      percentageLabel: '0%',\n    };\n  }\n\n  // Calculate percentage change\n  const percentageChange = Math.abs(((current - baseline) / baseline) * 100);\n  const direction = current > baseline ? 'up' : 'down';\n\n  return {\n    hasComparison: true,\n    direction,\n    percentageChange,\n    percentageLabel: `${formatNumber(percentageChange, {\n      compactThreshold: 10000,\n      decimals: 2,\n    })}%`,\n  };\n};\n"],"names":[],"mappings":";;AAmBO,MAAM,mBAAA,GAAsB,CACjC,OAAA,EACA,QAAA,KACqB;AAErB,EAAA,IACE,OAAA,KAAY,UACZ,OAAA,KAAY,IAAA,IACZ,aAAa,MAAA,IACb,QAAA,KAAa,IAAA,IACb,QAAA,KAAa,CAAA,EACb;AACA,IAAA,OAAO;AAAA,MACL,aAAA,EAAe,KAAA;AAAA,MACf,SAAA,EAAW,SAAA;AAAA,MACX,gBAAA,EAAkB,CAAA;AAAA,MAClB,eAAA,EAAiB;AAAA,KACnB;AAAA,EACF;AAGA,EAAA,IAAI,YAAY,QAAA,EAAU;AACxB,IAAA,OAAO;AAAA,MACL,aAAA,EAAe,IAAA;AAAA,MACf,SAAA,EAAW,SAAA;AAAA,MACX,gBAAA,EAAkB,CAAA;AAAA,MAClB,eAAA,EAAiB;AAAA,KACnB;AAAA,EACF;AAGA,EAAA,MAAM,mBAAmB,IAAA,CAAK,GAAA,CAAA,CAAM,OAAA,GAAU,QAAA,IAAY,WAAY,GAAG,CAAA;AACzE,EAAA,MAAM,SAAA,GAAY,OAAA,GAAU,QAAA,GAAW,IAAA,GAAO,MAAA;AAE9C,EAAA,OAAO;AAAA,IACL,aAAA,EAAe,IAAA;AAAA,IACf,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAA,EAAiB,CAAA,EAAG,YAAA,CAAa,gBAAA,EAAkB;AAAA,MACjD,gBAAA,EAAkB,GAAA;AAAA,MAClB,QAAA,EAAU;AAAA,KACX,CAAC,CAAA,CAAA;AAAA,GACJ;AACF;;;;"}