@portnet/ui 5.0.28 → 6.0.0

package/dist/v2/components/Status.js

@@ -0,0 +1,71 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _statusPalette = require("../tokens/statusPalette");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["kind", "label", "labels", "className"];
+/**
+ * Status - Portnet UI v2
+ *
+ * Charter §02.1 — workflow status chip. Six and only six kinds.
+ * Any other business status MUST map onto one of these.
+ *
+ *   <Status kind="approved" />               // → "Approuvé"  (FR fallback)
+ *   <Status kind="pending" label="Custom" /> // explicit override (single)
+ *   <Status kind="approved"
+ *           labels={{ approved: t("status.approved"),
+ *                     rejected: t("status.rejected"), ... }} />
+ *
+ * Label resolution (highest priority first)
+ *   1. `label` prop — single explicit override.
+ *   2. `labels[kind]` — i18n map provided by the host.
+ *   3. STATUS_LABELS_FR[kind] — legacy FR fallback.
+ *
+ * A11y note (R-Ar.1, R-Ar.3):
+ *   This component renders a plain inline <span>. It does NOT carry
+ *   role="status" / aria-live — those are reserved for status MESSAGES
+ *   (toasts, banners). A status pill is a styled label; promoting it
+ *   to a live region causes SRs to announce every chip on mount and on
+ *   each re-render (e.g., on every DataGrid pagination tick).
+ *
+ *   When the chip's *value* changes (e.g., a workflow transition just
+ *   succeeded), it is the host's responsibility to surface that change
+ *   via the canonical feedback channel — toast (R-A.1) or row flash
+ *   (.pui-row-updated) — NOT by mutating the chip alone.
+ *
+ * Forbidden: ad-hoc colours. Use Chip for filter pills, not Status.
+ */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function Status(_ref) {
+  var _ref2;
+  var _ref$kind = _ref.kind,
+    kind = _ref$kind === void 0 ? "neutral" : _ref$kind,
+    label = _ref.label,
+    labels = _ref.labels,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var safe = _statusPalette.STATUS_KEYS.includes(kind) ? kind : "neutral";
+  var text = (_ref2 = label !== null && label !== void 0 ? label : labels && labels[safe]) !== null && _ref2 !== void 0 ? _ref2 : _statusPalette.STATUS_LABELS_FR[safe];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", _objectSpread(_objectSpread({
+    className: "pui-status ".concat(className).trim(),
+    "data-kind": safe
+  }, rest), {}, {
+    children: text
+  }));
+}
+var _default = exports["default"] = Status;
+//# sourceMappingURL=Status.js.map

package/dist/v2/components/Status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Status.js","names":["React","_interopRequireWildcard","require","_statusPalette","_jsxRuntime","_excluded","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","Status","_ref","_ref2","_ref$kind","kind","label","labels","_ref$className","className","rest","safe","STATUS_KEYS","includes","text","STATUS_LABELS_FR","jsx","concat","trim","children","_default","exports"],"sources":["../../../src/lib/v2/components/Status.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { STATUS_KEYS, STATUS_LABELS_FR } from \"../tokens/statusPalette\";\r\n\r\n/**\r\n * Status - Portnet UI v2\r\n *\r\n * Charter §02.1 — workflow status chip. Six and only six kinds.\r\n * Any other business status MUST map onto one of these.\r\n *\r\n *   <Status kind=\"approved\" />               // → \"Approuvé\"  (FR fallback)\r\n *   <Status kind=\"pending\" label=\"Custom\" /> // explicit override (single)\r\n *   <Status kind=\"approved\"\r\n *           labels={{ approved: t(\"status.approved\"),\r\n *                     rejected: t(\"status.rejected\"), ... }} />\r\n *\r\n * Label resolution (highest priority first)\r\n *   1. `label` prop — single explicit override.\r\n *   2. `labels[kind]` — i18n map provided by the host.\r\n *   3. STATUS_LABELS_FR[kind] — legacy FR fallback.\r\n *\r\n * A11y note (R-Ar.1, R-Ar.3):\r\n *   This component renders a plain inline <span>. It does NOT carry\r\n *   role=\"status\" / aria-live — those are reserved for status MESSAGES\r\n *   (toasts, banners). A status pill is a styled label; promoting it\r\n *   to a live region causes SRs to announce every chip on mount and on\r\n *   each re-render (e.g., on every DataGrid pagination tick).\r\n *\r\n *   When the chip's *value* changes (e.g., a workflow transition just\r\n *   succeeded), it is the host's responsibility to surface that change\r\n *   via the canonical feedback channel — toast (R-A.1) or row flash\r\n *   (.pui-row-updated) — NOT by mutating the chip alone.\r\n *\r\n * Forbidden: ad-hoc colours. Use Chip for filter pills, not Status.\r\n */\r\n\r\nexport type StatusKind = keyof typeof STATUS_LABELS_FR;\r\n\r\nexport interface StatusProps extends React.HTMLAttributes<HTMLSpanElement> {\r\n  kind?: StatusKind;\r\n  label?: React.ReactNode;\r\n  labels?: Partial<Record<StatusKind, React.ReactNode>>;\r\n}\r\n\r\nfunction Status({ kind = \"neutral\", label, labels, className = \"\", ...rest }: StatusProps) {\r\n  const safe = STATUS_KEYS.includes(kind) ? kind : \"neutral\";\r\n  const text =\r\n    label\r\n      ?? (labels && labels[safe])\r\n      ?? STATUS_LABELS_FR[safe];\r\n  return (\r\n    <span\r\n      className={`pui-status ${className}`.trim()}\r\n      data-kind={safe}\r\n      {...rest}\r\n    >\r\n      {text}\r\n    </span>\r\n  );\r\n}\r\n\r\nexport default Status;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/v2/components/Stepper.d.ts

