@portnet/ui 6.0.0 → 6.0.2

package/dist/esm/v2/patterns/NetworkErrorBanner.js

@@ -0,0 +1,72 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import ErrorIcon from "@mui/icons-material/ErrorOutlined";
+
+/**
+ * NetworkErrorBanner - Portnet UI v2 (pattern)
+ *
+ * Charter R-4.3 - erreur réseau globale = bandeau persistant top, "Réessayer".
+ * Z-index 2000 (above modals).
+ *
+ *   <NetworkErrorBanner
+ *     visible={!online}
+ *     message="Connexion perdue."
+ *     onRetry={refresh}
+ *   />
+ *
+ * Localisation (FR / EN / AR):
+ *   `message` and `retryLabel` are direct overrides on the props.
+ *   Defaults stay French for back-compat.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function NetworkErrorBanner(_ref) {
+  var visible = _ref.visible,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "Connexion perdue." : _ref$message,
+    onRetry = _ref.onRetry,
+    _ref$retryLabel = _ref.retryLabel,
+    retryLabel = _ref$retryLabel === void 0 ? "Réessayer" : _ref$retryLabel;
+  if (!visible) return null;
+  return /*#__PURE__*/_jsxs(Box, {
+    role: "alert",
+    "aria-live": "assertive",
+    className: "pui-net-error-banner",
+    children: [/*#__PURE__*/_jsx(ErrorIcon, {
+      fontSize: "small",
+      "aria-hidden": "true"
+    }), /*#__PURE__*/_jsx("span", {
+      children: message
+    }), onRetry && /*#__PURE__*/_jsx(Box, {
+      component: "button",
+      type: "button",
+      onClick: onRetry,
+      className: "pui-net-error-banner-retry",
+      sx: {
+        // R-AI.1 - tokenised inverse colour mix (was rgba(255,255,255,...))
+        background: "color-mix(in srgb, var(--fg-inverse) 20%, transparent)",
+        border: "1px solid color-mix(in srgb, var(--fg-inverse) 35%, transparent)",
+        color: "inherit",
+        borderRadius: "var(--r-sm)",
+        padding: "var(--s-1) var(--s-3)",
+        fontSize: "var(--text-xs)",
+        fontWeight: "var(--fw-semibold)",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        // NEB-1 - logical inline-start margin so it sits correctly under RTL.
+        marginInlineStart: 0.5,
+        transition: "background var(--duration-fast, 80ms) ease",
+        "&:hover": {
+          background: "color-mix(in srgb, var(--fg-inverse) 30%, transparent)"
+        },
+        // R-F.1 - focus visible required, charter §05.
+        "&:focus-visible": {
+          outline: "2px solid var(--fg-inverse)",
+          outlineOffset: "var(--pui-outline-offset)"
+        }
+      },
+      children: retryLabel
+    })]
+  });
+}
+export default NetworkErrorBanner;
+//# sourceMappingURL=NetworkErrorBanner.js.map

