@portnet/ui 6.0.0 → 6.0.1

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

@@ -0,0 +1,284 @@
+var _excluded = ["as", "sx", "style", "className", "children"],
+  _excluded2 = ["direction", "gap", "align", "justify", "wrap", "sx", "children"];
+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; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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); }
+import * as React from "react";
+import { mq, BREAKPOINT_KEYS } from "../tokens";
+
+/**
+ * v2.Box / v2.Stack — token-driven layout primitives.
+ *
+ * These render through the inline `style` attribute and stay theme-free
+ * (no MUI theme runtime, no emotion). Tokens flow through CSS variables
+ * on :root, exactly as before.
+ *
+ * Responsive escape hatch (R-RS.4)
+ * --------------------------------
+ * Historically `sx` accepted ONLY plain CSS-property values; a
+ * breakpoint object (`{ xs, sm, md, lg, xl }`) was silently dropped to
+ * "[object Object]" because inline styles can't carry media queries.
+ * Modules that needed responsive variation were pushed into bespoke,
+ * per-module CSS files — which fragments the breakpoint contract and
+ * violates centralisation.
+ *
+ * `sx` now ALSO accepts breakpoint objects on any property, resolved
+ * against the DESIGN-SYSTEM breakpoint TOKENS (tokens/breakpoints.js),
+ * the same scale wired into the MUI theme. The mechanism is the standard
+ * "CSS variable swapped by media query" technique, kept entirely inside
+ * the lib so consumers never hand-write a media query:
+ *
+ *   <Box sx={{ flexDirection: { xs: "column", md: "row" }, gap: "var(--s-3)" }} />
+ *
+ *   →  a generated scoped class sets, for that element only:
+ *        --pui-rsp-<sig>-0: column;                    (base, mobile-first)
+ *        ${mq.up("md")} { --pui-rsp-<sig>-0: row }      (md token)
+ *      and the inline style references flexDirection: var(--pui-rsp-<sig>-0).
+ *
+ * `xs` is treated as the base (min-width 0). sm/md/lg/xl emit
+ * min-width media queries at the token values via mq.up(), so the
+ * generated queries are byte-identical to theme.breakpoints.up().
+ *
+ * The generated class + variable names are CONTENT-ADDRESSED (derived
+ * from a hash of the sx), so an identical sx signature always produces
+ * the identical class and the identical <style> rule — injected once and
+ * shared by every instance and every re-render. (A volatile counter here
+ * would mint a fresh class + <style> on each render of an inline-sx Box,
+ * leaking <style> tags into <head> without bound.)
+ *
+ * Precedence: `style` (explicit escape hatch) still overrides `sx`.
+ *
+ *   <Box as="section" sx={{ display: "flex" }} style={{ background: "var(--surface)" }} className="x" />
+ */
+
+/** A single CSS value, or a per-breakpoint map of CSS values (responsive). */
+
+/** Token-driven inline style; each property is a value or a responsive map. */
+
+/** Result of splitting an sx into inline style + generated responsive CSS. */
+import { jsx as _jsx } from "react/jsx-runtime";
+/* Token breakpoint keys, ascending. xs is the mobile-first base and
+ * never emits a media query. Sourced from the canonical breakpoints
+ * token (tokens/breakpoints.js) so the order can't drift from the scale
+ * wired into the MUI theme. */
+var BP_ORDER = BREAKPOINT_KEYS;
+function isPlainObject(v) {
+  return v != null && _typeof(v) === "object" && !Array.isArray(v);
+}
+function isBreakpointObject(v) {
+  if (!isPlainObject(v)) return false;
+  // Treat as responsive only if EVERY key is a known breakpoint name.
+  // Avoids misreading a nested style object as a breakpoint map.
+  var keys = Object.keys(v);
+  return keys.length > 0 && keys.every(function (k) {
+    return BP_ORDER.includes(k);
+  });
+}
+
+/**
+ * Split an sx object into:
+ *   - inlineStyle : plain props written directly (responsive props point
+ *                   at a generated CSS variable)
+ *   - css         : a scoped stylesheet string (or "" when nothing is
+ *                   responsive)
+ *   - className   : the generated scope class (or undefined)
+ *
+ * The className and the generated variable names are both derived from a
+ * single content hash of the sx, so the result is STABLE across renders
+ * and identical across instances that share the same sx — which is what
+ * makes the <style> injection idempotent (see useResponsiveStyleInjection).
+ *
+ * Returns a stable result for a given sx via useMemo at the call site.
+ */
+function resolveSx(sx) {
+  if (sx == null || !isPlainObject(sx)) {
+    return {
+      inlineStyle: undefined,
+      css: "",
+      className: undefined
+    };
+  }
+
+  // Content-addressed signature. Derived ONCE from the sx so the class
+  // and every generated var name are stable across renders/instances.
+  var sig = Math.abs(hashString(JSON.stringify(sx))).toString(36);
+
+  // inlineStyle is the returned CSSProperties; styleWrite is the same
+  // object viewed as a keyed record so dynamic string keys can be written
+  // (CSSProperties has no string index signature, so the view needs a
+  // cast — the two are the SAME object at runtime).
+  var inlineStyle = {};
+  var styleWrite = inlineStyle;
+  /* Per-breakpoint declaration buckets, e.g. byBp.md === "--pui-rsp-<sig>-0:row;" */
+  var byBp = {
+    xs: "",
+    sm: "",
+    md: "",
+    lg: "",
+    xl: ""
+  };
+  var hasResponsive = false;
+  var varSeq = 0;
+  for (var _i = 0, _Object$entries = Object.entries(sx); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      prop = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    if (isBreakpointObject(value)) {
+      hasResponsive = true;
+      // Stable, signature-scoped var name (local index, not a global
+      // counter). Only ever declared inside `.${className}`, so the name
+      // is effectively scoped to elements carrying that class.
+      var varName = "--pui-rsp-".concat(sig, "-").concat(varSeq++);
+      styleWrite[prop] = "var(".concat(varName, ")");
+      var _iterator = _createForOfIteratorHelper(BP_ORDER),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var bp = _step.value;
+          var bpVal = value[bp];
+          if (bpVal != null) {
+            byBp[bp] += "".concat(varName, ":").concat(bpVal, ";");
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    } else {
+      styleWrite[prop] = value;
+    }
+  }
+  if (!hasResponsive) {
+    return {
+      inlineStyle: inlineStyle,
+      css: "",
+      className: undefined
+    };
+  }
+  var className = "pui-rsp-".concat(sig);
+  var css = "";
+  // xs = base (no media query), then ascending min-width queries built
+  // by the shared mq.up() helper (single breakpoint→media-query engine).
+  if (byBp.xs) css += ".".concat(className, "{").concat(byBp.xs, "}");
+  var _iterator2 = _createForOfIteratorHelper(["sm", "md", "lg", "xl"]),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var _bp = _step2.value;
+      if (byBp[_bp]) {
+        css += "".concat(mq.up(_bp), "{.").concat(className, "{").concat(byBp[_bp], "}}");
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return {
+    inlineStyle: inlineStyle,
+    css: css,
+    className: className
+  };
+}
+
+/* Small, stable, dependency-free string hash (djb2) for class naming.
+ * Used to content-address identical sx signatures so their generated
+ * class + <style> rule de-duplicate in the DOM. */
+function hashString(str) {
+  var h = 5381;
+  for (var i = 0; i < str.length; i++) {
+    h = h * 33 ^ str.charCodeAt(i);
+  }
+  return h | 0;
+}
+
+/* Injects the generated stylesheet for a responsive sx exactly once per
+ * unique className. Idempotent: a second Box with the same sx signature
+ * reuses the existing <style>. */
+function useResponsiveStyleInjection(css, className) {
+  React.useInsertionEffect(function () {
+    if (!css || !className || typeof document === "undefined") return undefined;
+    var id = "pui-rsp-style-".concat(className);
+    if (document.getElementById(id)) return undefined;
+    var el = document.createElement("style");
+    el.id = id;
+    el.textContent = css;
+    document.head.appendChild(el);
+    // Not removed on unmount: the rule is keyed by content hash and may
+    // be shared by sibling instances; leaving it is cheap and avoids a
+    // flash if the same sx remounts. The set is bounded by the number of
+    // DISTINCT responsive sx signatures in the app, not instances.
+    return undefined;
+  }, [css, className]);
+}
+export var Box = /*#__PURE__*/React.forwardRef(function Box(_ref, ref) {
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? "div" : _ref$as,
+    sx = _ref.sx,
+    style = _ref.style,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _React$useMemo = React.useMemo(function () {
+      return resolveSx(sx);
+    }, [sx]),
+    inlineStyle = _React$useMemo.inlineStyle,
+    css = _React$useMemo.css,
+    rspClass = _React$useMemo.className;
+  useResponsiveStyleInjection(css, rspClass);
+
+  /* Merge sx-derived inline style + explicit style — style wins. */
+  var merged = inlineStyle && style ? _objectSpread(_objectSpread({}, inlineStyle), style) : inlineStyle ? inlineStyle : style ? style : undefined;
+  var mergedClass = [className, rspClass].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({
+    ref: ref,
+    style: merged,
+    className: mergedClass
+  }, rest), {}, {
+    children: children
+  }));
+});
+export var Stack = /*#__PURE__*/React.forwardRef(function Stack(_ref2, ref) {
+  var _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? "column" : _ref2$direction,
+    _ref2$gap = _ref2.gap,
+    gap = _ref2$gap === void 0 ? "var(--s-3)" : _ref2$gap,
+    align = _ref2.align,
+    justify = _ref2.justify,
+    _ref2$wrap = _ref2.wrap,
+    wrap = _ref2$wrap === void 0 ? false : _ref2$wrap,
+    sx = _ref2.sx,
+    children = _ref2.children,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  var layoutSx = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    flexDirection: direction,
+    gap: gap
+  }, align ? {
+    alignItems: align
+  } : null), justify ? {
+    justifyContent: justify
+  } : null), wrap ? {
+    flexWrap: "wrap"
+  } : null), sx);
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    ref: ref,
+    sx: layoutSx
+  }, rest), {}, {
+    children: children
+  }));
+});
+//# sourceMappingURL=Layout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","names":["React","mq","BREAKPOINT_KEYS","jsx","_jsx","BP_ORDER","isPlainObject","v","_typeof","Array","isArray","isBreakpointObject","keys","Object","length","every","k","includes","resolveSx","sx","inlineStyle","undefined","css","className","sig","Math","abs","hashString","JSON","stringify","toString","styleWrite","byBp","xs","sm","md","lg","xl","hasResponsive","varSeq","_i","_Object$entries","entries","_Object$entries$_i","_slicedToArray","prop","value","varName","concat","_iterator","_createForOfIteratorHelper","_step","s","n","done","bp","bpVal","err","e","f","_iterator2","_step2","up","str","h","i","charCodeAt","useResponsiveStyleInjection","useInsertionEffect","document","id","getElementById","el","createElement","textContent","head","appendChild","Box","forwardRef","_ref","ref","_ref$as","as","Component","style","children","rest","_objectWithoutProperties","_excluded","_React$useMemo","useMemo","rspClass","merged","_objectSpread","mergedClass","filter","Boolean","join","Stack","_ref2","_ref2$direction","direction","_ref2$gap","gap","align","justify","_ref2$wrap","wrap","_excluded2","layoutSx","display","flexDirection","alignItems","justifyContent","flexWrap"],"sources":["../../../../src/lib/v2/components/Layout.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { mq, BREAKPOINT_KEYS } from \"../tokens\";\r\nimport type { Breakpoint } from \"../types/common\";\r\n\r\n/**\r\n * v2.Box / v2.Stack — token-driven layout primitives.\r\n *\r\n * These render through the inline `style` attribute and stay theme-free\r\n * (no MUI theme runtime, no emotion). Tokens flow through CSS variables\r\n * on :root, exactly as before.\r\n *\r\n * Responsive escape hatch (R-RS.4)\r\n * --------------------------------\r\n * Historically `sx` accepted ONLY plain CSS-property values; a\r\n * breakpoint object (`{ xs, sm, md, lg, xl }`) was silently dropped to\r\n * \"[object Object]\" because inline styles can't carry media queries.\r\n * Modules that needed responsive variation were pushed into bespoke,\r\n * per-module CSS files — which fragments the breakpoint contract and\r\n * violates centralisation.\r\n *\r\n * `sx` now ALSO accepts breakpoint objects on any property, resolved\r\n * against the DESIGN-SYSTEM breakpoint TOKENS (tokens/breakpoints.js),\r\n * the same scale wired into the MUI theme. The mechanism is the standard\r\n * \"CSS variable swapped by media query\" technique, kept entirely inside\r\n * the lib so consumers never hand-write a media query:\r\n *\r\n *   <Box sx={{ flexDirection: { xs: \"column\", md: \"row\" }, gap: \"var(--s-3)\" }} />\r\n *\r\n *   →  a generated scoped class sets, for that element only:\r\n *        --pui-rsp-<sig>-0: column;                    (base, mobile-first)\r\n *        ${mq.up(\"md\")} { --pui-rsp-<sig>-0: row }      (md token)\r\n *      and the inline style references flexDirection: var(--pui-rsp-<sig>-0).\r\n *\r\n * `xs` is treated as the base (min-width 0). sm/md/lg/xl emit\r\n * min-width media queries at the token values via mq.up(), so the\r\n * generated queries are byte-identical to theme.breakpoints.up().\r\n *\r\n * The generated class + variable names are CONTENT-ADDRESSED (derived\r\n * from a hash of the sx), so an identical sx signature always produces\r\n * the identical class and the identical <style> rule — injected once and\r\n * shared by every instance and every re-render. (A volatile counter here\r\n * would mint a fresh class + <style> on each render of an inline-sx Box,\r\n * leaking <style> tags into <head> without bound.)\r\n *\r\n * Precedence: `style` (explicit escape hatch) still overrides `sx`.\r\n *\r\n *   <Box as=\"section\" sx={{ display: \"flex\" }} style={{ background: \"var(--surface)\" }} className=\"x\" />\r\n */\r\n\r\n/** A single CSS value, or a per-breakpoint map of CSS values (responsive). */\r\ntype SxValue =\r\n  | string\r\n  | number\r\n  | Partial<Record<Breakpoint, string | number | undefined>>;\r\n\r\n/** Token-driven inline style; each property is a value or a responsive map. */\r\ntype Sx = { [property: string]: SxValue };\r\n\r\n/** Result of splitting an sx into inline style + generated responsive CSS. */\r\ntype ResolvedSx = {\r\n  inlineStyle: React.CSSProperties | undefined;\r\n  css: string;\r\n  className: string | undefined;\r\n};\r\n\r\n/* Token breakpoint keys, ascending. xs is the mobile-first base and\r\n * never emits a media query. Sourced from the canonical breakpoints\r\n * token (tokens/breakpoints.js) so the order can't drift from the scale\r\n * wired into the MUI theme. */\r\nconst BP_ORDER = BREAKPOINT_KEYS;\r\n\r\nfunction isPlainObject(v: unknown): boolean {\r\n  return v != null && typeof v === \"object\" && !Array.isArray(v);\r\n}\r\n\r\nfunction isBreakpointObject(\r\n  v: unknown,\r\n): v is Partial<Record<Breakpoint, string | number | undefined>> {\r\n  if (!isPlainObject(v)) return false;\r\n  // Treat as responsive only if EVERY key is a known breakpoint name.\r\n  // Avoids misreading a nested style object as a breakpoint map.\r\n  const keys = Object.keys(v as Record<string, unknown>);\r\n  return keys.length > 0 && keys.every((k) => (BP_ORDER as readonly string[]).includes(k));\r\n}\r\n\r\n/**\r\n * Split an sx object into:\r\n *   - inlineStyle : plain props written directly (responsive props point\r\n *                   at a generated CSS variable)\r\n *   - css         : a scoped stylesheet string (or \"\" when nothing is\r\n *                   responsive)\r\n *   - className   : the generated scope class (or undefined)\r\n *\r\n * The className and the generated variable names are both derived from a\r\n * single content hash of the sx, so the result is STABLE across renders\r\n * and identical across instances that share the same sx — which is what\r\n * makes the <style> injection idempotent (see useResponsiveStyleInjection).\r\n *\r\n * Returns a stable result for a given sx via useMemo at the call site.\r\n */\r\nfunction resolveSx(sx: Sx | undefined): ResolvedSx {\r\n  if (sx == null || !isPlainObject(sx)) {\r\n    return { inlineStyle: undefined, css: \"\", className: undefined };\r\n  }\r\n\r\n  // Content-addressed signature. Derived ONCE from the sx so the class\r\n  // and every generated var name are stable across renders/instances.\r\n  const sig = Math.abs(hashString(JSON.stringify(sx))).toString(36);\r\n\r\n  // inlineStyle is the returned CSSProperties; styleWrite is the same\r\n  // object viewed as a keyed record so dynamic string keys can be written\r\n  // (CSSProperties has no string index signature, so the view needs a\r\n  // cast — the two are the SAME object at runtime).\r\n  const inlineStyle: React.CSSProperties = {};\r\n  const styleWrite = inlineStyle as unknown as Record<string, string | number | undefined>;\r\n  /* Per-breakpoint declaration buckets, e.g. byBp.md === \"--pui-rsp-<sig>-0:row;\" */\r\n  const byBp: Record<Breakpoint, string> = { xs: \"\", sm: \"\", md: \"\", lg: \"\", xl: \"\" };\r\n  let hasResponsive = false;\r\n  let varSeq = 0;\r\n\r\n  for (const [prop, value] of Object.entries(sx)) {\r\n    if (isBreakpointObject(value)) {\r\n      hasResponsive = true;\r\n      // Stable, signature-scoped var name (local index, not a global\r\n      // counter). Only ever declared inside `.${className}`, so the name\r\n      // is effectively scoped to elements carrying that class.\r\n      const varName = `--pui-rsp-${sig}-${varSeq++}`;\r\n      styleWrite[prop] = `var(${varName})`;\r\n      for (const bp of BP_ORDER) {\r\n        const bpVal = value[bp];\r\n        if (bpVal != null) {\r\n          byBp[bp] += `${varName}:${bpVal};`;\r\n        }\r\n      }\r\n    } else {\r\n      styleWrite[prop] = value;\r\n    }\r\n  }\r\n\r\n  if (!hasResponsive) {\r\n    return { inlineStyle, css: \"\", className: undefined };\r\n  }\r\n\r\n  const className = `pui-rsp-${sig}`;\r\n\r\n  let css = \"\";\r\n  // xs = base (no media query), then ascending min-width queries built\r\n  // by the shared mq.up() helper (single breakpoint→media-query engine).\r\n  if (byBp.xs) css += `.${className}{${byBp.xs}}`;\r\n  for (const bp of [\"sm\", \"md\", \"lg\", \"xl\"] as const) {\r\n    if (byBp[bp]) {\r\n      css += `${mq.up(bp)}{.${className}{${byBp[bp]}}}`;\r\n    }\r\n  }\r\n\r\n  return { inlineStyle, css, className };\r\n}\r\n\r\n/* Small, stable, dependency-free string hash (djb2) for class naming.\r\n * Used to content-address identical sx signatures so their generated\r\n * class + <style> rule de-duplicate in the DOM. */\r\nfunction hashString(str: string): number {\r\n  let h = 5381;\r\n  for (let i = 0; i < str.length; i++) {\r\n    h = (h * 33) ^ str.charCodeAt(i);\r\n  }\r\n  return h | 0;\r\n}\r\n\r\n/* Injects the generated stylesheet for a responsive sx exactly once per\r\n * unique className. Idempotent: a second Box with the same sx signature\r\n * reuses the existing <style>. */\r\nfunction useResponsiveStyleInjection(css: string, className: string | undefined): void {\r\n  React.useInsertionEffect(() => {\r\n    if (!css || !className || typeof document === \"undefined\") return undefined;\r\n    const id = `pui-rsp-style-${className}`;\r\n    if (document.getElementById(id)) return undefined;\r\n    const el = document.createElement(\"style\");\r\n    el.id = id;\r\n    el.textContent = css;\r\n    document.head.appendChild(el);\r\n    // Not removed on unmount: the rule is keyed by content hash and may\r\n    // be shared by sibling instances; leaving it is cheap and avoids a\r\n    // flash if the same sx remounts. The set is bounded by the number of\r\n    // DISTINCT responsive sx signatures in the app, not instances.\r\n    return undefined;\r\n  }, [css, className]);\r\n}\r\n\r\nexport interface BoxProps extends React.HTMLAttributes<HTMLElement> {\r\n  /** Element or component to render. @default \"div\" */\r\n  as?: React.ElementType | undefined;\r\n  /**\r\n   * Token-driven inline style. Each property may be a plain CSS value or a\r\n   * responsive breakpoint map (`{ xs, sm, md, lg, xl }`) resolved against the\r\n   * design-system breakpoint tokens. `style` still overrides `sx`.\r\n   */\r\n  sx?: Sx | undefined;\r\n}\r\n\r\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\r\n  { as: Component = \"div\", sx, style, className, children, ...rest },\r\n  ref,\r\n) {\r\n  const { inlineStyle, css, className: rspClass } = React.useMemo(\r\n    () => resolveSx(sx),\r\n    [sx],\r\n  );\r\n  useResponsiveStyleInjection(css, rspClass);\r\n\r\n  /* Merge sx-derived inline style + explicit style — style wins. */\r\n  const merged =\r\n    inlineStyle && style ? { ...inlineStyle, ...style } :\r\n    inlineStyle ? inlineStyle :\r\n    style ? style :\r\n    undefined;\r\n\r\n  const mergedClass = [className, rspClass].filter(Boolean).join(\" \") || undefined;\r\n\r\n  return (\r\n    <Component ref={ref} style={merged} className={mergedClass} {...rest}>\r\n      {children}\r\n    </Component>\r\n  );\r\n});\r\n\r\nexport interface StackProps extends BoxProps {\r\n  /** Flex direction. @default \"column\" */\r\n  direction?: React.CSSProperties[\"flexDirection\"] | undefined;\r\n  /** Gap between children (any CSS length or spacing var). @default \"var(--s-3)\" */\r\n  gap?: string | number | undefined;\r\n  /** align-items. */\r\n  align?: React.CSSProperties[\"alignItems\"] | undefined;\r\n  /** justify-content. */\r\n  justify?: React.CSSProperties[\"justifyContent\"] | undefined;\r\n  /** Set flex-wrap: wrap. @default false */\r\n  wrap?: boolean | undefined;\r\n}\r\n\r\nexport const Stack = React.forwardRef<HTMLElement, StackProps>(function Stack(\r\n  {\r\n    direction = \"column\",\r\n    gap = \"var(--s-3)\",\r\n    align,\r\n    justify,\r\n    wrap = false,\r\n    sx,\r\n    children,\r\n    ...rest\r\n  },\r\n  ref,\r\n) {\r\n  const layoutSx: Sx = {\r\n    display: \"flex\",\r\n    flexDirection: direction,\r\n    gap,\r\n    ...(align    ? { alignItems:     align   } : null),\r\n    ...(justify  ? { justifyContent: justify } : null),\r\n    ...(wrap     ? { flexWrap: \"wrap\" }        : null),\r\n    ...sx,\r\n  };\r\n\r\n  return (\r\n    <Box ref={ref} sx={layoutSx} {...rest}>\r\n      {children}\r\n    </Box>\r\n  );\r\n});\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,314 @@
+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";
+import OverflowMenu from "./OverflowMenu";
+import KV from "./KV";
+
+/**
+ * MobileRowCard - Portnet UI v2
+ *
+ * Canonical card layout for the DataGrid mobile card view (R1 mobile,
+ * lib commit "feat(DataGrid): R1 mobile - opt-in card view"). Used
+ * inside DataGrid's renderMobileCard prop to centralise the visual
+ * rhythm across modules.
+ *
+ *   <DataGrid
+ *     renderMobileCard={(row) => (
+ *       <MobileRowCard
+ *         title={row.reference}
+ *         titleMono
+ *         subtitle={row.importer?.description}
+ *         chips={[
+ *           <StatutAutorisationChip code={row.statutAutorisation} />,
+ *           <StatutUtilisationChip code={row.statutUtilisation} />,
+ *         ]}
+ *         meta={[
+ *           `Émise ${formatDate(row.dateIssue)}`,
+ *           `Fin ${formatDate(row.dateFinValidite)}`,
+ *         ]}
+ *         actions={buildRowActions(row)}
+ *         actionsAriaLabel={`Actions pour ${row.reference}`}
+ *       />
+ *     )}
+ *     ...
+ *   />
+ *
+ * Layout (top to bottom, each line conditional on its prop):
+ *   1. Header row: [leading] + title (truncate, optional mono) + [trailing] + OverflowMenu kebab
+ *   2. Subtitle line: muted, single-line truncate
+ *   3. Chips row: wrapping flexbox for status chips
+ *   4. KV grid: two-column label/value pairs (see `kv`)
+ *   5. Meta line: secondary scalars joined with " · "
+ *
+ * All props are optional; the component renders only the lines
+ * that have content, with no empty placeholder boxes.
+ *
+ * `kv` vs `meta` — pick by whether the reader needs the label.
+ *   meta  → self-evident scalars, joined label-less: "12/05/2026 · 3 pièces"
+ *   kv    → values that are meaningless unaccompanied ("SOFRANE SA",
+ *           "Casablanca", "Tissus") — rendered as a 2-column grid of v2.KV
+ *
+ * `kv` exists because every listing in ms-dfd-fe and ms-ti-fe independently
+ * built header + labelled-KV-grid cards with a local MOBILE_CARD_KV_SX,
+ * bypassing this component entirely — nine sites across two modules. `meta`
+ * could not absorb them: joining five labelled pairs into one " · " string
+ * loses the labels, and on a phone those labels are what make the values
+ * interpretable (Nielsen #6, recognition over recall). Each pair renders
+ * through v2.KV, so label/value stay paired for screen readers via
+ * aria-labelledby, and empty values fall back to KV's own "—" rather than each
+ * host writing `?? "-"`.
+ *
+ *   <MobileRowCard
+ *     leading={<FavoriteToggle ... />}
+ *     title={row.num} titleMono
+ *     chips={[<Status kind={...} label={row.etat} />]}
+ *     kv={[
+ *       { label: "Catégorie",   value: row.categorie },
+ *       { label: "Importateur", value: row.importateur },
+ *       { label: "Référence",   value: row.ref, mono: true },
+ *     ]}
+ *   />
+ *
+ * `leading` — a slot BEFORE the title, inside the header row, vertically
+ * centred against it and never shrinking. Added for the listing favourite
+ * star, which hosts previously could not place inside the card and therefore
+ * hand-rolled the whole card layout instead:
+ *
+ *   <MobileRowCard
+ *     leading={<FavoriteToggle pressed={isFavorite} size="sm" onChange={...} />}
+ *     title={row.reference}
+ *     titleMono
+ *   />
+ *
+ * PROPAGATION — deliberate asymmetry with the kebab. The kebab wrapper stops
+ * click/keydown itself, because opening a menu must never also fire the card's
+ * onRowClick. `leading` does NOT: a decorative leading node (icon, avatar)
+ * should still open the row like the rest of the card, and silently swallowing
+ * that would be the more surprising default. Interactive leading content is
+ * therefore responsible for stopping propagation in its own handlers — exactly
+ * as DataGrid's own FavoriteCell does. Get this wrong and a tap both toggles
+ * the star and opens the drawer.
+ *
+ * Charter §02.3 — spacing: --s-2 gap between lines, --s-3 padding.
+ * Charter §02.2 — typography:
+ *   - title: text-sm semibold (text-mono variant if titleMono)
+ *   - subtitle: text-sm fg-muted
+ *   - meta: text-xs fg-subtle
+ * Charter §05 — a11y: kebab has its own aria-label; the card-level
+ *   click wiring (role=button, tabIndex, Enter/Space) is owned by
+ *   DataGrid's mobile card wrapper. This component just renders the
+ *   contents.
+ *
+ * Why chips are NODES (not objects):
+ *   Hosts have specialised chip components (StatutAutorisationChip
+ *   etc.) and passing nodes lets them keep their existing chip type
+ *   without translating to a generic schema. We just lay them out
+ *   in a wrapping row.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var CARD_INNER_SX = Object.freeze({
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--s-2)",
+  padding: "var(--s-3)"
+});
+var HEADER_SX = Object.freeze({
+  display: "flex",
+  alignItems: "flex-start",
+  justifyContent: "space-between",
+  gap: "var(--s-2)"
+});
+
+/* Groups `leading` + title on the left of the header so the kebab keeps its
+ * space-between position. `minWidth: 0` is what lets the title's ellipsis
+ * actually engage inside a flex child. */
+var HEADER_MAIN_SX = Object.freeze({
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--s-2)",
+  minWidth: 0,
+  flex: 1
+});
+var LEADING_SX = Object.freeze({
+  display: "inline-flex",
+  alignItems: "center",
+  flexShrink: 0
+});
+var TITLE_BASE_SX = Object.freeze({
+  fontWeight: "var(--fw-semibold)",
+  fontSize: "var(--text-sm)",
+  color: "var(--fg)",
+  minWidth: 0,
+  flex: 1,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+});
+var TITLE_MONO_SX = Object.freeze(_objectSpread(_objectSpread({}, TITLE_BASE_SX), {}, {
+  fontFamily: "var(--font-mono)"
+}));
+var SUBTITLE_SX = Object.freeze({
+  fontSize: "var(--text-sm)",
+  color: "var(--fg-muted)",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+});
+var CHIPS_SX = Object.freeze({
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--s-1)",
+  flexWrap: "wrap"
+});
+var META_SX = Object.freeze({
+  fontSize: "var(--text-xs)",
+  color: "var(--fg-subtle)"
+});
+
+/* Two columns at every phone width. Deliberately not responsive: below ~320px
+ * a single column would be more readable, but 320px is the Charter's narrowest
+ * supported breakpoint (§07.2 xs) and two columns still fit there. Matches the
+ * MOBILE_CARD_KV_SX both modules converged on independently. */
+var KV_GRID_SX = Object.freeze({
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: "var(--s-2)"
+});
+
+/* Right cluster of the header row: [trailing] then the kebab. One shared
+ * wrapper so a card can carry both a visible action and an overflow menu, and
+ * so propagation is stopped once for the whole interactive cluster. */
+var HEADER_END_SX = Object.freeze({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "var(--s-1)",
+  flexShrink: 0
+});
+
+/** One label/value pair in the card's `kv` grid. Mirrors v2.KV's own props. */
+
+function MobileRowCard(_ref) {
+  var leading = _ref.leading,
+    trailing = _ref.trailing,
+    title = _ref.title,
+    _ref$titleMono = _ref.titleMono,
+    titleMono = _ref$titleMono === void 0 ? false : _ref$titleMono,
+    subtitle = _ref.subtitle,
+    chips = _ref.chips,
+    kv = _ref.kv,
+    meta = _ref.meta,
+    actions = _ref.actions,
+    actionsAriaLabel = _ref.actionsAriaLabel;
+  // Filter out divider entries (OverflowMenu separator marks) and
+  // null/undefined actions so the kebab only renders when there is
+  // at least one real action available.
+  var visibleActions = React.useMemo(function () {
+    if (!Array.isArray(actions)) return [];
+    return actions.filter(function (a) {
+      return a && !a.divider;
+    });
+  }, [actions]);
+  var visibleChips = React.useMemo(function () {
+    if (!Array.isArray(chips)) return [];
+    return chips.filter(Boolean);
+  }, [chips]);
+  var metaParts = React.useMemo(function () {
+    if (!Array.isArray(meta)) return [];
+    return meta.filter(function (p) {
+      return p != null && p !== "";
+    });
+  }, [meta]);
+
+  /* Only `label` is required — a pair with an empty value is kept on purpose so
+   * KV renders its "—" placeholder and the grid keeps its shape across rows.
+   * Entries missing a label are dropped: KV would emit an empty eyebrow and an
+   * aria-labelledby pointing at nothing. */
+  var kvPairs = React.useMemo(function () {
+    if (!Array.isArray(kv)) return [];
+    return kv.filter(function (p) {
+      return p != null && p.label != null && p.label !== "";
+    });
+  }, [kv]);
+  var hasActions = visibleActions.length > 0;
+  var hasTitle = title != null && title !== "";
+  var hasLeading = leading != null && leading !== "";
+  var hasTrailing = trailing != null && trailing !== "";
+  var hasHeader = hasTitle || hasActions || hasLeading || hasTrailing;
+  var hasSubtitle = subtitle != null && subtitle !== "";
+
+  // Title attribute (native hover tooltip) is set only when the value
+  // is a string — wrapping a React node yields a "[object Object]"
+  // tooltip which is worse than no tooltip.
+  var titleAttr = typeof title === "string" ? title : undefined;
+  var subtitleAttr = typeof subtitle === "string" ? subtitle : undefined;
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: CARD_INNER_SX,
+    children: [hasHeader && /*#__PURE__*/_jsxs(Box, {
+      sx: HEADER_SX,
+      children: [(hasLeading || hasTitle) && /*#__PURE__*/_jsxs(Box, {
+        sx: HEADER_MAIN_SX,
+        children: [hasLeading && /*#__PURE__*/_jsx(Box, {
+          sx: LEADING_SX,
+          children: leading
+        }), hasTitle && /*#__PURE__*/_jsx(Box, {
+          sx: titleMono ? TITLE_MONO_SX : TITLE_BASE_SX,
+          title: titleAttr,
+          children: title
+        })]
+      }), (hasTrailing || hasActions) &&
+      /*#__PURE__*/
+      // The card itself is the click target (wired by DataGrid's
+      // mobile card wrapper). Stop propagation on the whole
+      // interactive cluster so firing a visible action, or opening
+      // the kebab, doesn't also fire onRowClick.
+      _jsxs(Box, {
+        sx: HEADER_END_SX,
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        },
+        onKeyDown: function onKeyDown(e) {
+          return e.stopPropagation();
+        },
+        children: [hasTrailing && trailing, hasActions && /*#__PURE__*/_jsx(OverflowMenu, _objectSpread(_objectSpread({}, actionsAriaLabel !== undefined ? {
+          ariaLabel: actionsAriaLabel
+        } : {}), actions !== undefined ? {
+          actions: actions
+        } : {}))]
+      })]
+    }), hasSubtitle && /*#__PURE__*/_jsx(Box, {
+      sx: SUBTITLE_SX,
+      title: subtitleAttr,
+      children: subtitle
+    }), visibleChips.length > 0 && /*#__PURE__*/_jsx(Box, {
+      sx: CHIPS_SX,
+      children: visibleChips.map(function (c, i) {
+        return /*#__PURE__*/_jsx(React.Fragment, {
+          children: c
+        }, i);
+      })
+    }), kvPairs.length > 0 && /*#__PURE__*/_jsx(Box, {
+      sx: KV_GRID_SX,
+      children: kvPairs.map(function (pair, i) {
+        return /*#__PURE__*/_jsx(KV, _objectSpread(_objectSpread(_objectSpread({
+          label: pair.label
+        }, pair.value !== undefined ? {
+          value: pair.value
+        } : {}), pair.mono !== undefined ? {
+          mono: pair.mono
+        } : {}), pair.fallback !== undefined ? {
+          fallback: pair.fallback
+        } : {}), i);
+      })
+    }), metaParts.length > 0 && /*#__PURE__*/_jsx(Box, {
+      sx: META_SX,
+      children: metaParts.join(" · ")
+    })]
+  });
+}
+export default MobileRowCard;
+//# sourceMappingURL=MobileRowCard.js.map