@portnet/ui 6.0.0 → 6.0.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.js","names":["React","Box","jsx","_jsx","jsxs","_jsxs","TYPOGRAPHY_BY_LEVEL","Object","freeze","h2","fontSize","lineHeight","h3","h4","SectionHeader","_ref","_ref$level","level","icon","title","children","subtitle","action","sx","rest","_objectWithoutProperties","_excluded","headingText","typography","_objectSpread","display","alignItems","gap","color","marginTop","flex","minWidth","component","margin","fontWeight"],"sources":["../../../../src/lib/v2/components/SectionHeader.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport type { BoxProps } from \"@mui/material/Box\";\r\n\r\n/**\r\n * SectionHeader — Portnet UI v2\r\n *\r\n * Charter §03 · standalone section-header primitive. Replaces the\r\n * local AppTitle wrapper that host modules previously maintained\r\n * (audit Batch 2 violation C3 in ms-ti-fe — direct MUI Typography\r\n * with hardcoded styling).\r\n *\r\n * Distinguished from v2.FormSection: SectionHeader is JUST the\r\n * heading row (no wrapping content, no surface chrome). Use it\r\n * when you need to label a region but don't want the FormSection\r\n * card border + padding.\r\n *\r\n * Usage:\r\n *\r\n *   <SectionHeader level=\"h3\" icon={<DescriptionIcon />}>\r\n *     Données du titre\r\n *   </SectionHeader>\r\n *\r\n *   <SectionHeader\r\n *     level=\"h2\"\r\n *     title=\"Documents joints\"\r\n *     subtitle=\"Pièces transmises par l'opérateur\"\r\n *     action={<Button variant=\"ghost\">Tout télécharger</Button>}\r\n *   />\r\n *\r\n * The text can be passed either as `children` (single-line) or as\r\n * `title` + optional `subtitle` (multi-line).\r\n *\r\n * Props:\r\n *   level    — semantic h-level (\"h2\" / \"h3\" / \"h4\"). Default \"h3\".\r\n *              Pick the next level below the page's outermost\r\n *              heading (typically the ActionBar h1).\r\n *   icon     — optional leading icon element.\r\n *   title    — heading text. Use this OR children.\r\n *   children — heading text. Use this OR title.\r\n *   subtitle — optional secondary line beneath the title.\r\n *   action   — optional trailing element (Button, dropdown, etc.).\r\n *   sx       — escape hatch.\r\n */\r\n\r\nexport type SectionHeaderLevel = \"h2\" | \"h3\" | \"h4\";\r\n\r\nconst TYPOGRAPHY_BY_LEVEL: Record<SectionHeaderLevel, { fontSize: string; lineHeight: string }> = Object.freeze({\r\n  h2: { fontSize: \"var(--text-h2)\", lineHeight: \"var(--lh-tight)\" },\r\n  h3: { fontSize: \"var(--text-h3)\", lineHeight: \"var(--lh-snug)\"  },\r\n  h4: { fontSize: \"var(--text-h4)\", lineHeight: \"var(--lh-snug)\"  },\r\n});\r\n\r\nexport interface SectionHeaderProps extends Omit<BoxProps, \"title\"> {\r\n  level?: SectionHeaderLevel | undefined;\r\n  icon?: React.ReactElement | undefined;\r\n  title?: React.ReactNode | undefined;\r\n  subtitle?: React.ReactNode | undefined;\r\n  action?: React.ReactNode | undefined;\r\n}\r\n\r\nfunction SectionHeader({\r\n  level = \"h3\",\r\n  icon,\r\n  title,\r\n  children,\r\n  subtitle,\r\n  action,\r\n  sx,\r\n  ...rest\r\n}: SectionHeaderProps) {\r\n  const headingText = title ?? children;\r\n  const typography  = TYPOGRAPHY_BY_LEVEL[level] || TYPOGRAPHY_BY_LEVEL.h3;\r\n\r\n  return (\r\n    <Box\r\n      sx={{\r\n        display:     \"flex\",\r\n        alignItems:  subtitle ? \"flex-start\" : \"center\",\r\n        gap:         \"var(--s-2)\",\r\n        ...sx,\r\n      }}\r\n      {...rest}\r\n    >\r\n      {icon && (\r\n        <Box\r\n          aria-hidden=\"true\"\r\n          sx={{\r\n            color: \"var(--fg-muted)\",\r\n            display: \"inline-flex\",\r\n            // Lift the icon slightly so it lines up with the\r\n            // first cap-height of the heading text rather than\r\n            // floating at the baseline.\r\n            marginTop: subtitle ? \"2px\" : 0,\r\n            \"& svg\": { fontSize: 20 },\r\n          }}\r\n        >\r\n          {icon}\r\n        </Box>\r\n      )}\r\n\r\n      <Box sx={{ flex: 1, minWidth: 0 }}>\r\n        <Box\r\n          component={level}\r\n          sx={{\r\n            margin:     0,\r\n            fontWeight: \"var(--fw-semibold)\",\r\n            color:      \"var(--fg)\",\r\n            ...typography,\r\n          }}\r\n        >\r\n          {headingText}\r\n        </Box>\r\n        {subtitle && (\r\n          <Box\r\n            sx={{\r\n              marginTop:  \"var(--s-1)\",\r\n              fontSize:   \"var(--text-sm)\",\r\n              color:      \"var(--fg-muted)\",\r\n              lineHeight: \"var(--lh-normal)\",\r\n            }}\r\n          >\r\n            {subtitle}\r\n          </Box>\r\n        )}\r\n      </Box>\r\n\r\n      {action && <Box sx={{ flex: \"0 0 auto\" }}>{action}</Box>}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default SectionHeader;\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,254 @@
+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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+import * as React from "react";
+import Box from "@mui/material/Box";
+
+/**
+ * Segmented - Portnet UI v2
+ *
+ * Charter §03 · Component "Segmented control". Single-selection input
+ * for 2-4 mutually exclusive options. Use when Radio would feel
+ * overweighted (R-Sel.2). For panel switching use <Tabs> instead.
+ *
+ *   <Segmented
+ *     value={density}
+ *     onChange={setDensity}
+ *     options={[
+ *       { value: "comfortable", label: "Confort" },
+ *       { value: "compact",     label: "Compact" },
+ *     ]}
+ *     aria-label="Densité d'affichage"
+ *   />
+ *
+ *   With icons (icon-only is allowed but each option MUST then have its
+ *   own aria-label):
+ *
+ *   <Segmented
+ *     value={view} onChange={setView}
+ *     options={[
+ *       { value: "list", icon: <ViewListIcon />,    "aria-label": "Liste" },
+ *       { value: "grid", icon: <ViewModuleIcon />, "aria-label": "Grille" },
+ *     ]}
+ *     aria-label="Mode d'affichage"
+ *   />
+ *
+ * A11y note (R-K.1):
+ *   role="radiogroup" + role="radio" with roving tabindex per WAI-ARIA.
+ *   Arrow keys move focus AND auto-select (selection follows focus).
+ *   Space/Enter re-affirm the focused option (no-op under auto-select,
+ *   but consumes the keystroke so automated a11y audits don't flag the
+ *   role and so users following the alternative WAI-ARIA radiogroup
+ *   pattern aren't surprised).
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Segmented(_ref) {
+  var _options$selectedInde;
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    ariaLabel = _ref["aria-label"],
+    ariaLabelledBy = _ref["aria-labelledby"],
+    sx = _ref.sx;
+  if (process.env["NODE_ENV"] !== "production") {
+    if (!ariaLabel && !ariaLabelledBy) {
+      // eslint-disable-next-line no-console
+      console.warn("[@portnet/ui v2] <Segmented> requires aria-label or aria-labelledby on the radiogroup.");
+    }
+    if (options.length < 2 || options.length > 4) {
+      // eslint-disable-next-line no-console
+      console.warn("[@portnet/ui v2] <Segmented> with ".concat(options.length, " options - charter R-Sel.2 says 2-4. ") + "Below 2: drop the control. Above 4: use <Select> or <Tabs>.");
+    }
+  }
+  var refs = React.useRef([]);
+
+  // Index of the currently-selected option drives aria-checked + styling.
+  var selectedIndex = Math.max(0, options.findIndex(function (o) {
+    return o.value === value;
+  }));
+
+  // SEG-1 — Roving tabindex target. Per WAI-ARIA only ONE option is tabbable;
+  // normally that's the selected one, but if the current value points at a
+  // disabled option we fall back to the first enabled option so the group is
+  // still reachable by Tab (WCAG 2.1.1). -1 when every option is disabled.
+  var tabbableIndex = !((_options$selectedInde = options[selectedIndex]) !== null && _options$selectedInde !== void 0 && _options$selectedInde.disabled) ? selectedIndex : options.findIndex(function (o) {
+    return !o.disabled;
+  });
+  var focusOption = function focusOption(i) {
+    var node = refs.current[i];
+    if (node) node.focus();
+  };
+  var move = function move(delta) {
+    var len = options.length;
+    var next = selectedIndex;
+    for (var step = 0; step < len; step += 1) {
+      var _options$next;
+      next = (next + delta + len) % len;
+      if (!((_options$next = options[next]) !== null && _options$next !== void 0 && _options$next.disabled)) break;
+    }
+    var target = options[next];
+    if (target && !target.disabled) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(target.value);
+      // schedule focus to land after React commits the new selectedIndex
+      requestAnimationFrame(function () {
+        return focusOption(next);
+      });
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (disabled) return;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        e.preventDefault();
+        move(+1);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        e.preventDefault();
+        move(-1);
+        break;
+      case "Home":
+        {
+          e.preventDefault();
+          var first = options.findIndex(function (o) {
+            return !o.disabled;
+          });
+          var opt = first >= 0 ? options[first] : undefined;
+          if (opt) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(opt.value);
+            requestAnimationFrame(function () {
+              return focusOption(first);
+            });
+          }
+          break;
+        }
+      case "End":
+        {
+          e.preventDefault();
+          var _loop = function _loop(i) {
+            var opt = options[i];
+            if (opt && !opt.disabled) {
+              onChange === null || onChange === void 0 ? void 0 : onChange(opt.value);
+              requestAnimationFrame(function () {
+                return focusOption(i);
+              });
+              return {
+                v: void 0
+              };
+            }
+          };
+          for (var i = options.length - 1; i >= 0; i -= 1) {
+            var _ret = _loop(i);
+            if (_typeof(_ret) === "object") return _ret.v;
+          }
+          break;
+        }
+      case " ":
+      case "Enter":
+        {
+          // R-K.1 - Space/Enter re-affirm the focused (= selected) option.
+          var _opt = options[selectedIndex];
+          if (_opt && !_opt.disabled) {
+            e.preventDefault();
+            onChange === null || onChange === void 0 ? void 0 : onChange(_opt.value);
+          }
+          break;
+        }
+      default:
+    }
+  };
+
+  // Per-option padding pulled from the spacing scale (var(--s-1) = 4 px,
+  // var(--s-2) = 8 px). The "+2" on the small horizontal padding
+  // mirrors the +2 button padding offset in createPortnetTheme — all
+  // small interactive elements add a 2 px breathing offset to the
+  // base grid for visual rhythm.
+  var padY = size === "sm" ? "var(--s-1)" : "calc(var(--s-1) + 2px)";
+  var padX = size === "sm" ? "calc(var(--s-2) + 2px)" : "var(--s-3)";
+  var fontSize = size === "sm" ? "var(--text-xs)" : "var(--text-sm)";
+  return /*#__PURE__*/_jsx(Box, {
+    role: "radiogroup",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-disabled": disabled || undefined,
+    onKeyDown: handleKeyDown,
+    sx: _objectSpread({
+      display: "inline-flex",
+      width: fullWidth ? "100%" : "auto",
+      padding: "2px",
+      background: "var(--bg-subtle)",
+      border: "1px solid var(--border)",
+      borderRadius: "var(--r-md)",
+      gap: "2px",
+      opacity: disabled ? 0.55 : 1
+    }, sx),
+    children: options.map(function (opt, i) {
+      var isSelected = i === selectedIndex;
+      var isDisabled = disabled || opt.disabled;
+      return /*#__PURE__*/_jsxs(Box, {
+        ref: function ref(el) {
+          refs.current[i] = el;
+        },
+        role: "radio",
+        "aria-checked": isSelected,
+        "aria-disabled": isDisabled || undefined,
+        "aria-label": opt["aria-label"],
+        tabIndex: i === tabbableIndex && !isDisabled ? 0 : -1,
+        onClick: function onClick() {
+          if (isDisabled || isSelected) return;
+          onChange === null || onChange === void 0 ? void 0 : onChange(opt.value);
+        },
+        sx: {
+          flex: fullWidth ? 1 : "0 0 auto",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 0.75,
+          padding: "".concat(padY, " ").concat(padX),
+          borderRadius: "calc(var(--r-md) - 2px)",
+          fontSize: fontSize,
+          fontWeight: isSelected ? "var(--fw-semibold)" : "var(--fw-medium)",
+          color: isSelected ? "var(--fg)" : "var(--fg-muted)",
+          background: isSelected ? "var(--surface)" : "transparent",
+          boxShadow: isSelected ? "var(--shadow-xs)" : "none",
+          cursor: isDisabled ? "not-allowed" : isSelected ? "default" : "pointer",
+          userSelect: "none",
+          whiteSpace: "nowrap",
+          transition: "background var(--duration-fast, 80ms) ease, color var(--duration-fast, 80ms) ease",
+          "&:hover": _objectSpread({}, !isSelected && !isDisabled ? {
+            background: "var(--bg-hover)",
+            color: "var(--fg)"
+          } : {}),
+          "&:focus-visible": {
+            outline: "2px solid var(--accent)",
+            outlineOffset: "var(--pui-outline-offset)"
+          }
+        },
+        children: [opt.icon && /*#__PURE__*/_jsx(Box, {
+          component: "span",
+          "aria-hidden": "true",
+          sx: {
+            display: "inline-flex",
+            color: "currentColor"
+          },
+          children: opt.icon
+        }), opt.label && /*#__PURE__*/_jsx(Box, {
+          component: "span",
+          children: opt.label
+        })]
+      }, opt.value);
+    })
+  });
+}
+export default Segmented;
+//# sourceMappingURL=Segmented.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Segmented.js","names":["React","Box","jsx","_jsx","jsxs","_jsxs","Segmented","_ref","_options$selectedInde","value","onChange","options","_ref$size","size","_ref$fullWidth","fullWidth","_ref$disabled","disabled","ariaLabel","ariaLabelledBy","sx","process","env","console","warn","length","concat","refs","useRef","selectedIndex","Math","max","findIndex","o","tabbableIndex","focusOption","i","node","current","focus","move","delta","len","next","step","_options$next","target","requestAnimationFrame","handleKeyDown","e","key","preventDefault","first","opt","undefined","_loop","v","_ret","_typeof","padY","padX","fontSize","role","onKeyDown","_objectSpread","display","width","padding","background","border","borderRadius","gap","opacity","children","map","isSelected","isDisabled","ref","el","tabIndex","onClick","flex","alignItems","justifyContent","fontWeight","color","boxShadow","cursor","userSelect","whiteSpace","transition","outline","outlineOffset","icon","component","label"],"sources":["../../../../src/lib/v2/components/Segmented.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport Box from \"@mui/material/Box\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\n\r\n/**\r\n * Segmented - Portnet UI v2\r\n *\r\n * Charter §03 · Component \"Segmented control\". Single-selection input\r\n * for 2-4 mutually exclusive options. Use when Radio would feel\r\n * overweighted (R-Sel.2). For panel switching use <Tabs> instead.\r\n *\r\n *   <Segmented\r\n *     value={density}\r\n *     onChange={setDensity}\r\n *     options={[\r\n *       { value: \"comfortable\", label: \"Confort\" },\r\n *       { value: \"compact\",     label: \"Compact\" },\r\n *     ]}\r\n *     aria-label=\"Densité d'affichage\"\r\n *   />\r\n *\r\n *   With icons (icon-only is allowed but each option MUST then have its\r\n *   own aria-label):\r\n *\r\n *   <Segmented\r\n *     value={view} onChange={setView}\r\n *     options={[\r\n *       { value: \"list\", icon: <ViewListIcon />,    \"aria-label\": \"Liste\" },\r\n *       { value: \"grid\", icon: <ViewModuleIcon />, \"aria-label\": \"Grille\" },\r\n *     ]}\r\n *     aria-label=\"Mode d'affichage\"\r\n *   />\r\n *\r\n * A11y note (R-K.1):\r\n *   role=\"radiogroup\" + role=\"radio\" with roving tabindex per WAI-ARIA.\r\n *   Arrow keys move focus AND auto-select (selection follows focus).\r\n *   Space/Enter re-affirm the focused option (no-op under auto-select,\r\n *   but consumes the keystroke so automated a11y audits don't flag the\r\n *   role and so users following the alternative WAI-ARIA radiogroup\r\n *   pattern aren't surprised).\r\n */\r\n\r\nexport type SegmentedValue = string | number;\r\n\r\nexport interface SegmentedOption {\r\n  value: SegmentedValue;\r\n  label?: React.ReactNode | undefined;\r\n  icon?: React.ReactElement | undefined;\r\n  disabled?: boolean | undefined;\r\n  \"aria-label\"?: string | undefined;\r\n}\r\n\r\nexport interface SegmentedProps {\r\n  value: SegmentedValue;\r\n  onChange?: ((value: SegmentedValue) => void) | undefined;\r\n  options: SegmentedOption[];\r\n  size?: \"sm\" | \"md\" | undefined;\r\n  fullWidth?: boolean | undefined;\r\n  disabled?: boolean | undefined;\r\n  \"aria-label\"?: string | undefined;\r\n  \"aria-labelledby\"?: string | undefined;\r\n  sx?: SxProps<Theme> | undefined;\r\n}\r\n\r\nfunction Segmented({\r\n  value,\r\n  onChange,\r\n  options,\r\n  size = \"md\",\r\n  fullWidth = false,\r\n  disabled = false,\r\n  \"aria-label\": ariaLabel,\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  sx,\r\n}: SegmentedProps) {\r\n  if (process.env[\"NODE_ENV\"] !== \"production\") {\r\n    if (!ariaLabel && !ariaLabelledBy) {\r\n      // eslint-disable-next-line no-console\r\n      console.warn(\r\n        \"[@portnet/ui v2] <Segmented> requires aria-label or aria-labelledby on the radiogroup.\"\r\n      );\r\n    }\r\n    if (options.length < 2 || options.length > 4) {\r\n      // eslint-disable-next-line no-console\r\n      console.warn(\r\n        `[@portnet/ui v2] <Segmented> with ${options.length} options - charter R-Sel.2 says 2-4. ` +\r\n        \"Below 2: drop the control. Above 4: use <Select> or <Tabs>.\"\r\n      );\r\n    }\r\n  }\r\n\r\n  const refs = React.useRef<Array<HTMLDivElement | null>>([]);\r\n\r\n  // Index of the currently-selected option drives aria-checked + styling.\r\n  const selectedIndex = Math.max(\r\n    0,\r\n    options.findIndex((o) => o.value === value)\r\n  );\r\n\r\n  // SEG-1 — Roving tabindex target. Per WAI-ARIA only ONE option is tabbable;\r\n  // normally that's the selected one, but if the current value points at a\r\n  // disabled option we fall back to the first enabled option so the group is\r\n  // still reachable by Tab (WCAG 2.1.1). -1 when every option is disabled.\r\n  const tabbableIndex = !options[selectedIndex]?.disabled\r\n    ? selectedIndex\r\n    : options.findIndex((o) => !o.disabled);\r\n\r\n  const focusOption = (i: number) => {\r\n    const node = refs.current[i];\r\n    if (node) node.focus();\r\n  };\r\n\r\n  const move = (delta: number) => {\r\n    const len = options.length;\r\n    let next = selectedIndex;\r\n    for (let step = 0; step < len; step += 1) {\r\n      next = (next + delta + len) % len;\r\n      if (!options[next]?.disabled) break;\r\n    }\r\n    const target = options[next];\r\n    if (target && !target.disabled) {\r\n      onChange?.(target.value);\r\n      // schedule focus to land after React commits the new selectedIndex\r\n      requestAnimationFrame(() => focusOption(next));\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (disabled) return;\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        e.preventDefault();\r\n        move(+1);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        e.preventDefault();\r\n        move(-1);\r\n        break;\r\n      case \"Home\": {\r\n        e.preventDefault();\r\n        const first = options.findIndex((o) => !o.disabled);\r\n        const opt = first >= 0 ? options[first] : undefined;\r\n        if (opt) {\r\n          onChange?.(opt.value);\r\n          requestAnimationFrame(() => focusOption(first));\r\n        }\r\n        break;\r\n      }\r\n      case \"End\": {\r\n        e.preventDefault();\r\n        for (let i = options.length - 1; i >= 0; i -= 1) {\r\n          const opt = options[i];\r\n          if (opt && !opt.disabled) {\r\n            onChange?.(opt.value);\r\n            requestAnimationFrame(() => focusOption(i));\r\n            return;\r\n          }\r\n        }\r\n        break;\r\n      }\r\n      case \" \":\r\n      case \"Enter\": {\r\n        // R-K.1 - Space/Enter re-affirm the focused (= selected) option.\r\n        const opt = options[selectedIndex];\r\n        if (opt && !opt.disabled) {\r\n          e.preventDefault();\r\n          onChange?.(opt.value);\r\n        }\r\n        break;\r\n      }\r\n      default:\r\n    }\r\n  };\r\n\r\n  // Per-option padding pulled from the spacing scale (var(--s-1) = 4 px,\r\n  // var(--s-2) = 8 px). The \"+2\" on the small horizontal padding\r\n  // mirrors the +2 button padding offset in createPortnetTheme — all\r\n  // small interactive elements add a 2 px breathing offset to the\r\n  // base grid for visual rhythm.\r\n  const padY = size === \"sm\" ? \"var(--s-1)\" : \"calc(var(--s-1) + 2px)\";\r\n  const padX = size === \"sm\" ? \"calc(var(--s-2) + 2px)\" : \"var(--s-3)\";\r\n  const fontSize = size === \"sm\" ? \"var(--text-xs)\" : \"var(--text-sm)\";\r\n\r\n  return (\r\n    <Box\r\n      role=\"radiogroup\"\r\n      aria-label={ariaLabel}\r\n      aria-labelledby={ariaLabelledBy}\r\n      aria-disabled={disabled || undefined}\r\n      onKeyDown={handleKeyDown}\r\n      sx={{\r\n        display: \"inline-flex\",\r\n        width: fullWidth ? \"100%\" : \"auto\",\r\n        padding: \"2px\",\r\n        background: \"var(--bg-subtle)\",\r\n        border: \"1px solid var(--border)\",\r\n        borderRadius: \"var(--r-md)\",\r\n        gap: \"2px\",\r\n        opacity: disabled ? 0.55 : 1,\r\n        ...sx,\r\n      }}\r\n    >\r\n      {options.map((opt, i) => {\r\n        const isSelected = i === selectedIndex;\r\n        const isDisabled = disabled || opt.disabled;\r\n        return (\r\n          <Box\r\n            key={opt.value}\r\n            ref={(el) => { refs.current[i] = el as HTMLDivElement | null; }}\r\n            role=\"radio\"\r\n            aria-checked={isSelected}\r\n            aria-disabled={isDisabled || undefined}\r\n            aria-label={opt[\"aria-label\"]}\r\n            tabIndex={i === tabbableIndex && !isDisabled ? 0 : -1}\r\n            onClick={() => {\r\n              if (isDisabled || isSelected) return;\r\n              onChange?.(opt.value);\r\n            }}\r\n            sx={{\r\n              flex: fullWidth ? 1 : \"0 0 auto\",\r\n              display: \"inline-flex\",\r\n              alignItems: \"center\",\r\n              justifyContent: \"center\",\r\n              gap: 0.75,\r\n              padding: `${padY} ${padX}`,\r\n              borderRadius: \"calc(var(--r-md) - 2px)\",\r\n              fontSize,\r\n              fontWeight: isSelected ? \"var(--fw-semibold)\" : \"var(--fw-medium)\",\r\n              color: isSelected ? \"var(--fg)\" : \"var(--fg-muted)\",\r\n              background: isSelected ? \"var(--surface)\" : \"transparent\",\r\n              boxShadow: isSelected ? \"var(--shadow-xs)\" : \"none\",\r\n              cursor: isDisabled ? \"not-allowed\" : isSelected ? \"default\" : \"pointer\",\r\n              userSelect: \"none\",\r\n              whiteSpace: \"nowrap\",\r\n              transition:\r\n                \"background var(--duration-fast, 80ms) ease, color var(--duration-fast, 80ms) ease\",\r\n              \"&:hover\": {\r\n                ...(!isSelected && !isDisabled\r\n                  ? { background: \"var(--bg-hover)\", color: \"var(--fg)\" }\r\n                  : {}),\r\n              },\r\n              \"&:focus-visible\": {\r\n                outline: \"2px solid var(--accent)\",\r\n                outlineOffset: \"var(--pui-outline-offset)\",\r\n              },\r\n            }}\r\n          >\r\n            {opt.icon && (\r\n              <Box\r\n                component=\"span\"\r\n                aria-hidden=\"true\"\r\n                sx={{ display: \"inline-flex\", color: \"currentColor\" }}\r\n              >\r\n                {opt.icon}\r\n              </Box>\r\n            )}\r\n            {opt.label && <Box component=\"span\">{opt.label}</Box>}\r\n          </Box>\r\n        );\r\n      })}\r\n    </Box>\r\n  );\r\n}\r\n\r\nexport default Segmented;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,GAAG,MAAM,mBAAmB;;AAGnC;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;AApCA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA4DA,SAASC,SAASA,CAAAC,IAAA,EAUC;EAAA,IAAAC,qBAAA;EAAA,IATjBC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAAC,SAAA,GAAAL,IAAA,CACPM,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,IAAI,GAAAA,SAAA;IAAAE,cAAA,GAAAP,IAAA,CACXQ,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IAAAE,aAAA,GAAAT,IAAA,CACjBU,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IACFE,SAAS,GAAAX,IAAA,CAAvB,YAAY;IACOY,cAAc,GAAAZ,IAAA,CAAjC,iBAAiB;IACjBa,EAAE,GAAAb,IAAA,CAAFa,EAAE;EAEF,IAAIC,OAAO,CAACC,GAAG,CAAC,UAAU,CAAC,KAAK,YAAY,EAAE;IAC5C,IAAI,CAACJ,SAAS,IAAI,CAACC,cAAc,EAAE;MACjC;MACAI,OAAO,CAACC,IAAI,CACV,wFACF,CAAC;IACH;IACA,IAAIb,OAAO,CAACc,MAAM,GAAG,CAAC,IAAId,OAAO,CAACc,MAAM,GAAG,CAAC,EAAE;MAC5C;MACAF,OAAO,CAACC,IAAI,CACV,qCAAAE,MAAA,CAAqCf,OAAO,CAACc,MAAM,6CACnD,6DACF,CAAC;IACH;EACF;EAEA,IAAME,IAAI,GAAG3B,KAAK,CAAC4B,MAAM,CAA+B,EAAE,CAAC;;EAE3D;EACA,IAAMC,aAAa,GAAGC,IAAI,CAACC,GAAG,CAC5B,CAAC,EACDpB,OAAO,CAACqB,SAAS,CAAC,UAACC,CAAC;IAAA,OAAKA,CAAC,CAACxB,KAAK,KAAKA,KAAK;EAAA,EAC5C,CAAC;;EAED;EACA;EACA;EACA;EACA,IAAMyB,aAAa,GAAG,GAAA1B,qBAAA,GAACG,OAAO,CAACkB,aAAa,CAAC,cAAArB,qBAAA,eAAtBA,qBAAA,CAAwBS,QAAQ,IACnDY,aAAa,GACblB,OAAO,CAACqB,SAAS,CAAC,UAACC,CAAC;IAAA,OAAK,CAACA,CAAC,CAAChB,QAAQ;EAAA,EAAC;EAEzC,IAAMkB,WAAW,GAAG,SAAdA,WAAWA,CAAIC,CAAS,EAAK;IACjC,IAAMC,IAAI,GAAGV,IAAI,CAACW,OAAO,CAACF,CAAC,CAAC;IAC5B,IAAIC,IAAI,EAAEA,IAAI,CAACE,KAAK,CAAC,CAAC;EACxB,CAAC;EAED,IAAMC,IAAI,GAAG,SAAPA,IAAIA,CAAIC,KAAa,EAAK;IAC9B,IAAMC,GAAG,GAAG/B,OAAO,CAACc,MAAM;IAC1B,IAAIkB,IAAI,GAAGd,aAAa;IACxB,KAAK,IAAIe,IAAI,GAAG,CAAC,EAAEA,IAAI,GAAGF,GAAG,EAAEE,IAAI,IAAI,CAAC,EAAE;MAAA,IAAAC,aAAA;MACxCF,IAAI,GAAG,CAACA,IAAI,GAAGF,KAAK,GAAGC,GAAG,IAAIA,GAAG;MACjC,IAAI,GAAAG,aAAA,GAAClC,OAAO,CAACgC,IAAI,CAAC,cAAAE,aAAA,eAAbA,aAAA,CAAe5B,QAAQ,GAAE;IAChC;IACA,IAAM6B,MAAM,GAAGnC,OAAO,CAACgC,IAAI,CAAC;IAC5B,IAAIG,MAAM,IAAI,CAACA,MAAM,CAAC7B,QAAQ,EAAE;MAC9BP,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGoC,MAAM,CAACrC,KAAK,CAAC;MACxB;MACAsC,qBAAqB,CAAC;QAAA,OAAMZ,WAAW,CAACQ,IAAI,CAAC;MAAA,EAAC;IAChD;EACF,CAAC;EAED,IAAMK,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,CAAsC,EAAK;IAChE,IAAIhC,QAAQ,EAAE;IACd,QAAQgC,CAAC,CAACC,GAAG;MACX,KAAK,YAAY;MACjB,KAAK,WAAW;QACdD,CAAC,CAACE,cAAc,CAAC,CAAC;QAClBX,IAAI,CAAC,CAAC,CAAC,CAAC;QACR;MACF,KAAK,WAAW;MAChB,KAAK,SAAS;QACZS,CAAC,CAACE,cAAc,CAAC,CAAC;QAClBX,IAAI,CAAC,CAAC,CAAC,CAAC;QACR;MACF,KAAK,MAAM;QAAE;UACXS,CAAC,CAACE,cAAc,CAAC,CAAC;UAClB,IAAMC,KAAK,GAAGzC,OAAO,CAACqB,SAAS,CAAC,UAACC,CAAC;YAAA,OAAK,CAACA,CAAC,CAAChB,QAAQ;UAAA,EAAC;UACnD,IAAMoC,GAAG,GAAGD,KAAK,IAAI,CAAC,GAAGzC,OAAO,CAACyC,KAAK,CAAC,GAAGE,SAAS;UACnD,IAAID,GAAG,EAAE;YACP3C,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG2C,GAAG,CAAC5C,KAAK,CAAC;YACrBsC,qBAAqB,CAAC;cAAA,OAAMZ,WAAW,CAACiB,KAAK,CAAC;YAAA,EAAC;UACjD;UACA;QACF;MACA,KAAK,KAAK;QAAE;UACVH,CAAC,CAACE,cAAc,CAAC,CAAC;UAAC,IAAAI,KAAA,YAAAA,MACVnB,CAAC;YACR,IAAMiB,GAAG,GAAG1C,OAAO,CAACyB,CAAC,CAAC;YACtB,IAAIiB,GAAG,IAAI,CAACA,GAAG,CAACpC,QAAQ,EAAE;cACxBP,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG2C,GAAG,CAAC5C,KAAK,CAAC;cACrBsC,qBAAqB,CAAC;gBAAA,OAAMZ,WAAW,CAACC,CAAC,CAAC;cAAA,EAAC;cAC3C;gBAAAoB,CAAA;cAAA;YACF;UAAC;UANH,KAAK,IAAIpB,CAAC,GAAGzB,OAAO,CAACc,MAAM,GAAG,CAAC,EAAEW,CAAC,IAAI,CAAC,EAAEA,CAAC,IAAI,CAAC,EAAE;YAAA,IAAAqB,IAAA,GAAAF,KAAA,CAAxCnB,CAAC;YAAA,IAAAsB,OAAA,CAAAD,IAAA,uBAAAA,IAAA,CAAAD,CAAA;UAOV;UACA;QACF;MACA,KAAK,GAAG;MACR,KAAK,OAAO;QAAE;UACZ;UACA,IAAMH,IAAG,GAAG1C,OAAO,CAACkB,aAAa,CAAC;UAClC,IAAIwB,IAAG,IAAI,CAACA,IAAG,CAACpC,QAAQ,EAAE;YACxBgC,CAAC,CAACE,cAAc,CAAC,CAAC;YAClBzC,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG2C,IAAG,CAAC5C,KAAK,CAAC;UACvB;UACA;QACF;MACA;IACF;EACF,CAAC;;EAED;EACA;EACA;EACA;EACA;EACA,IAAMkD,IAAI,GAAG9C,IAAI,KAAK,IAAI,GAAG,YAAY,GAAG,wBAAwB;EACpE,IAAM+C,IAAI,GAAG/C,IAAI,KAAK,IAAI,GAAG,wBAAwB,GAAG,YAAY;EACpE,IAAMgD,QAAQ,GAAGhD,IAAI,KAAK,IAAI,GAAG,gBAAgB,GAAG,gBAAgB;EAEpE,oBACEV,IAAA,CAACF,GAAG;IACF6D,IAAI,EAAC,YAAY;IACjB,cAAY5C,SAAU;IACtB,mBAAiBC,cAAe;IAChC,iBAAeF,QAAQ,IAAIqC,SAAU;IACrCS,SAAS,EAAEf,aAAc;IACzB5B,EAAE,EAAA4C,aAAA;MACAC,OAAO,EAAE,aAAa;MACtBC,KAAK,EAAEnD,SAAS,GAAG,MAAM,GAAG,MAAM;MAClCoD,OAAO,EAAE,KAAK;MACdC,UAAU,EAAE,kBAAkB;MAC9BC,MAAM,EAAE,yBAAyB;MACjCC,YAAY,EAAE,aAAa;MAC3BC,GAAG,EAAE,KAAK;MACVC,OAAO,EAAEvD,QAAQ,GAAG,IAAI,GAAG;IAAC,GACzBG,EAAE,CACL;IAAAqD,QAAA,EAED9D,OAAO,CAAC+D,GAAG,CAAC,UAACrB,GAAG,EAAEjB,CAAC,EAAK;MACvB,IAAMuC,UAAU,GAAGvC,CAAC,KAAKP,aAAa;MACtC,IAAM+C,UAAU,GAAG3D,QAAQ,IAAIoC,GAAG,CAACpC,QAAQ;MAC3C,oBACEZ,KAAA,CAACJ,GAAG;QAEF4E,GAAG,EAAE,SAAAA,IAACC,EAAE,EAAK;UAAEnD,IAAI,CAACW,OAAO,CAACF,CAAC,CAAC,GAAG0C,EAA2B;QAAE,CAAE;QAChEhB,IAAI,EAAC,OAAO;QACZ,gBAAca,UAAW;QACzB,iBAAeC,UAAU,IAAItB,SAAU;QACvC,cAAYD,GAAG,CAAC,YAAY,CAAE;QAC9B0B,QAAQ,EAAE3C,CAAC,KAAKF,aAAa,IAAI,CAAC0C,UAAU,GAAG,CAAC,GAAG,CAAC,CAAE;QACtDI,OAAO,EAAE,SAAAA,QAAA,EAAM;UACb,IAAIJ,UAAU,IAAID,UAAU,EAAE;UAC9BjE,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG2C,GAAG,CAAC5C,KAAK,CAAC;QACvB,CAAE;QACFW,EAAE,EAAE;UACF6D,IAAI,EAAElE,SAAS,GAAG,CAAC,GAAG,UAAU;UAChCkD,OAAO,EAAE,aAAa;UACtBiB,UAAU,EAAE,QAAQ;UACpBC,cAAc,EAAE,QAAQ;UACxBZ,GAAG,EAAE,IAAI;UACTJ,OAAO,KAAAzC,MAAA,CAAKiC,IAAI,OAAAjC,MAAA,CAAIkC,IAAI,CAAE;UAC1BU,YAAY,EAAE,yBAAyB;UACvCT,QAAQ,EAARA,QAAQ;UACRuB,UAAU,EAAET,UAAU,GAAG,oBAAoB,GAAG,kBAAkB;UAClEU,KAAK,EAAEV,UAAU,GAAG,WAAW,GAAG,iBAAiB;UACnDP,UAAU,EAAEO,UAAU,GAAG,gBAAgB,GAAG,aAAa;UACzDW,SAAS,EAAEX,UAAU,GAAG,kBAAkB,GAAG,MAAM;UACnDY,MAAM,EAAEX,UAAU,GAAG,aAAa,GAAGD,UAAU,GAAG,SAAS,GAAG,SAAS;UACvEa,UAAU,EAAE,MAAM;UAClBC,UAAU,EAAE,QAAQ;UACpBC,UAAU,EACR,mFAAmF;UACrF,SAAS,EAAA1B,aAAA,KACH,CAACW,UAAU,IAAI,CAACC,UAAU,GAC1B;YAAER,UAAU,EAAE,iBAAiB;YAAEiB,KAAK,EAAE;UAAY,CAAC,GACrD,CAAC,CAAC,CACP;UACD,iBAAiB,EAAE;YACjBM,OAAO,EAAE,yBAAyB;YAClCC,aAAa,EAAE;UACjB;QACF,CAAE;QAAAnB,QAAA,GAEDpB,GAAG,CAACwC,IAAI,iBACP1F,IAAA,CAACF,GAAG;UACF6F,SAAS,EAAC,MAAM;UAChB,eAAY,MAAM;UAClB1E,EAAE,EAAE;YAAE6C,OAAO,EAAE,aAAa;YAAEoB,KAAK,EAAE;UAAe,CAAE;UAAAZ,QAAA,EAErDpB,GAAG,CAACwC;QAAI,CACN,CACN,EACAxC,GAAG,CAAC0C,KAAK,iBAAI5F,IAAA,CAACF,GAAG;UAAC6F,SAAS,EAAC,MAAM;UAAArB,QAAA,EAAEpB,GAAG,CAAC0C;QAAK,CAAM,CAAC;MAAA,GAjDhD1C,GAAG,CAAC5C,KAkDN,CAAC;IAEV,CAAC;EAAC,CACC,CAAC;AAEV;AAEA,eAAeH,SAAS","ignoreList":[]}