@acronis-platform/ui-react 3.0.0 → 4.0.0

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

@@ -1,203 +1,92 @@
-import { jsxs as t, jsx as e, Fragment as k } from "react/jsx-runtime";
-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 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";
-const j = S("flex flex-col", {
-  variants: {
-    size: {
-      small: "gap-1",
-      medium: "gap-1.5",
-      large: "gap-2"
-    },
-    // Semantic status — drives the icon badge tint (see STATUS_BADGE). Kept as a
-    // cva axis so the enum is spec-conformant; the tint is applied on the badge.
-    status: {
-      neutral: "",
-      info: "",
-      success: "",
-      warning: "",
-      danger: "",
-      critical: ""
-    }
-  },
-  defaultVariants: {
-    size: "medium",
-    status: "neutral"
-  }
-}), B = {
-  small: "text-[10px]",
-  medium: "text-[11px]",
-  large: "text-xs"
-}, M = {
-  small: "text-2xl",
-  medium: "text-3xl",
-  large: "text-4xl"
-}, V = {
-  small: "text-sm",
-  medium: "text-base",
-  large: "text-lg"
-}, y = {
-  small: "text-xs",
-  medium: "text-xs",
-  large: "text-sm"
-}, C = {
-  small: "size-7",
-  medium: "size-8",
-  large: "size-10"
-}, G = {
-  small: 14,
-  medium: 16,
-  large: 20
-}, L = {
-  small: "h-6 w-16",
-  medium: "h-8 w-20",
-  large: "h-10 w-28"
-}, 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)]"
+import { jsxs as n, jsx as e, Fragment as N } from "react/jsx-runtime";
+import * as a from "react";
+import { CircleInfoIcon as v } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as b } from "../../../lib/utils.js";
+import { Skeleton as T } from "../skeleton/skeleton.js";
+import { Tooltip as k, TooltipTrigger as E, TooltipContent as I } from "../tooltip/tooltip.js";
+import { TrendIndicator as w } from "../trend-indicator/trend-indicator.js";
+const M = {
+  up: "up",
+  down: "down",
+  stable: "flat"
+}, R = {
+  up: "positive",
+  down: "negative",
+  stable: "neutral"
 };
-function D({
-  icon: s,
-  size: a,
-  status: n
-}) {
+function j({ icon: r }) {
   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
+      className: "flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ui-background-status-info)] text-[var(--ui-glyph-on-surface-neutral-dark)] [&_svg]:shrink-0",
+      children: a.isValidElement(r) ? a.cloneElement(r, {
+        size: 16
+      }) : r
     }
   );
 }
-function O({
-  value: s,
-  unit: a,
-  size: n
+function y({
+  value: r,
+  unit: l
 }) {
-  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
-      }
-    )
+  return /* @__PURE__ */ n(N, { children: [
+    /* @__PURE__ */ e("span", { className: "text-2xl font-semibold leading-8 tabular-nums text-foreground", children: r }),
+    l != null && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: l })
   ] });
 }
