@machinemetrics/mm-react-components 0.2.3-13 → 0.2.3-15

package/dist/mm-react-components.es.js

@@ -17592,7 +17592,7 @@ function LabeledSlider({
     },
     [onValueChange]
   );
-  const renderValue = React.useMemo(() => {
+  const renderValue2 = React.useMemo(() => {
     if (formatValue) return formatValue(displayValue);
     return displayValue.length === 1 ? displayValue[0] : `${displayValue[0]} - ${displayValue[1]}`;
   }, [displayValue, formatValue]);
@@ -17636,7 +17636,7 @@ function LabeledSlider({
                 {
                   "data-slot": "slider-value",
                   className: "text-sm text-muted-foreground tabular-nums whitespace-nowrap",
-                  children: renderValue
+                  children: renderValue2
                 }
               )
             ]
@@ -43619,6 +43619,463 @@ function BreadcrumbEllipsis({
     }
   );
 }
+const HERO_METRIC_CONSTANTS = {
+  MIN_ITEM_WIDTH: 160,
+  MIN_ITEMS: 1,
+  MAX_ITEMS: 6,
+  WRAPPED_GAP_DEFAULT: "gap-4",
+  UNWRAPPED_GAP: "gap-0",
+  PADDING_INTERACTIVE: "px-3",
+  PADDING_STATIC: "px-6",
+  CONTAINER_PADDING_Y: "py-4",
+  CONTAINER_PADDING_X: "px-0"
+};
+const GRID_COLS_MAP = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6"
+};
+function parseNumeric(input) {
+  if (input === null || input === void 0) return void 0;
+  if (typeof input !== "string" && typeof input !== "number") return void 0;
+  const n = parseFloat(String(input).replace(/[^0-9.-]/g, ""));
+  return Number.isFinite(n) ? n : void 0;
+}
+function parsePercent(value) {
+  return parseNumeric(value);
+}
+function parseCount(value) {
+  return parseNumeric(value);
+}
+function parseMinutes(value, unit) {
+  if (value === null || value === void 0) return void 0;
+  if (typeof value === "number") {
+    if (!Number.isFinite(value)) return void 0;
+    if (unit && /h/i.test(unit)) return value * 60;
+    return value;
+  }
+  if (typeof value !== "string") return void 0;
+  const s2 = value;
+  const hm = /(\d+)\s*h(?:\s*(\d+)\s*m)?/i.exec(s2);
+  if (hm) {
+    const h = parseInt(hm[1] ?? "0", 10);
+    const m = parseInt(hm[2] ?? "0", 10);
+    return h * 60 + m;
+  }
+  const mOnly = /(\d+)\s*m/i.exec(s2);
+  if (mOnly) return parseInt(mOnly[1] ?? "0", 10);
+  const n = parseFloat(s2);
+  if (Number.isFinite(n)) {
+    if (/h/i.test(s2) || unit && /h/i.test(unit)) return n * 60;
+    return n;
+  }
+  return void 0;
+}
+function formatDuration(mins) {
+  const h = Math.floor(mins / 60);
+  const m = Math.round(mins % 60);
+  if (h > 0) return `${h}h ${m}m`;
+  const s2 = Math.round((mins - m) * 60);
+  return `${m}m ${s2}s`;
+}
+function getNumericForKind(value, unit, kind) {
+  if (kind === "percent") return parsePercent(value);
+  if (kind === "duration-minutes") return parseMinutes(value, unit);
+  return parseCount(value);
+}
+function getColorIntent(direction, higherIsBetter) {
+  if (direction === "neutral") return "neutral";
+  if (direction === "up") return higherIsBetter ? "success" : "destructive";
+  return higherIsBetter ? "destructive" : "success";
+}
+function getTrendText(kind, absDiff, relativePercent) {
+  if (kind === "percent")
+    return `${Math.abs(absDiff).toFixed(1)}% (${relativePercent}pp)`;
+  if (kind === "duration-minutes")
+    return `${formatDuration(Math.abs(absDiff))} (${relativePercent}%)`;
+  return `${Math.abs(absDiff).toFixed(1)} (${relativePercent}%)`;
+}
+function computeTrend(value, unit, trendComparisonValue, higherIsBetter = true, numericValue) {
+  if (!trendComparisonValue || typeof trendComparisonValue.value !== "number")
+    return void 0;
+  const currentNumeric = typeof numericValue === "number" ? numericValue : getNumericForKind(value, unit, trendComparisonValue.kind);
+  if (currentNumeric === void 0) return void 0;
+  const absoluteDifference = currentNumeric - trendComparisonValue.value;
+  let direction;
+  if (absoluteDifference > 0) direction = "up";
+  else if (absoluteDifference < 0) direction = "down";
+  else direction = "neutral";
+  const colorIntent = getColorIntent(direction, higherIsBetter);
+  const relativePercent = Math.abs(
+    absoluteDifference / Math.max(1e-6, trendComparisonValue.value) * 100
+  ).toFixed(1);
+  const text2 = getTrendText(
+    trendComparisonValue.kind,
+    Math.abs(absoluteDifference),
+    relativePercent
+  );
+  return { direction, text: text2, colorIntent };
+}
+function getGridColsClass(n) {
+  if (!n) return void 0;
+  return GRID_COLS_MAP[n];
+}
+function resolveGridClasses(columns) {
+  if (!columns) {
+    return "[grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))]";
+  }
+  if (typeof columns === "number") {
+    return getGridColsClass(columns) ?? "grid-cols-1";
+  }
+  const base = getGridColsClass(columns.base) ?? "grid-cols-1";
+  const md = columns.md ? `md:${getGridColsClass(columns.md)}` : "";
+  const lg = columns.lg ? `lg:${getGridColsClass(columns.lg)}` : "";
+  return cn$1(base, md, lg);
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    });
+  };
+}
+function formatNumber(value) {
+  if (typeof value === "number") return value.toLocaleString();
+  return value;
+}
+const renderLabel = (label, tooltip) => {
+  const labelElement = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "span",
+    {
+      className: cn$1(
+        "mmc-hero-metric-card__label",
+        "text-xs font-normal text-foreground",
+        tooltip && "mmc-underline-dashed hover:text-foreground"
+      ),
+      "data-slot": "metric-label",
+      children: label
+    }
+  );
+  if (!tooltip) return labelElement;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip$1, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "inline-block cursor-help", children: labelElement }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: tooltip })
+  ] });
+};
+const renderValue = (value, unit, icon, loading) => {
+  const formatDisplayValue = () => {
+    if (value === null || value === void 0) return "—";
+    if (typeof value === "number") return formatNumber(value);
+    return value;
+  };
+  const content = loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-9 w-28" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "inline-flex items-baseline gap-0", children: [
+    icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "mmc-hero-metric-card__icon", "data-slot": "metric-icon", children: icon }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-foreground", children: formatDisplayValue() }),
+    unit && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "span",
+      {
+        className: "mmc-hero-metric-card__unit text-foreground text-xl font-medium",
+        "data-slot": "metric-unit",
+        children: unit
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: "mmc-hero-metric-card__value text-xl font-medium text-foreground",
+      "data-slot": "metric-value",
+      children: content
+    }
+  );
+};
+const renderCaption = (caption, loading) => {
+  if (!caption) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: "mmc-hero-metric-card__caption text-xs font-normal text-foreground",
+      "data-slot": "metric-caption",
+      children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-4 w-32" }) : caption
+    }
+  );
+};
+const getTrendContent = (computedTrend, loading) => {
+  if (!computedTrend) return null;
+  if (loading) return /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-3.5 w-16" });
+  if (computedTrend.colorIntent === "neutral") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: "—" });
+  }
+  const trendColorClass = computedTrend.colorIntent === "success" ? "text-[var(--success-foreground,theme(colors.green.600))]" : "text-[var(--destructive-foreground,theme(colors.red.600))]";
+  const ArrowIcon = computedTrend.direction === "up" ? ArrowUp : ArrowDown;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowIcon, { className: cn$1("h-3.5 w-3.5", trendColorClass) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: trendColorClass, children: String(computedTrend.text).replace(/^[-+]/, "") })
+  ] });
+};
+const getInnerContainerClasses = (interactive, variant, dataState) => {
+  return cn$1(
+    interactive && cn$1(
+      "px-3 py-2",
+      "transition-colors",
+      "rounded-lg",
+      dataState !== "active" && "hover:bg-accent"
+    ),
+    variant === "filter" && dataState === "active" && "bg-[var(--primary-subtle)] ring-2 ring-primary",
+    variant === "filter" && dataState === "unfocused" && "opacity-60"
+  );
+};
+const HeroMetricCardItem = React.forwardRef(
+  ({
+    label,
+    value,
+    unit,
+    caption,
+    tooltip,
+    icon,
+    loading,
+    className,
+    interactive = false,
+    pressed = false,
+    onActivate,
+    onClick,
+    trendComparisonValue,
+    higherIsBetter = true,
+    "data-variant": variant,
+    "data-state": dataState,
+    ...rest
+  }, ref) => {
+    const isInteractiveVariant = variant === "button" || variant === "filter";
+    const outerContainer = cn$1(
+      "mmc-hero-metric-card__item",
+      isInteractiveVariant ? HERO_METRIC_CONSTANTS.PADDING_INTERACTIVE : HERO_METRIC_CONSTANTS.PADDING_STATIC,
+      "items-start text-left",
+      className
+    );
+    const innerContainer = getInnerContainerClasses(
+      interactive,
+      variant,
+      dataState
+    );
+    const computedTrend = computeTrend(
+      value,
+      unit,
+      trendComparisonValue,
+      higherIsBetter,
+      rest.numericValue
+    );
+    const trendContent = getTrendContent(computedTrend, loading);
+    const trend = trendContent ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "mmc-hero-metric-card__trend text-xs font-normal inline-flex items-center gap-0.5",
+        "data-slot": "metric-trend",
+        children: trendContent
+      }
+    ) : null;
+    const body = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pb-0.5", children: renderLabel(label, tooltip) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-1", children: [
+        renderValue(value, unit, icon, loading),
+        trend,
+        renderCaption(caption, loading)
+      ] })
+    ] });
+    if (interactive) {
+      const handleClick = variant === "button" && onClick ? onClick : onActivate;
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          className: cn$1(outerContainer, "focus-visible:outline-none"),
+          onClick: handleClick,
+          "aria-pressed": variant === "filter" ? pressed : void 0,
+          "data-slot": "metric-item",
+          "data-variant": variant,
+          "data-state": dataState,
+          ...rest,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: innerContainer, children: body })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref,
+        className: outerContainer,
+        "data-slot": "metric-item",
+        ...rest,
+        children: body
+      }
+    );
+  }
+);
+HeroMetricCardItem.displayName = "HeroMetricCardItem";
+function useWrappedDetection(itemCount, containerRef, children) {
+  const [hasWrapped, setHasWrapped] = React.useState(false);
+  React.useEffect(() => {
+    if (!containerRef.current) return;
+    const observer = new ResizeObserver(() => {
+      if (!containerRef.current) return;
+      const count2 = itemCount || React.Children.count(children);
+      if (count2 === 0) return;
+      const containerWidth = containerRef.current.offsetWidth;
+      const totalMinWidth = count2 * HERO_METRIC_CONSTANTS.MIN_ITEM_WIDTH;
+      setHasWrapped(containerWidth < totalMinWidth);
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [itemCount, containerRef, children]);
+  return hasWrapped;
+}
+function getItemProps(_idx, itemId, _itemCount, mode, activeId, handleItemActivate) {
+  const isFilter = mode === "filter";
+  const isButton = mode === "button";
+  const isActive = isFilter && activeId === itemId;
+  let dataState;
+  if (isFilter) {
+    if (isActive) {
+      dataState = "active";
+    } else if (activeId) {
+      dataState = "unfocused";
+    } else {
+      dataState = "default";
+    }
+  }
+  return {
+    "data-variant": mode,
+    "data-state": dataState,
+    onActivate: isFilter ? () => handleItemActivate(itemId) : void 0,
+    interactive: isFilter || isButton,
+    pressed: isFilter ? isActive : false
+  };
+}
+const HeroMetricCard = React.forwardRef(
+  ({
+    children,
+    items,
+    mode = "static",
+    activeId: controlledActiveId,
+    defaultActiveId = null,
+    onActiveChange,
+    columns,
+    showTrends: _showTrends = true,
+    loading = false,
+    className,
+    "data-testid": dataTestId = "hero-metric-card",
+    ...rest
+  }, ref) => {
+    const isFilter = mode === "filter";
+    const [uncontrolledActive, setUncontrolledActive] = React.useState(defaultActiveId ?? null);
+    const activeId = controlledActiveId ?? uncontrolledActive;
+    const containerRef = React.useRef(null);
+    const itemCount = items?.length ?? React.Children.count(children);
+    const hasWrapped = useWrappedDetection(itemCount, containerRef, children);
+    const handleItemActivate = (id) => {
+      if (isFilter) {
+        const next = activeId === id ? null : id;
+        if (controlledActiveId === void 0) setUncontrolledActive(next);
+        onActiveChange?.(next);
+      }
+    };
+    const renderFromItems = (src) => {
+      const normalized = src.slice(0, HERO_METRIC_CONSTANTS.MAX_ITEMS);
+      if (normalized.length < HERO_METRIC_CONSTANTS.MIN_ITEMS) {
+        return null;
+      }
+      return normalized.map((it, idx) => {
+        const itemId = it.id ?? String(idx);
+        const itemProps = getItemProps(
+          idx,
+          itemId,
+          normalized.length,
+          mode,
+          activeId,
+          handleItemActivate
+        );
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          HeroMetricCardItem,
+          {
+            ...it,
+            trendComparisonValue: _showTrends ? it.trendComparisonValue : void 0,
+            loading,
+            ...itemProps
+          },
+          itemId
+        );
+      });
+    };
+    const renderFromChildren = (nodes) => {
+      const arr = React.Children.toArray(nodes).slice(
+        0,
+        HERO_METRIC_CONSTANTS.MAX_ITEMS
+      );
+      if (arr.length < HERO_METRIC_CONSTANTS.MIN_ITEMS) {
+        return null;
+      }
+      return arr.map((child, idx) => {
+        if (React.isValidElement(child) && child.type === HeroMetricCardItem) {
+          const childProps = child.props;
+          const itemId = childProps.id ?? String(idx);
+          const itemProps = getItemProps(
+            idx,
+            itemId,
+            arr.length,
+            mode,
+            activeId,
+            handleItemActivate
+          );
+          const nextProps = {
+            loading,
+            ...itemProps,
+            trendComparisonValue: _showTrends ? childProps.trendComparisonValue : void 0
+          };
+          return React.cloneElement(child, nextProps);
+        }
+        return child;
+      });
+    };
+    const content = items ? renderFromItems(items) : renderFromChildren(children);
+    const mergedRef = mergeRefs(containerRef, ref);
+    const gapClass = hasWrapped ? HERO_METRIC_CONSTANTS.WRAPPED_GAP_DEFAULT : HERO_METRIC_CONSTANTS.UNWRAPPED_GAP;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref: mergedRef,
+        className: cn$1(
+          "mmc-hero-metric-card",
+          // Card container carries border/rounded, not items
+          "rounded-lg border border-[var(--border-input)] bg-card",
+          // Grid layout inside card
+          "grid",
+          resolveGridClasses(columns),
+          // Use gaps when wrapped, no gaps when single-row with borders
+          gapClass,
+          // Static: 16px top/bottom, 0px left/right
+          HERO_METRIC_CONSTANTS.CONTAINER_PADDING_Y,
+          HERO_METRIC_CONSTANTS.CONTAINER_PADDING_X,
+          className
+        ),
+        "data-slot": "hero-metric-card",
+        "data-mode": mode,
+        "data-wrapped": hasWrapped ? "true" : "false",
+        "data-testid": dataTestId,
+        ...rest,
+        children: content
+      }
+    );
+  }
+);
+HeroMetricCard.displayName = "HeroMetricCard";
 export {
   Accordion,
   AccordionContent,
@@ -43717,6 +44174,8 @@ export {
   FormItem,
   FormLabel,
   FormMessage,
+  HeroMetricCard,
+  HeroMetricCardItem,
   Input,
   Label$2 as Label,
   LabeledSlider,