@acronis-platform/ui-react 3.0.0 → 4.1.0

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

@@ -1,203 +1,86 @@
-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)]"
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { Tooltip as t, TooltipContent as n, TooltipTrigger as r } from "../tooltip/tooltip.js";
+import { Skeleton as i } from "../skeleton/skeleton.js";
+import { TrendIndicator as a } from "../trend-indicator/trend-indicator.js";
+import * as o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { CircleInfoIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/metric/metric.tsx
+var d = {
+	up: "up",
+	down: "down",
+	stable: "flat"
+}, f = {
+	up: "positive",
+	down: "negative",
+	stable: "neutral"
 };
-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 p({ icon: e }) {
+	return /* @__PURE__ */ c("span", {
+		"aria-hidden": !0,
+		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: o.isValidElement(e) ? o.cloneElement(e, { size: 16 }) : e
+	});
 }
-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
-      }
-    )
-  ] });
+function m({ value: e, unit: t }) {
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+		className: "text-2xl font-semibold leading-8 tabular-nums text-foreground",
+		children: e
+	}), t != null && /* @__PURE__ */ c("span", {
+		className: "text-xs text-muted-foreground",
+		children: t
+	})] });
 }
-const P = i.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(
-      _,
-      {
-        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
-        ]
-      }
-    );
-  }
-);
-P.displayName = "Metric";
-export {
-  P as Metric
-};
-//# sourceMappingURL=metric.js.map
+var h = o.forwardRef(({ className: o, value: s, unit: h, caption: g, trend: _, trendValue: v, supportingText: y, badge: b, icon: x, tooltip: S, tooltipLabel: C = "More information", loading: w = !1, children: T, ...E }, D) => /* @__PURE__ */ l("div", {
+	ref: D,
+	className: e("flex flex-col gap-2", o),
+	...E,
+	children: [
+		/* @__PURE__ */ l("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ l("div", {
+				className: "flex items-center gap-2",
+				children: [
+					x != null && /* @__PURE__ */ c(p, { icon: x }),
+					/* @__PURE__ */ l("div", {
+						className: "flex items-baseline gap-1",
+						children: [w ? /* @__PURE__ */ c(i, { className: "h-8 w-20" }) : /* @__PURE__ */ c(m, {
+							value: s,
+							unit: h
+						}), b != null && /* @__PURE__ */ c("span", {
+							className: "ms-1 self-center",
+							children: b
+						})]
+					}),
+					S != null && /* @__PURE__ */ l(t, { children: [/* @__PURE__ */ c(r, {
+						"aria-label": C,
+						className: "inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground",
+						children: /* @__PURE__ */ c(u, {
+							size: 16,
+							"aria-hidden": !0
+						})
+					}), /* @__PURE__ */ c(n, { children: S })] })
+				]
+			}), g != null && /* @__PURE__ */ c("div", {
+				className: "shrink-0",
+				children: g
+			})]
+		}),
+		_ != null && /* @__PURE__ */ c("div", { children: /* @__PURE__ */ c(a, {
+			direction: d[_],
+			sentiment: f[_],
+			value: v
+		}) }),
+		y != null && /* @__PURE__ */ c("div", {
+			className: "text-xs text-muted-foreground",
+			children: y
+		}),
+		T
+	]
+}));
+h.displayName = "Metric";
+//#endregion
+export { h 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","names":[],"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"],"mappings":";;;;;;;;;AAgBA,IAAM,IAAkB;CACtB,IAAI;CACJ,MAAM;CACN,QAAQ;AACV,GAEM,IAAkB;CACtB,IAAI;CACJ,MAAM;CACN,QAAQ;AACV;AAuCA,SAAS,EAAgB,EAAE,WAAmC;CAC5D,OACE,kBAAC,QAAD;EACE,eAAA;EACA,WAAU;EAET,UAAA,EAAM,eAAe,CAAI,IACtB,EAAM,aAAa,GAA+C,EAChE,MAAM,GACR,CAAC,IACD;CACA,CAAA;AAEV;AAGA,SAAS,EAAY,EACnB,UACA,WAIC;CACD,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;EAAM,WAAU;EACb,UAAA;CACG,CAAA,GACL,KAAQ,QACP,kBAAC,QAAD;EAAM,WAAU;EAAiC,UAAA;CAAW,CAAA,CAE9D,EAAA,CAAA;AAEN;AAEA,IAAM,IAAS,EAAM,YAEjB,EACE,cACA,UACA,SACA,YACA,UACA,eACA,mBACA,UACA,SACA,YACA,kBAAe,oBACf,aAAU,IACV,aACA,GAAG,KAEL,MAGE,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAG,uBAAuB,CAAS;CAAG,GAAI;CAApE,UAAA;EAEE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACG,KAAQ,QAAQ,kBAAC,GAAD,EAAuB,QAAO,CAAA;KAC/C,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACG,IACC,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,IAEhC,kBAAC,GAAD;OAAoB;OAAa;MAAO,CAAA,GAEzC,KAAS,QACR,kBAAC,QAAD;OAAM,WAAU;OAAoB,UAAA;MAAY,CAAA,CAE/C;;KACJ,KAAW,QACV,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;MACE,cAAY;MACZ,WAAU;MAEV,UAAA,kBAAC,GAAD;OAAgB,MAAM;OAAI,eAAA;MAAa,CAAA;KACzB,CAAA,GAChB,kBAAC,GAAD,EAAA,UAAiB,EAAwB,CAAA,CAClC,EAAA,CAAA;IAER;GACJ,CAAA,GAAA,KAAW,QAAQ,kBAAC,OAAD;IAAK,WAAU;IAAY,UAAA;GAAa,CAAA,CACzD;;EAGJ,KAAS,QACR,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;GACE,WAAW,EAAgB;GAC3B,WAAW,EAAgB;GAC3B,OAAO;EACR,CAAA,EACE,CAAA;EAGN,KAAkB,QACjB,kBAAC,OAAD;GAAK,WAAU;GAAiC,UAAA;EAAoB,CAAA;EAGrE;CACE;EAGX;AACA,EAAO,cAAc"}

package/dist/components/ui/number-field/number-field.js

@@ -1,61 +1,37 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as a from "react";
-import { NumberField as t } from "@base-ui/react/number-field";
-import { MinusIcon as n, PlusIcon as u } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as l } from "../../../lib/utils.js";
-const g = t.Root, b = a.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ i(
-  t.Group,
-  {
-    ref: o,
-    className: l(
-      "flex h-[var(--ui-input-text-global-box-height)] min-w-0 items-stretch overflow-hidden rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] transition-colors",
-      "not-has-disabled:hover:border-[var(--ui-input-text-normal-box-border-color-hover)]",
-      "has-[input:focus-visible]:border-[var(--ui-input-text-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]",
-      "has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-text-global-box-color-disabled)]",
-      "has-[input[aria-invalid=true]]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]",
-      e
-    ),
-    ...r
-  }
-));
-b.displayName = "NumberFieldGroup";
-const c = a.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ i(
-  t.Input,
-  {
-    ref: o,
-    className: l(
-      "min-w-0 flex-1 bg-transparent px-[var(--ui-input-text-global-box-padding-x)] text-center text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-text-global-value-color-disabled)]",
-      e
-    ),
-    ...r
-  }
-));
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { MinusIcon as r, PlusIcon as i } from "@acronis-platform/icons-react/stroke-mono";
+import { NumberField as a } from "@base-ui/react/number-field";
+//#region src/components/ui/number-field/number-field.tsx
+var o = a.Root, s = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Group, {
+	ref: i,
+	className: e("flex h-[var(--ui-input-text-global-box-height)] min-w-0 items-stretch overflow-hidden rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] transition-colors", "not-has-disabled:hover:border-[var(--ui-input-text-normal-box-border-color-hover)]", "has-[input:focus-visible]:border-[var(--ui-input-text-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]", "has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-text-global-box-color-disabled)]", "has-[input[aria-invalid=true]]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]", t),
+	...r
+}));
+s.displayName = "NumberFieldGroup";
+var c = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Input, {
+	ref: i,
+	className: e("min-w-0 flex-1 bg-transparent px-[var(--ui-input-text-global-box-padding-x)] text-center text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-text-global-value-color-disabled)]", t),
+	...r
+}));
 c.displayName = "NumberFieldInput";