@@ -0,0 +1,136 @@
+import * as React from "react";
+/**
+ * Stepper - Portnet UI v2
+ *
+ * Charter §03 · Component "Stepper". Required on flows ≥ 3 steps (R-3.4).
+ *
+ * Two ways to drive HStepper:
+ *
+ *  1. SIMPLE mode — plain labels + `current` index (Charter default):
+ *
+ *       <HStepper
+ *         steps={["Identification", "Marchandise", "Banque", "Validation"]}
+ *         current={1}
+ *         onJump={i => goTo(i)}
+ *       />
+ *
+ *  2. RICH mode — objects carry their own state, including a "disabled"
+ *     state for locked future steps (used by wizards where step N is
+ *     unavailable until step N-1 has been submitted):
+ *
+ *       <HStepper
+ *         steps={[
+ *           { id: "importateur", label: "Importateur",  status: "completed" },
+ *           { id: "donneesTI",   label: "Données",      status: "current"   },
+ *           { id: "marchandises",label: "Marchandises", status: "disabled"  },
+ *           { id: "revision",    label: "Révision",     status: "pending"   },
+ *         ]}
+ *         onStepClick={i => goTo(i)}
+ *         ariaLabel="Étapes de création du titre"
+ *       />
+ *
+ *     status values: "current" | "active" | "completed" | "complete" |
+ *                    "pending" | "disabled"
+ *     ("current"/"active" and "completed"/"complete" are accepted as
+ *     synonyms to ease migration from host modules.)
+ *
+ *  VStepper — vertical history/progression timeline. Each item may carry
+ *  `timestamp` (date/time of the action) and `actor` (the user who did it);
+ *  they render as a muted "timestamp · actor" line under the title. `meta`
+ *  still works for free-form text (e.g. "En cours" on the active step):
+ *
+ *    <VStepper items={[
+ *       { status: "completed", title: "Titre d'importation créé",
+ *         timestamp: "27/03/2025 09:48", actor: "dsmoimp" },
+ *       { status: "completed", title: "Soumis à la banque (CITIBANK)",
+ *         timestamp: "27/03/2025 10:16", actor: "Transit Jebli" },
+ *       { status: "active",    title: "En attente de réponse banque", meta: "En cours" },
+ *    ]} />
+ *
+ * Localisation (FR / EN / AR):
+ *   <HStepper labels={{
+ *     nav:  "Form steps",
+ *     item: (n, label, state) =>
+ *       `Step ${n}: ${label} (${
+ *         state === "complete" ? "completed" :
+ *         state === "active"   ? "in progress" : "upcoming"
+ *       })`,
+ *   }} />
+ *
+ *   <VStepper labels={{
+ *     nav:   "Step history",
+ *     state: { complete: "Completed step.", active: "Current step.", pending: "Upcoming step." },
+ *   }} />
+ *
+ * A11y note (R-Ar.1):
+ *   Clickable HStepper steps render as real <button> elements.
+ *   VStepper's per-item title element is host-configurable via
+ *   `titleAs` so the page heading hierarchy stays consistent.
+ */
+export type StepState = "complete" | "active" | "pending" | "disabled";
+export type StepStatus = "current" | "active" | "completed" | "complete" | "pending" | "disabled";
+export interface HStepperRichStep {
+    id?: string | number;
+    label?: React.ReactNode;
+    status?: StepStatus;
+}
+export type HStepperStep = React.ReactNode | HStepperRichStep;
+export interface HStepperLabels {
+    nav?: string;
+    item?: (n: number, label: React.ReactNode, state: StepState) => string;
+}
+export interface HStepperProps {
+    /**
+     * Either an array of plain labels (strings/nodes) driven by
+     * `current`, or an array of `{ id?, label, status }` objects
+     * where status carries the per-step state.
+     */
+    steps: HStepperStep[];
+    /** Legacy: index of the active step. Ignored when `steps` are rich objects. */
+    current?: number;
+    /** Click handler. Receives the step index. */
+    onJump?: (index: number) => void;
+    /** Alias of `onJump` (some host modules used this name). */
+    onStepClick?: (index: number) => void;
+    /** Shortcut for `labels.nav`. */
+    ariaLabel?: string;
+    /** Full i18n override; see file header. */
+    labels?: HStepperLabels;
+}
+export declare function HStepper({ steps, current, onJump, onStepClick, ariaLabel, labels, }: HStepperProps): React.JSX.Element;
+export interface VStepperItem {
+    state?: StepState;
+    status?: StepStatus;
+    title?: React.ReactNode;
+    label?: React.ReactNode;
+    meta?: React.ReactNode;
+    timestamp?: React.ReactNode;
+    actor?: React.ReactNode;
+}
+export interface VStepperLabels {
+    nav?: string;
+    state?: Partial<Record<"complete" | "active" | "pending", string>>;
+}
+export interface VStepperProps {
+    items: VStepperItem[];
+    titleAs?: "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span" | "p";
+    ariaLabel?: string;
+    labels?: VStepperLabels;
+}
+/**
+ * VStepper - vertical historical / progression stepper.
+ *
+ * @param items     - list of { state|status, title, meta?, timestamp?, actor? }.
+ *                    `timestamp` (date/time) + `actor` (user) render as a
+ *                    muted "timestamp · actor" line under the title; `meta`
+ *                    renders on its own line (free-form, e.g. "En cours").
+ * @param titleAs   - element used for each step title. Defaults to "h4".
+ *                    Hosts whose outline already used h2/h3 above the
+ *                    stepper should pick the next level (e.g. titleAs="h3"
+ *                    after an h2 ActionBar title). Pass "div"/"span" to
+ *                    opt out of heading semantics entirely.
+ * @param labels    - i18n overrides; see file header.
+ */
+export declare function VStepper({ items, titleAs, labels, ariaLabel }: VStepperProps): React.JSX.Element;
+export default HStepper;
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/v2/components/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/lib/v2/components/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AAEH,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AACvE,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,QAAQ,GACR,WAAW,GACX,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,gBAAgB,CAAC;AA8J9D,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC;CACxE;AAED,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,4DAA4D;IAC5D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAW,EACX,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,GACP,EAAE,aAAa,qBA4Df;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,GAAG,QAAQ,GAAG,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,GAAG,CAAC;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,OAAc,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,aAAa,qBAuGnF;AAED,eAAe,QAAQ,CAAC"}

