@portnet/ui 6.0.0 → 6.0.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.js","names":["React","Box","ErrorIcon","jsx","_jsx","jsxs","_jsxs","FieldError","_ref","children","id","sx","role","_objectSpread","display","alignItems","gap","color","fontSize","fontWeight","lineHeight","marginInlineStart","flexShrink","style","marginTop","component"],"sources":["../../../../src/lib/v2/components/FieldError.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 ErrorIcon from \"@mui/icons-material/ErrorOutlined\";\r\n\r\n/**\r\n * FieldError — Portnet UI v2\r\n *\r\n * Charter R-4.1 MUST: « Toute erreur de champ s'affiche SOUS le champ, en rouge,\r\n * AVEC ICÔNE, max 1 phrase, verbe d'action. »\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * WHY THIS BELONGS IN THE LIBRARY (capability gap G-18)\r\n *\r\n * Two defects closed at once, and they were the same defect seen from both ends.\r\n *\r\n * 1. `Field` rendered its error message as a bare `FormHelperText` — red, under\r\n *    the field, one sentence, and NO ICON. R-4.1 is a MUST and the canonical\r\n *    field wrapper of the design system did not satisfy it, so every module\r\n *    inherited the gap on every form.\r\n *\r\n * 2. A field error is not always attached to a `Field`. A LIST-level error\r\n *    (`errors.articles`, `errors.autorisationPdf` — a Formik array or an upload\r\n *    slot) has no single control to wrap, and `Field` requires exactly one\r\n *    `children` element. Hosts therefore hand-rolled the block: addpe-fe's\r\n *    `InlineFieldAlert` reimplemented the icon + `role=\"alert\"` + danger token\r\n *    recipe locally — and, ironically, was MORE charter-compliant than the\r\n *    shared component it could not use.\r\n *\r\n * Owning the renderer here means the two paths cannot drift: the error a user\r\n * sees under an `<Input>` and the one under an articles table are the same\r\n * component.\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n *\r\n * Used INSIDE `Field` (it supplies `id`, wired to the control's\r\n * `aria-describedby`), and standalone by a host:\r\n *\r\n *   {typeof errors.articles === \"string\" && (\r\n *     <FieldError sx={{ marginTop: \"var(--s-2)\" }}>{errors.articles}</FieldError>\r\n *   )}\r\n *\r\n * Accessibility\r\n *   - `role=\"alert\"`: the element MOUNTS when the error appears, which is what\r\n *     makes a screen reader announce it. Do not render it permanently with empty\r\n *     content — an always-present live region announces nothing on change.\r\n *   - The icon is `aria-hidden`: it is redundant with the message, and R-Ar.2\r\n *     forbids a decorative icon carrying an accessible name.\r\n *   - Iconography is deliberately the SAME as `Banner`'s error variant\r\n *     (`ErrorOutlined`), so \"something is wrong\" reads identically whether it\r\n *     surfaces inline or in a banner.\r\n *\r\n * Colour: the message TEXT takes `--danger-fg`, the icon takes `--danger`. That\r\n * split is not cosmetic and it is the rule `KPICard` already documents for its\r\n * delta indicator: `--danger` is the VIVID UI colour, held to WCAG 1.4.11's 3:1\r\n * non-text threshold, while `--danger-fg` is the TEXT colour, held to 1.4.3's\r\n * 4.5:1. Using `--danger` for the message would render it at a ratio calibrated\r\n * for icons and borders — which is what the module-local `InlineFieldAlert` this\r\n * component replaced did, and what `Field`'s own error text did before it\r\n * delegated here. Promoting that mistake into a shared component would have made\r\n * it fleet-wide, on every field error of every module.\r\n *\r\n * No `!important` — the previous `FormHelperText` needed one to beat MUI's own\r\n * `Mui-error` colour; rendering a plain Box removes the specificity fight.\r\n */\r\n\r\nexport interface FieldErrorProps {\r\n  /** The message. One sentence, action verb (Charter §09.3). */\r\n  children: React.ReactNode;\r\n  /**\r\n   * DOM id referenced by the control's `aria-describedby`. `Field` supplies it;\r\n   * a standalone list-level error usually has nothing to bind to and omits it.\r\n   */\r\n  id?: string | undefined;\r\n  /**\r\n   * Spacing / layout overrides. Standalone call sites typically need a\r\n   * `marginTop`; inside `Field` the vertical rhythm is already handled.\r\n   */\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nfunction FieldError({ children, id, sx }: FieldErrorProps) {\r\n  return (\r\n    <Box\r\n      role=\"alert\"\r\n      id={id}\r\n      sx={{\r\n        display: \"flex\",\r\n        // `flex-start`, not `center`: a message that wraps to two lines must\r\n        // keep its icon aligned with the FIRST line, not vertically centred\r\n        // against the whole block.\r\n        alignItems: \"flex-start\",\r\n        gap: \"var(--s-1)\",\r\n        // WCAG 1.4.3 — message text at the 4.5:1-calibrated token, NOT `--danger`\r\n        // (see the colour note in this file's header).\r\n        color: \"var(--danger-fg)\",\r\n        fontSize: \"var(--text-xs)\",\r\n        fontWeight: \"var(--fw-medium)\",\r\n        lineHeight: \"var(--lh-normal)\",\r\n        // RTL-safe: resets the logical inline-start edge, so the message is\r\n        // flush with the control in both directions.\r\n        marginInlineStart: 0,\r\n        ...sx,\r\n      }}\r\n    >\r\n      <ErrorIcon\r\n        aria-hidden=\"true\"\r\n        /* Test hook — the glyph has no role and no accessible name by design\r\n         * (R-Ar.2), so no semantic query reaches it. Same sanctioned escape\r\n         * hatch as FileCard's filecard-icon, and it guards the same contract:\r\n         * a decorative icon must not be announced. */\r\n        data-testid=\"fielderror-icon\"\r\n        sx={{\r\n          // --text-h3 is the 16px token; matches the message's optical scale.\r\n          fontSize: \"var(--text-h3)\",\r\n          flexShrink: 0,\r\n          // WCAG 1.4.11 — the glyph stays VIVID at the 3:1 non-text threshold,\r\n          // which is the whole point of keeping two danger tokens.\r\n          color: \"var(--danger)\",\r\n        }}\r\n        // Optical alignment of the glyph with the first text line. Same\r\n        // rationale (and same 1px order of magnitude) as Banner's leading icon:\r\n        // a deliberate non-token value, not a spacing-scale concern.\r\n        style={{ marginTop: 1 }}\r\n      />\r\n      <Box component=\"span\">{children}</Box>\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default FieldError;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;AAEnC,OAAOC,SAAS,MAAM,mCAAmC;;AAEzD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AA1DA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA2EA,SAASC,UAAUA,CAAAC,IAAA,EAAwC;EAAA,IAArCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IAAEC,EAAE,GAAAH,IAAA,CAAFG,EAAE;EACpC,oBACEL,KAAA,CAACL,GAAG;IACFW,IAAI,EAAC,OAAO;IACZF,EAAE,EAAEA,EAAG;IACPC,EAAE,EAAAE,aAAA;MACAC,OAAO,EAAE,MAAM;MACf;MACA;MACA;MACAC,UAAU,EAAE,YAAY;MACxBC,GAAG,EAAE,YAAY;MACjB;MACA;MACAC,KAAK,EAAE,kBAAkB;MACzBC,QAAQ,EAAE,gBAAgB;MAC1BC,UAAU,EAAE,kBAAkB;MAC9BC,UAAU,EAAE,kBAAkB;MAC9B;MACA;MACAC,iBAAiB,EAAE;IAAC,GACjBV,EAAE,CACL;IAAAF,QAAA,gBAEFL,IAAA,CAACF,SAAS;MACR,eAAY;MACZ;AACR;AACA;AACA,oDAHQ;MAIA,eAAY,iBAAiB;MAC7BS,EAAE,EAAE;QACF;QACAO,QAAQ,EAAE,gBAAgB;QAC1BI,UAAU,EAAE,CAAC;QACb;QACA;QACAL,KAAK,EAAE;MACT;MACA;MACA;MACA;MAAA;MACAM,KAAK,EAAE;QAAEC,SAAS,EAAE;MAAE;IAAE,CACzB,CAAC,eACFpB,IAAA,CAACH,GAAG;MAACwB,SAAS,EAAC,MAAM;MAAAhB,QAAA,EAAEA;IAAQ,CAAM,CAAC;EAAA,CACnC,CAAC;AAEV;AAEA,eAAeF,UAAU","ignoreList":[]}

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