package/dist/esm/v2/patterns/NetworkErrorBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkErrorBanner.js","names":["React","Box","ErrorIcon","jsx","_jsx","jsxs","_jsxs","NetworkErrorBanner","_ref","visible","_ref$message","message","onRetry","_ref$retryLabel","retryLabel","role","className","children","fontSize","component","type","onClick","sx","background","border","color","borderRadius","padding","fontWeight","cursor","fontFamily","marginInlineStart","transition","outline","outlineOffset"],"sources":["../../../../src/lib/v2/patterns/NetworkErrorBanner.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport ErrorIcon from \"@mui/icons-material/ErrorOutlined\";\r\n\r\n/**\r\n * NetworkErrorBanner - Portnet UI v2 (pattern)\r\n *\r\n * Charter R-4.3 - erreur réseau globale = bandeau persistant top, \"Réessayer\".\r\n * Z-index 2000 (above modals).\r\n *\r\n *   <NetworkErrorBanner\r\n *     visible={!online}\r\n *     message=\"Connexion perdue.\"\r\n *     onRetry={refresh}\r\n *   />\r\n *\r\n * Localisation (FR / EN / AR):\r\n *   `message` and `retryLabel` are direct overrides on the props.\r\n *   Defaults stay French for back-compat.\r\n */\r\n\r\nexport interface NetworkErrorBannerProps {\r\n  visible?: boolean | undefined;\r\n  message?: React.ReactNode | undefined;\r\n  onRetry?: (() => void) | undefined;\r\n  retryLabel?: React.ReactNode | undefined;\r\n}\r\n\r\nfunction NetworkErrorBanner({\r\n  visible,\r\n  message = \"Connexion perdue.\",\r\n  onRetry,\r\n  retryLabel = \"Réessayer\",\r\n}: NetworkErrorBannerProps) {\r\n  if (!visible) return null;\r\n  return (\r\n    <Box role=\"alert\" aria-live=\"assertive\" className=\"pui-net-error-banner\">\r\n      <ErrorIcon fontSize=\"small\" aria-hidden=\"true\" />\r\n      <span>{message}</span>\r\n      {onRetry && (\r\n        <Box\r\n          component=\"button\"\r\n          type=\"button\"\r\n          onClick={onRetry}\r\n          className=\"pui-net-error-banner-retry\"\r\n          sx={{\r\n            // R-AI.1 - tokenised inverse colour mix (was rgba(255,255,255,...))\r\n            background: \"color-mix(in srgb, var(--fg-inverse) 20%, transparent)\",\r\n            border:\r\n              \"1px solid color-mix(in srgb, var(--fg-inverse) 35%, transparent)\",\r\n            color: \"inherit\",\r\n            borderRadius: \"var(--r-sm)\",\r\n            padding: \"var(--s-1) var(--s-3)\",\r\n            fontSize: \"var(--text-xs)\",\r\n            fontWeight: \"var(--fw-semibold)\",\r\n            cursor: \"pointer\",\r\n            fontFamily: \"inherit\",\r\n            // NEB-1 - logical inline-start margin so it sits correctly under RTL.\r\n            marginInlineStart: 0.5,\r\n            transition: \"background var(--duration-fast, 80ms) ease\",\r\n            \"&:hover\": {\r\n              background:\r\n                \"color-mix(in srgb, var(--fg-inverse) 30%, transparent)\",\r\n            },\r\n            // R-F.1 - focus visible required, charter §05.\r\n            \"&:focus-visible\": {\r\n              outline: \"2px solid var(--fg-inverse)\",\r\n              outlineOffset: \"var(--pui-outline-offset)\",\r\n            },\r\n          }}\r\n        >\r\n          {retryLabel}\r\n        </Box>\r\n      )}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default NetworkErrorBanner;\r\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;AACnC,OAAOC,SAAS,MAAM,mCAAmC;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAfA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAwBA,SAASC,kBAAkBA,CAAAC,IAAA,EAKC;EAAA,IAJ1BC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAAC,YAAA,GAAAF,IAAA,CACPG,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,mBAAmB,GAAAA,YAAA;IAC7BE,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAAC,eAAA,GAAAL,IAAA,CACPM,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,WAAW,GAAAA,eAAA;EAExB,IAAI,CAACJ,OAAO,EAAE,OAAO,IAAI;EACzB,oBACEH,KAAA,CAACL,GAAG;IAACc,IAAI,EAAC,OAAO;IAAC,aAAU,WAAW;IAACC,SAAS,EAAC,sBAAsB;IAAAC,QAAA,gBACtEb,IAAA,CAACF,SAAS;MAACgB,QAAQ,EAAC,OAAO;MAAC,eAAY;IAAM,CAAE,CAAC,eACjDd,IAAA;MAAAa,QAAA,EAAON;IAAO,CAAO,CAAC,EACrBC,OAAO,iBACNR,IAAA,CAACH,GAAG;MACFkB,SAAS,EAAC,QAAQ;MAClBC,IAAI,EAAC,QAAQ;MACbC,OAAO,EAAET,OAAQ;MACjBI,SAAS,EAAC,4BAA4B;MACtCM,EAAE,EAAE;QACF;QACAC,UAAU,EAAE,wDAAwD;QACpEC,MAAM,EACJ,kEAAkE;QACpEC,KAAK,EAAE,SAAS;QAChBC,YAAY,EAAE,aAAa;QAC3BC,OAAO,EAAE,uBAAuB;QAChCT,QAAQ,EAAE,gBAAgB;QAC1BU,UAAU,EAAE,oBAAoB;QAChCC,MAAM,EAAE,SAAS;QACjBC,UAAU,EAAE,SAAS;QACrB;QACAC,iBAAiB,EAAE,GAAG;QACtBC,UAAU,EAAE,4CAA4C;QACxD,SAAS,EAAE;UACTT,UAAU,EACR;QACJ,CAAC;QACD;QACA,iBAAiB,EAAE;UACjBU,OAAO,EAAE,6BAA6B;UACtCC,aAAa,EAAE;QACjB;MACF,CAAE;MAAAjB,QAAA,EAEDH;IAAU,CACR,CACN;EAAA,CACE,CAAC;AAEV;AAEA,eAAeP,kBAAkB","ignoreList":[]}

package/dist/esm/v2/patterns/PageContent.js

