@portnet/ui 5.0.32 → 6.0.1

package/dist/esm/v2/components/KPICard.js

@@ -0,0 +1,237 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+import * as React from "react";
+import Box from "@mui/material/Box";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import { mergeLabels } from "../utils/mergeLabels";
+
+/**
+ * KPICard - Portnet UI v2
+ *
+ * Charter §03 · Component "KPI Card".
+ * Label uppercase 11 px + valeur 24 px + delta % vs période · tabular-nums.
+ *
+ *   <KPICard label="Titres en attente" value={42} delta={+12.5} period="vs mois dernier" />
+ *
+ * Localisation (FR / EN / AR):
+ *   <KPICard
+ *     label="Pending titles"
+ *     value={42}
+ *     delta={+12.5}
+ *     period="vs last month"
+ *     locale="en-US"
+ *     labels={{ up: "up by ", down: "down by " }}
+ *   />
+ *
+ *   - `locale` controls the delta percentage's separator (12.5 vs 12,5).
+ *   - `labels.up` / `labels.down` are SR-only direction prefixes; default
+ *     French preserved for back-compat.
+ *
+ * Variants (capability gap G-11)
+ * ------------------------------
+ *   <KPICard label="Type" value="Importation matières premières" variant="text" />
+ *   <KPICard label="Articles" value={4} size="compact" />
+ *
+ * `variant` says what the value IS (a metric vs a text descriptor); `size` says
+ * how big it renders (dashboard tile vs narrow drawer). They are independent and
+ * both were observed as host-side `sx` overrides reaching into `"& > p"` — the
+ * text one byte-identical in two files of the same module, which is what a
+ * missing variant looks like from the outside.
+ *
+ * NOTE (finding G-21 — charter contradiction, NOT resolved here). The label
+ * renders at a raw `11` and the default value at a raw `24`. Both are quoted
+ * from Charter §03's KPI Card row. But §02.2 R-T.1 is a MUST — « Font-size
+ * minimum 12 px » — and the type scale is 12/13/14/16/20/26: neither 11 nor 24
+ * exists in it, so R-2.3 (« aucune valeur magique ») is violated too. Two MUSTs
+ * against one line of component prose. Tokenising them is a typography change on
+ * every KPI of every module and needs a visual gate plus a charter amendment, so
+ * it is raised rather than silently applied. The `compact` and `text` sizes added
+ * here are token-based; only the untouched default carries the literals.
+ *
+ * A11y note (WCAG 1.4.1 + 1.4.3):
+ *   The delta is conveyed by THREE channels:
+ *     - icon (visual, non-text - uses --success / --danger, 1.4.11)
+ *     - colour (visual reinforcement only)
+ *     - text  (uses --success-fg / --danger-fg for 4.5:1 contrast, 1.4.3)
+ *   The direction is also announced to screen readers via a SR-only
+ *   "en hausse de" / "en baisse de" prefix (1.4.1).
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_LABELS = Object.freeze({
+  up: "en hausse de ",
+  down: "en baisse de "
+});
+function formatDelta(n, locale) {
+  var opts = {
+    maximumFractionDigits: 2
+  };
+  try {
+    return new Intl.NumberFormat(locale, opts).format(n);
+  } catch (_unused) {
+    // Invalid BCP-47 tag → fall back to fr-FR rather than throwing.
+    return new Intl.NumberFormat("fr-FR", opts).format(n);
+  }
+}
+function KPICard(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    delta = _ref.delta,
+    period = _ref.period,
+    helper = _ref.helper,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "default" : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "default" : _ref$size,
+    icon = _ref.icon,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? "fr-FR" : _ref$locale,
+    labels = _ref.labels,
+    sx = _ref.sx;
+  var isText = variant === "text";
+  var isCompact = size === "compact";
+  var L = mergeLabels(DEFAULT_LABELS, labels);
+
+  // Parse delta into a definite `number | null` so the sign checks and
+  // Math.abs below narrow cleanly under strictNullChecks.
+  var parsed = delta == null || delta === "" ? null : Number(delta);
+  var deltaNum = parsed !== null && Number.isFinite(parsed) ? parsed : null;
+  var isPositive = deltaNum !== null && deltaNum > 0;
+  var isNegative = deltaNum !== null && deltaNum < 0;
+
+  // R-G.1 - split icon vs text colour so the icon stays vivid (1.4.11)
+  // while the numeric text meets 1.4.3 (4.5:1 against white).
+  var iconColor = isPositive ? "var(--success)" : isNegative ? "var(--danger)" : "var(--fg-subtle)";
+  var textColor = isPositive ? "var(--success-fg)" : isNegative ? "var(--danger-fg)" : "var(--fg-subtle)";
+
+  // SR-only direction prefix - empty for zero or missing deltas (the bare
+  // "0 %" already reads correctly without a direction word).
+  var directionLabel = isPositive ? L.up : isNegative ? L.down : "";
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: [{
+      padding: "var(--s-4) var(--s-5)",
+      background: "var(--surface)",
+      border: "1px solid var(--border)",
+      borderRadius: "var(--r-lg)",
+      boxShadow: "var(--shadow-xs)",
+      minWidth: 0
+    }].concat(_toConsumableArray(Array.isArray(sx) ? sx : sx ? [sx] : [])),
+    children: [/*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        marginBottom: 1
+      },
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "p",
+        sx: {
+          margin: 0,
+          // Charter §03 KPI Card - explicit literal "label uppercase 11 px"
+          fontSize: 11,
+          fontWeight: "var(--fw-semibold)",
+          letterSpacing: "0.06em",
+          textTransform: "uppercase",
+          color: "var(--fg-subtle)"
+        },
+        children: label
+      }), icon && /*#__PURE__*/_jsx(Box, {
+        sx: {
+          color: "var(--fg-subtle)"
+        },
+        children: icon
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      component: "p",
+      sx: _objectSpread({
+        margin: 0,
+        /* variant/size resolution — gap G-11.
+         *
+         * "default" keeps the Charter §03 literal ("valeur 24 px"); see the
+         * G-21 note below on why that literal is itself contested.
+         * "compact" steps down to --text-h2 (20px) for narrow containers.
+         * "text" drops to --text-body and behaves like prose. */
+        fontSize: isText ? "var(--text-body)" : isCompact ? "var(--text-h2)" : 24,
+        // Heaviest weight in the post-Batch-1 scale (700). The black-weight
+        // custom property this once referenced was dropped from the
+        // typography tokens and resolved to undefined in CSS, silently
+        // flattening the weight on every dashboard KPI.
+        //
+        // The old name is deliberately NOT spelled out here: the
+        // banned-patterns guard is a raw text scan with no comment
+        // awareness, so writing it - even to document its removal - trips
+        // the very rule that protects this line. See banned-patterns.test.ts.
+        //
+        // A text descriptor takes semibold instead: bold at body size reads
+        // as a heading and competes with the label above it.
+        fontWeight: isText ? "var(--fw-semibold)" : "var(--fw-bold)",
+        color: "var(--fg)"
+      }, isText ? {
+        lineHeight: "var(--lh-normal)"
+      } : {
+        fontVariantNumeric: "tabular-nums",
+        letterSpacing: "-0.01em",
+        lineHeight: "var(--lh-tight)"
+      }),
+      children: value !== null && value !== void 0 ? value : "—"
+    }), (deltaNum !== null || helper) && /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        marginTop: 1,
+        fontSize: "var(--text-xs)"
+      },
+      children: [deltaNum !== null && /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 0.25,
+          // Default colour for the block = textColor. The icon
+          // overrides to iconColor below for a vivid arrow against
+          // a darker numeric label.
+          color: textColor,
+          fontWeight: "var(--fw-semibold)",
+          // R-T.3 - tabular-nums on delta so percentages align across cards
+          fontVariantNumeric: "tabular-nums"
+        },
+        children: [directionLabel && /*#__PURE__*/_jsx("span", {
+          className: "pui-sr-only",
+          children: directionLabel
+        }), isPositive ? /*#__PURE__*/_jsx(ArrowUpwardIcon, {
+          "aria-hidden": "true",
+          sx: {
+            fontSize: "var(--text-xs)",
+            color: iconColor
+          }
+        }) : isNegative ? /*#__PURE__*/_jsx(ArrowDownwardIcon, {
+          "aria-hidden": "true",
+          sx: {
+            fontSize: "var(--text-xs)",
+            color: iconColor
+          }
+        }) : null, /*#__PURE__*/_jsxs("span", {
+          children: [formatDelta(Math.abs(deltaNum), locale), " %"]
+        })]
+      }), (period || helper) && /*#__PURE__*/_jsx(Box, {
+        component: "span",
+        sx: {
+          color: "var(--fg-subtle)"
+        },
+        children: helper || period
+      })]
+    })]
+  });
+}
+export default KPICard;
+//# sourceMappingURL=KPICard.js.map

