@acronis-platform/ui-react 0.60.0 → 0.62.0

package/dist/components/ui/metric/metric.js

@@ -1,8 +1,8 @@
 import { jsxs as t, jsx as e, Fragment as k } from "react/jsx-runtime";
-import * as n from "react";
+import * as i from "react";
 import { cva as S } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { CircleInfoIcon as I } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as a } from "../../../lib/utils.js";
+import { cn as r } from "../../../lib/utils.js";
 import { Card as _ } from "../card/card.js";
 import { Tooltip as z, TooltipTrigger as T, TooltipContent as A } from "../tooltip/tooltip.js";
 import { Skeleton as Z } from "../skeleton/skeleton.js";
@@ -28,84 +28,130 @@ const j = S("flex flex-col", {
     size: "medium",
     status: "neutral"
   }
-}), y = {
+}), B = {
   small: "text-[10px]",
   medium: "text-[11px]",
   large: "text-xs"
-}, B = {
+}, M = {
   small: "text-2xl",
   medium: "text-3xl",
   large: "text-4xl"
-}, C = {
+}, V = {
   small: "text-sm",
   medium: "text-base",
   large: "text-lg"
-}, G = {
+}, y = {
   small: "text-xs",
   medium: "text-xs",
   large: "text-sm"
-}, L = {
+}, C = {
   small: "size-7",
   medium: "size-8",
   large: "size-10"
-}, U = {
+}, G = {
   small: 14,
   medium: 16,
   large: 20
-}, V = {
+}, L = {
   small: "h-6 w-16",
   medium: "h-8 w-20",
   large: "h-10 w-28"
-}, D = {
+}, U = {
   neutral: "bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]",
   info: "bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]",
   success: "bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]",
   warning: "bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]",
   danger: "bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]",
   critical: "bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]"
-}, M = n.forwardRef(
+};
+function D({
+  icon: s,
+  size: a,
+  status: n
+}) {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      "aria-hidden": !0,
+      className: r(
+        "flex shrink-0 items-center justify-center rounded-lg [&_svg]:shrink-0",
+        C[a],
+        U[n]
+      ),
+      children: i.isValidElement(s) ? i.cloneElement(s, {
+        size: G[a]
+      }) : s
+    }
+  );
+}
+function O({
+  value: s,
+  unit: a,
+  size: n
+}) {
+  return /* @__PURE__ */ t(k, { children: [
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: r(
+          "font-bold leading-none tabular-nums text-foreground",
+          M[n]
+        ),
+        children: s
+      }
+    ),
+    a != null && /* @__PURE__ */ e(
+      "span",
+      {
+        className: r("font-medium text-muted-foreground", V[n]),
+        children: a
+      }
+    )
+  ] });
+}
+const P = i.forwardRef(
   ({
-    className: f,
-    label: p,
-    value: h,
-    unit: l,
-    caption: i,
-    trend: c,
+    className: s,
+    label: a,
+    value: n,
+    unit: h,
+    caption: c,
+    trend: u,
     supportingText: m,
     badge: d,
-    icon: r,
-    tooltip: u,
+    icon: o,
+    tooltip: g,
     tooltipLabel: v = "More information",
     loading: N = !1,
-    size: o,
-    status: x,
+    size: x,
+    status: f,
     children: b,
     ...w
   }, E) => {
-    const s = o ?? "medium", g = x ?? "neutral";
+    const l = x ?? "medium", p = f ?? "neutral";
     return /* @__PURE__ */ t(
       _,
       {
         ref: E,
-        "data-size": s,
-        "data-status": g,
-        className: a("flex flex-col p-4", f),
+        "data-size": l,
+        "data-status": p,
+        className: r("flex flex-col p-4", s),
         ...w,
         children: [
-          /* @__PURE__ */ t("div", { className: a(j({ size: o, status: x })), children: [
+          /* @__PURE__ */ t("div", { className: r(j({ size: x, status: f })), children: [
             /* @__PURE__ */ t("div", { className: "flex items-center justify-between gap-2", children: [
               /* @__PURE__ */ t("div", { className: "flex min-w-0 items-center gap-1.5", children: [
                 /* @__PURE__ */ e(
                   "span",
                   {
-                    className: a(
+                    className: r(
                       "min-w-0 truncate font-bold uppercase leading-none tracking-wide text-muted-foreground",
-                      y[s]
+                      B[l]
                     ),
-                    children: p
+                    children: a
                   }
                 ),
-                u != null && /* @__PURE__ */ t(z, { children: [
+                g != null && /* @__PURE__ */ t(z, { children: [
                   /* @__PURE__ */ e(
                     T,
                     {
@@ -114,60 +160,32 @@ const j = S("flex flex-col", {
                       children: /* @__PURE__ */ e(I, { size: 16, "aria-hidden": !0 })
                     }
                   ),
-                  /* @__PURE__ */ e(A, { children: u })
+                  /* @__PURE__ */ e(A, { children: g })
                 ] })
               ] }),
-              i != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: i })
+              c != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: c })
             ] }),
             /* @__PURE__ */ t("div", { className: "flex items-center justify-between gap-3", children: [
               /* @__PURE__ */ t("div", { className: "flex min-w-0 items-center gap-2", children: [
-                r != null && /* @__PURE__ */ e(
-                  "span",
+                o != null && /* @__PURE__ */ e(
+                  D,
                   {
-                    "aria-hidden": !0,
-                    className: a(
-                      "flex shrink-0 items-center justify-center rounded-lg [&_svg]:shrink-0",
-                      L[s],
-                      D[g]
-                    ),
-                    children: n.isValidElement(r) ? n.cloneElement(
-                      r,
-                      { size: U[s] }
-                    ) : r
+                    icon: o,
+                    size: l,
+                    status: p
                   }
                 ),
                 /* @__PURE__ */ t("div", { className: "flex min-w-0 items-baseline gap-1", children: [
-                  N ? /* @__PURE__ */ e(Z, { className: V[s] }) : /* @__PURE__ */ t(k, { children: [
-                    /* @__PURE__ */ e(
-                      "span",
-                      {
-                        className: a(
-                          "font-bold leading-none tabular-nums text-foreground",
-                          B[s]
-                        ),
-                        children: h
-                      }
-                    ),
-                    l != null && /* @__PURE__ */ e(
-                      "span",
-                      {
-                        className: a(
-                          "font-medium text-muted-foreground",
-                          C[s]
-                        ),
-                        children: l
-                      }
-                    )
-                  ] }),
+                  N ? /* @__PURE__ */ e(Z, { className: L[l] }) : /* @__PURE__ */ e(O, { value: n, unit: h, size: l }),
                   d != null && /* @__PURE__ */ e("span", { className: "ms-1 self-center", children: d })
                 ] })
               ] }),
-              c != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: c })
+              u != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: u })
             ] }),
             m != null && /* @__PURE__ */ e(
               "div",
               {
-                className: a("text-muted-foreground", G[s]),
+                className: r("text-muted-foreground", y[l]),
                 children: m
               }
             )
@@ -178,8 +196,8 @@ const j = S("flex flex-col", {
     );
   }
 );
-M.displayName = "Metric";
+P.displayName = "Metric";
 export {
-  M as Metric
+  P as Metric
 };
 //# sourceMappingURL=metric.js.map

package/dist/components/ui/metric/metric.js.map

@@ -1 +1 @@
-{"version":3,"file":"metric.js","sources":["../../../../src/components/ui/metric/metric.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { CircleInfoIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Card } from '../card';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A presentational metric / statistic, laid out after the Figma MetricCard node:\n// a label row (label + an optional top-right caption) over a value row (an\n// optional status-tinted icon badge + the value + unit on the left, an optional\n// trend on the right), with optional supporting text below. It owns visual\n// hierarchy and layout only — it never computes or formats the value, converts\n// units, or decides whether a value is good or bad; the consumer passes\n// ready-to-render nodes and a resolved `status`, and composes a `TrendIndicator`\n// into the trend slot. `status` tints the icon badge (a subtle cue, not a full\n// color fill). No dedicated token tier — colors are semantic `--ui-*` tokens and\n// geometry uses the Tailwind scale.\nconst metricVariants = cva('flex flex-col', {\n  variants: {\n    size: {\n      small: 'gap-1',\n      medium: 'gap-1.5',\n      large: 'gap-2',\n    },\n    // Semantic status — drives the icon badge tint (see STATUS_BADGE). Kept as a\n    // cva axis so the enum is spec-conformant; the tint is applied on the badge.\n    status: {\n      neutral: '',\n      info: '',\n      success: '',\n      warning: '',\n      danger: '',\n      critical: '',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    status: 'neutral',\n  },\n});\n\nconst LABEL_SIZE = {\n  small: 'text-[10px]',\n  medium: 'text-[11px]',\n  large: 'text-xs',\n} as const;\n\nconst VALUE_SIZE = {\n  small: 'text-2xl',\n  medium: 'text-3xl',\n  large: 'text-4xl',\n} as const;\n\nconst UNIT_SIZE = {\n  small: 'text-sm',\n  medium: 'text-base',\n  large: 'text-lg',\n} as const;\n\nconst SUPPORTING_SIZE = {\n  small: 'text-xs',\n  medium: 'text-xs',\n  large: 'text-sm',\n} as const;\n\nconst BADGE_SIZE = {\n  small: 'size-7',\n  medium: 'size-8',\n  large: 'size-10',\n} as const;\n\n// icons-react icons size themselves from a `size` prop (which also picks the\n// designed stroke weight) — CSS can't do that reliably — so the badge icon is\n// cloned to the right px for the Metric size.\nconst BADGE_ICON_PX = {\n  small: 14,\n  medium: 16,\n  large: 20,\n} as const;\n\nconst SKELETON_SIZE = {\n  small: 'h-6 w-16',\n  medium: 'h-8 w-20',\n  large: 'h-10 w-28',\n} as const;\n\n// The badge pairs the status \"pressed\" background tint with its matching icon\n// color (the same pairing the design uses for status icon chips).\nconst STATUS_BADGE = {\n  neutral:\n    'bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]',\n  info: 'bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]',\n  success:\n    'bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]',\n  warning:\n    'bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]',\n  danger:\n    'bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]',\n  critical:\n    'bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]',\n} as const;\n\nexport interface MetricProps\n  extends React.ComponentProps<'div'>,\n    VariantProps<typeof metricVariants> {\n  /** What the value measures — e.g. \"Gross margin\". Rendered as an uppercase note heading. */\n  label: React.ReactNode;\n  /**\n   * The primary value, already formatted (`73`, `\"94%\"`, `\"$72K\"`, `\"2.8\"`).\n   * The kit does not format currency, units, or decimals.\n   */\n  value: React.ReactNode;\n  /** Unit shown next to the value at a smaller, muted size — e.g. `\"%\"`, `\"hours\"`. */\n  unit?: React.ReactNode;\n  /** A top-right caption aligned with the label — e.g. a timeframe `Tag` (\"Last 30 days\"). */\n  caption?: React.ReactNode;\n  /** A trend slot on the right of the value — typically a `TrendIndicator`. */\n  trend?: React.ReactNode;\n  /** Secondary line below the value — e.g. \"Target: 99%\". */\n  supportingText?: React.ReactNode;\n  /** A small badge / metadata slot beside the value — e.g. a `Tag`. */\n  badge?: React.ReactNode;\n  /** Icon rendered in a status-tinted badge before the value. */\n  icon?: React.ReactNode;\n  /** Contextual hint on an info affordance next to the label (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Accessible name for the info affordance that reveals `tooltip`. */\n  tooltipLabel?: string;\n  /** Show a skeleton in place of the value, preserving its space. */\n  loading?: boolean;\n  /** Card body below the header — e.g. a chart, a Separator, an insight line. */\n  children?: React.ReactNode;\n}\n\nconst Metric = React.forwardRef<HTMLDivElement, MetricProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      unit,\n      caption,\n      trend,\n      supportingText,\n      badge,\n      icon,\n      tooltip,\n      tooltipLabel = 'More information',\n      loading = false,\n      size,\n      status,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedSize = size ?? 'medium';\n    const resolvedStatus = status ?? 'neutral';\n\n    return (\n      <Card\n        ref={ref}\n        data-size={resolvedSize}\n        data-status={resolvedStatus}\n        className={cn('flex flex-col p-4', className)}\n        {...props}\n      >\n        <div className={cn(metricVariants({ size, status }))}>\n        {/* Label row: label (+ optional info) on the left, caption on the right. */}\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <span\n              className={cn(\n                'min-w-0 truncate font-bold uppercase leading-none tracking-wide text-muted-foreground',\n                LABEL_SIZE[resolvedSize]\n              )}\n            >\n              {label}\n            </span>\n            {tooltip != null && (\n              <Tooltip>\n                <TooltipTrigger\n                  aria-label={tooltipLabel}\n                  className=\"inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground\"\n                >\n                  <CircleInfoIcon size={16} aria-hidden />\n                </TooltipTrigger>\n                <TooltipContent>{tooltip}</TooltipContent>\n              </Tooltip>\n            )}\n          </div>\n          {caption != null && <div className=\"shrink-0\">{caption}</div>}\n        </div>\n\n        {/* Value row: badge + value + unit on the left, trend on the right. */}\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            {icon != null && (\n              <span\n                aria-hidden\n                className={cn(\n                  'flex shrink-0 items-center justify-center rounded-lg [&_svg]:shrink-0',\n                  BADGE_SIZE[resolvedSize],\n                  STATUS_BADGE[resolvedStatus]\n                )}\n              >\n                {React.isValidElement(icon)\n                  ? React.cloneElement(\n                      icon as React.ReactElement<{ size?: number }>,\n                      { size: BADGE_ICON_PX[resolvedSize] }\n                    )\n                  : icon}\n              </span>\n            )}\n            <div className=\"flex min-w-0 items-baseline gap-1\">\n              {loading ? (\n                <Skeleton className={SKELETON_SIZE[resolvedSize]} />\n              ) : (\n                <>\n                  <span\n                    className={cn(\n                      'font-bold leading-none tabular-nums text-foreground',\n                      VALUE_SIZE[resolvedSize]\n                    )}\n                  >\n                    {value}\n                  </span>\n                  {unit != null && (\n                    <span\n                      className={cn(\n                        'font-medium text-muted-foreground',\n                        UNIT_SIZE[resolvedSize]\n                      )}\n                    >\n                      {unit}\n                    </span>\n                  )}\n                </>\n              )}\n              {badge != null && <span className=\"ms-1 self-center\">{badge}</span>}\n            </div>\n          </div>\n          {trend != null && <div className=\"shrink-0\">{trend}</div>}\n        </div>\n\n        {supportingText != null && (\n          <div\n            className={cn('text-muted-foreground', SUPPORTING_SIZE[resolvedSize])}\n          >\n            {supportingText}\n          </div>\n        )}\n        </div>\n        {children}\n      </Card>\n    );\n  }\n);\nMetric.displayName = 'Metric';\n\nexport { Metric };\n"],"names":["metricVariants","cva","LABEL_SIZE","VALUE_SIZE","UNIT_SIZE","SUPPORTING_SIZE","BADGE_SIZE","BADGE_ICON_PX","SKELETON_SIZE","STATUS_BADGE","Metric","React","className","label","value","unit","caption","trend","supportingText","badge","icon","tooltip","tooltipLabel","loading","size","status","children","props","ref","resolvedSize","resolvedStatus","jsxs","Card","cn","jsx","Tooltip","TooltipTrigger","CircleInfoIcon","TooltipContent","Skeleton","Fragment"],"mappings":"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"}
+{"version":3,"file":"metric.js","sources":["../../../../src/components/ui/metric/metric.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { CircleInfoIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Card } from '../card';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A presentational metric / statistic, laid out after the Figma MetricCard node:\n// a label row (label + an optional top-right caption) over a value row (an\n// optional status-tinted icon badge + the value + unit on the left, an optional\n// trend on the right), with optional supporting text below. It owns visual\n// hierarchy and layout only — it never computes or formats the value, converts\n// units, or decides whether a value is good or bad; the consumer passes\n// ready-to-render nodes and a resolved `status`, and composes a `TrendIndicator`\n// into the trend slot. `status` tints the icon badge (a subtle cue, not a full\n// color fill). No dedicated token tier — colors are semantic `--ui-*` tokens and\n// geometry uses the Tailwind scale.\nconst metricVariants = cva('flex flex-col', {\n  variants: {\n    size: {\n      small: 'gap-1',\n      medium: 'gap-1.5',\n      large: 'gap-2',\n    },\n    // Semantic status — drives the icon badge tint (see STATUS_BADGE). Kept as a\n    // cva axis so the enum is spec-conformant; the tint is applied on the badge.\n    status: {\n      neutral: '',\n      info: '',\n      success: '',\n      warning: '',\n      danger: '',\n      critical: '',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    status: 'neutral',\n  },\n});\n\nconst LABEL_SIZE = {\n  small: 'text-[10px]',\n  medium: 'text-[11px]',\n  large: 'text-xs',\n} as const;\n\nconst VALUE_SIZE = {\n  small: 'text-2xl',\n  medium: 'text-3xl',\n  large: 'text-4xl',\n} as const;\n\nconst UNIT_SIZE = {\n  small: 'text-sm',\n  medium: 'text-base',\n  large: 'text-lg',\n} as const;\n\nconst SUPPORTING_SIZE = {\n  small: 'text-xs',\n  medium: 'text-xs',\n  large: 'text-sm',\n} as const;\n\nconst BADGE_SIZE = {\n  small: 'size-7',\n  medium: 'size-8',\n  large: 'size-10',\n} as const;\n\n// icons-react icons size themselves from a `size` prop (which also picks the\n// designed stroke weight) — CSS can't do that reliably — so the badge icon is\n// cloned to the right px for the Metric size.\nconst BADGE_ICON_PX = {\n  small: 14,\n  medium: 16,\n  large: 20,\n} as const;\n\nconst SKELETON_SIZE = {\n  small: 'h-6 w-16',\n  medium: 'h-8 w-20',\n  large: 'h-10 w-28',\n} as const;\n\n// The badge pairs the status \"pressed\" background tint with its matching icon\n// color (the same pairing the design uses for status icon chips).\nconst STATUS_BADGE = {\n  neutral:\n    'bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]',\n  info: 'bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]',\n  success:\n    'bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]',\n  warning:\n    'bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]',\n  danger:\n    'bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]',\n  critical:\n    'bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]',\n} as const;\n\nexport interface MetricProps\n  extends React.ComponentProps<'div'>,\n    VariantProps<typeof metricVariants> {\n  /** What the value measures — e.g. \"Gross margin\". Rendered as an uppercase note heading. */\n  label: React.ReactNode;\n  /**\n   * The primary value, already formatted (`73`, `\"94%\"`, `\"$72K\"`, `\"2.8\"`).\n   * The kit does not format currency, units, or decimals.\n   */\n  value: React.ReactNode;\n  /** Unit shown next to the value at a smaller, muted size — e.g. `\"%\"`, `\"hours\"`. */\n  unit?: React.ReactNode;\n  /** A top-right caption aligned with the label — e.g. a timeframe `Tag` (\"Last 30 days\"). */\n  caption?: React.ReactNode;\n  /** A trend slot on the right of the value — typically a `TrendIndicator`. */\n  trend?: React.ReactNode;\n  /** Secondary line below the value — e.g. \"Target: 99%\". */\n  supportingText?: React.ReactNode;\n  /** A small badge / metadata slot beside the value — e.g. a `Tag`. */\n  badge?: React.ReactNode;\n  /** Icon rendered in a status-tinted badge before the value. */\n  icon?: React.ReactNode;\n  /** Contextual hint on an info affordance next to the label (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Accessible name for the info affordance that reveals `tooltip`. */\n  tooltipLabel?: string;\n  /** Show a skeleton in place of the value, preserving its space. */\n  loading?: boolean;\n  /** Card body below the header — e.g. a chart, a Separator, an insight line. */\n  children?: React.ReactNode;\n}\n\n// Every size-keyed lookup above (LABEL/VALUE/UNIT/SUPPORTING/BADGE/SKELETON) is\n// keyed by the `size` cva axis, so the vocabulary is derived from that axis\n// rather than from whichever one map a given helper happens to index.\ntype MetricSize = NonNullable<VariantProps<typeof metricVariants>['size']>;\ntype MetricStatus = keyof typeof STATUS_BADGE;\n\n/**\n * The status-tinted icon chip beside the value.\n *\n * The icon is cloned rather than sized in CSS because icons-react icons pick\n * their designed stroke weight from the `size` prop — scaling them with CSS\n * would thin or thicken the stroke off-design.\n */\nfunction MetricIconBadge({\n  icon,\n  size,\n  status,\n}: {\n  icon: React.ReactNode;\n  size: MetricSize;\n  status: MetricStatus;\n}) {\n  return (\n    <span\n      aria-hidden\n      className={cn(\n        'flex shrink-0 items-center justify-center rounded-lg [&_svg]:shrink-0',\n        BADGE_SIZE[size],\n        STATUS_BADGE[status]\n      )}\n    >\n      {React.isValidElement(icon)\n        ? React.cloneElement(icon as React.ReactElement<{ size?: number }>, {\n            size: BADGE_ICON_PX[size],\n          })\n        : icon}\n    </span>\n  );\n}\n\n/** The headline number and its unit, sharing one baseline. */\nfunction MetricValue({\n  value,\n  unit,\n  size,\n}: {\n  value: React.ReactNode;\n  unit?: React.ReactNode;\n  size: MetricSize;\n}) {\n  return (\n    <>\n      <span\n        className={cn(\n          'font-bold leading-none tabular-nums text-foreground',\n          VALUE_SIZE[size]\n        )}\n      >\n        {value}\n      </span>\n      {unit != null && (\n        <span\n          className={cn('font-medium text-muted-foreground', UNIT_SIZE[size])}\n        >\n          {unit}\n        </span>\n      )}\n    </>\n  );\n}\n\nconst Metric = React.forwardRef<HTMLDivElement, MetricProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      unit,\n      caption,\n      trend,\n      supportingText,\n      badge,\n      icon,\n      tooltip,\n      tooltipLabel = 'More information',\n      loading = false,\n      size,\n      status,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedSize = size ?? 'medium';\n    const resolvedStatus = status ?? 'neutral';\n\n    return (\n      <Card\n        ref={ref}\n        data-size={resolvedSize}\n        data-status={resolvedStatus}\n        className={cn('flex flex-col p-4', className)}\n        {...props}\n      >\n        <div className={cn(metricVariants({ size, status }))}>\n        {/* Label row: label (+ optional info) on the left, caption on the right. */}\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <span\n              className={cn(\n                'min-w-0 truncate font-bold uppercase leading-none tracking-wide text-muted-foreground',\n                LABEL_SIZE[resolvedSize]\n              )}\n            >\n              {label}\n            </span>\n            {tooltip != null && (\n              <Tooltip>\n                <TooltipTrigger\n                  aria-label={tooltipLabel}\n                  className=\"inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground\"\n                >\n                  <CircleInfoIcon size={16} aria-hidden />\n                </TooltipTrigger>\n                <TooltipContent>{tooltip}</TooltipContent>\n              </Tooltip>\n            )}\n          </div>\n          {caption != null && <div className=\"shrink-0\">{caption}</div>}\n        </div>\n\n        {/* Value row: badge + value + unit on the left, trend on the right. */}\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            {icon != null && (\n              <MetricIconBadge\n                icon={icon}\n                size={resolvedSize}\n                status={resolvedStatus}\n              />\n            )}\n            <div className=\"flex min-w-0 items-baseline gap-1\">\n              {loading ? (\n                <Skeleton className={SKELETON_SIZE[resolvedSize]} />\n              ) : (\n                <MetricValue value={value} unit={unit} size={resolvedSize} />\n              )}\n              {badge != null && <span className=\"ms-1 self-center\">{badge}</span>}\n            </div>\n          </div>\n          {trend != null && <div className=\"shrink-0\">{trend}</div>}\n        </div>\n\n        {supportingText != null && (\n          <div\n            className={cn('text-muted-foreground', SUPPORTING_SIZE[resolvedSize])}\n          >\n            {supportingText}\n          </div>\n        )}\n        </div>\n        {children}\n      </Card>\n    );\n  }\n);\nMetric.displayName = 'Metric';\n\nexport { Metric };\n"],"names":["metricVariants","cva","LABEL_SIZE","VALUE_SIZE","UNIT_SIZE","SUPPORTING_SIZE","BADGE_SIZE","BADGE_ICON_PX","SKELETON_SIZE","STATUS_BADGE","MetricIconBadge","icon","size","status","jsx","cn","React","MetricValue","value","unit","jsxs","Fragment","Metric","className","label","caption","trend","supportingText","badge","tooltip","tooltipLabel","loading","children","props","ref","resolvedSize","resolvedStatus","Card","Tooltip","TooltipTrigger","CircleInfoIcon","TooltipContent","Skeleton"],"mappings":"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"}