-const s = "flex w-9 shrink-0 cursor-pointer items-center justify-center text-[var(--ui-text-on-surface-secondary)] transition-colors not-disabled:hover:bg-[var(--ui-background-surface-hover)] not-disabled:hover:text-[var(--ui-text-on-surface-primary)] disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)]", m = a.forwardRef(({ className: e, children: r, ...o }, d) => /* @__PURE__ */ i(
-  t.Decrement,
-  {
-    ref: d,
-    className: l(s, e),
-    ...o,
-    children: r ?? /* @__PURE__ */ i(n, { size: 16 })
-  }
-));
-m.displayName = "NumberFieldDecrement";
-const p = a.forwardRef(({ className: e, children: r, ...o }, d) => /* @__PURE__ */ i(
-  t.Increment,
-  {
-    ref: d,
-    className: l(s, e),
-    ...o,
-    children: r ?? /* @__PURE__ */ i(u, { size: 16 })
-  }
-));
-p.displayName = "NumberFieldIncrement";
-export {
-  g as NumberField,
-  m as NumberFieldDecrement,
-  b as NumberFieldGroup,
-  p as NumberFieldIncrement,
-  c as NumberFieldInput
-};
-//# sourceMappingURL=number-field.js.map
+var l = "flex w-9 shrink-0 cursor-pointer items-center justify-center text-[var(--ui-text-on-surface-secondary)] transition-colors not-disabled:hover:bg-[var(--ui-background-surface-hover)] not-disabled:hover:text-[var(--ui-text-on-surface-primary)] disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)]", u = t.forwardRef(({ className: t, children: i, ...o }, s) => /* @__PURE__ */ n(a.Decrement, {
+	ref: s,
+	className: e(l, t),
+	...o,
+	children: i ?? /* @__PURE__ */ n(r, { size: 16 })
+}));
+u.displayName = "NumberFieldDecrement";
+var d = t.forwardRef(({ className: t, children: r, ...o }, s) => /* @__PURE__ */ n(a.Increment, {
+	ref: s,
+	className: e(l, t),
+	...o,
+	children: r ?? /* @__PURE__ */ n(i, { size: 16 })
+}));
+d.displayName = "NumberFieldIncrement";
+//#endregion
+export { o as NumberField, u as NumberFieldDecrement, s as NumberFieldGroup, d as NumberFieldIncrement, c as NumberFieldInput };
+
+//# sourceMappingURL=number-field.js.map