-const P = i.forwardRef(
+const z = a.forwardRef(
   ({
-    className: s,
-    label: a,
-    value: n,
-    unit: h,
-    caption: c,
-    trend: u,
-    supportingText: m,
-    badge: d,
-    icon: o,
-    tooltip: g,
-    tooltipLabel: v = "More information",
-    loading: N = !1,
-    size: x,
-    status: f,
-    children: b,
-    ...w
-  }, E) => {
-    const l = x ?? "medium", p = f ?? "neutral";
-    return /* @__PURE__ */ t(
-      _,
+    className: r,
+    value: l,
+    unit: m,
+    caption: i,
+    trend: t,
+    trendValue: u,
+    supportingText: s,
+    badge: o,
+    icon: c,
+    tooltip: d,
+    tooltipLabel: f = "More information",
+    loading: p = !1,
+    children: h,
+    ...x
+  }, g) => /* @__PURE__ */ n("div", { ref: g, className: b("flex flex-col gap-2", r), ...x, children: [
+    /* @__PURE__ */ n("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+        c != null && /* @__PURE__ */ e(j, { icon: c }),
+        /* @__PURE__ */ n("div", { className: "flex items-baseline gap-1", children: [
+          p ? /* @__PURE__ */ e(T, { className: "h-8 w-20" }) : /* @__PURE__ */ e(y, { value: l, unit: m }),
+          o != null && /* @__PURE__ */ e("span", { className: "ms-1 self-center", children: o })
+        ] }),
+        d != null && /* @__PURE__ */ n(k, { children: [
+          /* @__PURE__ */ e(
+            E,
+            {
+              "aria-label": f,
+              className: "inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground",
+              children: /* @__PURE__ */ e(v, { size: 16, "aria-hidden": !0 })
+            }
+          ),
+          /* @__PURE__ */ e(I, { children: d })
+        ] })
+      ] }),
+      i != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: i })
+    ] }),
+    t != null && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+      w,
       {
-        ref: E,
-        "data-size": l,
-        "data-status": p,
-        className: r("flex flex-col p-4", s),
-        ...w,
-        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: r(
-                      "min-w-0 truncate font-bold uppercase leading-none tracking-wide text-muted-foreground",
-                      B[l]
-                    ),
-                    children: a
-                  }
-                ),
-                g != null && /* @__PURE__ */ t(z, { children: [
-                  /* @__PURE__ */ e(
-                    T,
-                    {
-                      "aria-label": v,
-                      className: "inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground",
-                      children: /* @__PURE__ */ e(I, { size: 16, "aria-hidden": !0 })
-                    }
-                  ),
-                  /* @__PURE__ */ e(A, { children: g })
-                ] })
-              ] }),
-              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: [
-                o != null && /* @__PURE__ */ e(
-                  D,
-                  {
-                    icon: o,
-                    size: l,
-                    status: p
-                  }
-                ),
-                /* @__PURE__ */ t("div", { className: "flex min-w-0 items-baseline gap-1", children: [
-                  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 })
-                ] })
-              ] }),
-              u != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: u })
-            ] }),
-            m != null && /* @__PURE__ */ e(
-              "div",
-              {
-                className: r("text-muted-foreground", y[l]),
-                children: m
-              }
-            )
-          ] }),
-          b
-        ]
+        direction: M[t],
+        sentiment: R[t],
+        value: u
       }
-    );
-  }
+    ) }),
+    s != null && /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground", children: s }),
+    h
+  ] })
 );
