@synerise/ds-metric-card 1.2.10 → 1.2.12

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-metric-card@1.2.11...@synerise/ds-metric-card@1.2.12) (2026-04-01)
+
+**Note:** Version bump only for package @synerise/ds-metric-card
+
+## [1.2.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-metric-card@1.2.10...@synerise/ds-metric-card@1.2.11) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-metric-card
+
 ## [1.2.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-metric-card@1.2.9...@synerise/ds-metric-card@1.2.10) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-metric-card

package/dist/MetricCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import type { MetricCardProps } from './MetricCard.types';
+import { default as React } from 'react';
+import { MetricCardProps } from './MetricCard.types';
 declare const MetricCard: ({ title, headerRightSide, hoverValue, displayValue, tooltip, tooltipConfig, greyBackground, isLoading, errorMessage, copyValue, texts, ...htmlAttributes }: MetricCardProps) => React.JSX.Element;
 export default MetricCard;

package/dist/MetricCard.js

@@ -1,77 +1,53 @@
-var _excluded = ["title", "headerRightSide", "hoverValue", "displayValue", "tooltip", "tooltipConfig", "greyBackground", "isLoading", "errorMessage", "copyValue", "texts"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useMemo, useState } from 'react';
-import Icon, { InfoFillS } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import { Text } from '@synerise/ds-typography';
-import * as S from './MetricCard.styles';
-var MetricCard = function MetricCard(_ref) {
-  var title = _ref.title,
-    headerRightSide = _ref.headerRightSide,
-    hoverValue = _ref.hoverValue,
-    displayValue = _ref.displayValue,
-    tooltip = _ref.tooltip,
-    tooltipConfig = _ref.tooltipConfig,
-    greyBackground = _ref.greyBackground,
-    isLoading = _ref.isLoading,
-    errorMessage = _ref.errorMessage,
-    copyValue = _ref.copyValue,
-    texts = _ref.texts,
-    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var hasValue = Boolean(hoverValue) || Boolean(displayValue);
-  var tooltipVisible = Boolean(tooltip || tooltipConfig);
-  var _useState = useState(false),
-    hover = _useState[0],
-    setHover = _useState[1];
-  var content = useMemo(function () {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import Icon, { InfoFillS } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { Text } from "@synerise/ds-typography";
+import { MetricSkeleton, MetricInlineAlert, MetricValue, WrapperFormattedNumber, WrapperNumber, MetricContainer, MetricHeaderBar, TitleWrapper, IconWrapper, HeaderRightSide, MetricContent, WrapperCopyIcon, CopyIcon } from "./MetricCard.styles.js";
+const MetricCard = ({
+  title,
+  headerRightSide,
+  hoverValue,
+  displayValue,
+  tooltip,
+  tooltipConfig,
+  greyBackground,
+  isLoading,
+  errorMessage,
+  copyValue,
+  texts,
+  ...htmlAttributes
+}) => {
+  const hasValue = Boolean(hoverValue) || Boolean(displayValue);
+  const tooltipVisible = Boolean(tooltip || tooltipConfig);
+  const [hover, setHover] = useState(false);
+  const content = useMemo(() => {
     if (isLoading) {
-      return /*#__PURE__*/React.createElement(S.MetricSkeleton, {
-        size: "S",
-        width: "M",
-        height: 32,
-        numberOfSkeletons: 1
-      });
+      return /* @__PURE__ */ jsx(MetricSkeleton, { size: "S", width: "M", height: 32, numberOfSkeletons: 1 });
     }
-    return errorMessage ? /*#__PURE__*/React.createElement(S.MetricInlineAlert, {
-      type: "alert",
-      message: errorMessage
-    }) : /*#__PURE__*/React.createElement(S.MetricValue, {
-      ellipsis: {
-        tooltip: hoverValue || displayValue
-      }
-    }, /*#__PURE__*/React.createElement(S.WrapperFormattedNumber, null, displayValue), /*#__PURE__*/React.createElement(S.WrapperNumber, null, hoverValue || displayValue));
+    return errorMessage ? /* @__PURE__ */ jsx(MetricInlineAlert, { type: "alert", message: errorMessage }) : /* @__PURE__ */ jsxs(MetricValue, { ellipsis: {
+      tooltip: hoverValue || displayValue
+    }, children: [
+      /* @__PURE__ */ jsx(WrapperFormattedNumber, { children: displayValue }),
+      /* @__PURE__ */ jsx(WrapperNumber, { children: hoverValue || displayValue })
+    ] });
   }, [displayValue, errorMessage, hoverValue, isLoading]);
-  return /*#__PURE__*/React.createElement(S.MetricContainer, _extends({
-    p: "8px 8px 14px 24px",
-    radius: 3,
-    greyBackground: greyBackground
-  }, htmlAttributes), /*#__PURE__*/React.createElement(S.MetricHeaderBar, null, /*#__PURE__*/React.createElement(S.TitleWrapper, {
-    header: Boolean(headerRightSide)
-  }, /*#__PURE__*/React.createElement(Text, {
-    ellipsis: {
-      tooltip: title
-    }
-  }, title), tooltipVisible && /*#__PURE__*/React.createElement(Tooltip, _extends({
-    title: tooltip,
-    placement: "top",
-    trigger: "hover"
-  }, tooltipConfig), /*#__PURE__*/React.createElement(S.IconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-    size: 24,
-    component: /*#__PURE__*/React.createElement(InfoFillS, null)
-  })))), headerRightSide && /*#__PURE__*/React.createElement(S.HeaderRightSide, null, headerRightSide)), /*#__PURE__*/React.createElement(S.MetricContent, {
-    "data-testid": "ds-metric-card",
-    className: hover ? 'hovered' : '',
-    onMouseEnter: function onMouseEnter() {
-      return setHover(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHover(false);
-    },
-    copyable: hasValue
-  }, content, typeof copyValue === 'string' && hover && /*#__PURE__*/React.createElement(S.WrapperCopyIcon, null, /*#__PURE__*/React.createElement(S.CopyIcon, {
-    copyValue: copyValue,
-    texts: texts
-  }))));
+  return /* @__PURE__ */ jsxs(MetricContainer, { p: "8px 8px 14px 24px", radius: 3, greyBackground, ...htmlAttributes, children: [
+    /* @__PURE__ */ jsxs(MetricHeaderBar, { children: [
+      /* @__PURE__ */ jsxs(TitleWrapper, { header: Boolean(headerRightSide), children: [
+        /* @__PURE__ */ jsx(Text, { ellipsis: {
+          tooltip: title
+        }, children: title }),
+        tooltipVisible && /* @__PURE__ */ jsx(Tooltip, { title: tooltip, placement: "top", trigger: "hover", ...tooltipConfig, children: /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(Icon, { size: 24, component: /* @__PURE__ */ jsx(InfoFillS, {}) }) }) })
+      ] }),
+      headerRightSide && /* @__PURE__ */ jsx(HeaderRightSide, { children: headerRightSide })
+    ] }),
+    /* @__PURE__ */ jsxs(MetricContent, { "data-testid": "ds-metric-card", className: hover ? "hovered" : "", onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), copyable: hasValue, children: [
+      content,
+      typeof copyValue === "string" && hover && /* @__PURE__ */ jsx(WrapperCopyIcon, { children: /* @__PURE__ */ jsx(CopyIcon, { copyValue, texts }) })
+    ] })
+  ] });
+};
+export {
+  MetricCard as default
 };