package/dist/esm/v2/components/KPICard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KPICard.js","names":["React","Box","ArrowUpwardIcon","ArrowDownwardIcon","mergeLabels","jsx","_jsx","jsxs","_jsxs","DEFAULT_LABELS","Object","freeze","up","down","formatDelta","n","locale","opts","maximumFractionDigits","Intl","NumberFormat","format","_unused","KPICard","_ref","label","value","delta","period","helper","_ref$variant","variant","_ref$size","size","icon","_ref$locale","labels","sx","isText","isCompact","L","parsed","Number","deltaNum","isFinite","isPositive","isNegative","iconColor","textColor","directionLabel","padding","background","border","borderRadius","boxShadow","minWidth","concat","_toConsumableArray","Array","isArray","children","display","alignItems","justifyContent","marginBottom","component","margin","fontSize","fontWeight","letterSpacing","textTransform","color","_objectSpread","lineHeight","fontVariantNumeric","gap","marginTop","className","Math","abs"],"sources":["../../../../src/lib/v2/components/KPICard.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport ArrowUpwardIcon from \"@mui/icons-material/ArrowUpward\";\r\nimport ArrowDownwardIcon from \"@mui/icons-material/ArrowDownward\";\r\nimport { mergeLabels } from \"../utils/mergeLabels\";\r\n\r\n/**\r\n * KPICard - Portnet UI v2\r\n *\r\n * Charter §03 · Component \"KPI Card\".\r\n * Label uppercase 11 px + valeur 24 px + delta % vs période · tabular-nums.\r\n *\r\n *   <KPICard label=\"Titres en attente\" value={42} delta={+12.5} period=\"vs mois dernier\" />\r\n *\r\n * Localisation (FR / EN / AR):\r\n *   <KPICard\r\n *     label=\"Pending titles\"\r\n *     value={42}\r\n *     delta={+12.5}\r\n *     period=\"vs last month\"\r\n *     locale=\"en-US\"\r\n *     labels={{ up: \"up by \", down: \"down by \" }}\r\n *   />\r\n *\r\n *   - `locale` controls the delta percentage's separator (12.5 vs 12,5).\r\n *   - `labels.up` / `labels.down` are SR-only direction prefixes; default\r\n *     French preserved for back-compat.\r\n *\r\n * Variants (capability gap G-11)\r\n * ------------------------------\r\n *   <KPICard label=\"Type\" value=\"Importation matières premières\" variant=\"text\" />\r\n *   <KPICard label=\"Articles\" value={4} size=\"compact\" />\r\n *\r\n * `variant` says what the value IS (a metric vs a text descriptor); `size` says\r\n * how big it renders (dashboard tile vs narrow drawer). They are independent and\r\n * both were observed as host-side `sx` overrides reaching into `\"& > p\"` — the\r\n * text one byte-identical in two files of the same module, which is what a\r\n * missing variant looks like from the outside.\r\n *\r\n * NOTE (finding G-21 — charter contradiction, NOT resolved here). The label\r\n * renders at a raw `11` and the default value at a raw `24`. Both are quoted\r\n * from Charter §03's KPI Card row. But §02.2 R-T.1 is a MUST — « Font-size\r\n * minimum 12 px » — and the type scale is 12/13/14/16/20/26: neither 11 nor 24\r\n * exists in it, so R-2.3 (« aucune valeur magique ») is violated too. Two MUSTs\r\n * against one line of component prose. Tokenising them is a typography change on\r\n * every KPI of every module and needs a visual gate plus a charter amendment, so\r\n * it is raised rather than silently applied. The `compact` and `text` sizes added\r\n * here are token-based; only the untouched default carries the literals.\r\n *\r\n * A11y note (WCAG 1.4.1 + 1.4.3):\r\n *   The delta is conveyed by THREE channels:\r\n *     - icon (visual, non-text - uses --success / --danger, 1.4.11)\r\n *     - colour (visual reinforcement only)\r\n *     - text  (uses --success-fg / --danger-fg for 4.5:1 contrast, 1.4.3)\r\n *   The direction is also announced to screen readers via a SR-only\r\n *   \"en hausse de\" / \"en baisse de\" prefix (1.4.1).\r\n */\r\n\r\nconst DEFAULT_LABELS = Object.freeze({\r\n  up:   \"en hausse de \",\r\n  down: \"en baisse de \",\r\n});\r\n\r\nfunction formatDelta(n: number, locale: string): string {\r\n  const opts: Intl.NumberFormatOptions = { maximumFractionDigits: 2 };\r\n  try {\r\n    return new Intl.NumberFormat(locale, opts).format(n);\r\n  } catch {\r\n    // Invalid BCP-47 tag → fall back to fr-FR rather than throwing.\r\n    return new Intl.NumberFormat(\"fr-FR\", opts).format(n);\r\n  }\r\n}\r\n\r\nexport interface KPICardLabels {\r\n  up?: string | undefined;\r\n  down?: string | undefined;\r\n}\r\n\r\nexport interface KPICardProps {\r\n  label: React.ReactNode;\r\n  value?: React.ReactNode | undefined;\r\n  delta?: number | string | undefined;\r\n  period?: React.ReactNode | undefined;\r\n  helper?: React.ReactNode | undefined;\r\n  /**\r\n   * What the `value` slot HOLDS — not how big it is (see `size`).\r\n   *\r\n   *   \"default\" : a numeric metric. Display type size, tight leading,\r\n   *               tabular numerals, negative letter-spacing.\r\n   *   \"text\"    : a TEXT descriptor (« Importation matières premières »).\r\n   *               Body size, semibold, normal leading, free to wrap.\r\n   *\r\n   * Capability gap G-11. This prop previously accepted only \"default\" and was\r\n   * marked \"reserved for future visual variants\" — so a card whose value was a\r\n   * long label had no supported shape, and every module patched it from the\r\n   * outside with an `sx` override reaching into `\"& > p\"`. addpe-fe carries that\r\n   * override BYTE-IDENTICAL in two files, which is the signature of a missing\r\n   * variant rather than of a local design decision.\r\n   *\r\n   * The distinction is not cosmetic: at display size a descriptor wraps and\r\n   * breaks the strip's row rhythm, and `tabular-nums` + negative tracking are\r\n   * meaningless — actively wrong — on prose.\r\n   */\r\n  variant?: \"default\" | \"text\" | undefined;\r\n  /**\r\n   * Type scale of the `value` slot.\r\n   *\r\n   *   \"default\" : the charter's dashboard tile size.\r\n   *   \"compact\" : one step down (--text-h2), for a NARROW container — a 480 px\r\n   *               drawer, a 2×2 grid at ~220 px per tile — where the default\r\n   *               reads oversized against the 11 px label.\r\n   *\r\n   * Same origin as `variant`: addpe-fe's `KPI_VALUE_COMPACT_SX`, applied to\r\n   * three cards of its preview drawer.\r\n   */\r\n  size?: \"default\" | \"compact\" | undefined;\r\n  icon?: React.ReactElement | undefined;\r\n  locale?: string | undefined;\r\n  labels?: KPICardLabels | undefined;\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nfunction KPICard({\r\n  label,\r\n  value,\r\n  delta,\r\n  period,\r\n  helper,\r\n  variant = \"default\",\r\n  size = \"default\",\r\n  icon,\r\n  locale = \"fr-FR\",\r\n  labels,\r\n  sx,\r\n}: KPICardProps) {\r\n  const isText = variant === \"text\";\r\n  const isCompact = size === \"compact\";\r\n  const L = mergeLabels(DEFAULT_LABELS, labels);\r\n\r\n  // Parse delta into a definite `number | null` so the sign checks and\r\n  // Math.abs below narrow cleanly under strictNullChecks.\r\n  const parsed = delta == null || delta === \"\" ? null : Number(delta);\r\n  const deltaNum: number | null =\r\n    parsed !== null && Number.isFinite(parsed) ? parsed : null;\r\n  const isPositive = deltaNum !== null && deltaNum > 0;\r\n  const isNegative = deltaNum !== null && deltaNum < 0;\r\n\r\n  // R-G.1 - split icon vs text colour so the icon stays vivid (1.4.11)\r\n  // while the numeric text meets 1.4.3 (4.5:1 against white).\r\n  const iconColor =\r\n    isPositive ? \"var(--success)\"     :\r\n    isNegative ? \"var(--danger)\"      : \"var(--fg-subtle)\";\r\n  const textColor =\r\n    isPositive ? \"var(--success-fg)\"  :\r\n    isNegative ? \"var(--danger-fg)\"   : \"var(--fg-subtle)\";\r\n\r\n  // SR-only direction prefix - empty for zero or missing deltas (the bare\r\n  // \"0 %\" already reads correctly without a direction word).\r\n  const directionLabel =\r\n    isPositive ? L.up   :\r\n    isNegative ? L.down : \"\";\r\n\r\n  return (\r\n    <Box\r\n      sx={[\r\n        {\r\n          padding: \"var(--s-4) var(--s-5)\",\r\n          background: \"var(--surface)\",\r\n          border: \"1px solid var(--border)\",\r\n          borderRadius: \"var(--r-lg)\",\r\n          boxShadow: \"var(--shadow-xs)\",\r\n          minWidth: 0,\r\n        },\r\n        ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\r\n      ]}\r\n    >\r\n      <Box sx={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", marginBottom: 1 }}>\r\n        <Box\r\n          component=\"p\"\r\n          sx={{\r\n            margin: 0,\r\n            // Charter §03 KPI Card - explicit literal \"label uppercase 11 px\"\r\n            fontSize: 11,\r\n            fontWeight: \"var(--fw-semibold)\",\r\n            letterSpacing: \"0.06em\",\r\n            textTransform: \"uppercase\",\r\n            color: \"var(--fg-subtle)\",\r\n          }}\r\n        >\r\n          {label}\r\n        </Box>\r\n        {icon && <Box sx={{ color: \"var(--fg-subtle)\" }}>{icon}</Box>}\r\n      </Box>\r\n      <Box\r\n        component=\"p\"\r\n        sx={{\r\n          margin: 0,\r\n          /* variant/size resolution — gap G-11.\r\n           *\r\n           * \"default\" keeps the Charter §03 literal (\"valeur 24 px\"); see the\r\n           * G-21 note below on why that literal is itself contested.\r\n           * \"compact\" steps down to --text-h2 (20px) for narrow containers.\r\n           * \"text\" drops to --text-body and behaves like prose. */\r\n          fontSize: isText\r\n            ? \"var(--text-body)\"\r\n            : isCompact\r\n              ? \"var(--text-h2)\"\r\n              : 24,\r\n          // Heaviest weight in the post-Batch-1 scale (700). The black-weight\r\n          // custom property this once referenced was dropped from the\r\n          // typography tokens and resolved to undefined in CSS, silently\r\n          // flattening the weight on every dashboard KPI.\r\n          //\r\n          // The old name is deliberately NOT spelled out here: the\r\n          // banned-patterns guard is a raw text scan with no comment\r\n          // awareness, so writing it - even to document its removal - trips\r\n          // the very rule that protects this line. See banned-patterns.test.ts.\r\n          //\r\n          // A text descriptor takes semibold instead: bold at body size reads\r\n          // as a heading and competes with the label above it.\r\n          fontWeight: isText ? \"var(--fw-semibold)\" : \"var(--fw-bold)\",\r\n          color: \"var(--fg)\",\r\n          /* Both of these are FIGURE typography and are actively wrong on prose:\r\n           * tabular numerals force uniform digit widths (pointless without\r\n           * digits) and negative tracking tightens words that need their normal\r\n           * spacing to stay legible at body size. */\r\n          ...(isText\r\n            ? { lineHeight: \"var(--lh-normal)\" }\r\n            : {\r\n                fontVariantNumeric: \"tabular-nums\",\r\n                letterSpacing: \"-0.01em\",\r\n                lineHeight: \"var(--lh-tight)\",\r\n              }),\r\n        }}\r\n      >\r\n        {value ?? \"—\"}\r\n      </Box>\r\n      {(deltaNum !== null || helper) && (\r\n        <Box\r\n          sx={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            gap: 1,\r\n            marginTop: 1,\r\n            fontSize: \"var(--text-xs)\",\r\n          }}\r\n        >\r\n          {deltaNum !== null && (\r\n            <Box\r\n              sx={{\r\n                display: \"inline-flex\",\r\n                alignItems: \"center\",\r\n                gap: 0.25,\r\n                // Default colour for the block = textColor. The icon\r\n                // overrides to iconColor below for a vivid arrow against\r\n                // a darker numeric label.\r\n                color: textColor,\r\n                fontWeight: \"var(--fw-semibold)\",\r\n                // R-T.3 - tabular-nums on delta so percentages align across cards\r\n                fontVariantNumeric: \"tabular-nums\",\r\n              }}\r\n            >\r\n              {/* WCAG 1.4.1 - direction is announced to SR only; sighted\r\n                  users get the arrow + colour. */}\r\n              {directionLabel && (\r\n                <span className=\"pui-sr-only\">{directionLabel}</span>\r\n              )}\r\n              {isPositive ? (\r\n                <ArrowUpwardIcon\r\n                  aria-hidden=\"true\"\r\n                  sx={{ fontSize: \"var(--text-xs)\", color: iconColor }}\r\n                />\r\n              ) : isNegative ? (\r\n                <ArrowDownwardIcon\r\n                  aria-hidden=\"true\"\r\n                  sx={{ fontSize: \"var(--text-xs)\", color: iconColor }}\r\n                />\r\n              ) : null}\r\n              <span>{formatDelta(Math.abs(deltaNum), locale)} %</span>\r\n            </Box>\r\n          )}\r\n          {(period || helper) && (\r\n            <Box component=\"span\" sx={{ color: \"var(--fg-subtle)\" }}>\r\n              {helper || period}\r\n            </Box>\r\n          )}\r\n        </Box>\r\n      )}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default KPICard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/v2/components/KPIStrip.js

