@oprt/react 0.0.0-stage → 0.2.0

package/dist/Sparkline/Sparkline.manifest.js

@@ -0,0 +1,37 @@
+// src/Sparkline/Sparkline.manifest.ts
+var SparklineManifest = {
+  Sparkline: {
+    description: "Compact SVG line or area trend with preserved missing-data gaps and a complete accessible sample description.",
+    props: {
+      label: {
+        type: "string",
+        required: true,
+        description: "Accessible graphic name. Provide the metric and sampling context."
+      },
+      data: {
+        type: "array",
+        required: true,
+        description: "Readonly (number | null)[] in sample order. Null and non-finite values create gaps and are announced as Missing; zero remains zero."
+      },
+      unit: {
+        type: "string",
+        description: "Unit appended to every finite sample in the accessible description."
+      },
+      seriesId: {
+        type: "string",
+        description: "Optional Chart series ID. Reuses the series' automatic categorical color so a detail trend matches its source plot; omit for the first categorical color. When the series sets its own color, pass the same color too."
+      },
+      color: {
+        type: "number",
+        description: "Optional categorical token 1\u20138, as a Chart series' color; it takes precedence over seriesId."
+      },
+      variant: { type: "enum", values: ["line", "area"], default: "line" }
+    },
+    composable_with: ["StatCard", "DataTable", "DataGrid", "Card"],
+    never_inside: ["Sparkline", "Button"],
+    example: '<Sparkline label="Latency, last seven samples" data={[22, 24, null, 21, 23, 20, 22]} unit="ms" />'
+  }
+};
+export {
+  SparklineManifest
+};

package/dist/Sparkline/index.js

@@ -0,0 +1,7 @@
+// src/Sparkline/index.ts
+import { Sparkline } from "./Sparkline.js";
+import { SparklineManifest } from "./Sparkline.manifest.js";
+export {
+  Sparkline,
+  SparklineManifest
+};

package/dist/SplitPane/SplitPane.js