@@ -0,0 +1,62 @@
+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";
+
+/**
+ * PageContent — Portnet UI v2 (pattern)
+ *
+ * Charter §07 · Template canonique — zone contenu (§7.1 bis).
+ *
+ * Wraps the main content zone inside the shell applicatif with the
+ * canonical responsive padding and vertical gap defined in §7.1 bis:
+ *
+ *   xs  ( 0 – 480 px )  → padding  12 px  (--s-3)
+ *   sm  ( 481 – 1023 px) → padding  16 px  (--s-4)
+ *   lg  ( 1024 px +    ) → padding  24 px  (--s-6)
+ *
+ * Usage:
+ *   import { PageContent } from "@portnet/ui";
+ *
+ *   <PageContent>
+ *     <FilterCard />
+ *     <DataGrid ... />
+ *   </PageContent>
+ *
+ * Override gap or add extra sx when the default section gap
+ * (var(--s-4) = 16 px) is not appropriate for the context.
+ *
+ *   <PageContent gap="var(--s-6)" sx={{ maxWidth: 720 }}>
+ *     ...
+ *   </PageContent>
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function PageContent(_ref) {
+  var children = _ref.children,
+    gap = _ref.gap,
+    sx = _ref.sx;
+  return /*#__PURE__*/_jsx(Box, {
+    sx: _objectSpread({
+      /* Responsive padding — charter §7.1 bis */
+      padding: {
+        xs: "var(--s-3)" /* 12 px — mobile */,
+        sm: "var(--s-4)" /* 16 px — tablet */,
+        lg: "var(--s-6)" /* 24 px — desktop */
+      },
+      /* Section layout */
+      display: "flex",
+      flexDirection: "column",
+      gap: gap !== null && gap !== void 0 ? gap : "var(--s-4)",
+      /* Prevent content from overflowing the viewport on narrow screens
+         while still allowing inner scroll containers (DataGrid) to work. */
+      minWidth: 0
+    }, sx),
+    children: children
+  });
+}
+export default PageContent;
+//# sourceMappingURL=PageContent.js.map

package/dist/esm/v2/patterns/PageContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageContent.js","names":["React","Box","jsx","_jsx","PageContent","_ref","children","gap","sx","_objectSpread","padding","xs","sm","lg","display","flexDirection","minWidth"],"sources":["../../../../src/lib/v2/patterns/PageContent.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 type { SystemStyleObject } from \"@mui/system\";\r\n\r\n/**\r\n * PageContent — Portnet UI v2 (pattern)\r\n *\r\n * Charter §07 · Template canonique — zone contenu (§7.1 bis).\r\n *\r\n * Wraps the main content zone inside the shell applicatif with the\r\n * canonical responsive padding and vertical gap defined in §7.1 bis:\r\n *\r\n *   xs  ( 0 – 480 px )  → padding  12 px  (--s-3)\r\n *   sm  ( 481 – 1023 px) → padding  16 px  (--s-4)\r\n *   lg  ( 1024 px +    ) → padding  24 px  (--s-6)\r\n *\r\n * Usage:\r\n *   import { PageContent } from \"@portnet/ui\";\r\n *\r\n *   <PageContent>\r\n *     <FilterCard />\r\n *     <DataGrid ... />\r\n *   </PageContent>\r\n *\r\n * Override gap or add extra sx when the default section gap\r\n * (var(--s-4) = 16 px) is not appropriate for the context.\r\n *\r\n *   <PageContent gap=\"var(--s-6)\" sx={{ maxWidth: 720 }}>\r\n *     ...\r\n *   </PageContent>\r\n */\r\n\r\nexport interface PageContentProps {\r\n  /** Page sections / content */\r\n  children?: React.ReactNode | undefined;\r\n  /** Override the vertical gap between direct children (default var(--s-4)) */\r\n  gap?: string | undefined;\r\n  /** MUI sx overrides applied to the root Box */\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nfunction PageContent({ children, gap, sx }: PageContentProps) {\r\n  return (\r\n    <Box\r\n      sx={{\r\n        /* Responsive padding — charter §7.1 bis */\r\n        padding: {\r\n          xs: \"var(--s-3)\" /* 12 px — mobile */,\r\n          sm: \"var(--s-4)\" /* 16 px — tablet */,\r\n          lg: \"var(--s-6)\" /* 24 px — desktop */,\r\n        },\r\n        /* Section layout */\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: gap ?? \"var(--s-4)\",\r\n        /* Prevent content from overflowing the viewport on narrow screens\r\n           while still allowing inner scroll containers (DataGrid) to work. */\r\n        minWidth: 0,\r\n        ...(sx as SystemStyleObject<Theme>),\r\n      }}\r\n    >\r\n      {children}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default PageContent;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;;AAInC;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;AA1BA,SAAAC,GAAA,IAAAC,IAAA;AAqCA,SAASC,WAAWA,CAAAC,IAAA,EAA0C;EAAA,IAAvCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IAAEC,EAAE,GAAAH,IAAA,CAAFG,EAAE;EACtC,oBACEL,IAAA,CAACF,GAAG;IACFO,EAAE,EAAAC,aAAA;MACA;MACAC,OAAO,EAAE;QACPC,EAAE,EAAE,YAAY,CAAC;QACjBC,EAAE,EAAE,YAAY,CAAC;QACjBC,EAAE,EAAE,YAAY,CAAC;MACnB,CAAC;MACD;MACAC,OAAO,EAAE,MAAM;MACfC,aAAa,EAAE,QAAQ;MACvBR,GAAG,EAAEA,GAAG,aAAHA,GAAG,cAAHA,GAAG,GAAI,YAAY;MACxB;AACR;MACQS,QAAQ,EAAE;IAAC,GACPR,EAAE,CACN;IAAAF,QAAA,EAEDA;EAAQ,CACN,CAAC;AAEV;AAEA,eAAeF,WAAW","ignoreList":[]}