@@ -0,0 +1,84 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+import * as React from "react";
+import Box from "@mui/material/Box";
+
+/**
+ * KPIStrip — Portnet UI v2
+ *
+ * The row of metric tiles. Charter §07 names this zone explicitly in the
+ * canonical page template: « ③ FILTERS / KPI STRIP — FilterTabs ou KPI cards
+ * selon contexte ».
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * WHY THIS BELONGS IN THE LIBRARY (capability gap G-11)
+ *
+ * The charter names the zone; the library shipped the tile (`KPICard`) and not
+ * the zone. So every screen wrote the grid, and the two written in addpe-fe
+ * disagree on the breakpoint ladder:
+ *
+ *   AutorisationDetail (hero)   { xs: "1fr 1fr", md: "repeat(4, 1fr)" }
+ *   AutorisationPreviewDrawer   "1fr 1fr"   (fixed, no ladder at all)
+ *
+ * Neither is wrong in isolation; together they mean a KPI row reflows
+ * differently depending on which screen you are on, for no reason a user could
+ * name. A named zone with an unnamed container is an invitation to that.
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ *   <KPIStrip columns={4}>
+ *     <KPICard label="Type" value={type} variant="text" />
+ *     <KPICard label="Poids Net Total" value={poids} helper="kg" />
+ *     <KPICard label="Articles" value={count} helper={helper} />
+ *     <KPICard label="Validité" value={date} helper={emission} />
+ *   </KPIStrip>
+ *
+ *   // Narrow container (480 px drawer): 2-up, one size down on the values.
+ *   <KPIStrip columns={2}>
+ *     <KPICard … size="compact" />
+ *   </KPIStrip>
+ *
+ * Mobile is always 2-up, deliberately, and this is the one opinion the component
+ * imposes. A KPI is a short figure under a short label: one per row wastes half
+ * a phone's width and turns a four-tile strip into a full screen of scrolling
+ * before the user reaches the content the tiles describe. Both local copies had
+ * independently reached the same conclusion — the ladder they disagreed on was
+ * the DESKTOP end, not this one.
+ *
+ * Accessibility: no `role` and no landmark. The strip is a visual grouping of
+ * cards that each carry their own label/value pair; wrapping it in a `role="group"`
+ * without an accessible name adds an unnamed group to the SR tree, which is
+ * noise. A host that needs the strip announced should give the surrounding
+ * section a heading — which the page template already does.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function KPIStrip(_ref) {
+  var _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 4 : _ref$columns,
+    gap = _ref.gap,
+    children = _ref.children,
+    sx = _ref.sx;
+  return /*#__PURE__*/_jsx(Box
+  /* ARRAY form, not an object spread — see gap G-23. SxProps admits arrays and
+   * functions, which an object spread destroys silently. Same shape KPICard
+   * uses, and the tiles inside this strip ARE KPICards. */, {
+    sx: [{
+      display: "grid",
+      gridTemplateColumns: {
+        xs: "repeat(2, minmax(0, 1fr))",
+        md: "repeat(".concat(columns, ", minmax(0, 1fr))")
+      },
+      // `minmax(0, 1fr)` rather than `1fr`: a tile whose value is a long text
+      // descriptor (KPICard variant="text") would otherwise refuse to shrink
+      // below its content width and overflow the strip (WCAG 1.4.10 Reflow).
+      gap: gap !== null && gap !== void 0 ? gap : "var(--s-3)",
+      minWidth: 0
+    }].concat(_toConsumableArray(Array.isArray(sx) ? sx : sx ? [sx] : [])),
+    children: children
+  });
+}
+export default KPIStrip;
+//# sourceMappingURL=KPIStrip.js.map