@@ -0,0 +1,316 @@
+"use client";
+
+// src/SplitPane/SplitPane.tsx
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "@oprt/icons";
+import { cva } from "class-variance-authority";
+import clsx from "clsx";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { devValidate } from "../_internal/devValidate.js";
+import { useHydratedId } from "../_internal/hydration.js";
+import { useMergedRefs } from "../_internal/mergeRefs.js";
+import { createResizeObserver, useElementWidth } from "../_internal/useElementWidth.js";
+import { useRestoreFocusOnRemoval } from "../_internal/useRestoreFocusOnRemoval.js";
+import { SplitPaneManifest } from "./SplitPane.manifest.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var rootStyles = cva("flex min-w-0 min-h-0 font-sans text-oprt-text", {
+  variants: { orientation: { horizontal: "flex-row", vertical: "flex-col" } },
+  defaultVariants: { orientation: "horizontal" }
+});
+var dividerStyles = cva("relative flex shrink-0 items-center justify-center", {
+  variants: {
+    orientation: { horizontal: "w-3u min-h-3u flex-col", vertical: "h-3u min-w-3u flex-row" }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});
+var separatorStyles = cva(
+  "absolute inset-0 flex touch-none select-none items-center justify-center border border-transparent bg-oprt-surface-1 focus-visible:outline-hidden focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus",
+  {
+    variants: {
+      orientation: { horizontal: "cursor-col-resize", vertical: "cursor-row-resize" },
+      disabled: { true: "cursor-default opacity-50", false: "hover:bg-oprt-surface-2" }
+    },
+    defaultVariants: { orientation: "horizontal", disabled: false }
+  }
+);
+var stepButtonStyles = "flex h-oprt-sm w-oprt-sm shrink-0 items-center justify-center border border-oprt-border-control bg-oprt-surface-1 text-oprt-text hover:border-oprt-accent focus-visible:outline-hidden focus-visible:border-oprt-border-focus focus-visible:shadow-oprt-focus disabled:cursor-not-allowed disabled:bg-oprt-surface-3 disabled:text-oprt-text-dim disabled:hover:border-oprt-border-control";
+var paneStyles = "min-w-0 min-h-0 overflow-auto focus-visible:outline-hidden focus-visible:shadow-oprt-focus forced-colors:focus-visible:outline-solid forced-colors:focus-visible:outline-2 forced-colors:focus-visible:-outline-offset-2 forced-colors:focus-visible:outline-[CanvasText]";
+var BUTTON_STEP = 10;
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function usePaneScrolls(pane) {
+  const [scrolls, setScrolls] = useState(false);
+  useEffect(() => {
+    const node = pane.current;
+    if (!node) return;
+    const measure = () => setScrolls(
+      node.scrollWidth > node.clientWidth + 1 || node.scrollHeight > node.clientHeight + 1
+    );
+    const resize = createResizeObserver(measure);
+    const watched = /* @__PURE__ */ new Set();
+    const observe = () => {
+      if (!resize) return;
+      const current = /* @__PURE__ */ new Set([node, ...node.children]);
+      for (const element of watched)
+        if (!current.has(element)) {
+          resize.unobserve(element);
+          watched.delete(element);
+        }
+      for (const element of current)
+        if (!watched.has(element)) {
+          resize.observe(element);
+          watched.add(element);
+        }
+    };
+    observe();
+    measure();
+    const children = new MutationObserver(() => {
+      observe();
+      measure();
+    });
+    children.observe(node, { childList: true });
+    return () => {
+      resize?.disconnect();
+      children.disconnect();
+    };
+  }, [pane]);
+  return scrolls;
+}
+var SplitPane = forwardRef(
+  ({
+    primary,
+    secondary,
+    size,
+    defaultSize = 50,
+    onSizeChange,
+    minSize = 20,
+    maxSize = 80,
+    step = 1,
+    orientation = "horizontal",
+    disabled = false,
+    label = "Resize panels",
+    stackBelow = 640,
+    primaryLabel = "Primary panel",
+    secondaryLabel = "Secondary panel",
+    className,
+    onFocusCapture,
+    onBlurCapture,
+    ...props
+  }, forwardedRef) => {
+    if (process.env.NODE_ENV !== "production") {
+      devValidate("SplitPane", SplitPaneManifest.SplitPane.props, { orientation });
+    }
+    const vertical = orientation === "vertical";
+    const axis = vertical ? "vertical" : "horizontal";
+    const rootRef = useRef(null);
+    const primaryRef = useRef(null);
+    const secondaryRef = useRef(null);
+    const separatorRef = useRef(null);
+    const ownChild = (selector) => () => Array.from(rootRef.current?.children ?? []).find((child) => child.matches(selector))?.id;
+    const primaryId = useHydratedId(ownChild('[data-pane="primary"]'));
+    const helpId = useHydratedId(ownChild("[data-oprt-split-help]"));
+    const [internalSize, setInternalSize] = useState(defaultSize);
+    const drag = useRef(null);
+    const lower = clamp(Number.isFinite(minSize) ? minSize : 20, 0, 100);
+    const upper = clamp(Number.isFinite(maxSize) ? maxSize : 80, lower, 100);
+    const rawSize = size ?? internalSize;
+    const currentSize = clamp(Number.isFinite(rawSize) ? rawSize : 50, lower, upper);
+    const increment = Number.isFinite(step) && step > 0 ? step : 1;
+    const buttonStep = Math.max(BUTTON_STEP, increment);
+    const threshold = Number.isFinite(stackBelow) ? Math.max(0, stackBelow) : 640;
+    const setRef = useMergedRefs(rootRef, forwardedRef);
+    const isNarrow = useCallback((width) => width < threshold, [threshold]);
+    const narrow = useElementWidth(rootRef, {
+      initial: false,
+      select: isNarrow
+    });
+    const stacked = !vertical && narrow;
+    const primaryScrolls = usePaneScrolls(primaryRef);
+    const secondaryScrolls = usePaneScrolls(secondaryRef);
+    const restoreFocus = useRestoreFocusOnRemoval(rootRef, {
+      track: (element) => element.closest("[data-oprt-split-divider]")?.parentElement === rootRef.current ? true : null,
+      findTarget: () => separatorRef.current?.isConnected ? separatorRef.current : primaryRef.current
+    });
+    useEffect(() => {
+      drag.current = null;
+    }, [disabled, stacked, orientation]);
+    const resize = (next) => {
+      if (disabled || stacked || !Number.isFinite(next)) return;
+      const bounded = Math.round(clamp(next, lower, upper) * 1e3) / 1e3;
+      if (bounded === currentSize) return;
+      if (size === void 0) setInternalSize(bounded);
+      onSizeChange?.(bounded);
+    };
+    const keyDown = (event) => {
+      if (disabled || stacked) return;
+      const decrease = vertical ? "ArrowUp" : "ArrowLeft";
+      const increase = vertical ? "ArrowDown" : "ArrowRight";
+      let next;
+      switch (event.key) {
+        case decrease:
+          next = currentSize - increment;
+          break;
+        case increase:
+          next = currentSize + increment;
+          break;
+        case "Home":
+          next = lower;
+          break;
+        case "End":
+          next = upper;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      resize(next);
+    };
+    const pointerDown = (event) => {
+      if (disabled || stacked || event.button !== 0 || !rootRef.current) return;
+      const rootBounds = rootRef.current.getBoundingClientRect();
+      const handleBounds = event.currentTarget.getBoundingClientRect();
+      const extent = vertical ? rootBounds.height - handleBounds.height : rootBounds.width - handleBounds.width;
+      if (extent <= 0) return;
+      event.preventDefault();
+      event.currentTarget.focus();
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+      drag.current = {
+        pointerId: event.pointerId,
+        coordinate: vertical ? event.clientY : event.clientX,
+        size: currentSize,
+        extent
+      };
+    };
+    const pointerMove = (event) => {
+      if (!drag.current || drag.current.pointerId !== event.pointerId) return;
+      const coordinate = vertical ? event.clientY : event.clientX;
+      const next = drag.current.size + (coordinate - drag.current.coordinate) / drag.current.extent * 100;
+      resize(lower + Math.round((next - lower) / increment) * increment);
+    };
+    const pointerEnd = (event) => {
+      if (drag.current?.pointerId !== event.pointerId) return;
+      drag.current = null;
+      if (event.currentTarget.hasPointerCapture?.(event.pointerId))
+        event.currentTarget.releasePointerCapture(event.pointerId);
+    };
+    const [Decrease, Increase] = vertical ? [ChevronUp, ChevronDown] : [ChevronLeft, ChevronRight];
+    const [decreaseLabel, increaseLabel] = vertical ? ["Move divider up", "Move divider down"] : ["Move divider left", "Move divider right"];
+    const region = (scrolls, name) => scrolls ? { role: "region", "aria-label": name, tabIndex: 0 } : {};
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref: setRef,
+        "data-stacked": stacked || void 0,
+        className: clsx(rootStyles({ orientation: stacked ? "vertical" : axis }), className),
+        onFocusCapture: (event) => {
+          onFocusCapture?.(event);
+          restoreFocus.onFocusCapture(event);
+        },
+        onBlurCapture: (event) => {
+          onBlurCapture?.(event);
+          restoreFocus.onBlurCapture(event);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: primaryRef,
+              id: primaryId,
+              "data-pane": "primary",
+              className: paneStyles,
+              style: { flexBasis: "0%", flexGrow: currentSize },
+              ...primaryScrolls ? region(true, primaryLabel) : stacked ? { tabIndex: -1 } : {},
+              children: primary
+            }
+          ),
+          !stacked && /* @__PURE__ */ jsxs("div", { "data-oprt-split-divider": "", className: dividerStyles({ orientation: axis }), children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: separatorRef,
+                role: "separator",
+                tabIndex: disabled ? -1 : 0,
+                "aria-label": label,
+                "aria-controls": primaryId,
+                "aria-describedby": helpId,
+                "aria-orientation": vertical ? "horizontal" : "vertical",
+                "aria-valuemin": lower,
+                "aria-valuemax": upper,
+                "aria-valuenow": currentSize,
+                "aria-valuetext": `${currentSize}% primary panel`,
+                "aria-disabled": disabled || void 0,
+                className: separatorStyles({ orientation: axis, disabled }),
+                onKeyDown: keyDown,
+                onPointerDown: pointerDown,
+                onPointerMove: pointerMove,
+                onPointerUp: pointerEnd,
+                onPointerCancel: pointerEnd,
+                onLostPointerCapture: () => {
+                  drag.current = null;
+                },
+                children: disabled && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: vertical ? "w-4u border-t border-oprt-border-strong" : "h-4u border-l border-oprt-border-strong"
+                  }
+                )
+              }
+            ),
+            !disabled && /* @__PURE__ */ jsxs("div", { className: clsx("relative flex gap-0.5u", vertical ? "flex-row" : "flex-col"), children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-label": decreaseLabel,
+                  disabled: currentSize <= lower,
+                  className: stepButtonStyles,
+                  onClick: () => resize(currentSize - buttonStep),
+                  children: /* @__PURE__ */ jsx(Decrease, { size: 16, "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  tabIndex: -1,
+                  "aria-label": increaseLabel,
+                  disabled: currentSize >= upper,
+                  className: stepButtonStyles,
+                  onClick: () => resize(currentSize + buttonStep),
+                  children: /* @__PURE__ */ jsx(Increase, { size: 16, "aria-hidden": "true" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: secondaryRef,
+              "data-pane": "secondary",
+              className: paneStyles,
+              style: { flexBasis: "0%", flexGrow: 100 - currentSize },
+              ...region(secondaryScrolls, secondaryLabel),
+              children: secondary
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { id: helpId, "data-oprt-split-help": "", hidden: true, children: [
+            "Use ",
+            vertical ? "Up and Down" : "Left and Right",
+            " arrow keys to resize. Home and End move to the limits."
+          ] })
+        ]
+      }
+    );
+  }
+);
+SplitPane.displayName = "SplitPane";
+export {
+  SplitPane
+};

package/dist/SplitPane/SplitPane.manifest.js

@@ -0,0 +1,79 @@
+// src/SplitPane/SplitPane.manifest.ts
+var SplitPaneManifest = {
+  SplitPane: {
+    description: "Two panels with a keyboard and pointer resize separator and two step buttons on the divider; a horizontal split stacks below a container-width threshold.",
+    props: {
+      primary: {
+        type: "node",
+        required: true,
+        description: "Primary panel content, always first in reading order."
+      },
+      secondary: { type: "node", required: true, description: "Secondary panel content." },
+      size: {
+        type: "number",
+        description: "Controlled primary-panel percentage of available space, excluding the handle. Clamped to minSize/maxSize. Stacked panels share a bounded height by the same split."
+      },
+      defaultSize: {
+        type: "number",
+        default: 50,
+        description: "Initial uncontrolled primary-panel percentage."
+      },
+      onSizeChange: {
+        type: "function",
+        description: "(percent: number) => void. Called for valid keyboard, pointer or step-button adjustments."
+      },
+      minSize: {
+        type: "number",
+        default: 20,
+        description: "Minimum primary-panel percentage. Finite values clamp to 0\u2013100; non-finite values use 20."
+      },
+      maxSize: {
+        type: "number",
+        default: 80,
+        description: "Maximum primary-panel percentage. Finite values clamp between minSize and 100; non-finite values use 80."
+      },
+      step: {
+        type: "number",
+        default: 1,
+        description: "Positive percentage increment for the arrow keys and dragging. Invalid values use 1. The step buttons move 10 points, or step when it is larger."
+      },
+      orientation: {
+        type: "enum",
+        values: ["horizontal", "vertical"],
+        default: "horizontal",
+        description: "Horizontal puts panels side by side; vertical puts them above and below. Give vertical layouts a bounded height."
+      },
+      disabled: {
+        type: "boolean",
+        default: false,
+        description: "Turns resizing off: the separator leaves the focus order and the step buttons are hidden."
+      },
+      label: {
+        type: "string",
+        default: "Resize panels",
+        description: "Accessible name of the separator."
+      },
+      stackBelow: {
+        type: "number",
+        default: 640,
+        description: "Container width in CSS pixels below which a horizontal split stacks its panels and hides resizing. A vertical split never stacks. Use 0 to disable responsive stacking."
+      },
+      primaryLabel: {
+        type: "string",
+        default: "Primary panel",
+        description: "Accessible name of the primary panel while its content scrolls; it is then a focusable region."
+      },
+      secondaryLabel: {
+        type: "string",
+        default: "Secondary panel",
+        description: "Accessible name of the secondary panel while its content scrolls; it is then a focusable region."
+      }
+    },
+    composable_with: ["Card", "DataGrid", "Chart", "EventTimeline"],
+    never_inside: ["Button"],
+    example: '<SplitPane primary={<section>Telemetry</section>} secondary={<section>Inspector</section>} defaultSize={60} label="Resize telemetry and inspector" />'
+  }
+};
+export {
+  SplitPaneManifest
+};

package/dist/SplitPane/index.js

@@ -0,0 +1,7 @@
+// src/SplitPane/index.ts
+import { SplitPane } from "./SplitPane.js";
+import { SplitPaneManifest } from "./SplitPane.manifest.js";
+export {
+  SplitPane,
+  SplitPaneManifest
+};

package/dist/StatCard/StatCard.js

@@ -0,0 +1,163 @@
+"use client";
+
+// src/StatCard/StatCard.tsx
+import { TrendingUp, TrendingDown, TrendFlat } from "@oprt/icons";
+import { Fragment, forwardRef, useId } from "react";
+import clsx from "clsx";
+import { StatCardManifest } from "./StatCard.manifest.js";
+import { devValidate } from "../_internal/devValidate.js";
+import { numberParts, splitLast, unitWords } from "../_internal/numberText.js";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function deriveTrend(delta) {
+  if (delta > 0) return "up";
+  if (delta < 0) return "down";
+  return "flat";
+}
+var TREND_COLOR = {
+  up: "text-oprt-success",
+  down: "text-oprt-error",
+  flat: "text-oprt-text-dim"
+};
+var INTENT_COLOR = {
+  positive: "text-oprt-success",
+  negative: "text-oprt-error",
+  neutral: "text-oprt-text-dim"
+};
+var TREND_ICONS = {
+  up: TrendingUp,
+  down: TrendingDown,
+  flat: TrendFlat
+};
+var has = (table, key) => typeof key === "string" && Object.prototype.hasOwnProperty.call(table, key);
+var VALUE_ADVANCE = 0.67;
+var UNIT_ADVANCE = 0.63;
+function glyphWeight(code) {
+  if (code < 592 || code >= 1536 && code < 1792 || code >= 2304 && code < 2560 || code >= 8192 && code < 8448)
+    return 1;
+  return code >= 65280 && code < 65520 ? 1.7 : 1.3;
+}
+var FORMAT_CHARACTER = /\p{Cf}/u;
+var lengthOf = (text, advance) => {
+  let characters = 0;
+  for (const character of text)
+    if (!FORMAT_CHARACTER.test(character)) characters += glyphWeight(character.codePointAt(0));
+  return Number((characters * advance).toFixed(3));
+};
+var STEP_DOWN = "[font-size:max(var(--oprt-type-base),min(var(--oprt-type-2xl),calc((100cqi_-_var(--oprt-stat-lead)_*_0.8px)_/_var(--oprt-stat-lead)),max(calc((100cqi_-_var(--oprt-type-md)_*_var(--oprt-stat-unit)_-_(var(--oprt-stat-run)_+_var(--oprt-stat-unit))_*_0.8px)_/_var(--oprt-stat-run)),calc((100cqi_-_(var(--oprt-stat-run)_+_var(--oprt-stat-unit))_*_0.8px)_/_(var(--oprt-stat-run)_+_var(--oprt-stat-unit))))))]";
+var VALUE_TEXT = "m-0 block min-w-0 normal-case font-mono text-oprt-2xl text-oprt-text";
+var VALUE_NUMBER = `m-0 block min-w-0 normal-case font-mono text-oprt-text tracking-oprt-2xl leading-[1.4286] [font-weight:var(--oprt-weight-2xl)] ${STEP_DOWN}`;
+var UNIT = "font-mono tracking-oprt-md leading-none text-oprt-text-dim [font-size:min(var(--oprt-type-md),1em)] [font-weight:var(--oprt-weight-md)]";
+function StatValue({ value, unit }) {
+  const text = String(value);
+  const words = unitWords(unit);
+  const number = numberParts(text.trim());
+  const unitRun = words && /* @__PURE__ */ jsx("span", { "data-oprt-stat-unit": "", className: UNIT, children: `\xA0${words.first}` });
+  const unitRest = words?.rest ? /* @__PURE__ */ jsx("span", { className: clsx(UNIT, "oprt-wrap-anywhere"), children: ` ${words.rest}` }) : null;
+  if (number) {
+    const last2 = lengthOf(number.tail, VALUE_ADVANCE);
+    const lead = number.lead.length > 0 ? Math.max(...number.lead.map((piece) => lengthOf(piece, VALUE_ADVANCE))) : last2;
+    const style = {
+      "--oprt-stat-lead": lead,
+      "--oprt-stat-run": last2,
+      "--oprt-stat-unit": words ? lengthOf(` ${words.first}`, UNIT_ADVANCE) : 0
+    };
+    return /* @__PURE__ */ jsx("span", { "data-oprt-stat-value": "", className: VALUE_NUMBER, style, children: /* @__PURE__ */ jsxs("span", { "data-oprt-stat-value-text": "", children: [
+      number.lead.length > 0 && // The groups before the last, each a run that cannot wrap, with a break after each.
+      /* @__PURE__ */ jsx("span", { children: number.lead.map((piece, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: piece }),
+        /* @__PURE__ */ jsx("wbr", {})
+      ] }, index)) }),
+      /* @__PURE__ */ jsxs("span", { "data-oprt-stat-run": "", className: "inline-block", children: [
+        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: number.tail }),
+        words && /* @__PURE__ */ jsx("span", { "data-oprt-stat-unit": "", className: UNIT, children: ` ${words.first}` })
+      ] }),
+      unitRest
+    ] }) });
+  }
+  const [head, last] = splitLast(text);
+  return /* @__PURE__ */ jsx("span", { "data-oprt-stat-value": "", className: VALUE_TEXT, children: /* @__PURE__ */ jsx("span", { "data-oprt-stat-value-text": "", className: "oprt-wrap-anywhere", children: words ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+    head,
+    /* @__PURE__ */ jsxs("span", { "data-oprt-stat-run": "", className: "whitespace-nowrap", children: [
+      last,
+      unitRun
+    ] }),
+    unitRest
+  ] }) : text }) });
+}
+var StatCard = forwardRef((allProps, ref) => {
+  const {
+    className,
+    label,
+    value,
+    unit,
+    delta,
+    trend,
+    trendIntent,
+    deltaLabel,
+    caption,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  } = allProps;
+  const labelId = useId();
+  const showTrend = delta !== void 0 || trend !== void 0;
+  const explicitTrend = has(TREND_ICONS, trend) ? trend : void 0;
+  const resolvedTrend = explicitTrend ?? (delta !== void 0 ? deriveTrend(delta) : "flat");
+  const TrendIcon = TREND_ICONS[resolvedTrend];
+  const trendColor = has(INTENT_COLOR, trendIntent) ? INTENT_COLOR[trendIntent] : TREND_COLOR[resolvedTrend];
+  if (process.env.NODE_ENV !== "production") {
+    devValidate("StatCard", StatCardManifest.StatCard.props, allProps);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "group",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy ?? (ariaLabel ? void 0 : labelId),
+      "data-oprt-stat-card": "",
+      className: clsx(
+        // A minimum footprint (180 wide, 169 tall) that grows with content as needed, so a grid of
+        // StatCards stays uniform. The width gives way inside a container narrower than 180 px
+        // (two cards side by side on a phone); the height does not. Min dimensions are a deliberate
+        // component spec, not layout-grid spacing. The card is a size container, so a large value
+        // can step its type down to the card's width: it takes the width its cell gives it (R3), and
+        // in a shrink-wrapped flex row that is its 180 px minimum. Containment gives a card no
+        // intrinsic width of its own, so one in a shrink-wrapped grid would collapse to its padding
+        // (measured: 50 px wide, a 0 px value). `contain-intrinsic-inline-size` is the natural width
+        // of its content box at that minimum: 180 px less the 2 x 24 px padding and the 2 x 1 px border.
+        "@container [contain-intrinsic-inline-size:130px] flex min-h-[169px] min-w-[min(180px,100%)] flex-col gap-1u bg-oprt-surface-1 border border-oprt-border px-3u py-3u font-sans",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: labelId,
+            className: "m-0 min-w-0 oprt-wrap-anywhere text-oprt-sm uppercase tracking-oprt-sm text-oprt-text-dim",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(StatValue, { value, unit }),
+        showTrend && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            role: "img",
+            className: clsx("m-0 inline-flex min-w-0 max-w-full items-center gap-1u", trendColor),
+            "aria-label": `trend ${resolvedTrend}${deltaLabel ? " " + deltaLabel : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(TrendIcon, { size: 16 }),
+              deltaLabel !== void 0 && /* @__PURE__ */ jsx("span", { className: "min-w-0 oprt-wrap-anywhere font-mono text-oprt-base normal-case", children: deltaLabel })
+            ]
+          }
+        ),
+        caption !== void 0 && /* @__PURE__ */ jsx("span", { className: "m-0 min-w-0 oprt-wrap-anywhere text-oprt-base normal-case text-oprt-text-dim", children: caption })
+      ]
+    }
+  );
+});
+StatCard.displayName = "StatCard";
+export {
+  StatCard
+};

package/dist/StatCard/StatCard.manifest.js

@@ -0,0 +1,45 @@
+// src/StatCard/StatCard.manifest.ts
+var StatCardManifest = {
+  StatCard: {
+    description: "Single-metric display: label, mono numeric value, and an optional trend indicator paired with an arrow glyph (non-color cue per WCAG 1.4.1). It keeps a minimum footprint (169 px tall, up to 180 px wide, narrower inside a narrower container) and its text wraps. It measures its own width, so a large number steps down in size to fit it (never below the body text size), and in a row that sizes its items to their content it is 180 px wide.",
+    props: {
+      label: {
+        type: "string",
+        required: true,
+        description: "Short metric heading displayed uppercase and used as the default accessible name for the metric group. Values, units, and captions retain their casing. Override with aria-label or aria-labelledby when more context is needed."
+      },
+      value: {
+        type: "union",
+        types: ["string", "number"],
+        required: true,
+        description: "The metric value (string or number). Rendered in mono for digit alignment. A number is never split between its digits: one with digit groups (1,234,567.890) wraps only after a group separator, and its last group stays with the unit. When they do not fit the card the value steps down in size, never below the body text size (--oprt-type-base); at that size, if they still do not fit together, the unit moves to its own line under the value. Any other text breaks anywhere. Nothing is truncated or abbreviated."
+      },
+      unit: {
+        type: "string",
+        description: "Unit suffix shown beside the value, e.g. 'ms'. Its first word stays beside the last digits at every size above the body text size; only when they cannot fit together even at that size does the unit move to its own line under the value. The rest of a long unit wraps."
+      },
+      delta: {
+        type: "number",
+        description: "Signed change. Trend is derived from its sign when 'trend' is omitted."
+      },
+      trend: {
+        type: "enum",
+        values: ["up", "down", "flat"],
+        description: "Explicit trend direction. Overrides the sign of 'delta' when provided."
+      },
+      trendIntent: {
+        type: "enum",
+        values: ["positive", "negative", "neutral"],
+        description: "Whether the change is good, bad or neither for the application, which sets the trend color independently of its direction: falling errors or latency are 'positive', rising critical alarms are 'negative'. Without it the color follows the direction (up is success, down is error). The arrow and the change text stay as the non-color cue."
+      },
+      deltaLabel: { type: "string", description: "Human-readable change text, e.g. '+12%'." },
+      caption: { type: "string", description: "Secondary supporting line below the metric." }
+    },
+    composable_with: ["Card", "DataTable", "Sidebar", "Toolbar"],
+    never_inside: ["StatCard", "Badge", "Button"],
+    example: '<StatCard label="LATENCY" value={42} unit="ms" delta={-12} deltaLabel="-12%" trendIntent="positive" />'
+  }
+};
+export {
+  StatCardManifest
+};

package/dist/StatCard/index.js

@@ -0,0 +1,7 @@
+// src/StatCard/index.ts
+import { StatCard } from "./StatCard.js";
+import { StatCardManifest } from "./StatCard.manifest.js";
+export {
+  StatCard,
+  StatCardManifest
+};