-export default MetricCard;

package/dist/MetricCard.styles.d.ts

@@ -1,23 +1,23 @@
-export declare const WrapperFormattedNumber: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const WrapperNumber: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MetricContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-panel").PanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const CopyIcon: import("styled-components").StyledComponent<({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, onClick, ...rest }: import("@synerise/ds-copy-icon").CopyIconProps) => React.JSX.Element, any, {}, never>;
-export declare const MetricSkeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import("@synerise/ds-skeleton").SkeletonProps) => React.JSX.Element, any, {}, never>;
-export declare const MetricInlineAlert: import("styled-components").StyledComponent<({ className, type, message, withLink, withEmphasis, hoverButton, disabled, customIcon, ...rest }: import("@synerise/ds-inline-alert").InlineAlertProps) => React.JSX.Element, any, {}, never>;
-export declare const MetricContent: import("styled-components").StyledComponent<"div", any, {
+export declare const WrapperFormattedNumber: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const WrapperNumber: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const MetricContainer: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<import('@synerise/ds-panel').PanelProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const CopyIcon: import('styled-components').StyledComponent<({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, onClick, ...rest }: import('@synerise/ds-copy-icon').CopyIconProps) => React.JSX.Element, any, {}, never>;
+export declare const MetricSkeleton: import('styled-components').StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import('@synerise/ds-skeleton').SkeletonProps) => React.JSX.Element, any, {}, never>;
+export declare const MetricInlineAlert: import('styled-components').StyledComponent<({ className, type, message, withLink, withEmphasis, hoverButton, disabled, customIcon, ...rest }: import('@synerise/ds-inline-alert').InlineAlertProps) => React.JSX.Element, any, {}, never>;
+export declare const MetricContent: import('styled-components').StyledComponent<"div", any, {
     copyable?: boolean;
 }, never>;