package/dist/esm/v2/components/KPIStrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KPIStrip.js","names":["React","Box","jsx","_jsx","KPIStrip","_ref","_ref$columns","columns","gap","children","sx","display","gridTemplateColumns","xs","md","concat","minWidth","_toConsumableArray","Array","isArray"],"sources":["../../../../src/lib/v2/components/KPIStrip.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\n\r\n/**\r\n * KPIStrip — Portnet UI v2\r\n *\r\n * The row of metric tiles. Charter §07 names this zone explicitly in the\r\n * canonical page template: « ③ FILTERS / KPI STRIP — FilterTabs ou KPI cards\r\n * selon contexte ».\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * WHY THIS BELONGS IN THE LIBRARY (capability gap G-11)\r\n *\r\n * The charter names the zone; the library shipped the tile (`KPICard`) and not\r\n * the zone. So every screen wrote the grid, and the two written in addpe-fe\r\n * disagree on the breakpoint ladder:\r\n *\r\n *   AutorisationDetail (hero)   { xs: \"1fr 1fr\", md: \"repeat(4, 1fr)\" }\r\n *   AutorisationPreviewDrawer   \"1fr 1fr\"   (fixed, no ladder at all)\r\n *\r\n * Neither is wrong in isolation; together they mean a KPI row reflows\r\n * differently depending on which screen you are on, for no reason a user could\r\n * name. A named zone with an unnamed container is an invitation to that.\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n *\r\n *   <KPIStrip columns={4}>\r\n *     <KPICard label=\"Type\" value={type} variant=\"text\" />\r\n *     <KPICard label=\"Poids Net Total\" value={poids} helper=\"kg\" />\r\n *     <KPICard label=\"Articles\" value={count} helper={helper} />\r\n *     <KPICard label=\"Validité\" value={date} helper={emission} />\r\n *   </KPIStrip>\r\n *\r\n *   // Narrow container (480 px drawer): 2-up, one size down on the values.\r\n *   <KPIStrip columns={2}>\r\n *     <KPICard … size=\"compact\" />\r\n *   </KPIStrip>\r\n *\r\n * Mobile is always 2-up, deliberately, and this is the one opinion the component\r\n * imposes. A KPI is a short figure under a short label: one per row wastes half\r\n * a phone's width and turns a four-tile strip into a full screen of scrolling\r\n * before the user reaches the content the tiles describe. Both local copies had\r\n * independently reached the same conclusion — the ladder they disagreed on was\r\n * the DESKTOP end, not this one.\r\n *\r\n * Accessibility: no `role` and no landmark. The strip is a visual grouping of\r\n * cards that each carry their own label/value pair; wrapping it in a `role=\"group\"`\r\n * without an accessible name adds an unnamed group to the SR tree, which is\r\n * noise. A host that needs the strip announced should give the surrounding\r\n * section a heading — which the page template already does.\r\n */\r\n\r\nexport interface KPIStripProps {\r\n  /**\r\n   * Tiles per row at md+ (≥ 768 px, the charter breakpoint token — not MUI's\r\n   * default). Below md the strip is always 2-up; see the component note.\r\n   * @default 4\r\n   */\r\n  columns?: 2 | 3 | 4 | undefined;\r\n  /**\r\n   * Grid gap. Defaults to `--s-3` (12px) — the value both local copies used, and\r\n   * the charter's « Padding cards compact » step, which is the right density\r\n   * between tiles that each already carry their own padding and border.\r\n   */\r\n  gap?: string | number | undefined;\r\n  children: React.ReactNode;\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nfunction KPIStrip({ columns = 4, gap, children, sx }: KPIStripProps) {\r\n  return (\r\n    <Box\r\n      /* ARRAY form, not an object spread — see gap G-23. SxProps admits arrays and\r\n       * functions, which an object spread destroys silently. Same shape KPICard\r\n       * uses, and the tiles inside this strip ARE KPICards. */\r\n      sx={[\r\n        {\r\n          display: \"grid\",\r\n          gridTemplateColumns: {\r\n            xs: \"repeat(2, minmax(0, 1fr))\",\r\n            md: `repeat(${columns}, minmax(0, 1fr))`,\r\n          },\r\n          // `minmax(0, 1fr)` rather than `1fr`: a tile whose value is a long text\r\n          // descriptor (KPICard variant=\"text\") would otherwise refuse to shrink\r\n          // below its content width and overflow the strip (WCAG 1.4.10 Reflow).\r\n          gap: gap ?? \"var(--s-3)\",\r\n          minWidth: 0,\r\n        },\r\n        ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\r\n      ]}\r\n    >\r\n      {children}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default KPIStrip;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;;AAGnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA9CA,SAAAC,GAAA,IAAAC,IAAA;AAiEA,SAASC,QAAQA,CAAAC,IAAA,EAAoD;EAAA,IAAAC,YAAA,GAAAD,IAAA,CAAjDE,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,CAAC,GAAAA,YAAA;IAAEE,GAAG,GAAAH,IAAA,CAAHG,GAAG;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAEC,EAAE,GAAAL,IAAA,CAAFK,EAAE;EAChD,oBACEP,IAAA,CAACF;EACC;AACN;AACA,2DAFM;IAGAS,EAAE,GACA;MACEC,OAAO,EAAE,MAAM;MACfC,mBAAmB,EAAE;QACnBC,EAAE,EAAE,2BAA2B;QAC/BC,EAAE,YAAAC,MAAA,CAAYR,OAAO;MACvB,CAAC;MACD;MACA;MACA;MACAC,GAAG,EAAEA,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,YAAY;MACxBQ,QAAQ,EAAE;IACZ,CAAC,EAAAD,MAAA,CAAAE,kBAAA,CACGC,KAAK,CAACC,OAAO,CAACT,EAAE,CAAC,GAAGA,EAAE,GAAGA,EAAE,GAAG,CAACA,EAAE,CAAC,GAAG,EAAE,EAC3C;IAAAD,QAAA,EAEDA;EAAQ,CACN,CAAC;AAEV;AAEA,eAAeL,QAAQ","ignoreList":[]}

package/dist/esm/v2/components/KV.js

@@ -0,0 +1,75 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import * as React from "react";
+import Box from "@mui/material/Box";
+
+/**
+ * KV — Label / value pair for detail panes.
+ *
+ * The label and value are explicitly paired via `aria-labelledby` so
+ * screen readers announce them as one semantic unit (e.g. "IMPORTATEUR
+ * SOFRANE SA") instead of two adjacent-but-unrelated text nodes.
+ *
+ * Density-aware: the value renders at var(--text-fs), tracking the
+ * surrounding density tier (comfortable=14 / compact=13 / spacious=15
+ * / ultraCompact=12). The label stays at 11 px — its size is a
+ * semantic property of the eyebrow-text role, not body density.
+ *
+ *   <KV label="Importateur" value="SOFRANE SA" />
+ *   <KV label="Référence" value="2025-IM-0042" mono />
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function KV(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    _ref$mono = _ref.mono,
+    mono = _ref$mono === void 0 ? false : _ref$mono,
+    _ref$fallback = _ref.fallback,
+    fallback = _ref$fallback === void 0 ? "—" : _ref$fallback;
+  var display = value === null || value === undefined || value === "" ? fallback : value;
+  var isMissing = display === fallback;
+  var labelId = React.useId();
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/_jsx(Box, {
+      id: labelId,
+      sx: {
+        fontSize: 11,
+        color: "var(--fg-subtle)",
+        fontWeight: "var(--fw-medium)",
+        marginBottom: 0.5,
+        textTransform: "uppercase",
+        /* A7-02 — was a raw "0.04em". This component is one of the two places
+         * the value was hardcoded INSIDE the library, which is what
+         * established it as platform vocabulary and justified promoting the
+         * letter-spacing scale rather than stripping the tracking. */
+        letterSpacing: "var(--ls-wide)"
+      },
+      children: label
+    }), /*#__PURE__*/_jsx(Box, {
+      "aria-labelledby": labelId,
+      sx: _objectSpread(_objectSpread({
+        // B1 — density-aware body font size, tracking the host's
+        // data-density attribute. Aligns KV cells with DataGrid
+        // body cells (which already use --text-fs).
+        fontSize: "var(--text-fs)",
+        fontWeight: "var(--fw-medium)",
+        color: isMissing ? "var(--fg-subtle)" : "var(--fg)"
+      }, mono ? {
+        fontFamily: "var(--font-mono)",
+        fontVariantNumeric: "tabular-nums"
+      } : {}), {}, {
+        wordBreak: "break-word"
+      }),
+      children: display
+    })]
+  });
+}
+export default KV;
+//# sourceMappingURL=KV.js.map