@@ -0,0 +1,202 @@
+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 _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; }
+import * as React from "react";
+import Tooltip from "@mui/material/Tooltip";
+import IconButton from "@mui/material/IconButton";
+import Box from "@mui/material/Box";
+import Popover from "@mui/material/Popover";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutlineOutlined";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+
+/**
+ * FieldHelp - Portnet UI v2 (component)
+ *
+ * Charter §03 · Component "FieldHelp · Contextual help".
+ *
+ * A small icon-button affordance that hosts drop next to labels,
+ * section titles, or anywhere a user might benefit from just-in-
+ * time guidance without cluttering the primary visual hierarchy.
+ *
+ * Behaviour modes:
+ *   - tooltip: MUI Tooltip (default for short string content).
+ *   - popover: MUI Popover, click to open. Used when content is
+ *     long (>80 chars) or when a distinct `title` is provided.
+ *   - auto:    Picks tooltip vs popover via the heuristic above.
+ *
+ * Usage:
+ *   <FieldHelp content="Référence unique de l'autorisation" />
+ *   <FieldHelp
+ *     title="Détails"
+ *     content={<>Texte long avec <b>JSX</b>.</>}
+ *     variant="popover"
+ *   />
+ *
+ * A11y (audit Batch 5, finding B5-1; Batch 19, FH-1):
+ *   Popover variant trigger carries aria-haspopup="dialog" +
+ *   aria-expanded reflecting the open state — WAI-ARIA disclosure
+ *   pattern. The Popover paper itself carries role="dialog" and an
+ *   accessible name (FH-1): aria-labelledby the visible title when
+ *   one is rendered, else aria-label from the ariaLabel prop — so
+ *   the region the trigger promises actually resolves as a named
+ *   dialog to assistive tech. Tooltip variant relies on MUI
+ *   Tooltip's automatic aria-describedby plumbing on the wrapped child.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var HELP_THRESHOLD_CHARS = 80;
+var HELP_ICON_SX = Object.freeze({
+  padding: "2px",
+  color: "var(--fg-subtle)",
+  marginInlineStart: "var(--s-1)",
+  "&:hover, &:focus-visible": {
+    color: "var(--accent)",
+    background: "var(--bg-hover)"
+  }
+});
+var POPOVER_PAPER_SX = Object.freeze({
+  // Cap at 360 on desktop, but never exceed the viewport on small
+  // phones (320–392px): MUI Popover positions the anchor but does NOT
+  // shrink the paper width to the viewport, so a bare maxWidth:360
+  // overflows the screen edge and forces horizontal scroll (WCAG 1.4.10
+  // Reflow). The min() inset keeps the paper on screen with a single
+  // --s-4 gutter on either side.
+  maxWidth: "min(360px, calc(100vw - var(--s-4) * 2))",
+  padding: "var(--s-4)",
+  borderRadius: "var(--r-md)",
+  border: "1px solid var(--border)",
+  boxShadow: "var(--shadow-md)"
+});
+var POPOVER_TITLE_SX = Object.freeze({
+  fontSize: "var(--text-sm)",
+  fontWeight: "var(--fw-semibold)",
+  color: "var(--fg)",
+  marginBottom: "var(--s-1)"
+});
+var POPOVER_BODY_SX = Object.freeze({
+  fontSize: "var(--text-sm)",
+  color: "var(--fg-muted)",
+  // --lh-loose = 1.6 (typography.js). Was `var(--lh-relaxed, 1.6)` —
+  // a dangling reference to a token that doesn't exist in the v2
+  // lineHeight scale (only tight/snug/normal/loose are emitted). The
+  // fallback `1.6` happened to match --lh-loose by coincidence; this
+  // makes the dependency explicit and lets future retuning flow.
+  lineHeight: "var(--lh-loose)"
+});
+function resolveVariant(variant, content, title) {
+  if (variant !== "auto") return variant;
+  if (title) return "popover";
+  if (typeof content === "string" && content.length > HELP_THRESHOLD_CHARS) {
+    return "popover";
+  }
+  return "tooltip";
+}
+function FieldHelp(_ref) {
+  var content = _ref.content,
+    title = _ref.title,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "auto" : _ref$variant,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? "help" : _ref$icon,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "top" : _ref$placement,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? "Aide" : _ref$ariaLabel;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    anchorEl = _React$useState2[0],
+    setAnchorEl = _React$useState2[1];
+  // FH-1 — stable id so the dialog paper can be labelled by its visible
+  // title (used only when a title is rendered; see slotProps below).
+  var titleId = React.useId();
+  var effectiveVariant = resolveVariant(variant, content, title);
+  var IconComponent = icon === "info" ? InfoOutlinedIcon : HelpOutlineIcon;
+  if (effectiveVariant === "tooltip") {
+    return /*#__PURE__*/_jsx(Tooltip, {
+      title: content,
+      arrow: true,
+      placement: placement,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        "aria-label": ariaLabel,
+        sx: HELP_ICON_SX,
+        tabIndex: 0,
+        children: /*#__PURE__*/_jsx(IconComponent, {
+          sx: {
+            fontSize: 16
+          }
+        })
+      })
+    });
+  }
+  var handleOpen = function handleOpen(e) {
+    return setAnchorEl(e.currentTarget);
+  };
+  var handleClose = function handleClose() {
+    return setAnchorEl(null);
+  };
+  var open = !!anchorEl;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      size: "small",
+      "aria-label": ariaLabel
+      // R-Ar.6 / WAI-ARIA disclosure pattern — surfaces the
+      // overlay nature of the trigger to assistive tech. Without
+      // these attrs SR users hear a generic "Aide button" with
+      // no indication that activation opens content.
+      ,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      onClick: handleOpen,
+      sx: HELP_ICON_SX,
+      children: /*#__PURE__*/_jsx(IconComponent, {
+        sx: {
+          fontSize: 16
+        }
+      })
+    }), /*#__PURE__*/_jsxs(Popover, {
+      open: open,
+      anchorEl: anchorEl,
+      onClose: handleClose,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "left"
+      },
+      slotProps: {
+        paper: _objectSpread({
+          sx: POPOVER_PAPER_SX,
+          // FH-1 — the trigger promises a dialog; make the paper one and
+          // name it. Prefer the visible title (aria-labelledby, avoids a
+          // Label-in-Name mismatch); fall back to the ariaLabel prop.
+          role: "dialog"
+        }, title ? {
+          "aria-labelledby": titleId
+        } : {
+          "aria-label": ariaLabel
+        })
+      },
+      children: [title && /*#__PURE__*/_jsx(Box, {
+        id: titleId,
+        sx: POPOVER_TITLE_SX,
+        children: title
+      }), /*#__PURE__*/_jsx(Box, {
+        sx: POPOVER_BODY_SX,
+        children: content
+      })]
+    })]
+  });
+}
+export default FieldHelp;
+//# sourceMappingURL=FieldHelp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldHelp.js","names":["React","Tooltip","IconButton","Box","Popover","HelpOutlineIcon","InfoOutlinedIcon","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HELP_THRESHOLD_CHARS","HELP_ICON_SX","Object","freeze","padding","color","marginInlineStart","background","POPOVER_PAPER_SX","maxWidth","borderRadius","border","boxShadow","POPOVER_TITLE_SX","fontSize","fontWeight","marginBottom","POPOVER_BODY_SX","lineHeight","resolveVariant","variant","content","title","length","FieldHelp","_ref","_ref$variant","_ref$icon","icon","_ref$placement","placement","_ref$ariaLabel","ariaLabel","_React$useState","useState","_React$useState2","_slicedToArray","anchorEl","setAnchorEl","titleId","useId","effectiveVariant","IconComponent","arrow","children","size","sx","tabIndex","handleOpen","e","currentTarget","handleClose","open","onClick","onClose","anchorOrigin","vertical","horizontal","transformOrigin","slotProps","paper","_objectSpread","role","id"],"sources":["../../../../src/lib/v2/components/FieldHelp.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Tooltip from \"@mui/material/Tooltip\";\r\nimport type { TooltipProps } from \"@mui/material/Tooltip\";\r\nimport IconButton from \"@mui/material/IconButton\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Popover from \"@mui/material/Popover\";\r\nimport HelpOutlineIcon from \"@mui/icons-material/HelpOutlineOutlined\";\r\nimport InfoOutlinedIcon from \"@mui/icons-material/InfoOutlined\";\r\n\r\n/**\r\n * FieldHelp - Portnet UI v2 (component)\r\n *\r\n * Charter §03 · Component \"FieldHelp · Contextual help\".\r\n *\r\n * A small icon-button affordance that hosts drop next to labels,\r\n * section titles, or anywhere a user might benefit from just-in-\r\n * time guidance without cluttering the primary visual hierarchy.\r\n *\r\n * Behaviour modes:\r\n *   - tooltip: MUI Tooltip (default for short string content).\r\n *   - popover: MUI Popover, click to open. Used when content is\r\n *     long (>80 chars) or when a distinct `title` is provided.\r\n *   - auto:    Picks tooltip vs popover via the heuristic above.\r\n *\r\n * Usage:\r\n *   <FieldHelp content=\"Référence unique de l'autorisation\" />\r\n *   <FieldHelp\r\n *     title=\"Détails\"\r\n *     content={<>Texte long avec <b>JSX</b>.</>}\r\n *     variant=\"popover\"\r\n *   />\r\n *\r\n * A11y (audit Batch 5, finding B5-1; Batch 19, FH-1):\r\n *   Popover variant trigger carries aria-haspopup=\"dialog\" +\r\n *   aria-expanded reflecting the open state — WAI-ARIA disclosure\r\n *   pattern. The Popover paper itself carries role=\"dialog\" and an\r\n *   accessible name (FH-1): aria-labelledby the visible title when\r\n *   one is rendered, else aria-label from the ariaLabel prop — so\r\n *   the region the trigger promises actually resolves as a named\r\n *   dialog to assistive tech. Tooltip variant relies on MUI\r\n *   Tooltip's automatic aria-describedby plumbing on the wrapped child.\r\n */\r\n\r\nexport type FieldHelpVariant = \"auto\" | \"tooltip\" | \"popover\";\r\nexport type FieldHelpIcon = \"help\" | \"info\";\r\n\r\nexport interface FieldHelpProps {\r\n  /** Help content (tooltip title or popover body). */\r\n  content: React.ReactNode;\r\n  /** Optional popover title. When present, forces the popover variant. */\r\n  title?: React.ReactNode | undefined;\r\n  /** @default \"auto\" */\r\n  variant?: FieldHelpVariant | undefined;\r\n  /** @default \"help\" */\r\n  icon?: FieldHelpIcon | undefined;\r\n  /** Tooltip placement. @default \"top\" */\r\n  placement?: TooltipProps[\"placement\"] | undefined;\r\n  /** @default \"Aide\" */\r\n  ariaLabel?: string | undefined;\r\n}\r\n\r\nconst HELP_THRESHOLD_CHARS = 80;\r\n\r\nconst HELP_ICON_SX = Object.freeze({\r\n  padding: \"2px\",\r\n  color: \"var(--fg-subtle)\",\r\n  marginInlineStart: \"var(--s-1)\",\r\n  \"&:hover, &:focus-visible\": {\r\n    color: \"var(--accent)\",\r\n    background: \"var(--bg-hover)\",\r\n  },\r\n});\r\n\r\nconst POPOVER_PAPER_SX = Object.freeze({\r\n  // Cap at 360 on desktop, but never exceed the viewport on small\r\n  // phones (320–392px): MUI Popover positions the anchor but does NOT\r\n  // shrink the paper width to the viewport, so a bare maxWidth:360\r\n  // overflows the screen edge and forces horizontal scroll (WCAG 1.4.10\r\n  // Reflow). The min() inset keeps the paper on screen with a single\r\n  // --s-4 gutter on either side.\r\n  maxWidth: \"min(360px, calc(100vw - var(--s-4) * 2))\",\r\n  padding: \"var(--s-4)\",\r\n  borderRadius: \"var(--r-md)\",\r\n  border: \"1px solid var(--border)\",\r\n  boxShadow: \"var(--shadow-md)\",\r\n});\r\n\r\nconst POPOVER_TITLE_SX = Object.freeze({\r\n  fontSize: \"var(--text-sm)\",\r\n  fontWeight: \"var(--fw-semibold)\",\r\n  color: \"var(--fg)\",\r\n  marginBottom: \"var(--s-1)\",\r\n});\r\n\r\nconst POPOVER_BODY_SX = Object.freeze({\r\n  fontSize: \"var(--text-sm)\",\r\n  color: \"var(--fg-muted)\",\r\n  // --lh-loose = 1.6 (typography.js). Was `var(--lh-relaxed, 1.6)` —\r\n  // a dangling reference to a token that doesn't exist in the v2\r\n  // lineHeight scale (only tight/snug/normal/loose are emitted). The\r\n  // fallback `1.6` happened to match --lh-loose by coincidence; this\r\n  // makes the dependency explicit and lets future retuning flow.\r\n  lineHeight: \"var(--lh-loose)\",\r\n});\r\n\r\nfunction resolveVariant(\r\n  variant: FieldHelpVariant,\r\n  content: React.ReactNode,\r\n  title: React.ReactNode,\r\n): \"tooltip\" | \"popover\" {\r\n  if (variant !== \"auto\") return variant;\r\n  if (title) return \"popover\";\r\n  if (typeof content === \"string\" && content.length > HELP_THRESHOLD_CHARS) {\r\n    return \"popover\";\r\n  }\r\n  return \"tooltip\";\r\n}\r\n\r\nfunction FieldHelp({\r\n  content,\r\n  title,\r\n  variant = \"auto\",\r\n  icon = \"help\",\r\n  placement = \"top\",\r\n  ariaLabel = \"Aide\",\r\n}: FieldHelpProps) {\r\n  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);\r\n  // FH-1 — stable id so the dialog paper can be labelled by its visible\r\n  // title (used only when a title is rendered; see slotProps below).\r\n  const titleId = React.useId();\r\n\r\n  const effectiveVariant = resolveVariant(variant, content, title);\r\n  const IconComponent = icon === \"info\" ? InfoOutlinedIcon : HelpOutlineIcon;\r\n\r\n  if (effectiveVariant === \"tooltip\") {\r\n    return (\r\n      <Tooltip title={content} arrow placement={placement}>\r\n        <IconButton\r\n          size=\"small\"\r\n          aria-label={ariaLabel}\r\n          sx={HELP_ICON_SX}\r\n          tabIndex={0}\r\n        >\r\n          <IconComponent sx={{ fontSize: 16 }} />\r\n        </IconButton>\r\n      </Tooltip>\r\n    );\r\n  }\r\n\r\n  const handleOpen = (e: React.MouseEvent<HTMLElement>) => setAnchorEl(e.currentTarget);\r\n  const handleClose = () => setAnchorEl(null);\r\n  const open = !!anchorEl;\r\n\r\n  return (\r\n    <>\r\n      <IconButton\r\n        size=\"small\"\r\n        aria-label={ariaLabel}\r\n        // R-Ar.6 / WAI-ARIA disclosure pattern — surfaces the\r\n        // overlay nature of the trigger to assistive tech. Without\r\n        // these attrs SR users hear a generic \"Aide button\" with\r\n        // no indication that activation opens content.\r\n        aria-haspopup=\"dialog\"\r\n        aria-expanded={open}\r\n        onClick={handleOpen}\r\n        sx={HELP_ICON_SX}\r\n      >\r\n        <IconComponent sx={{ fontSize: 16 }} />\r\n      </IconButton>\r\n      <Popover\r\n        open={open}\r\n        anchorEl={anchorEl}\r\n        onClose={handleClose}\r\n        anchorOrigin={{ vertical: \"bottom\", horizontal: \"left\" }}\r\n        transformOrigin={{ vertical: \"top\", horizontal: \"left\" }}\r\n        slotProps={{\r\n          paper: {\r\n            sx: POPOVER_PAPER_SX,\r\n            // FH-1 — the trigger promises a dialog; make the paper one and\r\n            // name it. Prefer the visible title (aria-labelledby, avoids a\r\n            // Label-in-Name mismatch); fall back to the ariaLabel prop.\r\n            role: \"dialog\",\r\n            ...(title\r\n              ? { \"aria-labelledby\": titleId }\r\n              : { \"aria-label\": ariaLabel }),\r\n          },\r\n        }}\r\n      >\r\n        {title && (\r\n          <Box id={titleId} sx={POPOVER_TITLE_SX}>\r\n            {title}\r\n          </Box>\r\n        )}\r\n        <Box sx={POPOVER_BODY_SX}>{content}</Box>\r\n      </Popover>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default FieldHelp;\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,162 @@
+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 InsertDriveFileIcon from "@mui/icons-material/InsertDriveFileOutlined";
+import Surface from "./Surface";
+
+/**
+ * FileCard — Portnet UI v2
+ *
+ * A single attached document, as a row: leading icon, filename, optional meta
+ * line, action cluster on the trailing edge.
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * WHY THIS BELONGS IN THE LIBRARY (capability gap G-12)
+ *
+ * The library shipped `Dropzone` — the UPLOAD affordance — and nothing for the
+ * state right after it: the file, once attached, being displayed. So every
+ * screen that shows an attachment rebuilt the same row. In addpe-fe it exists
+ * THREE times, in three files, written by hand each time:
+ *
+ *   - Attachment (uploaded state)      padding --s-3 --s-4
+ *   - AutorisationPreviewDrawer (tab)  padding --s-4
+ *   - AutorisationDetail (tab)         padding --s-4 --s-5
+ *
+ * Read that padding column: three values for ONE concept. Nobody decided that —
+ * it is what happens when a recipe is retyped from memory three times, and it is
+ * exactly what Charter R-2.1 forbids (« un même concept = un même composant +
+ * un même libellé partout »). This component standardises on the compact
+ * `Surface` padding; the divergence was accidental, not intentional.
+ *
+ * The ellipsis logic is the other reason to own this. A filename is
+ * user-supplied, arbitrarily long, and must truncate without pushing the action
+ * buttons off the card — which needs `minWidth: 0` on the right ancestors and
+ * `flexShrink: 0` on the wrong ones. Two of the three local copies had it; the
+ * third relied on its container being wide enough.
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ *   <FileCard
+ *     name={doc.documentName || "Document.pdf"}
+ *     meta="248,50 Ko"
+ *     actions={
+ *       <Button variant="secondary" size="sm" icon={<CloudDownload />} onClick={dl}>
+ *         Télécharger
+ *       </Button>
+ *     }
+ *   />
+ *
+ * Presentational by design: no href, no fetching, no delete confirmation. Hosts
+ * own those (a blob URL, an API call, a `ConfirmDialog`) and pass the resulting
+ * buttons through `actions`.
+ *
+ * `name` is REQUIRED and typed `string`, deliberately. A filename fallback
+ * ("Document.pdf") is French copy and a business decision about what an unnamed
+ * attachment is called — that belongs to the host, not to the design system, and
+ * defaulting it here would silently hide a missing backend field. The `string`
+ * type also lets the component set `title={name}` so the full filename stays
+ * reachable on hover once it is ellipsized.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function FileCard(_ref) {
+  var name = _ref.name,
+    meta = _ref.meta,
+    icon = _ref.icon,
+    actions = _ref.actions,
+    sx = _ref.sx;
+  return /*#__PURE__*/_jsx(Surface, _objectSpread(_objectSpread({
+    tone: "subtle",
+    radius: "md",
+    padding: "compact"
+  }, sx !== undefined ? {
+    sx: sx
+  } : {}), {}, {
+    children: /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "var(--s-3)"
+      },
+      children: [/*#__PURE__*/_jsxs(Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--s-3)",
+          minWidth: 0,
+          flex: 1
+        },
+        children: [/*#__PURE__*/_jsx(Box, {
+          component: "span",
+          "aria-hidden": "true"
+          /* Test hook. The icon wrapper carries no role and no accessible
+           * name — by design — so there is no semantic query that can reach
+           * it, and the repo's eslint config rightly forbids container
+           * queries and direct node access in tests. A stable testid is the
+           * sanctioned escape hatch, and the contract it guards (R-Ar.2: a
+           * decorative glyph must NOT be announced) is worth a hook. */,
+          "data-testid": "filecard-icon",
+          sx: {
+            display: "inline-flex",
+            flexShrink: 0,
+            color: "var(--accent)",
+            // --text-display is the 26px token; the glyph sits at the optical
+            // scale the three local copies had converged on.
+            "& > *": {
+              fontSize: "var(--text-display)"
+            }
+          },
+          children: icon !== null && icon !== void 0 ? icon : /*#__PURE__*/_jsx(InsertDriveFileIcon, {})
+        }), /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            minWidth: 0
+          },
+          children: [/*#__PURE__*/_jsx(Box, {
+            title: name,
+            sx: {
+              fontSize: "var(--text-sm)",
+              fontWeight: "var(--fw-semibold)",
+              color: "var(--fg)",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children: name
+          }), meta != null && meta !== "" && /*#__PURE__*/_jsx(Box
+          /* Test hook — same rationale as filecard-icon. The contract is
+           * that this line is ABSENT rather than empty: a blank second
+           * line reads as missing data and changes the row height, which
+           * breaks the alignment of a list of files. "Absent, not empty"
+           * cannot be expressed by a text query. */, {
+            "data-testid": "filecard-meta",
+            sx: {
+              fontSize: "var(--text-xs)",
+              color: "var(--fg-subtle)",
+              // R-T.3 — tabular numerals on any numeric run.
+              fontVariantNumeric: "tabular-nums"
+            },
+            children: meta
+          })]
+        })]
+      }), actions != null &&
+      /*#__PURE__*/
+      /* `flexShrink: 0` — the buttons keep their intrinsic width; it is the
+         filename that yields. The inverse produced squashed labels. */
+      _jsx(Box, {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--s-2)",
+          flexShrink: 0
+        },
+        children: actions
+      })]
+    })
+  }));
+}
+export default FileCard;
+//# sourceMappingURL=FileCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileCard.js","names":["React","Box","InsertDriveFileIcon","Surface","jsx","_jsx","jsxs","_jsxs","FileCard","_ref","name","meta","icon","actions","sx","_objectSpread","tone","radius","padding","undefined","children","display","alignItems","justifyContent","gap","minWidth","flex","component","flexShrink","color","fontSize","title","fontWeight","whiteSpace","overflow","textOverflow","fontVariantNumeric"],"sources":["../../../../src/lib/v2/components/FileCard.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 InsertDriveFileIcon from \"@mui/icons-material/InsertDriveFileOutlined\";\r\nimport Surface from \"./Surface\";\r\n\r\n/**\r\n * FileCard — Portnet UI v2\r\n *\r\n * A single attached document, as a row: leading icon, filename, optional meta\r\n * line, action cluster on the trailing edge.\r\n *\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n * WHY THIS BELONGS IN THE LIBRARY (capability gap G-12)\r\n *\r\n * The library shipped `Dropzone` — the UPLOAD affordance — and nothing for the\r\n * state right after it: the file, once attached, being displayed. So every\r\n * screen that shows an attachment rebuilt the same row. In addpe-fe it exists\r\n * THREE times, in three files, written by hand each time:\r\n *\r\n *   - Attachment (uploaded state)      padding --s-3 --s-4\r\n *   - AutorisationPreviewDrawer (tab)  padding --s-4\r\n *   - AutorisationDetail (tab)         padding --s-4 --s-5\r\n *\r\n * Read that padding column: three values for ONE concept. Nobody decided that —\r\n * it is what happens when a recipe is retyped from memory three times, and it is\r\n * exactly what Charter R-2.1 forbids (« un même concept = un même composant +\r\n * un même libellé partout »). This component standardises on the compact\r\n * `Surface` padding; the divergence was accidental, not intentional.\r\n *\r\n * The ellipsis logic is the other reason to own this. A filename is\r\n * user-supplied, arbitrarily long, and must truncate without pushing the action\r\n * buttons off the card — which needs `minWidth: 0` on the right ancestors and\r\n * `flexShrink: 0` on the wrong ones. Two of the three local copies had it; the\r\n * third relied on its container being wide enough.\r\n * ─────────────────────────────────────────────────────────────────────────────\r\n *\r\n *   <FileCard\r\n *     name={doc.documentName || \"Document.pdf\"}\r\n *     meta=\"248,50 Ko\"\r\n *     actions={\r\n *       <Button variant=\"secondary\" size=\"sm\" icon={<CloudDownload />} onClick={dl}>\r\n *         Télécharger\r\n *       </Button>\r\n *     }\r\n *   />\r\n *\r\n * Presentational by design: no href, no fetching, no delete confirmation. Hosts\r\n * own those (a blob URL, an API call, a `ConfirmDialog`) and pass the resulting\r\n * buttons through `actions`.\r\n *\r\n * `name` is REQUIRED and typed `string`, deliberately. A filename fallback\r\n * (\"Document.pdf\") is French copy and a business decision about what an unnamed\r\n * attachment is called — that belongs to the host, not to the design system, and\r\n * defaulting it here would silently hide a missing backend field. The `string`\r\n * type also lets the component set `title={name}` so the full filename stays\r\n * reachable on hover once it is ellipsized.\r\n */\r\n\r\nexport interface FileCardProps {\r\n  /** Filename. Ellipsized when it overflows; mirrored into `title`. */\r\n  name: string;\r\n  /**\r\n   * Secondary line — size, date, content type. Rendered with tabular numerals\r\n   * so a column of file sizes aligns (R-T.3).\r\n   */\r\n  meta?: React.ReactNode | undefined;\r\n  /**\r\n   * Leading icon. Defaults to a generic document glyph; pass a specific one when\r\n   * the card's primary action is what identifies it (a download cloud, say).\r\n   * Rendered `aria-hidden` — the filename is the accessible name (R-Ar.2).\r\n   */\r\n  icon?: React.ReactNode | undefined;\r\n  /** Trailing action cluster. Pass `Button`s; the card does not invent any. */\r\n  actions?: React.ReactNode | undefined;\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nfunction FileCard({ name, meta, icon, actions, sx }: FileCardProps) {\r\n  return (\r\n    <Surface\r\n      tone=\"subtle\"\r\n      radius=\"md\"\r\n      padding=\"compact\"\r\n      {...(sx !== undefined ? { sx } : {})}\r\n    >\r\n      <Box\r\n        sx={{\r\n          display: \"flex\",\r\n          alignItems: \"center\",\r\n          justifyContent: \"space-between\",\r\n          gap: \"var(--s-3)\",\r\n        }}\r\n      >\r\n        {/* Identity block. `minWidth: 0` is load-bearing: without it a flex item\r\n            refuses to shrink below its content width and the filename pushes the\r\n            action cluster out of the card instead of truncating. */}\r\n        <Box\r\n          sx={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            gap: \"var(--s-3)\",\r\n            minWidth: 0,\r\n            flex: 1,\r\n          }}\r\n        >\r\n          <Box\r\n            component=\"span\"\r\n            aria-hidden=\"true\"\r\n            /* Test hook. The icon wrapper carries no role and no accessible\r\n             * name — by design — so there is no semantic query that can reach\r\n             * it, and the repo's eslint config rightly forbids container\r\n             * queries and direct node access in tests. A stable testid is the\r\n             * sanctioned escape hatch, and the contract it guards (R-Ar.2: a\r\n             * decorative glyph must NOT be announced) is worth a hook. */\r\n            data-testid=\"filecard-icon\"\r\n            sx={{\r\n              display: \"inline-flex\",\r\n              flexShrink: 0,\r\n              color: \"var(--accent)\",\r\n              // --text-display is the 26px token; the glyph sits at the optical\r\n              // scale the three local copies had converged on.\r\n              \"& > *\": { fontSize: \"var(--text-display)\" },\r\n            }}\r\n          >\r\n            {icon ?? <InsertDriveFileIcon />}\r\n          </Box>\r\n\r\n          <Box sx={{ minWidth: 0 }}>\r\n            <Box\r\n              title={name}\r\n              sx={{\r\n                fontSize: \"var(--text-sm)\",\r\n                fontWeight: \"var(--fw-semibold)\",\r\n                color: \"var(--fg)\",\r\n                whiteSpace: \"nowrap\",\r\n                overflow: \"hidden\",\r\n                textOverflow: \"ellipsis\",\r\n              }}\r\n            >\r\n              {name}\r\n            </Box>\r\n            {meta != null && meta !== \"\" && (\r\n              <Box\r\n                /* Test hook — same rationale as filecard-icon. The contract is\r\n                 * that this line is ABSENT rather than empty: a blank second\r\n                 * line reads as missing data and changes the row height, which\r\n                 * breaks the alignment of a list of files. \"Absent, not empty\"\r\n                 * cannot be expressed by a text query. */\r\n                data-testid=\"filecard-meta\"\r\n                sx={{\r\n                  fontSize: \"var(--text-xs)\",\r\n                  color: \"var(--fg-subtle)\",\r\n                  // R-T.3 — tabular numerals on any numeric run.\r\n                  fontVariantNumeric: \"tabular-nums\",\r\n                }}\r\n              >\r\n                {meta}\r\n              </Box>\r\n            )}\r\n          </Box>\r\n        </Box>\r\n\r\n        {actions != null && (\r\n          /* `flexShrink: 0` — the buttons keep their intrinsic width; it is the\r\n             filename that yields. The inverse produced squashed labels. */\r\n          <Box\r\n            sx={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: \"var(--s-2)\",\r\n              flexShrink: 0,\r\n            }}\r\n          >\r\n            {actions}\r\n          </Box>\r\n        )}\r\n      </Box>\r\n    </Surface>\r\n  );\r\n}\r\n\r\nexport default FileCard;\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,138 @@
+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 { mergeLabels } from "../utils/mergeLabels";
+
+/**
+ * FilterTab - Portnet UI v2
+ *
+ * Charter §03 · Component "FilterTabs". Pills used to quickly filter a list
+ * by status, with an active-state count and pop animation on update.
+ *
+ *   <FilterTab active={filter === "all"} count={42} onClick={() => setFilter("all")}>
+ *     Tous
+ *   </FilterTab>
+ *
+ * Localisation (FR / EN / AR):
+ *   <FilterTab labels={{
+ *     countLabel:   (n) => `${n} items`,
+ *     shortcutHint: (s) => `Shortcut: ${s}`,
+ *   }} ... />
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Module-scoped to avoid Temporal Dead Zone when an invalid `variant` is
+// passed: a local-const initialiser referencing palette.neutral before
+// palette finished initialising would throw ReferenceError.
+var PALETTES = {
+  neutral: {
+    activeBg: "var(--accent-soft)",
+    activeFg: "var(--accent)"
+  },
+  "new": {
+    activeBg: "var(--status-new-soft)",
+    activeFg: "var(--status-new-fg)"
+  },
+  sent: {
+    activeBg: "var(--status-sent-soft)",
+    activeFg: "var(--status-sent-fg)"
+  },
+  pending: {
+    activeBg: "var(--status-pending-soft)",
+    activeFg: "var(--status-pending-fg)"
+  },
+  approved: {
+    activeBg: "var(--status-approved-soft)",
+    activeFg: "var(--status-approved-fg)"
+  },
+  rejected: {
+    activeBg: "var(--status-rejected-soft)",
+    activeFg: "var(--status-rejected-fg)"
+  }
+};
+var DEFAULT_LABELS = Object.freeze({
+  countLabel: function countLabel(n) {
+    return "".concat(n, " \xE9l\xE9ments");
+  },
+  shortcutHint: function shortcutHint(s) {
+    return "Raccourci : ".concat(s);
+  }
+});
+function FilterTab(_ref) {
+  var _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    count = _ref.count,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "neutral" : _ref$variant,
+    onClick = _ref.onClick,
+    shortcut = _ref.shortcut,
+    labels = _ref.labels,
+    children = _ref.children;
+  var palette = PALETTES[variant] || PALETTES.neutral;
+  var L = mergeLabels(DEFAULT_LABELS, labels);
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "button",
+    type: "button",
+    "aria-pressed": active,
+    onClick: onClick,
+    title: shortcut ? L.shortcutHint(shortcut) : undefined,
+    sx: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "var(--s-2)",
+      // Compact pill: 5/12 px in literal terms, expressed against
+      // the spacing scale so any future rescale propagates.
+      padding: "calc(var(--s-1) + 1px) var(--s-3)",
+      borderRadius: "var(--r-full)",
+      border: "1px solid ".concat(active ? "var(--accent)" : "var(--border)"),
+      background: active ? palette.activeBg : "var(--surface)",
+      color: active ? palette.activeFg : "var(--fg-muted)",
+      fontSize: "var(--text-xs)",
+      // Was 650 (banned) / 500. var(--fw-semibold) is the canonical
+      // emphasised weight; var(--fw-medium) the resting one.
+      fontWeight: active ? "var(--fw-semibold)" : "var(--fw-medium)",
+      cursor: "pointer",
+      fontFamily: "inherit",
+      transition: "background var(--duration-fast, 120ms) ease, " + "color var(--duration-fast, 120ms) ease, " + "border-color var(--duration-fast, 120ms) ease",
+      // R-F.1 - focus-visible required, charter §05. The previous
+      // implementation had NO focus style; keyboard users got no
+      // feedback when tabbing through filter chips.
+      "&:focus-visible": {
+        outline: "2px solid var(--accent)",
+        outlineOffset: "var(--pui-outline-offset)"
+      },
+      "&:hover": _objectSpread({}, !active ? {
+        background: "var(--bg-hover)"
+      } : {})
+    },
+    children: [/*#__PURE__*/_jsx("span", {
+      children: children
+    }), count != null && /*#__PURE__*/_jsx(Box, {
+      component: "span",
+      "aria-label": L.countLabel(count),
+      sx: {
+        display: "inline-block",
+        minWidth: 16,
+        padding: "0 var(--s-1)",
+        fontSize: "var(--text-xs)",
+        fontWeight: "var(--fw-bold)",
+        // Active keeps the accent emphasis (unchanged). Inactive now
+        // takes the variant palette (soft bg + status fg) so status
+        // counts stay colour-coded instead of greying out; neutral
+        // resolves to accent-soft / accent.
+        background: active ? "var(--accent)" : palette.activeBg,
+        color: active ? "var(--accent-fg)" : palette.activeFg,
+        borderRadius: "var(--r-full)",
+        lineHeight: "var(--lh-snug)",
+        textAlign: "center"
+      },
+      children: count
+    })]
+  });
+}
+export default FilterTab;
+//# sourceMappingURL=FilterTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterTab.js","names":["React","Box","mergeLabels","jsx","_jsx","jsxs","_jsxs","PALETTES","neutral","activeBg","activeFg","sent","pending","approved","rejected","DEFAULT_LABELS","Object","freeze","countLabel","n","concat","shortcutHint","s","FilterTab","_ref","_ref$active","active","count","_ref$variant","variant","onClick","shortcut","labels","children","palette","L","component","type","title","undefined","sx","display","alignItems","gap","padding","borderRadius","border","background","color","fontSize","fontWeight","cursor","fontFamily","transition","outline","outlineOffset","_objectSpread","minWidth","lineHeight","textAlign"],"sources":["../../../../src/lib/v2/components/FilterTab.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport { mergeLabels } from \"../utils/mergeLabels\";\r\n\r\n/**\r\n * FilterTab - Portnet UI v2\r\n *\r\n * Charter §03 · Component \"FilterTabs\". Pills used to quickly filter a list\r\n * by status, with an active-state count and pop animation on update.\r\n *\r\n *   <FilterTab active={filter === \"all\"} count={42} onClick={() => setFilter(\"all\")}>\r\n *     Tous\r\n *   </FilterTab>\r\n *\r\n * Localisation (FR / EN / AR):\r\n *   <FilterTab labels={{\r\n *     countLabel:   (n) => `${n} items`,\r\n *     shortcutHint: (s) => `Shortcut: ${s}`,\r\n *   }} ... />\r\n */\r\n\r\nexport type FilterTabVariant =\r\n  | \"neutral\"\r\n  | \"new\"\r\n  | \"sent\"\r\n  | \"pending\"\r\n  | \"approved\"\r\n  | \"rejected\";\r\n\r\ninterface PaletteEntry {\r\n  activeBg: string;\r\n  activeFg: string;\r\n}\r\n\r\n// Module-scoped to avoid Temporal Dead Zone when an invalid `variant` is\r\n// passed: a local-const initialiser referencing palette.neutral before\r\n// palette finished initialising would throw ReferenceError.\r\nconst PALETTES: Record<FilterTabVariant, PaletteEntry> = {\r\n  neutral:  { activeBg: \"var(--accent-soft)\",          activeFg: \"var(--accent)\" },\r\n  new:      { activeBg: \"var(--status-new-soft)\",      activeFg: \"var(--status-new-fg)\" },\r\n  sent:     { activeBg: \"var(--status-sent-soft)\",     activeFg: \"var(--status-sent-fg)\" },\r\n  pending:  { activeBg: \"var(--status-pending-soft)\",  activeFg: \"var(--status-pending-fg)\" },\r\n  approved: { activeBg: \"var(--status-approved-soft)\", activeFg: \"var(--status-approved-fg)\" },\r\n  rejected: { activeBg: \"var(--status-rejected-soft)\", activeFg: \"var(--status-rejected-fg)\" },\r\n};\r\n\r\nconst DEFAULT_LABELS = Object.freeze({\r\n  countLabel:   (n: number): string => `${n} éléments`,\r\n  shortcutHint: (s: string): string => `Raccourci : ${s}`,\r\n});\r\n\r\nexport interface FilterTabLabels {\r\n  countLabel?: ((n: number) => string) | undefined;\r\n  shortcutHint?: ((s: string) => string) | undefined;\r\n}\r\n\r\nexport interface FilterTabProps {\r\n  active?: boolean | undefined;\r\n  count?: number | undefined;\r\n  /** neutral | new | sent | pending | approved | rejected */\r\n  variant?: FilterTabVariant | undefined;\r\n  onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;\r\n  shortcut?: string | undefined;\r\n  labels?: FilterTabLabels | undefined;\r\n  children?: React.ReactNode | undefined;\r\n}\r\n\r\nfunction FilterTab({\r\n  active = false,\r\n  count,\r\n  variant = \"neutral\",\r\n  onClick,\r\n  shortcut,\r\n  labels,\r\n  children,\r\n}: FilterTabProps) {\r\n  const palette = PALETTES[variant] || PALETTES.neutral;\r\n  const L = mergeLabels(DEFAULT_LABELS, labels);\r\n\r\n  return (\r\n    <Box\r\n      component=\"button\"\r\n      type=\"button\"\r\n      aria-pressed={active}\r\n      onClick={onClick}\r\n      title={shortcut ? L.shortcutHint(shortcut) : undefined}\r\n      sx={{\r\n        display: \"inline-flex\",\r\n        alignItems: \"center\",\r\n        gap: \"var(--s-2)\",\r\n        // Compact pill: 5/12 px in literal terms, expressed against\r\n        // the spacing scale so any future rescale propagates.\r\n        padding: \"calc(var(--s-1) + 1px) var(--s-3)\",\r\n        borderRadius: \"var(--r-full)\",\r\n        border: `1px solid ${active ? \"var(--accent)\" : \"var(--border)\"}`,\r\n        background: active ? palette.activeBg : \"var(--surface)\",\r\n        color: active ? palette.activeFg : \"var(--fg-muted)\",\r\n        fontSize: \"var(--text-xs)\",\r\n        // Was 650 (banned) / 500. var(--fw-semibold) is the canonical\r\n        // emphasised weight; var(--fw-medium) the resting one.\r\n        fontWeight: active ? \"var(--fw-semibold)\" : \"var(--fw-medium)\",\r\n        cursor: \"pointer\",\r\n        fontFamily: \"inherit\",\r\n        transition:\r\n          \"background var(--duration-fast, 120ms) ease, \" +\r\n          \"color var(--duration-fast, 120ms) ease, \" +\r\n          \"border-color var(--duration-fast, 120ms) ease\",\r\n        // R-F.1 - focus-visible required, charter §05. The previous\r\n        // implementation had NO focus style; keyboard users got no\r\n        // feedback when tabbing through filter chips.\r\n        \"&:focus-visible\": {\r\n          outline: \"2px solid var(--accent)\",\r\n          outlineOffset: \"var(--pui-outline-offset)\",\r\n        },\r\n        \"&:hover\": {\r\n          ...(!active ? { background: \"var(--bg-hover)\" } : {}),\r\n        },\r\n      }}\r\n    >\r\n      <span>{children}</span>\r\n      {count != null && (\r\n        <Box\r\n          component=\"span\"\r\n          aria-label={L.countLabel(count)}\r\n          sx={{\r\n            display: \"inline-block\",\r\n            minWidth: 16,\r\n            padding: \"0 var(--s-1)\",\r\n            fontSize: \"var(--text-xs)\",\r\n            fontWeight: \"var(--fw-bold)\",\r\n            // Active keeps the accent emphasis (unchanged). Inactive now\r\n            // takes the variant palette (soft bg + status fg) so status\r\n            // counts stay colour-coded instead of greying out; neutral\r\n            // resolves to accent-soft / accent.\r\n            background: active ? \"var(--accent)\" : palette.activeBg,\r\n            color: active ? \"var(--accent-fg)\" : palette.activeFg,\r\n            borderRadius: \"var(--r-full)\",\r\n            lineHeight: \"var(--lh-snug)\",\r\n            textAlign: \"center\",\r\n          }}\r\n        >\r\n          {count}\r\n        </Box>\r\n      )}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default FilterTab;\r\n"],"mappings":"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","ignoreList":[]}