@portnet/ui 6.0.1 → 6.0.3

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

@@ -1,15 +1,3 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 import * as React from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
@@ -27,7 +15,8 @@ import Surface from "../components/Surface";
  *   2       — two equal columns (narrow forms, few fields, wide labels)
  *   1       — single column (textareas, file uploads, notes)
  *   "auto"  — auto-fill tracks min 220px
- *   "none"  — no grid wrapper — children manage their own layout.
+ *   "none"  — no grid wrapper — children manage their own layout, stacked in
+ *             a flex column with `gap` (default --s-4).
  *             Use for: KVGrid, DataGrid, nested FormGrid.
  *
  * Full-width items within a 3-col section:
@@ -47,9 +36,7 @@ import Surface from "../components/Surface";
  *   </FormSection>
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var DEFAULT_SR_LABEL = function DEFAULT_SR_LABEL(n) {
-  return "Section ".concat(n, " : ");
-};
+const DEFAULT_SR_LABEL = n => `Section ${n} : `;
 function resolveGridProps(cols) {
   if (!cols || cols === "none") return null;
   if (cols === "auto") return {
@@ -60,22 +47,20 @@ function resolveGridProps(cols) {
   };
   return null;
 }
-function FormSection(_ref) {
-  var number = _ref.number,
-    title = _ref.title,
-    description = _ref.description,
-    actions = _ref.actions,
-    _ref$srLabel = _ref.srLabel,
-    srLabel = _ref$srLabel === void 0 ? DEFAULT_SR_LABEL : _ref$srLabel,
-    _ref$headingLevel = _ref.headingLevel,
-    headingLevel = _ref$headingLevel === void 0 ? 2 : _ref$headingLevel,
-    _ref$cols = _ref.cols,
-    cols = _ref$cols === void 0 ? 3 : _ref$cols,
-    gap = _ref.gap,
-    children = _ref.children,
-    sx = _ref.sx;
-  var HeadingTag = "h".concat(headingLevel);
-  var gridProps = resolveGridProps(cols);
+function FormSection({
+  number,
+  title,
+  description,
+  actions,
+  srLabel = DEFAULT_SR_LABEL,
+  headingLevel = 2,
+  cols = 3,
+  gap,
+  children,
+  sx
+}) {
+  const HeadingTag = `h${headingLevel}`;
+  const gridProps = resolveGridProps(cols);
   return (
     /*#__PURE__*/
     /*
@@ -100,7 +85,7 @@ function FormSection(_ref) {
        * everything. Surface forwards the array through to its own composition. */,
       sx: [{
         marginBottom: 3
-      }].concat(_toConsumableArray(Array.isArray(sx) ? sx : sx ? [sx] : [])),
+      }, ...(Array.isArray(sx) ? sx : sx ? [sx] : [])],
       children: [/*#__PURE__*/_jsxs(Box, {
         sx: {
           padding: "var(--s-4) var(--s-5)",
@@ -169,7 +154,12 @@ function FormSection(_ref) {
         }), actions]
       }), /*#__PURE__*/_jsx(Box, {
         sx: {
-          padding: "var(--s-5)"
+          padding: "var(--s-5)",
+          ...(gridProps ? null : {
+            display: "flex",
+            flexDirection: "column",
+            gap: gap ?? "var(--s-4)"
+          })
         },
         children: gridProps ?
         /*#__PURE__*/
@@ -177,11 +167,13 @@ function FormSection(_ref) {
          * declares it optional, and forwarding an explicit `undefined` is
          * what breaks under exactOptionalPropertyTypes. Omitting the key is
          * what "inherit the charter default" means. */
-        _jsx(FormGrid, _objectSpread(_objectSpread(_objectSpread({}, gridProps), gap !== undefined ? {
-          gap: gap
-        } : {}), {}, {
+        _jsx(FormGrid, {
+          ...gridProps,
+          ...(gap !== undefined ? {
+            gap
+          } : {}),
           children: children
-        })) : children
+        }) : children
       })]
     })
   );

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