package/dist/v2/components/Stepper.js

@@ -0,0 +1,415 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HStepper = HStepper;
+exports.VStepper = VStepper;
+exports["default"] = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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); } /**
+ * Stepper - Portnet UI v2
+ *
+ * Charter §03 · Component "Stepper". Required on flows ≥ 3 steps (R-3.4).
+ *
+ * Two ways to drive HStepper:
+ *
+ *  1. SIMPLE mode — plain labels + `current` index (Charter default):
+ *
+ *       <HStepper
+ *         steps={["Identification", "Marchandise", "Banque", "Validation"]}
+ *         current={1}
+ *         onJump={i => goTo(i)}
+ *       />
+ *
+ *  2. RICH mode — objects carry their own state, including a "disabled"
+ *     state for locked future steps (used by wizards where step N is
+ *     unavailable until step N-1 has been submitted):
+ *
+ *       <HStepper
+ *         steps={[
+ *           { id: "importateur", label: "Importateur",  status: "completed" },
+ *           { id: "donneesTI",   label: "Données",      status: "current"   },
+ *           { id: "marchandises",label: "Marchandises", status: "disabled"  },
+ *           { id: "revision",    label: "Révision",     status: "pending"   },
+ *         ]}
+ *         onStepClick={i => goTo(i)}
+ *         ariaLabel="Étapes de création du titre"
+ *       />
+ *
+ *     status values: "current" | "active" | "completed" | "complete" |
+ *                    "pending" | "disabled"
+ *     ("current"/"active" and "completed"/"complete" are accepted as
+ *     synonyms to ease migration from host modules.)
+ *
+ *  VStepper — vertical history/progression timeline. Each item may carry
+ *  `timestamp` (date/time of the action) and `actor` (the user who did it);
+ *  they render as a muted "timestamp · actor" line under the title. `meta`
+ *  still works for free-form text (e.g. "En cours" on the active step):
+ *
+ *    <VStepper items={[
+ *       { status: "completed", title: "Titre d'importation créé",
+ *         timestamp: "27/03/2025 09:48", actor: "dsmoimp" },
+ *       { status: "completed", title: "Soumis à la banque (CITIBANK)",
+ *         timestamp: "27/03/2025 10:16", actor: "Transit Jebli" },
+ *       { status: "active",    title: "En attente de réponse banque", meta: "En cours" },
+ *    ]} />
+ *
+ * Localisation (FR / EN / AR):
+ *   <HStepper labels={{
+ *     nav:  "Form steps",
+ *     item: (n, label, state) =>
+ *       `Step ${n}: ${label} (${
+ *         state === "complete" ? "completed" :
+ *         state === "active"   ? "in progress" : "upcoming"
+ *       })`,
+ *   }} />
+ *
+ *   <VStepper labels={{
+ *     nav:   "Step history",
+ *     state: { complete: "Completed step.", active: "Current step.", pending: "Upcoming step." },
+ *   }} />
+ *
+ * A11y note (R-Ar.1):
+ *   Clickable HStepper steps render as real <button> elements.
+ *   VStepper's per-item title element is host-configurable via
+ *   `titleAs` so the page heading hierarchy stays consistent.
+ */
+var DEFAULT_H_LABELS = Object.freeze({
+  nav: "Étapes du formulaire",
+  item: function item(n, label, state) {
+    var suffix = state === "complete" ? " (complétée)" : state === "active" ? " (en cours)" : state === "disabled" ? " (verrouillée)" : " (à venir)";
+    return "\xC9tape ".concat(n, " : ").concat(label).concat(suffix);
+  }
+});
+var DEFAULT_V_LABELS = Object.freeze({
+  nav: "Historique des étapes",
+  state: Object.freeze({
+    complete: "Étape complétée. ",
+    active: "Étape en cours. ",
+    pending: "Étape à venir. "
+  })
+});
+var dotBaseStyle = {
+  width: 24,
+  height: 24,
+  borderRadius: "50%",
+  display: "grid",
+  placeItems: "center",
+  fontSize: "var(--text-xs)",
+  fontWeight: "var(--fw-semibold)",
+  flex: "0 0 auto",
+  border: "2px solid",
+  transition: "background var(--duration-base, 180ms), color var(--duration-base, 180ms), border-color var(--duration-base, 180ms)"
+};
+var stateStyle = function stateStyle(state) {
+  if (state === "complete") {
+    return {
+      background: "var(--accent)",
+      borderColor: "var(--accent)",
+      color: "var(--accent-fg)"
+    };
+  }
+  if (state === "active") {
+    return {
+      background: "var(--surface)",
+      borderColor: "var(--accent)",
+      color: "var(--accent)"
+    };
+  }
+  if (state === "disabled") {
+    return {
+      background: "var(--bg-subtle)",
+      borderColor: "var(--border)",
+      color: "var(--fg-subtle)"
+    };
+  }
+  return {
+    background: "var(--surface)",
+    borderColor: "var(--border-strong)",
+    color: "var(--fg-subtle)"
+  };
+};
+// Inner content shared between the clickable <button> and the
+// non-interactive <span> renderings of an HStepper step.
+function StepInner(_ref) {
+  var index = _ref.index,
+    label = _ref.label,
+    state = _ref.state;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: _objectSpread(_objectSpread({}, dotBaseStyle), stateStyle(state)),
+      children: state === "complete" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check["default"], {
+        fontSize: "inherit"
+      }) : index + 1
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        fontSize: "var(--text-sm)",
+        // Was 650 (non-standard, banned by Batch 1 typography tokens).
+        // var(--fw-semibold) (600) is the canonical "emphasised" weight.
+        fontWeight: state === "active" ? "var(--fw-semibold)" : "var(--fw-medium)",
+        color: state === "pending" ? "var(--fg-subtle)" : state === "disabled" ? "var(--fg-muted)" : "var(--fg)",
+        whiteSpace: "nowrap"
+      },
+      children: label
+    })]
+  });
+}
+var stepBoxSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  padding: "var(--s-1) calc(var(--s-1) + 2px)",
+  borderRadius: "var(--r-md)",
+  // Reset native <button> styling to match the previous Box look.
+  background: "transparent",
+  border: 0,
+  font: "inherit",
+  textAlign: "left",
+  "&:focus-visible": {
+    outline: "2px solid var(--accent)",
+    outlineOffset: "var(--pui-outline-offset)"
+  }
+};
+
+/* Detect whether the `steps` array carries plain labels (legacy)
+ * or rich {id, label, status} objects. ReactElements (icons,
+ * fragments) and strings are treated as plain labels.
+ * Plain boolean predicate (not a type guard): the rich object shape
+ * for VStepper also carries title/meta/etc., so narrowing to
+ * HStepperRichStep here would hide those fields. */
+function isRichStep(s) {
+  return s != null && _typeof(s) === "object" && !Array.isArray(s) && ! /*#__PURE__*/React.isValidElement(s) && ("label" in s || "status" in s);
+}
+function normaliseStatusToState(status) {
+  if (status === "current" || status === "active") return "active";
+  if (status === "completed" || status === "complete") return "complete";
+  if (status === "disabled") return "disabled";
+  return "pending";
+}
+
+/* Convert rich steps to the legacy { label, state, clickable, key }
+ * shape consumed by the rendering loop. */
+function normaliseSteps(steps, current) {
+  if (steps.length === 0) return [];
+  if (isRichStep(steps[0])) {
+    return steps.map(function (s, i) {
+      var _rich$id;
+      var rich = s;
+      var state = normaliseStatusToState(rich.status);
+      return {
+        key: (_rich$id = rich.id) !== null && _rich$id !== void 0 ? _rich$id : i,
+        label: rich.label,
+        state: state,
+        // Disabled steps are never clickable. Other rich states
+        // remain clickable so the host can offer free navigation.
+        clickable: state !== "disabled"
+      };
+    });
+  }
+  // Legacy: plain labels driven by `current`.
+  return steps.map(function (label, i) {
+    return {
+      key: i,
+      label: label,
+      state: i < current ? "complete" : i === current ? "active" : "pending",
+      clickable: i <= current
+    };
+  });
+}
+function HStepper(_ref2) {
+  var steps = _ref2.steps,
+    _ref2$current = _ref2.current,
+    current = _ref2$current === void 0 ? 0 : _ref2$current,
+    onJump = _ref2.onJump,
+    onStepClick = _ref2.onStepClick,
+    ariaLabel = _ref2.ariaLabel,
+    labels = _ref2.labels;
+  var L = labels ? _objectSpread(_objectSpread({}, DEFAULT_H_LABELS), labels) : DEFAULT_H_LABELS;
+  var navLabel = ariaLabel || L.nav;
+  var jumpHandler = onJump || onStepClick;
+  var normalised = normaliseSteps(steps, current);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
+    "aria-label": navLabel,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 8,
+      padding: "12px 0",
+      overflowX: "auto"
+    },
+    children: normalised.map(function (step, i) {
+      var a11yLabel = L.item(i + 1, step.label, step.state);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [step.clickable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+          component: "button",
+          type: "button",
+          "aria-current": step.state === "active" ? "step" : undefined,
+          "aria-label": a11yLabel,
+          onClick: function onClick() {
+            return jumpHandler === null || jumpHandler === void 0 ? void 0 : jumpHandler(i);
+          },
+          sx: _objectSpread(_objectSpread({}, stepBoxSx), {}, {
+            cursor: "pointer"
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepInner, {
+            index: i,
+            label: step.label,
+            state: step.state
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+          component: "span",
+          "aria-label": a11yLabel,
+          "aria-disabled": step.state === "disabled" ? "true" : undefined,
+          sx: _objectSpread(_objectSpread({}, stepBoxSx), {}, {
+            cursor: "default"
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepInner, {
+            index: i,
+            label: step.label,
+            state: step.state
+          })
+        }), i < normalised.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+          "aria-hidden": "true",
+          sx: {
+            flex: 1,
+            minWidth: 24,
+            height: 2,
+            background: step.state === "complete" ? "var(--accent)" : "var(--border)",
+            borderRadius: 1
+          }
+        })]
+      }, step.key);
+    })
+  });
+}
+/**
+ * VStepper - vertical historical / progression stepper.
+ *
+ * @param items     - list of { state|status, title, meta?, timestamp?, actor? }.
+ *                    `timestamp` (date/time) + `actor` (user) render as a
+ *                    muted "timestamp · actor" line under the title; `meta`
+ *                    renders on its own line (free-form, e.g. "En cours").
+ * @param titleAs   - element used for each step title. Defaults to "h4".
+ *                    Hosts whose outline already used h2/h3 above the
+ *                    stepper should pick the next level (e.g. titleAs="h3"
+ *                    after an h2 ActionBar title). Pass "div"/"span" to
+ *                    opt out of heading semantics entirely.
+ * @param labels    - i18n overrides; see file header.
+ */
+function VStepper(_ref3) {
+  var items = _ref3.items,
+    _ref3$titleAs = _ref3.titleAs,
+    titleAs = _ref3$titleAs === void 0 ? "h4" : _ref3$titleAs,
+    labels = _ref3.labels,
+    ariaLabel = _ref3.ariaLabel;
+  var L = labels ? _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_V_LABELS), labels), {}, {
+    state: _objectSpread(_objectSpread({}, DEFAULT_V_LABELS.state), labels.state || {})
+  }) : DEFAULT_V_LABELS;
+  var navLabel = ariaLabel || L.nav;
+
+  /* Accept the same rich-step shape HStepper uses, so host modules
+   * can pass the same array to both steppers without re-mapping. */
+  var normalisedItems = items.map(function (it) {
+    if (isRichStep(it) && it.status !== undefined) {
+      var _it$title;
+      return {
+        state: normaliseStatusToState(it.status),
+        title: (_it$title = it.title) !== null && _it$title !== void 0 ? _it$title : it.label,
+        meta: it.meta,
+        timestamp: it.timestamp,
+        actor: it.actor
+      };
+    }
+    return it;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
+    style: {
+      listStyle: "none",
+      padding: 0,
+      margin: 0
+    },
+    "aria-label": navLabel,
+    children: normalisedItems.map(function (it, i) {
+      var _it$state;
+      var st = (_it$state = it.state) !== null && _it$state !== void 0 ? _it$state : "pending";
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+        "aria-current": st === "active" ? "step" : undefined,
+        style: {
+          display: "flex",
+          gap: 12,
+          paddingBottom: i < normalisedItems.length - 1 ? 16 : 0,
+          position: "relative"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          "aria-hidden": "true",
+          style: _objectSpread(_objectSpread({}, dotBaseStyle), stateStyle(st)),
+          children: st === "complete" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Check["default"], {
+            fontSize: "inherit"
+          }) : i + 1
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "pui-sr-only",
+          children: L.state[st]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          style: {
+            flex: 1
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box["default"], {
+            component: titleAs,
+            sx: {
+              margin: 0,
+              fontSize: "var(--text-sm)",
+              fontWeight: "var(--fw-semibold)",
+              color: "var(--fg)",
+              lineHeight: "var(--lh-snug)"
+            },
+            children: it.title
+          }), (it.timestamp != null || it.actor != null) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+            style: {
+              margin: "2px 0 0",
+              fontSize: "var(--text-xs)",
+              color: "var(--fg-subtle)"
+            },
+            children: [it.timestamp != null ? it.timestamp : null, it.timestamp != null && it.actor != null ? " · " : null, it.actor != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              style: {
+                color: "var(--fg-muted)",
+                fontWeight: "var(--fw-medium)"
+              },
+              children: it.actor
+            }) : null]
+          }), it.meta != null && it.meta !== "" && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            style: {
+              margin: "2px 0 0",
+              fontSize: "var(--text-xs)",
+              color: "var(--fg-subtle)"
+            },
+            children: it.meta
+          })]
+        }), i < normalisedItems.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          "aria-hidden": "true",
+          style: {
+            position: "absolute",
+            left: 11,
+            top: 26,
+            bottom: 0,
+            width: 2,
+            background: "var(--border)"
+          }
+        })]
+      }, i);
+    })
+  });
+}
+var _default = exports["default"] = HStepper;
+//# sourceMappingURL=Stepper.js.map