package/dist/components/ui/number-field/number-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"number-field.js","sources":["../../../../src/components/ui/number-field/number-field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';\nimport { MinusIcon, PlusIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform`'s `number-field`, on Base UI's NumberField\n// (Root / Group / Decrement / Input / Increment). No `--ui-number-field-*` tier —\n// the box reuses the `--ui-input-text-*` tier (already imported) so it matches\n// InputBox / InputText; the steppers use the muted/primary surface + text tokens.\n\nconst NumberField = NumberFieldPrimitive.Root;\n\n// The bordered box wrapping the steppers + input. Mirrors the InputBox field box\n// (height / radius / border / bg / hover / focus-within ring / disabled / invalid).\nconst NumberFieldGroup = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <NumberFieldPrimitive.Group\n    ref={ref}\n    className={cn(\n      'flex h-[var(--ui-input-text-global-box-height)] min-w-0 items-stretch overflow-hidden rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] transition-colors',\n      'not-has-disabled:hover:border-[var(--ui-input-text-normal-box-border-color-hover)]',\n      'has-[input:focus-visible]:border-[var(--ui-input-text-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n      'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-text-global-box-color-disabled)]',\n      'has-[input[aria-invalid=true]]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]',\n      className\n    )}\n    {...props}\n  />\n));\nNumberFieldGroup.displayName = 'NumberFieldGroup';\n\nconst NumberFieldInput = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <NumberFieldPrimitive.Input\n    ref={ref}\n    className={cn(\n      'min-w-0 flex-1 bg-transparent px-[var(--ui-input-text-global-box-padding-x)] text-center text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-text-global-value-color-disabled)]',\n      className\n    )}\n    {...props}\n  />\n));\nNumberFieldInput.displayName = 'NumberFieldInput';\n\nconst stepperClassName =\n  'flex w-9 shrink-0 cursor-pointer items-center justify-center text-[var(--ui-text-on-surface-secondary)] transition-colors not-disabled:hover:bg-[var(--ui-background-surface-hover)] not-disabled:hover:text-[var(--ui-text-on-surface-primary)] disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)]';\n\nconst NumberFieldDecrement = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Decrement>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Decrement>\n>(({ className, children, ...props }, ref) => (\n  <NumberFieldPrimitive.Decrement\n    ref={ref}\n    className={cn(stepperClassName, className)}\n    {...props}\n  >\n    {children ?? <MinusIcon size={16} />}\n  </NumberFieldPrimitive.Decrement>\n));\nNumberFieldDecrement.displayName = 'NumberFieldDecrement';\n\nconst NumberFieldIncrement = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Increment>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Increment>\n>(({ className, children, ...props }, ref) => (\n  <NumberFieldPrimitive.Increment\n    ref={ref}\n    className={cn(stepperClassName, className)}\n    {...props}\n  >\n    {children ?? <PlusIcon size={16} />}\n  </NumberFieldPrimitive.Increment>\n));\nNumberFieldIncrement.displayName = 'NumberFieldIncrement';\n\nexport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n};\n"],"names":["NumberField","NumberFieldPrimitive","NumberFieldGroup","React","className","props","ref","jsx","cn","NumberFieldInput","stepperClassName","NumberFieldDecrement","children","MinusIcon","NumberFieldIncrement","PlusIcon"],"mappings":";;;;;AAaA,MAAMA,IAAcC,EAAqB,MAInCC,IAAmBC,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAiB,cAAc;AAE/B,MAAMO,IAAmBN,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAiB,cAAc;AAE/B,MAAMC,IACJ,mUAEIC,IAAuBR,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,UAAAQ,GAAU,GAAGP,KAASC,MACpC,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAGE,GAAkBN,CAAS;AAAA,IACxC,GAAGC;AAAA,IAEH,UAAAO,KAAY,gBAAAL,EAACM,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,EAAA;AACpC,CACD;AACDF,EAAqB,cAAc;AAEnC,MAAMG,IAAuBX,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,UAAAQ,GAAU,GAAGP,KAASC,MACpC,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAGE,GAAkBN,CAAS;AAAA,IACxC,GAAGC;AAAA,IAEH,UAAAO,KAAY,gBAAAL,EAACQ,GAAA,EAAS,MAAM,GAAA,CAAI;AAAA,EAAA;AACnC,CACD;AACDD,EAAqB,cAAc;"}
+{"version":3,"file":"number-field.js","names":[],"sources":["../../../../src/components/ui/number-field/number-field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';\nimport { MinusIcon, PlusIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform`'s `number-field`, on Base UI's NumberField\n// (Root / Group / Decrement / Input / Increment). No `--ui-number-field-*` tier —\n// the box reuses the `--ui-input-text-*` tier (already imported) so it matches\n// InputBox / InputText; the steppers use the muted/primary surface + text tokens.\n\nconst NumberField = NumberFieldPrimitive.Root;\n\n// The bordered box wrapping the steppers + input. Mirrors the InputBox field box\n// (height / radius / border / bg / hover / focus-within ring / disabled / invalid).\nconst NumberFieldGroup = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <NumberFieldPrimitive.Group\n    ref={ref}\n    className={cn(\n      'flex h-[var(--ui-input-text-global-box-height)] min-w-0 items-stretch overflow-hidden rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] transition-colors',\n      'not-has-disabled:hover:border-[var(--ui-input-text-normal-box-border-color-hover)]',\n      'has-[input:focus-visible]:border-[var(--ui-input-text-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n      'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-text-global-box-color-disabled)]',\n      'has-[input[aria-invalid=true]]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]',\n      className\n    )}\n    {...props}\n  />\n));\nNumberFieldGroup.displayName = 'NumberFieldGroup';\n\nconst NumberFieldInput = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <NumberFieldPrimitive.Input\n    ref={ref}\n    className={cn(\n      'min-w-0 flex-1 bg-transparent px-[var(--ui-input-text-global-box-padding-x)] text-center text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-text-global-value-color-disabled)]',\n      className\n    )}\n    {...props}\n  />\n));\nNumberFieldInput.displayName = 'NumberFieldInput';\n\nconst stepperClassName =\n  'flex w-9 shrink-0 cursor-pointer items-center justify-center text-[var(--ui-text-on-surface-secondary)] transition-colors not-disabled:hover:bg-[var(--ui-background-surface-hover)] not-disabled:hover:text-[var(--ui-text-on-surface-primary)] disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)]';\n\nconst NumberFieldDecrement = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Decrement>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Decrement>\n>(({ className, children, ...props }, ref) => (\n  <NumberFieldPrimitive.Decrement\n    ref={ref}\n    className={cn(stepperClassName, className)}\n    {...props}\n  >\n    {children ?? <MinusIcon size={16} />}\n  </NumberFieldPrimitive.Decrement>\n));\nNumberFieldDecrement.displayName = 'NumberFieldDecrement';\n\nconst NumberFieldIncrement = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Increment>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Increment>\n>(({ className, children, ...props }, ref) => (\n  <NumberFieldPrimitive.Increment\n    ref={ref}\n    className={cn(stepperClassName, className)}\n    {...props}\n  >\n    {children ?? <PlusIcon size={16} />}\n  </NumberFieldPrimitive.Increment>\n));\nNumberFieldIncrement.displayName = 'NumberFieldIncrement';\n\nexport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n};\n"],"mappings":";;;;;;;AAaA,IAAM,IAAc,EAAqB,MAInC,IAAmB,EAAM,YAG5B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAqB,OAAtB;CACO;CACL,WAAW,EACT,qRACA,sFACA,uLACA,gLACA,0KACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAiB,cAAc;AAE/B,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAqB,OAAtB;CACO;CACL,WAAW,EACT,kVACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAiB,cAAc;AAE/B,IAAM,IACJ,mUAEI,IAAuB,EAAM,YAGhC,EAAE,cAAW,aAAU,GAAG,KAAS,MACpC,kBAAC,EAAqB,WAAtB;CACO;CACL,WAAW,EAAG,GAAkB,CAAS;CACzC,GAAI;CAEH,UAAA,KAAY,kBAAC,GAAD,EAAW,MAAM,GAAK,CAAA;AACL,CAAA,CACjC;AACD,EAAqB,cAAc;AAEnC,IAAM,IAAuB,EAAM,YAGhC,EAAE,cAAW,aAAU,GAAG,KAAS,MACpC,kBAAC,EAAqB,WAAtB;CACO;CACL,WAAW,EAAG,GAAkB,CAAS;CACzC,GAAI;CAEH,UAAA,KAAY,kBAAC,GAAD,EAAU,MAAM,GAAK,CAAA;AACJ,CAAA,CACjC;AACD,EAAqB,cAAc"}

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

@@ -1,19 +1,15 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as r from "react";
-import { cn as m } from "../../../lib/utils.js";
-const n = r.forwardRef(
-  ({ className: t, ...o }, a) => /* @__PURE__ */ e(
-    "div",
-    {
-      ref: a,
-      "data-slot": "page-content",
-      className: m("flex-1 p-6", t),
-      ...o
-    }
-  )
-);
-n.displayName = "PageContent";
-export {
-  n as PageContent
-};
-//# sourceMappingURL=page-content.js.map
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/ui/page-content/page-content.tsx
+var r = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	"data-slot": "page-content",
+	className: e("flex-1 p-6", t),
+	...r
+}));
+r.displayName = "PageContent";
+//#endregion
+export { r as PageContent };
+
+//# sourceMappingURL=page-content.js.map

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","names":[],"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"],"mappings":";;;;AAYA,IAAM,IAAc,EAAM,YACvB,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,aAAU;CACV,WAAW,EAAG,cAAc,CAAS;CACrC,GAAI;AACL,CAAA,CAEL;AACA,EAAY,cAAc"}