package/dist/esm/v2/components/KV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KV.js","names":["React","Box","jsx","_jsx","jsxs","_jsxs","KV","_ref","label","value","_ref$mono","mono","_ref$fallback","fallback","display","undefined","isMissing","labelId","useId","sx","minWidth","children","id","fontSize","color","fontWeight","marginBottom","textTransform","letterSpacing","_objectSpread","fontFamily","fontVariantNumeric","wordBreak"],"sources":["../../../../src/lib/v2/components/KV.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\n\r\n/**\r\n * KV — Label / value pair for detail panes.\r\n *\r\n * The label and value are explicitly paired via `aria-labelledby` so\r\n * screen readers announce them as one semantic unit (e.g. \"IMPORTATEUR\r\n * SOFRANE SA\") instead of two adjacent-but-unrelated text nodes.\r\n *\r\n * Density-aware: the value renders at var(--text-fs), tracking the\r\n * surrounding density tier (comfortable=14 / compact=13 / spacious=15\r\n * / ultraCompact=12). The label stays at 11 px — its size is a\r\n * semantic property of the eyebrow-text role, not body density.\r\n *\r\n *   <KV label=\"Importateur\" value=\"SOFRANE SA\" />\r\n *   <KV label=\"Référence\" value=\"2025-IM-0042\" mono />\r\n */\r\n\r\nexport interface KVProps {\r\n  label: React.ReactNode;\r\n  value?: React.ReactNode | undefined;\r\n  mono?: boolean | undefined;\r\n  fallback?: React.ReactNode | undefined;\r\n}\r\n\r\nfunction KV({ label, value, mono = false, fallback = \"—\" }: KVProps) {\r\n  const display = (value === null || value === undefined || value === \"\") ? fallback : value;\r\n  const isMissing = display === fallback;\r\n  const labelId = React.useId();\r\n  return (\r\n    <Box sx={{ minWidth: 0 }}>\r\n      <Box\r\n        id={labelId}\r\n        sx={{\r\n          fontSize: 11,\r\n          color: \"var(--fg-subtle)\",\r\n          fontWeight: \"var(--fw-medium)\",\r\n          marginBottom: 0.5,\r\n          textTransform: \"uppercase\",\r\n          /* A7-02 — was a raw \"0.04em\". This component is one of the two places\r\n           * the value was hardcoded INSIDE the library, which is what\r\n           * established it as platform vocabulary and justified promoting the\r\n           * letter-spacing scale rather than stripping the tracking. */\r\n          letterSpacing: \"var(--ls-wide)\",\r\n        }}\r\n      >\r\n        {label}\r\n      </Box>\r\n      <Box\r\n        aria-labelledby={labelId}\r\n        sx={{\r\n          // B1 — density-aware body font size, tracking the host's\r\n          // data-density attribute. Aligns KV cells with DataGrid\r\n          // body cells (which already use --text-fs).\r\n          fontSize: \"var(--text-fs)\",\r\n          fontWeight: \"var(--fw-medium)\",\r\n          color: isMissing ? \"var(--fg-subtle)\" : \"var(--fg)\",\r\n          ...(mono\r\n            ? { fontFamily: \"var(--font-mono)\", fontVariantNumeric: \"tabular-nums\" }\r\n            : {}),\r\n          wordBreak: \"break-word\",\r\n        }}\r\n      >\r\n        {display}\r\n      </Box>\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default KV;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAdA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAuBA,SAASC,EAAEA,CAAAC,IAAA,EAA0D;EAAA,IAAvDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAAC,SAAA,GAAAH,IAAA,CAAEI,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,KAAK,GAAAA,SAAA;IAAAE,aAAA,GAAAL,IAAA,CAAEM,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,GAAG,GAAAA,aAAA;EACtD,IAAME,OAAO,GAAIL,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKM,SAAS,IAAIN,KAAK,KAAK,EAAE,GAAII,QAAQ,GAAGJ,KAAK;EAC1F,IAAMO,SAAS,GAAGF,OAAO,KAAKD,QAAQ;EACtC,IAAMI,OAAO,GAAGjB,KAAK,CAACkB,KAAK,CAAC,CAAC;EAC7B,oBACEb,KAAA,CAACJ,GAAG;IAACkB,EAAE,EAAE;MAAEC,QAAQ,EAAE;IAAE,CAAE;IAAAC,QAAA,gBACvBlB,IAAA,CAACF,GAAG;MACFqB,EAAE,EAAEL,OAAQ;MACZE,EAAE,EAAE;QACFI,QAAQ,EAAE,EAAE;QACZC,KAAK,EAAE,kBAAkB;QACzBC,UAAU,EAAE,kBAAkB;QAC9BC,YAAY,EAAE,GAAG;QACjBC,aAAa,EAAE,WAAW;QAC1B;AACV;AACA;AACA;QACUC,aAAa,EAAE;MACjB,CAAE;MAAAP,QAAA,EAEDb;IAAK,CACH,CAAC,eACNL,IAAA,CAACF,GAAG;MACF,mBAAiBgB,OAAQ;MACzBE,EAAE,EAAAU,aAAA,CAAAA,aAAA;QACA;QACA;QACA;QACAN,QAAQ,EAAE,gBAAgB;QAC1BE,UAAU,EAAE,kBAAkB;QAC9BD,KAAK,EAAER,SAAS,GAAG,kBAAkB,GAAG;MAAW,GAC/CL,IAAI,GACJ;QAAEmB,UAAU,EAAE,kBAAkB;QAAEC,kBAAkB,EAAE;MAAe,CAAC,GACtE,CAAC,CAAC;QACNC,SAAS,EAAE;MAAY,EACvB;MAAAX,QAAA,EAEDP;IAAO,CACL,CAAC;EAAA,CACH,CAAC;AAEV;AAEA,eAAeR,EAAE","ignoreList":[]}

package/dist/esm/v2/components/KVGrid.js

@@ -0,0 +1,74 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children", "minColumnWidth", "gap", "sx"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import Box from "@mui/material/Box";
+
+/**
+ * KVGrid — Portnet UI v2
+ *
+ * Charter §03 · auto-fill grid for KV (key/value) blocks. Replaces
+ * the local KVGrid wrapper that host modules previously maintained
+ * (audit Batch 2 violation C10 in ms-ti-fe — direct MUI Box parallel
+ * auto-fill grid).
+ *
+ * Usage:
+ *
+ *   <KVGrid minColumnWidth={180}>
+ *     <KV label="Description" value={imp.description} />
+ *     <KV label="Code PIN"    value={imp.codePIN} mono />
+ *     <KV label="IFU"         value={imp.ifu}     mono />
+ *     <KV label="N° RC"       value={imp.numeroRc} mono />
+ *   </KVGrid>
+ *
+ * Reflow strategy: `auto-fill, minmax(min(minColumnWidth, 100%), 1fr)`
+ * — the browser packs as many cells per row as fit the container, each
+ * cell ≥ minColumnWidth and stretching to share remaining space. The
+ * `min(…, 100%)` clamp is load-bearing: it caps each track's minimum at
+ * the container width so a container narrower than minColumnWidth (small
+ * phones, deeply-nested padded cards, or a tuned-up minColumnWidth)
+ * collapses to a single full-width column instead of overflowing the
+ * viewport (WCAG 1.4.10 Reflow). No media queries, no breakpoint juggling.
+ *
+ * Designed to wrap v2.KV cells but accepts any children (renderer
+ * is agnostic to KV internals).
+ *
+ * Props:
+ *   minColumnWidth — track minimum in px (default 180). Tune
+ *                    upward for long mono values, downward for
+ *                    dense compact KV strips.
+ *   gap            — grid gap; defaults to `var(--s-3)` (12px).
+ *   sx             — escape hatch.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function KVGrid(_ref) {
+  var children = _ref.children,
+    _ref$minColumnWidth = _ref.minColumnWidth,
+    minColumnWidth = _ref$minColumnWidth === void 0 ? 180 : _ref$minColumnWidth,
+    gap = _ref.gap,
+    sx = _ref.sx,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    sx: _objectSpread({
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fill, minmax(min(".concat(minColumnWidth, "px, 100%), 1fr))"),
+      /* `--s-3` stays the default here, deliberately: the Charter §2.3 `-s-4`
+       * « Gap formulaire » applies to FIELD grids, and a KV strip is denser
+       * read-only content with no control hit-areas to separate.
+       *
+       * `??` and not `||`: `gap={0}` is a legitimate value that `||`
+       * silently overwrote with the default (same latent defect fixed in
+       * FormGrid, gap G-13). */
+      gap: gap !== null && gap !== void 0 ? gap : "var(--s-3)"
+    }, sx)
+  }, rest), {}, {
+    children: children
+  }));
+}
+export default KVGrid;
+//# sourceMappingURL=KVGrid.js.map