-export declare const MetricValue: import("styled-components").StyledComponent<({ size, className, children, ellipsis, style, }: {
-    size?: import("@synerise/ds-typography").TextSize;
-    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps;
-    children?: import("react").ReactNode;
+export declare const MetricValue: import('styled-components').StyledComponent<({ size, className, children, ellipsis, style, }: {
+    size?: import('@synerise/ds-typography').TextSize;
+    ellipsis?: import('@synerise/ds-typography/dist/Ellipsis').EllipsisProps;
+    children?: import('react').ReactNode;
     className?: string;
-    style?: import("react").CSSProperties;
+    style?: import('react').CSSProperties;
 }) => React.JSX.Element, any, {}, never>;
-export declare const MetricHeaderBar: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const MetricHeaderBar: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const TitleWrapper: import('styled-components').StyledComponent<"div", any, {
     header?: boolean;
 }, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const HeaderRightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const WrapperCopyIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const HeaderRightSide: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const WrapperCopyIcon: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/MetricCard.styles.js

@@ -1,64 +1,75 @@
-import styled, { css } from 'styled-components';
-import Copy from '@synerise/ds-copy-icon';
-import InlineAlert from '@synerise/ds-inline-alert';
-import Panel from '@synerise/ds-panel';
-import Skeleton from '@synerise/ds-skeleton';
-import { Text } from '@synerise/ds-typography';
-export var WrapperFormattedNumber = styled.div.withConfig({
+import styled, { css } from "styled-components";
+import Copy from "@synerise/ds-copy-icon";
+import InlineAlert from "@synerise/ds-inline-alert";
+import Panel from "@synerise/ds-panel";
+import Skeleton from "@synerise/ds-skeleton";
+import { Text } from "@synerise/ds-typography";
+const WrapperFormattedNumber = /* @__PURE__ */ styled.div.withConfig({
   displayName: "MetricCardstyles__WrapperFormattedNumber",
   componentId: "sc-1g748a8-0"
 })(["display:inline;"]);
-export var WrapperNumber = styled.div.withConfig({
+const WrapperNumber = /* @__PURE__ */ styled.div.withConfig({
   displayName: "MetricCardstyles__WrapperNumber",
   componentId: "sc-1g748a8-1"
 })(["display:none;"]);
-export var MetricContainer = styled(Panel).withConfig({
+const MetricContainer = /* @__PURE__ */ styled(Panel).withConfig({
   displayName: "MetricCardstyles__MetricContainer",
   componentId: "sc-1g748a8-2"
 })(["display:flex;flex-direction:column;gap:2px;width:100%;"]);
-export var CopyIcon = styled(Copy).withConfig({
+const CopyIcon = /* @__PURE__ */ styled(Copy).withConfig({
   displayName: "MetricCardstyles__CopyIcon",
   componentId: "sc-1g748a8-3"
 })(["margin-left:8px;visibility:hidden;opacity:0;transition:opacity 0.15s ease;"]);
-export var MetricSkeleton = styled(Skeleton).withConfig({
+const MetricSkeleton = /* @__PURE__ */ styled(Skeleton).withConfig({
   displayName: "MetricCardstyles__MetricSkeleton",
   componentId: "sc-1g748a8-4"
 })(["padding:0 0 2px;width:50%;"]);
-export var MetricInlineAlert = styled(InlineAlert).withConfig({
+const MetricInlineAlert = /* @__PURE__ */ styled(InlineAlert).withConfig({
   displayName: "MetricCardstyles__MetricInlineAlert",
   componentId: "sc-1g748a8-5"
 })(["padding:8px 0 2px;"]);
-export var MetricContent = styled.div.withConfig({
+const MetricContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "MetricCardstyles__MetricContent",
   componentId: "sc-1g748a8-6"
-})(["flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;margin:0 4px 2px 0;", "{", "}&.hovered{", "{visibility:visible;opacity:1;}", "{display:none;}", "{display:inline;}}"], CopyIcon, function (props) {
+})(["flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;margin:0 4px 2px 0;", "{", "}&.hovered{", "{visibility:visible;opacity:1;}", "{display:none;}", "{display:inline;}}"], CopyIcon, (props) => {
   return props.copyable && css(["cursor:pointer;"]);
 }, CopyIcon, WrapperFormattedNumber, WrapperNumber);
-export var MetricValue = styled(Text).withConfig({
+const MetricValue = /* @__PURE__ */ styled(Text).withConfig({
   displayName: "MetricCardstyles__MetricValue",
   componentId: "sc-1g748a8-7"
-})(["color:", ";font-size:32px;line-height:100%;padding-bottom:2px;align-items:center;cursor:pointer;font-weight:500;justify-content:start;"], function (props) {
-  return props.theme.palette['grey-800'];
-});
-export var MetricHeaderBar = styled.div.withConfig({
+})(["color:", ";font-size:32px;line-height:100%;padding-bottom:2px;align-items:center;cursor:pointer;font-weight:500;justify-content:start;"], (props) => props.theme.palette["grey-800"]);
+const MetricHeaderBar = /* @__PURE__ */ styled.div.withConfig({
   displayName: "MetricCardstyles__MetricHeaderBar",
   componentId: "sc-1g748a8-8"
 })(["display:flex;align-items:center;justify-content:space-between;"]);
-export var TitleWrapper = styled.div.withConfig({
+const TitleWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "MetricCardstyles__TitleWrapper",
   componentId: "sc-1g748a8-9"
 })(["flex:1;min-width:0;display:flex;align-items:center;min-height:32px;"]);
-export var IconWrapper = styled.span.withConfig({
+const IconWrapper = /* @__PURE__ */ styled.span.withConfig({
   displayName: "MetricCardstyles__IconWrapper",
   componentId: "sc-1g748a8-10"
-})(["display:inline-block;color:", ";cursor:pointer;"], function (props) {
-  return props.theme.palette['grey-400'];
-});
-export var HeaderRightSide = styled.div.withConfig({
+})(["display:inline-block;color:", ";cursor:pointer;"], (props) => props.theme.palette["grey-400"]);
+const HeaderRightSide = /* @__PURE__ */ styled.div.withConfig({
   displayName: "MetricCardstyles__HeaderRightSide",
   componentId: "sc-1g748a8-11"
 })(["flex-shrink:0;display:flex;align-items:center;"]);
-export var WrapperCopyIcon = styled.div.withConfig({
+const WrapperCopyIcon = /* @__PURE__ */ styled.div.withConfig({
   displayName: "MetricCardstyles__WrapperCopyIcon",
   componentId: "sc-1g748a8-12"
-})(["flex-shrink:0;display:flex;align-items:center;"]);
+})(["flex-shrink:0;display:flex;align-items:center;"]);
+export {
+  CopyIcon,
+  HeaderRightSide,
+  IconWrapper,
+  MetricContainer,
+  MetricContent,
+  MetricHeaderBar,
+  MetricInlineAlert,
+  MetricSkeleton,
+  MetricValue,
+  TitleWrapper,
+  WrapperCopyIcon,
+  WrapperFormattedNumber,
+  WrapperNumber
+};

package/dist/MetricCard.types.d.ts

@@ -1,6 +1,6 @@
-import { type ReactNode } from 'react';
-import { type TooltipProps } from '@synerise/ds-tooltip';
-import { type WithHTMLAttributes } from '@synerise/ds-utils';
+import { ReactNode } from 'react';
+import { TooltipProps } from '@synerise/ds-tooltip';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type MetricCardProps = WithHTMLAttributes<HTMLDivElement, {
     title?: ReactNode;
     headerRightSide?: ReactNode;

package/dist/MetricCard.types.js

@@ -1 +1 @@
-export {};
+

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './MetricCard';
+import { default as default2 } from "./MetricCard.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-metric-card",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "description": "MetricCard UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "prepublish": "pnpm run build",
     "types": "tsc --noEmit",
@@ -35,16 +35,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-copy-icon": "^1.2.1",
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-inline-alert": "^1.1.14",
-    "@synerise/ds-panel": "^1.2.2",
-    "@synerise/ds-skeleton": "^1.0.44",
-    "@synerise/ds-tooltip": "^1.4.9",
-    "@synerise/ds-typography": "^1.1.12"
+    "@synerise/ds-copy-icon": "^1.2.3",
+    "@synerise/ds-icon": "^1.15.2",
+    "@synerise/ds-inline-alert": "^1.1.16",
+    "@synerise/ds-panel": "^1.2.4",
+    "@synerise/ds-skeleton": "^1.0.46",
+    "@synerise/ds-tooltip": "^1.4.11",
+    "@synerise/ds-typography": "^1.1.14"
   },
   "devDependencies": {
-    "@synerise/ds-utils": "^1.7.0"
+    "@synerise/ds-utils": "^1.7.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -52,5 +52,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
 }