@@ -1 +1 @@
-{"version":3,"file":"FormSection.js","names":["React","Box","Typography","FormGrid","Surface","jsx","_jsx","jsxs","_jsxs","DEFAULT_SR_LABEL","n","concat","resolveGridProps","cols","minColumnWidth","columns","FormSection","_ref","number","title","description","actions","_ref$srLabel","srLabel","_ref$headingLevel","headingLevel","_ref$cols","gap","children","sx","HeadingTag","gridProps","padding","elevation","radius","marginBottom","_toConsumableArray","Array","isArray","borderBottom","display","alignItems","justifyContent","flex","minWidth","flexShrink","width","height","borderRadius","background","color","placeItems","fontSize","fontWeight","component","lineHeight","margin","className","marginTop","_objectSpread","undefined"],"sources":["../../../../src/lib/v2/patterns/FormSection.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"@mui/material/Typography\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport FormGrid from \"../components/FormGrid\";\r\nimport Surface from \"../components/Surface\";\r\n\r\n/**\r\n * FormSection - Portnet UI v2 (pattern)\r\n *\r\n * Charter R-3.1 — groups form fields into named, numbered sections.\r\n * Charter R-3.2 — 3-column grid is the standard for form sections.\r\n *\r\n * cols (default 3):\r\n *   3       — three equal columns (DEFAULT — standard form layout)\r\n *   2       — two equal columns (narrow forms, few fields, wide labels)\r\n *   1       — single column (textareas, file uploads, notes)\r\n *   \"auto\"  — auto-fill tracks min 220px\r\n *   \"none\"  — no grid wrapper — children manage their own layout.\r\n *             Use for: KVGrid, DataGrid, nested FormGrid.\r\n *\r\n * Full-width items within a 3-col section:\r\n *   <FormGrid.Full><FormikTextarea name=\"obs\" /></FormGrid.Full>\r\n *\r\n * Usage:\r\n *   // Standard form section — 3 cols (no need to specify)\r\n *   <FormSection number={1} title=\"Identification\">\r\n *     <FormikInput name=\"nom\" label=\"Nom\" />\r\n *     <FormikInput name=\"prenom\" label=\"Prénom\" />\r\n *     <FormikInput name=\"code\" label=\"Code\" />\r\n *   </FormSection>\r\n *\r\n *   // Read-only section — self-managed layout\r\n *   <FormSection title=\"Importateur\" cols=\"none\">\r\n *     <KVGrid minColumnWidth={180}>...</KVGrid>\r\n *   </FormSection>\r\n */\r\n\r\nexport interface FormSectionProps {\r\n  number?: number | string | undefined;\r\n  title: React.ReactNode;\r\n  description?: React.ReactNode | undefined;\r\n  actions?: React.ReactNode | undefined;\r\n  srLabel?: ((n: number | string) => React.ReactNode) | undefined;\r\n  headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;\r\n  /**\r\n   * cols — Charter R-3.2 field layout.\r\n   *   3 (DEFAULT) : 3 equal columns — standard form layout.\r\n   *   2 | 1       : fewer columns for narrow/simple forms.\r\n   *   \"auto\"      : auto-fill tracks min 220px.\r\n   *   \"none\"      : no grid wrapper — children manage own layout.\r\n   */\r\n  cols?: number | \"auto\" | \"none\" | undefined;\r\n  /**\r\n   * Gap forwarded to the inner `FormGrid`. Omit to inherit the charter default\r\n   * (`--s-4`). Ignored when `cols=\"none\"`, where the child owns its layout.\r\n   *\r\n   * Added for gap G-13: `FormSection` wrapped its children in a `FormGrid` but\r\n   * exposed no way to set that grid's gap, so a section needing a non-default\r\n   * spacing had to abandon `cols` entirely and nest its own `FormGrid` — or,\r\n   * as every audited module actually did, hand-roll a raw `Box` grid and\r\n   * reimplement the breakpoint ladder.\r\n   */\r\n  gap?: string | number | undefined;\r\n  children: React.ReactNode;\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nconst DEFAULT_SR_LABEL = (n: number | string): string => `Section ${n} : `;\r\n\r\nfunction resolveGridProps(\r\n  cols: number | \"auto\" | \"none\" | undefined\r\n): { minColumnWidth: number } | { columns: number } | null {\r\n  if (!cols || cols === \"none\") return null;\r\n  if (cols === \"auto\") return { minColumnWidth: 220 };\r\n  if (typeof cols === \"number\") return { columns: cols };\r\n  return null;\r\n}\r\n\r\nfunction FormSection({\r\n  number,\r\n  title,\r\n  description,\r\n  actions,\r\n  srLabel = DEFAULT_SR_LABEL,\r\n  headingLevel = 2,\r\n  cols = 3,\r\n  gap,\r\n  children,\r\n  sx,\r\n}: FormSectionProps) {\r\n  const HeadingTag = `h${headingLevel}` as const;\r\n  const gridProps = resolveGridProps(cols);\r\n\r\n  return (\r\n    /*\r\n     * The card container is the shared `Surface` primitive (gap G-10), not an\r\n     * inline recipe. This component USED to hold the only copy of\r\n     * --surface + --border + -r-lg in the library, which is precisely why every\r\n     * consuming module rewrote it: the recipe was reachable only by also taking\r\n     * a numbered heading and an inner FormGrid. Dogfooding it here means a\r\n     * charter change to the card radius or elevation lands in ONE file.\r\n     *\r\n     * `padding=\"none\"` / `elevation=\"none\"` reproduce the previous rendering\r\n     * byte for byte: FormSection pads its header and body separately, and never\r\n     * carried a shadow.\r\n     */\r\n    <Surface\r\n      padding=\"none\"\r\n      elevation=\"none\"\r\n      radius=\"lg\"\r\n      /* ARRAY form (gap G-23). This line previously spread `sx` into an object,\r\n       * which silently destroys the array and function shapes `SxProps<Theme>`\r\n       * allows — so a host writing MUI's own `sx={[base, cond && override]}` lost\r\n       * everything. Surface forwards the array through to its own composition. */\r\n      sx={[{ marginBottom: 3 }, ...(Array.isArray(sx) ? sx : sx ? [sx] : [])]}\r\n    >\r\n      {/* Section header */}\r\n      <Box\r\n        sx={{\r\n          padding: \"var(--s-4) var(--s-5)\",\r\n          borderBottom: \"1px solid var(--border)\",\r\n          display: \"flex\",\r\n          alignItems: \"flex-start\",\r\n          justifyContent: \"space-between\",\r\n          gap: 2,\r\n        }}\r\n      >\r\n        <Box\r\n          sx={{\r\n            display: \"flex\",\r\n            gap: 2,\r\n            alignItems: \"flex-start\",\r\n            flex: 1,\r\n            minWidth: 0,\r\n          }}\r\n        >\r\n          {number != null && (\r\n            <Box\r\n              aria-hidden=\"true\"\r\n              sx={{\r\n                flexShrink: 0,\r\n                width: 28,\r\n                height: 28,\r\n                borderRadius: \"var(--r-full)\",\r\n                background: \"var(--accent-soft)\",\r\n                color: \"var(--accent)\",\r\n                display: \"grid\",\r\n                placeItems: \"center\",\r\n                fontSize: \"var(--text-sm)\",\r\n                fontWeight: \"var(--fw-bold)\",\r\n              }}\r\n            >\r\n              {number}\r\n            </Box>\r\n          )}\r\n          <Box sx={{ minWidth: 0 }}>\r\n            <Typography\r\n              component={HeadingTag}\r\n              sx={{\r\n                /* R-2.3 / R-AI.1 MUST — was a bare `15`, a magic font-size no\r\n                 * token can express (the type scale is 12/13/14/16/20/26).\r\n                 * The Charter's own typography table assigns --text-h3 (16px)\r\n                 * to \"Card / form group\" titles, which is exactly what a\r\n                 * FormSection header is. Fleet-wide 15→16px on section\r\n                 * headers — needs visual confirmation, but 15 could not\r\n                 * remain: it is unrepresentable in the token system. */\r\n                fontSize: \"var(--text-h3)\",\r\n                fontWeight: \"var(--fw-bold)\",\r\n                color: \"var(--fg)\",\r\n                lineHeight: \"var(--lh-snug)\",\r\n                margin: 0,\r\n              }}\r\n            >\r\n              {number != null && (\r\n                <span className=\"pui-sr-only\">{srLabel(number)}</span>\r\n              )}\r\n              {title}\r\n            </Typography>\r\n            {description && (\r\n              <Typography\r\n                sx={{\r\n                  fontSize: \"var(--text-xs)\",\r\n                  color: \"var(--fg-muted)\",\r\n                  marginTop: 0.25,\r\n                }}\r\n              >\r\n                {description}\r\n              </Typography>\r\n            )}\r\n          </Box>\r\n        </Box>\r\n        {actions}\r\n      </Box>\r\n\r\n      {/* Section body */}\r\n      <Box sx={{ padding: \"var(--s-5)\" }}>\r\n        {gridProps ? (\r\n          /* `gap` applied by CONDITIONAL SPREAD, not `gap={gap}`: FormGridProps\r\n           * declares it optional, and forwarding an explicit `undefined` is\r\n           * what breaks under exactOptionalPropertyTypes. Omitting the key is\r\n           * what \"inherit the charter default\" means. */\r\n          <FormGrid {...gridProps} {...(gap !== undefined ? { gap } : {})}>\r\n            {children}\r\n          </FormGrid>\r\n        ) : (\r\n          children\r\n        )}\r\n      </Box>\r\n    </Surface>\r\n  );\r\n}\r\n\r\nexport default FormSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FormSection.js","names":["React","Box","Typography","FormGrid","Surface","jsx","_jsx","jsxs","_jsxs","DEFAULT_SR_LABEL","n","resolveGridProps","cols","minColumnWidth","columns","FormSection","number","title","description","actions","srLabel","headingLevel","gap","children","sx","HeadingTag","gridProps","padding","elevation","radius","marginBottom","Array","isArray","borderBottom","display","alignItems","justifyContent","flex","minWidth","flexShrink","width","height","borderRadius","background","color","placeItems","fontSize","fontWeight","component","lineHeight","margin","className","marginTop","flexDirection","undefined"],"sources":["../../../../src/lib/v2/patterns/FormSection.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport Typography from \"@mui/material/Typography\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\nimport FormGrid from \"../components/FormGrid\";\r\nimport Surface from \"../components/Surface\";\r\n\r\n/**\r\n * FormSection - Portnet UI v2 (pattern)\r\n *\r\n * Charter R-3.1 — groups form fields into named, numbered sections.\r\n * Charter R-3.2 — 3-column grid is the standard for form sections.\r\n *\r\n * cols (default 3):\r\n *   3       — three equal columns (DEFAULT — standard form layout)\r\n *   2       — two equal columns (narrow forms, few fields, wide labels)\r\n *   1       — single column (textareas, file uploads, notes)\r\n *   \"auto\"  — auto-fill tracks min 220px\r\n *   \"none\"  — no grid wrapper — children manage their own layout, stacked in\r\n *             a flex column with `gap` (default --s-4).\r\n *             Use for: KVGrid, DataGrid, nested FormGrid.\r\n *\r\n * Full-width items within a 3-col section:\r\n *   <FormGrid.Full><FormikTextarea name=\"obs\" /></FormGrid.Full>\r\n *\r\n * Usage:\r\n *   // Standard form section — 3 cols (no need to specify)\r\n *   <FormSection number={1} title=\"Identification\">\r\n *     <FormikInput name=\"nom\" label=\"Nom\" />\r\n *     <FormikInput name=\"prenom\" label=\"Prénom\" />\r\n *     <FormikInput name=\"code\" label=\"Code\" />\r\n *   </FormSection>\r\n *\r\n *   // Read-only section — self-managed layout\r\n *   <FormSection title=\"Importateur\" cols=\"none\">\r\n *     <KVGrid minColumnWidth={180}>...</KVGrid>\r\n *   </FormSection>\r\n */\r\n\r\nexport interface FormSectionProps {\r\n  number?: number | string | undefined;\r\n  title: React.ReactNode;\r\n  description?: React.ReactNode | undefined;\r\n  actions?: React.ReactNode | undefined;\r\n  srLabel?: ((n: number | string) => React.ReactNode) | undefined;\r\n  headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;\r\n  /**\r\n   * cols — Charter R-3.2 field layout.\r\n   *   3 (DEFAULT) : 3 equal columns — standard form layout.\r\n   *   2 | 1       : fewer columns for narrow/simple forms.\r\n   *   \"auto\"      : auto-fill tracks min 220px.\r\n   *   \"none\"      : no grid wrapper — children manage own layout.\r\n   */\r\n  cols?: number | \"auto\" | \"none\" | undefined;\r\n  /**\r\n   * Gap between the section's children. Forwarded to the inner `FormGrid`\r\n   * when `cols` is a grid preset; applied to the body's own flex column when\r\n   * `cols=\"none\"`. Omit to inherit the charter default (`--s-4`).\r\n   *\r\n   * Added for gap G-13: `FormSection` wrapped its children in a `FormGrid` but\r\n   * exposed no way to set that grid's gap, so a section needing a non-default\r\n   * spacing had to abandon `cols` entirely and nest its own `FormGrid` — or,\r\n   * as every audited module actually did, hand-roll a raw `Box` grid and\r\n   * reimplement the breakpoint ladder.\r\n   *\r\n   * Extended for gap G-47: it used to be IGNORED under `cols=\"none\"`, where\r\n   * the body was a bare padded box. See the body note below.\r\n   */\r\n  gap?: string | number | undefined;\r\n  children: React.ReactNode;\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nconst DEFAULT_SR_LABEL = (n: number | string): string => `Section ${n} : `;\r\n\r\nfunction resolveGridProps(\r\n  cols: number | \"auto\" | \"none\" | undefined\r\n): { minColumnWidth: number } | { columns: number } | null {\r\n  if (!cols || cols === \"none\") return null;\r\n  if (cols === \"auto\") return { minColumnWidth: 220 };\r\n  if (typeof cols === \"number\") return { columns: cols };\r\n  return null;\r\n}\r\n\r\nfunction FormSection({\r\n  number,\r\n  title,\r\n  description,\r\n  actions,\r\n  srLabel = DEFAULT_SR_LABEL,\r\n  headingLevel = 2,\r\n  cols = 3,\r\n  gap,\r\n  children,\r\n  sx,\r\n}: FormSectionProps) {\r\n  const HeadingTag = `h${headingLevel}` as const;\r\n  const gridProps = resolveGridProps(cols);\r\n\r\n  return (\r\n    /*\r\n     * The card container is the shared `Surface` primitive (gap G-10), not an\r\n     * inline recipe. This component USED to hold the only copy of\r\n     * --surface + --border + -r-lg in the library, which is precisely why every\r\n     * consuming module rewrote it: the recipe was reachable only by also taking\r\n     * a numbered heading and an inner FormGrid. Dogfooding it here means a\r\n     * charter change to the card radius or elevation lands in ONE file.\r\n     *\r\n     * `padding=\"none\"` / `elevation=\"none\"` reproduce the previous rendering\r\n     * byte for byte: FormSection pads its header and body separately, and never\r\n     * carried a shadow.\r\n     */\r\n    <Surface\r\n      padding=\"none\"\r\n      elevation=\"none\"\r\n      radius=\"lg\"\r\n      /* ARRAY form (gap G-23). This line previously spread `sx` into an object,\r\n       * which silently destroys the array and function shapes `SxProps<Theme>`\r\n       * allows — so a host writing MUI's own `sx={[base, cond && override]}` lost\r\n       * everything. Surface forwards the array through to its own composition. */\r\n      sx={[{ marginBottom: 3 }, ...(Array.isArray(sx) ? sx : sx ? [sx] : [])]}\r\n    >\r\n      {/* Section header */}\r\n      <Box\r\n        sx={{\r\n          padding: \"var(--s-4) var(--s-5)\",\r\n          borderBottom: \"1px solid var(--border)\",\r\n          display: \"flex\",\r\n          alignItems: \"flex-start\",\r\n          justifyContent: \"space-between\",\r\n          gap: 2,\r\n        }}\r\n      >\r\n        <Box\r\n          sx={{\r\n            display: \"flex\",\r\n            gap: 2,\r\n            alignItems: \"flex-start\",\r\n            flex: 1,\r\n            minWidth: 0,\r\n          }}\r\n        >\r\n          {number != null && (\r\n            <Box\r\n              aria-hidden=\"true\"\r\n              sx={{\r\n                flexShrink: 0,\r\n                width: 28,\r\n                height: 28,\r\n                borderRadius: \"var(--r-full)\",\r\n                background: \"var(--accent-soft)\",\r\n                color: \"var(--accent)\",\r\n                display: \"grid\",\r\n                placeItems: \"center\",\r\n                fontSize: \"var(--text-sm)\",\r\n                fontWeight: \"var(--fw-bold)\",\r\n              }}\r\n            >\r\n              {number}\r\n            </Box>\r\n          )}\r\n          <Box sx={{ minWidth: 0 }}>\r\n            <Typography\r\n              component={HeadingTag}\r\n              sx={{\r\n                /* R-2.3 / R-AI.1 MUST — was a bare `15`, a magic font-size no\r\n                 * token can express (the type scale is 12/13/14/16/20/26).\r\n                 * The Charter's own typography table assigns --text-h3 (16px)\r\n                 * to \"Card / form group\" titles, which is exactly what a\r\n                 * FormSection header is. Fleet-wide 15→16px on section\r\n                 * headers — needs visual confirmation, but 15 could not\r\n                 * remain: it is unrepresentable in the token system. */\r\n                fontSize: \"var(--text-h3)\",\r\n                fontWeight: \"var(--fw-bold)\",\r\n                color: \"var(--fg)\",\r\n                lineHeight: \"var(--lh-snug)\",\r\n                margin: 0,\r\n              }}\r\n            >\r\n              {number != null && (\r\n                <span className=\"pui-sr-only\">{srLabel(number)}</span>\r\n              )}\r\n              {title}\r\n            </Typography>\r\n            {description && (\r\n              <Typography\r\n                sx={{\r\n                  fontSize: \"var(--text-xs)\",\r\n                  color: \"var(--fg-muted)\",\r\n                  marginTop: 0.25,\r\n                }}\r\n              >\r\n                {description}\r\n              </Typography>\r\n            )}\r\n          </Box>\r\n        </Box>\r\n        {actions}\r\n      </Box>\r\n\r\n      {/* Section body\r\n        *\r\n        * GAP UNDER `cols=\"none\"` (gap G-47). This was a bare padded box, so a\r\n        * section whose children manage their own layout had NO spacing between\r\n        * them — and the only tool left to the host was a margin on the second\r\n        * child, which R-S.2 (MUST) forbids: \"Utiliser flex/grid + gap ; jamais\r\n        * d'espacement par margin sur sibling adjacent\". The library was\r\n        * therefore forcing every read-only or mixed section in the fleet into a\r\n        * charter violation; `refonte-frontend`'s Area 7 audit counted 3 uses of\r\n        * `gap` against ~30 sibling margins, most of them here.\r\n        *\r\n        * A flex column is a no-op for the single-child case (one KVGrid, one\r\n        * DataGrid — the majority), and supplies the missing rhythm as soon as\r\n        * there are two. `gap` is now honoured here too, which is what its own\r\n        * doc above promised and did not deliver. */}\r\n      <Box\r\n        sx={{\r\n          padding: \"var(--s-5)\",\r\n          ...(gridProps\r\n            ? null\r\n            : {\r\n                display: \"flex\",\r\n                flexDirection: \"column\",\r\n                gap: gap ?? \"var(--s-4)\",\r\n              }),\r\n        }}\r\n      >\r\n        {gridProps ? (\r\n          /* `gap` applied by CONDITIONAL SPREAD, not `gap={gap}`: FormGridProps\r\n           * declares it optional, and forwarding an explicit `undefined` is\r\n           * what breaks under exactOptionalPropertyTypes. Omitting the key is\r\n           * what \"inherit the charter default\" means. */\r\n          <FormGrid {...gridProps} {...(gap !== undefined ? { gap } : {})}>\r\n            {children}\r\n          </FormGrid>\r\n        ) : (\r\n          children\r\n        )}\r\n      </Box>\r\n    </Surface>\r\n  );\r\n}\r\n\r\nexport default FormSection;\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,130 @@
+/**
+ * FormikCheckbox — bridge between Formik state and v2.Field + v2.Checkbox,
+ * for a SINGLE BOOLEAN field.
+ *
+ * ── WHY THIS EXISTS ALONGSIDE FormikCheckboxGroup (gap G-A) ──────────
+ *
+ * `FormikCheckboxGroup` holds an ARRAY of selected values. That is the right
+ * model for "pick several from a list", and the wrong one for a lone flag:
+ *
+ *     autreInfo.fabrication      -> boolean
+ *     objectDeclaration.premiereDeclaration -> boolean
+ *
+ * A host with boolean-shaped state cannot adopt the group bridge without
+ * changing what its payload sends, so every module ended up re-wiring
+ * `Checkbox` + `useField` by hand — the exact duplication R-2.1 forbids, and
+ * the one place where it hurts most: hand-rolled bridges lose the error
+ * rendering. Reported from refonte-frontend (lot 5), whose local masked/checked
+ * inputs displayed no validation message at all, so a required-field error was
+ * invisible to the user (R-4.1 MUST).
+ *
+ * Usage:
+ *
+ *   import { FormikCheckbox } from "@portnet/ui/lib/v2";
+ *
+ *   <FormikCheckbox
+ *     name="autreInfo.fabrication"
+ *     label="Fabrication"
+ *   />
+ *
+ *   <FormikCheckbox
+ *     name="conditions"
+ *     label="J'accepte les conditions"
+ *     required
+ *     hint="Obligatoire pour soumettre la demande"
+ *   />
+ *
+ * ── WHY THE CHECKBOX IS WRAPPED IN A CheckboxGroup ──────────────────
+ *
+ * `Field` clones its child with `error` and `disabled` props, because several
+ * v2 inputs read them directly. `MuiCheckbox` spreads unknown props down to
+ * the native `<input>`, so a bare `Checkbox` inside `Field` would emit
+ * `error="false"` onto the DOM (React warning, invalid attribute).
+ * `CheckboxGroup` destructures its props explicitly and drops the rest, and it
+ * forwards the ARIA grouping attributes `Field` injects. Same composition as
+ * `FormikCheckboxGroup`, for the same reason.
+ *
+ * ── LABEL AND REQUIRED ──────────────────────────────────────────────
+ *
+ * The label belongs to the CHECKBOX (rendered by `FormControlLabel`, which
+ * names the input implicitly), not above the field: a lone checkbox with a
+ * field label AND a control label reads as two questions. `Field` therefore
+ * receives no label, and `required` is expressed twice where it counts —
+ * visually by the asterisk appended to the control label, and to assistive
+ * technology by `aria-required` on the input itself (`Field`'s own injection
+ * lands on the group, which does not forward it).
+ *
+ * Errors surface only once the field is touched, and toggling marks it touched
+ * — same semantics as `FormikCheckboxGroup`. A checkbox has no meaningful
+ * blur-before-change, so waiting for a blur would keep the message hidden.
+ *
+ * Charter §03 · R-I.2, R-I.3, R-4.1. Peer dependency: formik >= 2.x.
+ */
+
+import * as React from "react";
+import Box from "@mui/material/Box";
+import { useField, useFormikContext } from "formik";
+import Field from "../components/Field";
+import { Checkbox, CheckboxGroup } from "../components/Checkbox";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const FormikCheckbox = ({
+  name,
+  label,
+  required,
+  disabled,
+  hint,
+  inputProps
+}) => {
+  const [field, meta] = useField(name);
+  const {
+    setFieldValue,
+    setFieldTouched
+  } = useFormikContext();
+  const hasError = Boolean(meta.touched && meta.error);
+  const handleChange = event => {
+    setFieldValue(name, event.target.checked);
+    setFieldTouched(name, true, false);
+  };
+
+  /* `=== true` and not a truthy test: hosts seed these fields with `null`
+   * (a not-yet-answered flag), and `checked={null}` makes the input
+   * uncontrolled for one render. */
+  const checked = field.value === true;
+  const controlLabel = required ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [label, /*#__PURE__*/_jsx(Box, {
+      component: "span",
+      "aria-hidden": "true",
+      sx: {
+        color: "var(--danger)",
+        fontWeight: "var(--fw-bold, 700)",
+        marginInlineStart: "var(--s-1)"
+      },
+      children: "*"
+    })]
+  }) : label;
+  return /*#__PURE__*/_jsx(Field, {
+    error: hasError ? meta.error : null,
+    hint: !hasError ? hint : undefined,
+    group: true,
+    ...(disabled !== undefined ? {
+      disabled
+    } : {}),
+    children: /*#__PURE__*/_jsx(CheckboxGroup, {
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        name: name,
+        label: controlLabel,
+        checked: checked,
+        onChange: handleChange,
+        disabled: disabled,
+        inputProps: {
+          ...(required ? {
+            "aria-required": "true"
+          } : {}),
+          ...inputProps
+        }
+      })
+    })
+  });
+};
+export default FormikCheckbox;
+//# sourceMappingURL=FormikCheckbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormikCheckbox.js","names":["React","Box","useField","useFormikContext","Field","Checkbox","CheckboxGroup","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","FormikCheckbox","name","label","required","disabled","hint","inputProps","field","meta","setFieldValue","setFieldTouched","hasError","Boolean","touched","error","handleChange","event","target","checked","value","controlLabel","children","component","sx","color","fontWeight","marginInlineStart","undefined","group","onChange"],"sources":["../../../../src/lib/v2/patterns/FormikCheckbox.tsx"],"sourcesContent":["/**\r\n * FormikCheckbox — bridge between Formik state and v2.Field + v2.Checkbox,\r\n * for a SINGLE BOOLEAN field.\r\n *\r\n * ── WHY THIS EXISTS ALONGSIDE FormikCheckboxGroup (gap G-A) ──────────\r\n *\r\n * `FormikCheckboxGroup` holds an ARRAY of selected values. That is the right\r\n * model for \"pick several from a list\", and the wrong one for a lone flag:\r\n *\r\n *     autreInfo.fabrication      -> boolean\r\n *     objectDeclaration.premiereDeclaration -> boolean\r\n *\r\n * A host with boolean-shaped state cannot adopt the group bridge without\r\n * changing what its payload sends, so every module ended up re-wiring\r\n * `Checkbox` + `useField` by hand — the exact duplication R-2.1 forbids, and\r\n * the one place where it hurts most: hand-rolled bridges lose the error\r\n * rendering. Reported from refonte-frontend (lot 5), whose local masked/checked\r\n * inputs displayed no validation message at all, so a required-field error was\r\n * invisible to the user (R-4.1 MUST).\r\n *\r\n * Usage:\r\n *\r\n *   import { FormikCheckbox } from \"@portnet/ui/lib/v2\";\r\n *\r\n *   <FormikCheckbox\r\n *     name=\"autreInfo.fabrication\"\r\n *     label=\"Fabrication\"\r\n *   />\r\n *\r\n *   <FormikCheckbox\r\n *     name=\"conditions\"\r\n *     label=\"J'accepte les conditions\"\r\n *     required\r\n *     hint=\"Obligatoire pour soumettre la demande\"\r\n *   />\r\n *\r\n * ── WHY THE CHECKBOX IS WRAPPED IN A CheckboxGroup ──────────────────\r\n *\r\n * `Field` clones its child with `error` and `disabled` props, because several\r\n * v2 inputs read them directly. `MuiCheckbox` spreads unknown props down to\r\n * the native `<input>`, so a bare `Checkbox` inside `Field` would emit\r\n * `error=\"false\"` onto the DOM (React warning, invalid attribute).\r\n * `CheckboxGroup` destructures its props explicitly and drops the rest, and it\r\n * forwards the ARIA grouping attributes `Field` injects. Same composition as\r\n * `FormikCheckboxGroup`, for the same reason.\r\n *\r\n * ── LABEL AND REQUIRED ──────────────────────────────────────────────\r\n *\r\n * The label belongs to the CHECKBOX (rendered by `FormControlLabel`, which\r\n * names the input implicitly), not above the field: a lone checkbox with a\r\n * field label AND a control label reads as two questions. `Field` therefore\r\n * receives no label, and `required` is expressed twice where it counts —\r\n * visually by the asterisk appended to the control label, and to assistive\r\n * technology by `aria-required` on the input itself (`Field`'s own injection\r\n * lands on the group, which does not forward it).\r\n *\r\n * Errors surface only once the field is touched, and toggling marks it touched\r\n * — same semantics as `FormikCheckboxGroup`. A checkbox has no meaningful\r\n * blur-before-change, so waiting for a blur would keep the message hidden.\r\n *\r\n * Charter §03 · R-I.2, R-I.3, R-4.1. Peer dependency: formik >= 2.x.\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport { useField, useFormikContext } from \"formik\";\r\nimport Field from \"../components/Field\";\r\nimport { Checkbox, CheckboxGroup } from \"../components/Checkbox\";\r\n\r\nexport interface FormikCheckboxProps {\r\n  name: string;\r\n  /** Label rendered next to the checkbox — it names the control. */\r\n  label?: React.ReactNode | undefined;\r\n  /** Adds the asterisk on the label and `aria-required` on the input. */\r\n  required?: boolean | undefined;\r\n  disabled?: boolean | undefined;\r\n  hint?: React.ReactNode | undefined;\r\n  /** Native `<input>` attributes, routed to the checkbox input (v9 slot). */\r\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;\r\n}\r\n\r\nconst FormikCheckbox = ({\r\n  name,\r\n  label,\r\n  required,\r\n  disabled,\r\n  hint,\r\n  inputProps,\r\n}: FormikCheckboxProps) => {\r\n  const [field, meta] = useField<boolean>(name);\r\n  const { setFieldValue, setFieldTouched } = useFormikContext();\r\n  const hasError = Boolean(meta.touched && meta.error);\r\n\r\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    setFieldValue(name, event.target.checked);\r\n    setFieldTouched(name, true, false);\r\n  };\r\n\r\n  /* `=== true` and not a truthy test: hosts seed these fields with `null`\r\n   * (a not-yet-answered flag), and `checked={null}` makes the input\r\n   * uncontrolled for one render. */\r\n  const checked = field.value === true;\r\n\r\n  const controlLabel = required ? (\r\n    <>\r\n      {label}\r\n      <Box\r\n        component=\"span\"\r\n        aria-hidden=\"true\"\r\n        sx={{\r\n          color: \"var(--danger)\",\r\n          fontWeight: \"var(--fw-bold, 700)\",\r\n          marginInlineStart: \"var(--s-1)\",\r\n        }}\r\n      >\r\n        *\r\n      </Box>\r\n    </>\r\n  ) : (\r\n    label\r\n  );\r\n\r\n  return (\r\n    <Field\r\n      error={hasError ? meta.error : null}\r\n      hint={!hasError ? hint : undefined}\r\n      group\r\n      {...(disabled !== undefined ? { disabled } : {})}\r\n    >\r\n      <CheckboxGroup>\r\n        <Checkbox\r\n          name={name}\r\n          label={controlLabel}\r\n          checked={checked}\r\n          onChange={handleChange}\r\n          disabled={disabled}\r\n          inputProps={{\r\n            ...(required ? { \"aria-required\": \"true\" } : {}),\r\n            ...inputProps,\r\n          }}\r\n        />\r\n      </CheckboxGroup>\r\n    </Field>\r\n  );\r\n};\r\n\r\nexport default FormikCheckbox;\r\n"],"mappings":"AAAA;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;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;AACnC,SAASC,QAAQ,EAAEC,gBAAgB,QAAQ,QAAQ;AACnD,OAAOC,KAAK,MAAM,qBAAqB;AACvC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAcjE,MAAMC,cAAc,GAAGA,CAAC;EACtBC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC;AACmB,CAAC,KAAK;EACzB,MAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGnB,QAAQ,CAAUY,IAAI,CAAC;EAC7C,MAAM;IAAEQ,aAAa;IAAEC;EAAgB,CAAC,GAAGpB,gBAAgB,CAAC,CAAC;EAC7D,MAAMqB,QAAQ,GAAGC,OAAO,CAACJ,IAAI,CAACK,OAAO,IAAIL,IAAI,CAACM,KAAK,CAAC;EAEpD,MAAMC,YAAY,GAAIC,KAA0C,IAAK;IACnEP,aAAa,CAACR,IAAI,EAAEe,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IACzCR,eAAe,CAACT,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC;EACpC,CAAC;;EAED;AACF;AACA;EACE,MAAMiB,OAAO,GAAGX,KAAK,CAACY,KAAK,KAAK,IAAI;EAEpC,MAAMC,YAAY,GAAGjB,QAAQ,gBAC3BJ,KAAA,CAAAF,SAAA;IAAAwB,QAAA,GACGnB,KAAK,eACNP,IAAA,CAACP,GAAG;MACFkC,SAAS,EAAC,MAAM;MAChB,eAAY,MAAM;MAClBC,EAAE,EAAE;QACFC,KAAK,EAAE,eAAe;QACtBC,UAAU,EAAE,qBAAqB;QACjCC,iBAAiB,EAAE;MACrB,CAAE;MAAAL,QAAA,EACH;IAED,CAAK,CAAC;EAAA,CACN,CAAC,GAEHnB,KACD;EAED,oBACEP,IAAA,CAACJ,KAAK;IACJuB,KAAK,EAAEH,QAAQ,GAAGH,IAAI,CAACM,KAAK,GAAG,IAAK;IACpCT,IAAI,EAAE,CAACM,QAAQ,GAAGN,IAAI,GAAGsB,SAAU;IACnCC,KAAK;IAAA,IACAxB,QAAQ,KAAKuB,SAAS,GAAG;MAAEvB;IAAS,CAAC,GAAG,CAAC,CAAC;IAAAiB,QAAA,eAE/C1B,IAAA,CAACF,aAAa;MAAA4B,QAAA,eACZ1B,IAAA,CAACH,QAAQ;QACPS,IAAI,EAAEA,IAAK;QACXC,KAAK,EAAEkB,YAAa;QACpBF,OAAO,EAAEA,OAAQ;QACjBW,QAAQ,EAAEd,YAAa;QACvBX,QAAQ,EAAEA,QAAS;QACnBE,UAAU,EAAE;UACV,IAAIH,QAAQ,GAAG;YAAE,eAAe,EAAE;UAAO,CAAC,GAAG,CAAC,CAAC,CAAC;UAChD,GAAGG;QACL;MAAE,CACH;IAAC,CACW;EAAC,CACX,CAAC;AAEZ,CAAC;AAED,eAAeN,cAAc","ignoreList":[]}

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