package/dist/esm/v2/components/KVGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KVGrid.js","names":["Box","jsx","_jsx","KVGrid","_ref","children","_ref$minColumnWidth","minColumnWidth","gap","sx","rest","_objectWithoutProperties","_excluded","_objectSpread","display","gridTemplateColumns","concat"],"sources":["../../../../src/lib/v2/components/KVGrid.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\r\nimport type { BoxProps } from \"@mui/material/Box\";\r\n\r\n/**\r\n * KVGrid — Portnet UI v2\r\n *\r\n * Charter §03 · auto-fill grid for KV (key/value) blocks. Replaces\r\n * the local KVGrid wrapper that host modules previously maintained\r\n * (audit Batch 2 violation C10 in ms-ti-fe — direct MUI Box parallel\r\n * auto-fill grid).\r\n *\r\n * Usage:\r\n *\r\n *   <KVGrid minColumnWidth={180}>\r\n *     <KV label=\"Description\" value={imp.description} />\r\n *     <KV label=\"Code PIN\"    value={imp.codePIN} mono />\r\n *     <KV label=\"IFU\"         value={imp.ifu}     mono />\r\n *     <KV label=\"N° RC\"       value={imp.numeroRc} mono />\r\n *   </KVGrid>\r\n *\r\n * Reflow strategy: `auto-fill, minmax(min(minColumnWidth, 100%), 1fr)`\r\n * — the browser packs as many cells per row as fit the container, each\r\n * cell ≥ minColumnWidth and stretching to share remaining space. The\r\n * `min(…, 100%)` clamp is load-bearing: it caps each track's minimum at\r\n * the container width so a container narrower than minColumnWidth (small\r\n * phones, deeply-nested padded cards, or a tuned-up minColumnWidth)\r\n * collapses to a single full-width column instead of overflowing the\r\n * viewport (WCAG 1.4.10 Reflow). No media queries, no breakpoint juggling.\r\n *\r\n * Designed to wrap v2.KV cells but accepts any children (renderer\r\n * is agnostic to KV internals).\r\n *\r\n * Props:\r\n *   minColumnWidth — track minimum in px (default 180). Tune\r\n *                    upward for long mono values, downward for\r\n *                    dense compact KV strips.\r\n *   gap            — grid gap; defaults to `var(--s-3)` (12px).\r\n *   sx             — escape hatch.\r\n */\r\n\r\nexport interface KVGridProps extends Omit<BoxProps, \"gap\"> {\r\n  minColumnWidth?: number | undefined;\r\n  gap?: string | number | undefined;\r\n}\r\n\r\nfunction KVGrid({ children, minColumnWidth = 180, gap, sx, ...rest }: KVGridProps) {\r\n  return (\r\n    <Box\r\n      sx={{\r\n        display: \"grid\",\r\n        gridTemplateColumns: `repeat(auto-fill, minmax(min(${minColumnWidth}px, 100%), 1fr))`,\r\n        /* `--s-3` stays the default here, deliberately: the Charter §2.3 `-s-4`\r\n         * « Gap formulaire » applies to FIELD grids, and a KV strip is denser\r\n         * read-only content with no control hit-areas to separate.\r\n         *\r\n         * `??` and not `||`: `gap={0}` is a legitimate value that `||`\r\n         * silently overwrote with the default (same latent defect fixed in\r\n         * FormGrid, gap G-13). */\r\n        gap: gap ?? \"var(--s-3)\",\r\n        ...sx,\r\n      }}\r\n      {...rest}\r\n    >\r\n      {children}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default KVGrid;\r\n"],"mappings":";;;;;;;;;AAAA,OAAOA,GAAG,MAAM,mBAAmB;;AAGnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAnCA,SAAAC,GAAA,IAAAC,IAAA;AA0CA,SAASC,MAAMA,CAAAC,IAAA,EAAoE;EAAA,IAAjEC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,mBAAA,GAAAF,IAAA,CAAEG,cAAc;IAAdA,cAAc,GAAAD,mBAAA,cAAG,GAAG,GAAAA,mBAAA;IAAEE,GAAG,GAAAJ,IAAA,CAAHI,GAAG;IAAEC,EAAE,GAAAL,IAAA,CAAFK,EAAE;IAAKC,IAAI,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAChE,oBACEV,IAAA,CAACF,GAAG,EAAAa,aAAA,CAAAA,aAAA;IACFJ,EAAE,EAAAI,aAAA;MACAC,OAAO,EAAE,MAAM;MACfC,mBAAmB,kCAAAC,MAAA,CAAkCT,cAAc,qBAAkB;MACrF;AACR;AACA;AACA;AACA;AACA;AACA;MACQC,GAAG,EAAEA,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI;IAAY,GACrBC,EAAE;EACL,GACEC,IAAI;IAAAL,QAAA,EAEPA;EAAQ,EACN,CAAC;AAEV;AAEA,eAAeF,MAAM","ignoreList":[]}