-P.displayName = "Metric";
+z.displayName = "Metric";
 export {
-  P as Metric
+  z 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\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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"}
+{"version":3,"file":"metric.js","sources":["../../../../src/components/ui/metric/metric.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CircleInfoIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Skeleton } from '../skeleton';\nimport { TrendIndicator } from '../trend-indicator';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A presentational metric stats strip: a single row with an optional status-info\n// icon badge + value + unit on the left and an optional caption on the right, with\n// an optional trend row below and a composable body. No Card wrapper, no size or\n// status axes — nest it inside ChartWidget or a Card when you need card chrome.\n// Colors are semantic `--ui-*` tokens; the badge always uses the info tint per Figma.\n\nconst TREND_DIRECTION = {\n  up: 'up',\n  down: 'down',\n  stable: 'flat',\n} as const satisfies Record<string, 'up' | 'down' | 'flat'>;\n\nconst TREND_SENTIMENT = {\n  up: 'positive',\n  down: 'negative',\n  stable: 'neutral',\n} as const satisfies Record<string, 'positive' | 'negative' | 'neutral'>;\n\nexport interface MetricProps extends React.ComponentProps<'div'> {\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  /** Caption at the right end of the stats row — e.g. a timeframe `Tag`. */\n  caption?: React.ReactNode;\n  /**\n   * Trend direction — renders a `TrendIndicator` on its own row below the value.\n   * Sentiment follows direction: `up` → positive, `down` → negative, `stable` → neutral.\n   * Pair with `trendValue` for the change text.\n   */\n  trend?: 'up' | 'down' | 'stable';\n  /** Change text shown next to the trend arrow — e.g. `\"20%\"`, `\"+3\"`. Requires `trend`. */\n  trendValue?: React.ReactNode;\n  /** Secondary line below the trend — 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-info-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  /** Content below the stats strip — e.g. a chart, a `Separator`, an insight line. */\n  children?: React.ReactNode;\n}\n\n// The status-info-tinted icon chip. The icon is cloned to a fixed 16 px rather\n// than sized in CSS because icons-react icons pick their stroke weight from the\n// `size` prop — CSS alone can't replicate that.\nfunction MetricIconBadge({ icon }: { icon: React.ReactNode }) {\n  return (\n    <span\n      aria-hidden\n      className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ui-background-status-info)] text-[var(--ui-glyph-on-surface-neutral-dark)] [&_svg]:shrink-0\"\n    >\n      {React.isValidElement(icon)\n        ? React.cloneElement(icon as React.ReactElement<{ size?: number }>, {\n            size: 16,\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}: {\n  value: React.ReactNode;\n  unit?: React.ReactNode;\n}) {\n  return (\n    <>\n      <span className=\"text-2xl font-semibold leading-8 tabular-nums text-foreground\">\n        {value}\n      </span>\n      {unit != null && (\n        <span className=\"text-xs text-muted-foreground\">{unit}</span>\n      )}\n    </>\n  );\n}\n\nconst Metric = React.forwardRef<HTMLDivElement, MetricProps>(\n  (\n    {\n      className,\n      value,\n      unit,\n      caption,\n      trend,\n      trendValue,\n      supportingText,\n      badge,\n      icon,\n      tooltip,\n      tooltipLabel = 'More information',\n      loading = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)} {...props}>\n        {/* Stats row: icon badge + value + unit on the left, caption on the right. */}\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex items-center gap-2\">\n            {icon != null && <MetricIconBadge icon={icon} />}\n            <div className=\"flex items-baseline gap-1\">\n              {loading ? (\n                <Skeleton className=\"h-8 w-20\" />\n              ) : (\n                <MetricValue value={value} unit={unit} />\n              )}\n              {badge != null && (\n                <span className=\"ms-1 self-center\">{badge}</span>\n              )}\n            </div>\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        {/* Trend row: renders TrendIndicator from the first-class trend prop. */}\n        {trend != null && (\n          <div>\n            <TrendIndicator\n              direction={TREND_DIRECTION[trend]}\n              sentiment={TREND_SENTIMENT[trend]}\n              value={trendValue}\n            />\n          </div>\n        )}\n\n        {supportingText != null && (\n          <div className=\"text-xs text-muted-foreground\">{supportingText}</div>\n        )}\n\n        {children}\n      </div>\n    );\n  }\n);\nMetric.displayName = 'Metric';\n\nexport { Metric };\n"],"names":["TREND_DIRECTION","TREND_SENTIMENT","MetricIconBadge","icon","jsx","React","MetricValue","value","unit","jsxs","Fragment","Metric","className","caption","trend","trendValue","supportingText","badge","tooltip","tooltipLabel","loading","children","props","ref","cn","Skeleton","Tooltip","TooltipTrigger","CircleInfoIcon","TooltipContent","TrendIndicator"],"mappings":"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"}

package/dist/components/ui/page-content/page-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-content.js","sources":["../../../../src/components/ui/page-content/page-content.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The page content region — the padded gutter for a page's body. Ported from\n// `@acronis-platform`'s `page-content`. Rendered as a `<div>` (not `<main>`) so it\n// nests inside `AppShellMain` without duplicating the `main` landmark; if used\n// standalone, wrap it in your own `<main>`. Layout-only (flex-1 + page padding).\nexport type PageContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst PageContent = React.forwardRef<HTMLDivElement, PageContentProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"page-content\"\n      className={cn('flex-1 p-6', className)}\n      {...props}\n    />\n  )\n);\nPageContent.displayName = 'PageContent';\n\nexport { PageContent };\n"],"names":["PageContent","React","className","props","ref","jsx","cn"],"mappings":";;;AAUA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACV,WAAWE,EAAG,cAAcJ,CAAS;AAAA,MACpC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAH,EAAY,cAAc;"}
+{"version":3,"file":"page-content.js","sources":["../../../../src/components/ui/page-content/page-content.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The page content region — the padded gutter for a page's body. Ported from\n// `@acronis-platform`'s `page-content`. Rendered as a `<div>`, not `<main>` —\n// `AppShellChatContentBody` doesn't provide a `main` landmark either, so wrap\n// this in your own `<main>` regardless of whether it nests inside\n// `AppShellChatContentBody` or is used standalone. Layout-only (flex-1 + page\n// padding).\nexport type PageContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst PageContent = React.forwardRef<HTMLDivElement, PageContentProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"page-content\"\n      className={cn('flex-1 p-6', className)}\n      {...props}\n    />\n  )\n);\nPageContent.displayName = 'PageContent';\n\nexport { PageContent };\n"],"names":["PageContent","React","className","props","ref","jsx","cn"],"mappings":";;;AAYA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACV,WAAWE,EAAG,cAAcJ,CAAS;AAAA,MACpC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAH,EAAY,cAAc;"}