@@ -1,19 +1,3 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _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; }
 /**
  * FormikCheckboxGroup — bridge between Formik state and
  * v2.Field + v2.CheckboxGroup.
@@ -46,6 +30,14 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * ARIA group). CheckboxGroup renders role="group" and forwards the injected
  * aria-labelledby / aria-describedby / aria-invalid onto that element.
  *
+ * Error focus (P-2): each Checkbox carries the field `name` on its native
+ * <input>, so `focusFieldByName` — and therefore `FormikErrorFocus` after a
+ * failed submit (R-F.3) — can resolve [name=…] and focus the first checkbox
+ * of the group. Note this is NOT the `htmlFor` route the other bridges use:
+ * in group mode there is no labelable element for htmlFor to target, so the
+ * name attribute is the only handle. Without it the field had neither an id
+ * nor a name and was silently skipped.
+ *
  * Charter R-Sel.4. Peer dependency: formik >= 2.x.
  */
 
@@ -54,57 +46,61 @@ import { useField, useFormikContext } from "formik";
 import Field from "../components/Field";
 import { Checkbox, CheckboxGroup } from "../components/Checkbox";
 import { jsx as _jsx } from "react/jsx-runtime";
-var FormikCheckboxGroup = function FormikCheckboxGroup(_ref) {
-  var name = _ref.name,
-    label = _ref.label,
-    required = _ref.required,
-    _ref$options = _ref.options,
-    options = _ref$options === void 0 ? [] : _ref$options,
-    hint = _ref.hint,
-    disabled = _ref.disabled,
-    _ref$row = _ref.row,
-    row = _ref$row === void 0 ? false : _ref$row;
-  var _useField = useField(name),
-    _useField2 = _slicedToArray(_useField, 2),
-    field = _useField2[0],
-    meta = _useField2[1];
-  var _useFormikContext = useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue,
-    setFieldTouched = _useFormikContext.setFieldTouched;
-  var hasError = Boolean(meta.touched && meta.error);
-  var selected = Array.isArray(field.value) ? field.value : [];
-  var toggle = function toggle(optValue) {
-    return function (event) {
-      var checked = event.target.checked;
-      var next = checked ? [].concat(_toConsumableArray(selected), [optValue]) : selected.filter(function (v) {
-        return v !== optValue;
-      });
-      setFieldValue(name, next);
-      setFieldTouched(name, true, false);
-    };
+const FormikCheckboxGroup = ({
+  name,
+  label,
+  required,
+  options = [],
+  hint,
+  disabled,
+  row = false,
+  inputProps
+}) => {
+  const [field, meta] = useField(name);
+  const {
+    setFieldValue,
+    setFieldTouched
+  } = useFormikContext();
+  const hasError = Boolean(meta.touched && meta.error);
+  const selected = Array.isArray(field.value) ? field.value : [];
+
+  /* P-2 — the field name on each native input. focusFieldByName resolves
+     [id=…] then [name=…]; group mode offers no labelable element for an id,
+     so this is the handle. Sharing one name across checkboxes is correct HTML
+     (unlike radios, checkboxes are not grouped by name) and changes nothing
+     at runtime, since Formik does not use native form serialisation. */
+  const nativeInputProps = {
+    ...(inputProps ?? {}),
+    name
+  };
+  const toggle = optValue => event => {
+    const checked = event.target.checked;
+    const next = checked ? [...selected, optValue] : selected.filter(v => v !== optValue);
+    setFieldValue(name, next);
+    setFieldTouched(name, true, false);
   };
-  return /*#__PURE__*/_jsx(Field, _objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Field, {
     label: label,
     error: hasError ? meta.error : null,
     hint: !hasError ? hint : undefined,
-    group: true
-  }, required !== undefined ? {
-    required: required
-  } : {}), disabled !== undefined ? {
-    disabled: disabled
-  } : {}), {}, {
+    group: true,
+    ...(required !== undefined ? {
+      required
+    } : {}),
+    ...(disabled !== undefined ? {
+      disabled
+    } : {}),
     children: /*#__PURE__*/_jsx(CheckboxGroup, {
       row: row,
-      children: options.map(function (opt) {
-        return /*#__PURE__*/_jsx(Checkbox, {
-          label: opt.label,
-          checked: selected.includes(opt.value),
-          onChange: toggle(opt.value),
-          disabled: disabled
-        }, opt.value);
-      })
+      children: options.map(opt => /*#__PURE__*/_jsx(Checkbox, {
+        label: opt.label,
+        checked: selected.includes(opt.value),
+        onChange: toggle(opt.value),
+        disabled: disabled,
+        inputProps: nativeInputProps
+      }, opt.value))
     })
-  }));
+  });
 };
 export default FormikCheckboxGroup;
 //# sourceMappingURL=FormikCheckboxGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormikCheckboxGroup.js","names":["React","useField","useFormikContext","Field","Checkbox","CheckboxGroup","jsx","_jsx","FormikCheckboxGroup","_ref","name","label","required","_ref$options","options","hint","disabled","_ref$row","row","_useField","_useField2","_slicedToArray","field","meta","_useFormikContext","setFieldValue","setFieldTouched","hasError","Boolean","touched","error","selected","Array","isArray","value","toggle","optValue","event","checked","target","next","concat","_toConsumableArray","filter","v","_objectSpread","undefined","group","children","map","opt","includes","onChange"],"sources":["../../../../src/lib/v2/patterns/FormikCheckboxGroup.tsx"],"sourcesContent":["/**\r\n * FormikCheckboxGroup — bridge between Formik state and\r\n * v2.Field + v2.CheckboxGroup.\r\n *\r\n * The v2 CheckboxGroup uses composition slots — children must be\r\n * <Checkbox> elements, each with their own checked/onChange. This\r\n * bridge wraps that contract behind an ergonomic\r\n * `options=[{value, label}]` prop and manages the add/remove of\r\n * values in the Formik-held array.\r\n *\r\n * `field.value` holds an array of selected values, defaulting to []\r\n * when unset.\r\n *\r\n * Usage:\r\n *\r\n *   import { FormikCheckboxGroup } from \"@portnet/ui/lib/v2\";\r\n *\r\n *   <FormikCheckboxGroup\r\n *     name=\"departements\"\r\n *     label=\"Départements\"\r\n *     required\r\n *     options={departements.content.map((d) => ({\r\n *       value: String(d.id),\r\n *       label: d.description,\r\n *     }))}\r\n *   />\r\n *\r\n * A11y (CC-6): the wrapping Field is put in `group` mode so the label names the\r\n * CheckboxGroup via aria-labelledby (a native <label htmlFor> cannot name an\r\n * ARIA group). CheckboxGroup renders role=\"group\" and forwards the injected\r\n * aria-labelledby / aria-describedby / aria-invalid onto that element.\r\n *\r\n * Charter R-Sel.4. Peer dependency: formik >= 2.x.\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { useField, useFormikContext } from \"formik\";\r\nimport Field from \"../components/Field\";\r\nimport { Checkbox, CheckboxGroup } from \"../components/Checkbox\";\r\n\r\nexport interface FormikCheckboxOption {\r\n  value: string | number;\r\n  label: React.ReactNode;\r\n}\r\n\r\nexport interface FormikCheckboxGroupProps {\r\n  name: string;\r\n  label?: React.ReactNode | undefined;\r\n  required?: boolean | undefined;\r\n  options?: FormikCheckboxOption[] | undefined;\r\n  hint?: React.ReactNode | undefined;\r\n  disabled?: boolean | undefined;\r\n  row?: boolean | undefined;\r\n}\r\n\r\nconst FormikCheckboxGroup = ({\r\n  name,\r\n  label,\r\n  required,\r\n  options = [],\r\n  hint,\r\n  disabled,\r\n  row = false,\r\n}: FormikCheckboxGroupProps) => {\r\n  const [field, meta] = useField<Array<string | number>>(name);\r\n  const { setFieldValue, setFieldTouched } = useFormikContext();\r\n  const hasError = Boolean(meta.touched && meta.error);\r\n\r\n  const selected = Array.isArray(field.value) ? field.value : [];\r\n\r\n  const toggle =\r\n    (optValue: string | number) =>\r\n    (event: React.ChangeEvent<HTMLInputElement>) => {\r\n      const checked = event.target.checked;\r\n      const next = checked\r\n        ? [...selected, optValue]\r\n        : selected.filter((v) => v !== optValue);\r\n      setFieldValue(name, next);\r\n      setFieldTouched(name, true, false);\r\n    };\r\n\r\n  return (\r\n    <Field\r\n      label={label}\r\n      error={hasError ? meta.error : null}\r\n      hint={!hasError ? hint : undefined}\r\n      group\r\n      {...(required !== undefined ? { required } : {})}\r\n      {...(disabled !== undefined ? { disabled } : {})}\r\n    >\r\n      <CheckboxGroup row={row}>\r\n        {options.map((opt) => (\r\n          <Checkbox\r\n            key={opt.value}\r\n            label={opt.label}\r\n            checked={selected.includes(opt.value)}\r\n            onChange={toggle(opt.value)}\r\n            disabled={disabled}\r\n          />\r\n        ))}\r\n      </CheckboxGroup>\r\n    </Field>\r\n  );\r\n};\r\n\r\nexport default FormikCheckboxGroup;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FormikCheckboxGroup.js","names":["React","useField","useFormikContext","Field","Checkbox","CheckboxGroup","jsx","_jsx","FormikCheckboxGroup","name","label","required","options","hint","disabled","row","inputProps","field","meta","setFieldValue","setFieldTouched","hasError","Boolean","touched","error","selected","Array","isArray","value","nativeInputProps","toggle","optValue","event","checked","target","next","filter","v","undefined","group","children","map","opt","includes","onChange"],"sources":["../../../../src/lib/v2/patterns/FormikCheckboxGroup.tsx"],"sourcesContent":["/**\r\n * FormikCheckboxGroup — bridge between Formik state and\r\n * v2.Field + v2.CheckboxGroup.\r\n *\r\n * The v2 CheckboxGroup uses composition slots — children must be\r\n * <Checkbox> elements, each with their own checked/onChange. This\r\n * bridge wraps that contract behind an ergonomic\r\n * `options=[{value, label}]` prop and manages the add/remove of\r\n * values in the Formik-held array.\r\n *\r\n * `field.value` holds an array of selected values, defaulting to []\r\n * when unset.\r\n *\r\n * Usage:\r\n *\r\n *   import { FormikCheckboxGroup } from \"@portnet/ui/lib/v2\";\r\n *\r\n *   <FormikCheckboxGroup\r\n *     name=\"departements\"\r\n *     label=\"Départements\"\r\n *     required\r\n *     options={departements.content.map((d) => ({\r\n *       value: String(d.id),\r\n *       label: d.description,\r\n *     }))}\r\n *   />\r\n *\r\n * A11y (CC-6): the wrapping Field is put in `group` mode so the label names the\r\n * CheckboxGroup via aria-labelledby (a native <label htmlFor> cannot name an\r\n * ARIA group). CheckboxGroup renders role=\"group\" and forwards the injected\r\n * aria-labelledby / aria-describedby / aria-invalid onto that element.\r\n *\r\n * Error focus (P-2): each Checkbox carries the field `name` on its native\r\n * <input>, so `focusFieldByName` — and therefore `FormikErrorFocus` after a\r\n * failed submit (R-F.3) — can resolve [name=…] and focus the first checkbox\r\n * of the group. Note this is NOT the `htmlFor` route the other bridges use:\r\n * in group mode there is no labelable element for htmlFor to target, so the\r\n * name attribute is the only handle. Without it the field had neither an id\r\n * nor a name and was silently skipped.\r\n *\r\n * Charter R-Sel.4. Peer dependency: formik >= 2.x.\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { useField, useFormikContext } from \"formik\";\r\nimport Field from \"../components/Field\";\r\nimport { Checkbox, CheckboxGroup } from \"../components/Checkbox\";\r\n\r\nexport interface FormikCheckboxOption {\r\n  value: string | number;\r\n  label: React.ReactNode;\r\n}\r\n\r\nexport interface FormikCheckboxGroupProps {\r\n  name: string;\r\n  label?: React.ReactNode | undefined;\r\n  required?: boolean | undefined;\r\n  options?: FormikCheckboxOption[] | undefined;\r\n  hint?: React.ReactNode | undefined;\r\n  disabled?: boolean | undefined;\r\n  row?: boolean | undefined;\r\n  /**\r\n   * Native <input> attributes applied to every checkbox in the group.\r\n   *\r\n   * The field `name` is added automatically (P-2) and takes precedence, since\r\n   * it is what makes the group reachable by focusFieldByName. Anything passed\r\n   * here is merged ahead of it.\r\n   */\r\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;\r\n}\r\n\r\nconst FormikCheckboxGroup = ({\r\n  name,\r\n  label,\r\n  required,\r\n  options = [],\r\n  hint,\r\n  disabled,\r\n  row = false,\r\n  inputProps,\r\n}: FormikCheckboxGroupProps) => {\r\n  const [field, meta] = useField<Array<string | number>>(name);\r\n  const { setFieldValue, setFieldTouched } = useFormikContext();\r\n  const hasError = Boolean(meta.touched && meta.error);\r\n\r\n  const selected = Array.isArray(field.value) ? field.value : [];\r\n\r\n  /* P-2 — the field name on each native input. focusFieldByName resolves\r\n     [id=…] then [name=…]; group mode offers no labelable element for an id,\r\n     so this is the handle. Sharing one name across checkboxes is correct HTML\r\n     (unlike radios, checkboxes are not grouped by name) and changes nothing\r\n     at runtime, since Formik does not use native form serialisation. */\r\n  const nativeInputProps: React.InputHTMLAttributes<HTMLInputElement> = {\r\n    ...(inputProps ?? {}),\r\n    name,\r\n  };\r\n\r\n  const toggle =\r\n    (optValue: string | number) =>\r\n    (event: React.ChangeEvent<HTMLInputElement>) => {\r\n      const checked = event.target.checked;\r\n      const next = checked\r\n        ? [...selected, optValue]\r\n        : selected.filter((v) => v !== optValue);\r\n      setFieldValue(name, next);\r\n      setFieldTouched(name, true, false);\r\n    };\r\n\r\n  return (\r\n    <Field\r\n      label={label}\r\n      error={hasError ? meta.error : null}\r\n      hint={!hasError ? hint : undefined}\r\n      group\r\n      {...(required !== undefined ? { required } : {})}\r\n      {...(disabled !== undefined ? { disabled } : {})}\r\n    >\r\n      <CheckboxGroup row={row}>\r\n        {options.map((opt) => (\r\n          <Checkbox\r\n            key={opt.value}\r\n            label={opt.label}\r\n            checked={selected.includes(opt.value)}\r\n            onChange={toggle(opt.value)}\r\n            disabled={disabled}\r\n            inputProps={nativeInputProps}\r\n          />\r\n        ))}\r\n      </CheckboxGroup>\r\n    </Field>\r\n  );\r\n};\r\n\r\nexport default FormikCheckboxGroup;\r\n"],"mappings":"AAAA;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;;AAEA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,EAAEC,gBAAgB,QAAQ,QAAQ;AACnD,OAAOC,KAAK,MAAM,qBAAqB;AACvC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAyBjE,MAAMC,mBAAmB,GAAGA,CAAC;EAC3BC,IAAI;EACJC,KAAK;EACLC,QAAQ;EACRC,OAAO,GAAG,EAAE;EACZC,IAAI;EACJC,QAAQ;EACRC,GAAG,GAAG,KAAK;EACXC;AACwB,CAAC,KAAK;EAC9B,MAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGjB,QAAQ,CAAyBQ,IAAI,CAAC;EAC5D,MAAM;IAAEU,aAAa;IAAEC;EAAgB,CAAC,GAAGlB,gBAAgB,CAAC,CAAC;EAC7D,MAAMmB,QAAQ,GAAGC,OAAO,CAACJ,IAAI,CAACK,OAAO,IAAIL,IAAI,CAACM,KAAK,CAAC;EAEpD,MAAMC,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACV,KAAK,CAACW,KAAK,CAAC,GAAGX,KAAK,CAACW,KAAK,GAAG,EAAE;;EAE9D;AACF;AACA;AACA;AACA;EACE,MAAMC,gBAA6D,GAAG;IACpE,IAAIb,UAAU,IAAI,CAAC,CAAC,CAAC;IACrBP;EACF,CAAC;EAED,MAAMqB,MAAM,GACTC,QAAyB,IACzBC,KAA0C,IAAK;IAC9C,MAAMC,OAAO,GAAGD,KAAK,CAACE,MAAM,CAACD,OAAO;IACpC,MAAME,IAAI,GAAGF,OAAO,GAChB,CAAC,GAAGR,QAAQ,EAAEM,QAAQ,CAAC,GACvBN,QAAQ,CAACW,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKN,QAAQ,CAAC;IAC1CZ,aAAa,CAACV,IAAI,EAAE0B,IAAI,CAAC;IACzBf,eAAe,CAACX,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC;EACpC,CAAC;EAEH,oBACEF,IAAA,CAACJ,KAAK;IACJO,KAAK,EAAEA,KAAM;IACbc,KAAK,EAAEH,QAAQ,GAAGH,IAAI,CAACM,KAAK,GAAG,IAAK;IACpCX,IAAI,EAAE,CAACQ,QAAQ,GAAGR,IAAI,GAAGyB,SAAU;IACnCC,KAAK;IAAA,IACA5B,QAAQ,KAAK2B,SAAS,GAAG;MAAE3B;IAAS,CAAC,GAAG,CAAC,CAAC;IAAA,IAC1CG,QAAQ,KAAKwB,SAAS,GAAG;MAAExB;IAAS,CAAC,GAAG,CAAC,CAAC;IAAA0B,QAAA,eAE/CjC,IAAA,CAACF,aAAa;MAACU,GAAG,EAAEA,GAAI;MAAAyB,QAAA,EACrB5B,OAAO,CAAC6B,GAAG,CAAEC,GAAG,iBACfnC,IAAA,CAACH,QAAQ;QAEPM,KAAK,EAAEgC,GAAG,CAAChC,KAAM;QACjBuB,OAAO,EAAER,QAAQ,CAACkB,QAAQ,CAACD,GAAG,CAACd,KAAK,CAAE;QACtCgB,QAAQ,EAAEd,MAAM,CAACY,GAAG,CAACd,KAAK,CAAE;QAC5Bd,QAAQ,EAAEA,QAAS;QACnBE,UAAU,EAAEa;MAAiB,GALxBa,GAAG,CAACd,KAMV,CACF;IAAC,CACW;EAAC,CACX,CAAC;AAEZ,CAAC;AAED,eAAepB,mBAAmB","ignoreList":[]}