@smwb/ui-react 2.7.0 → 2.9.0

package/dist/components/navigation/pagination/pagination.js

@@ -1,16 +1,16 @@
-import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import { jsx as r, jsxs as q } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/pagination/pagination.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                               */
-import { forwardRef as S, useRef as q } from "react";
-import A from "clsx";
-import { Icon as B } from "../../base/icon/icon.js";
-import { useForkRef as K } from "../../../hooks/useForkRef.js";
-const d = (a, m) => Array.from({ length: Math.max(m - a + 1, 0) }, (s, e) => a + e), O = (a, m, s, e) => {
+import { forwardRef as B, useRef as K } from "react";
+import N from "clsx";
+import { Icon as O } from "../../base/icon/icon.js";
+import { useForkRef as z } from "../../../hooks/useForkRef.js";
+const d = (a, m) => Array.from({ length: Math.max(m - a + 1, 0) }, (t, e) => a + e), G = (a, m, t, e) => {
   const g = d(1, Math.min(e, a)), f = d(Math.max(a - e + 1, e + 1), a), c = Math.max(
-    Math.min(m - s, a - e - s * 2 - 1),
+    Math.min(m - t, a - e - t * 2 - 1),
     e + 2
   ), o = Math.min(
-    Math.max(m + s, e + s * 2 + 2),
+    Math.max(m + t, e + t * 2 + 2),
     f.length > 0 ? f[0] - 2 : a - 1
   );
   return [
@@ -20,89 +20,91 @@ const d = (a, m) => Array.from({ length: Math.max(m - a + 1, 0) }, (s, e) => a +
     ...o < a - e - 1 ? ["end-ellipsis"] : a - e > e ? [a - e] : [],
     ...f
   ];
-}, W = S(function({
+}, Y = B(function({
   className: m,
-  count: s,
+  count: t,
   page: e,
   siblingCount: g = 1,
   boundaryCount: f = 1,
   size: c = "medium",
   variant: o = "filled",
-  shape: R = "circular",
+  shape: $ = "circular",
   color: x = "default",
   disabled: p = !1,
-  showFirstButton: N = !1,
-  showLastButton: $ = !1,
-  hidePrevButton: P = !1,
-  hideNextButton: E = !1,
+  showFirstButton: P = !1,
+  showLastButton: E = !1,
+  hidePrevButton: L = !1,
+  hideNextButton: j = !1,
   onChange: w,
-  ...L
-}, j) {
-  const v = q(null), D = K(j, v), b = (i) => {
-    p || i === e || i < 1 || i > s || w == null || w(i);
-  }, F = (i) => {
-    var h, M, k;
+  "data-testid": D = "pagination",
+  ...v
+}, F) {
+  var k;
+  const b = K(null), H = z(F, b), M = (i) => {
+    p || i === e || i < 1 || i > t || w == null || w(i);
+  }, I = (i) => {
+    var h, A, R;
     if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(i.key))
       return;
-    const t = Array.from(
-      (M = (h = v.current) == null ? void 0 : h.querySelectorAll("button.smwb-pagination__item:not(:disabled)")) != null ? M : []
+    const s = Array.from(
+      (A = (h = b.current) == null ? void 0 : h.querySelectorAll("button.smwb-pagination__item:not(:disabled)")) != null ? A : []
     );
-    if (t.length === 0)
+    if (s.length === 0)
       return;
-    const l = t.indexOf(document.activeElement);
+    const l = s.indexOf(document.activeElement);
     let n = l;
-    i.key === "ArrowRight" ? n = Math.min(l + 1, t.length - 1) : i.key === "ArrowLeft" ? n = Math.max(l - 1, 0) : i.key === "Home" ? n = 0 : i.key === "End" && (n = t.length - 1), i.preventDefault(), (k = t[n]) == null || k.focus();
-  }, H = O(s, e, g, f), _ = (i, t, l, n, h) => h ? null : /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+    i.key === "ArrowRight" ? n = Math.min(l + 1, s.length - 1) : i.key === "ArrowLeft" ? n = Math.max(l - 1, 0) : i.key === "Home" ? n = 0 : i.key === "End" && (n = s.length - 1), i.preventDefault(), (R = s[n]) == null || R.focus();
+  }, S = G(t, e, g, f), _ = (i, s, l, n, h) => h ? null : /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
     "button",
     {
       type: "button",
       className: "smwb-pagination__item smwb-pagination__nav",
-      "aria-label": t,
-      disabled: p || l < 1 || l > s,
-      onClick: () => b(l),
-      children: /* @__PURE__ */ r(B, { name: n, size: c === "small" ? 16 : 18 })
+      "aria-label": s,
+      disabled: p || l < 1 || l > t,
+      onClick: () => M(l),
+      children: /* @__PURE__ */ r(O, { name: n, size: c === "small" ? 16 : 18 })
     }
   ) }, i);
   return /* @__PURE__ */ r(
     "nav",
     {
-      ...L,
-      ref: D,
-      "data-testid": "pagination",
-      "aria-label": "pagination",
-      className: A(
+      ...v,
+      ref: H,
+      "data-testid": D,
+      "aria-label": (k = v["aria-label"]) != null ? k : "pagination",
+      className: N(
         "smwb-pagination",
         `smwb-pagination_${c}`,
         `smwb-pagination_${o}`,
-        `smwb-pagination_shape-${R}`,
+        `smwb-pagination_shape-${$}`,
         x !== "default" && `smwb-pagination_color-${x}`,
         { "smwb-pagination_disabled": p },
         m
       ),
-      children: /* @__PURE__ */ I("ul", { className: "smwb-pagination__list", onKeyDown: F, children: [
-        _("first", "First page", 1, "first_page", !N),
-        _("prev", "Previous page", e - 1, "chevron_left", P),
-        H.map(
-          (i, t) => typeof i == "number" ? /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ q("ul", { className: "smwb-pagination__list", onKeyDown: I, children: [
+        _("first", "First page", 1, "first_page", !P),
+        _("prev", "Previous page", e - 1, "chevron_left", L),
+        S.map(
+          (i, s) => typeof i == "number" ? /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
             "button",
             {
               type: "button",
-              className: A("smwb-pagination__item", { "smwb-pagination__item_selected": i === e }),
+              className: N("smwb-pagination__item", { "smwb-pagination__item_selected": i === e }),
               "aria-current": i === e ? "page" : void 0,
               disabled: p,
-              onClick: () => b(i),
+              onClick: () => M(i),
               children: i
             }
-          ) }, i) : /* @__PURE__ */ r("li", { className: "smwb-pagination__ellipsis", "aria-hidden": "true", children: "…" }, `${i}-${t}`)
+          ) }, i) : /* @__PURE__ */ r("li", { className: "smwb-pagination__ellipsis", "aria-hidden": "true", children: "…" }, `${i}-${s}`)
         ),
-        _("next", "Next page", e + 1, "chevron_right", E),
-        _("last", "Last page", s, "last_page", !$)
+        _("next", "Next page", e + 1, "chevron_right", j),
+        _("last", "Last page", t, "last_page", !E)
       ] })
     }
   );
 });
 export {
-  W as Pagination,
-  W as default
+  Y as Pagination,
+  Y as default
 };
 //# sourceMappingURL=pagination.js.map

package/dist/components/navigation/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../../src/components/navigation/pagination/pagination.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, KeyboardEvent, useRef } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport type PaginationColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n  className?: string;\n  /** Total number of pages. */\n  count: number;\n  /** Current page (1-based). */\n  page: number;\n  /** Pages shown on each side of the current page. */\n  siblingCount?: number;\n  /** Pages always shown at the start and end. */\n  boundaryCount?: number;\n  size?: \"small\" | \"medium\";\n  /** Item style. */\n  variant?: \"filled\" | \"outlined\";\n  /** Item shape. */\n  shape?: \"rounded\" | \"circular\";\n  color?: PaginationColor;\n  disabled?: boolean;\n  showFirstButton?: boolean;\n  showLastButton?: boolean;\n  hidePrevButton?: boolean;\n  hideNextButton?: boolean;\n  onChange?: (page: number) => void;\n}\n\ntype PaginationItem = number | \"start-ellipsis\" | \"end-ellipsis\";\n\nconst range = (start: number, end: number): number[] =>\n  Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);\n\nconst buildItems = (count: number, page: number, siblingCount: number, boundaryCount: number): PaginationItem[] => {\n  const startPages = range(1, Math.min(boundaryCount, count));\n  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);\n\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2\n  );\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0] - 2 : count - 1\n  );\n\n  return [\n    ...startPages,\n    ...(siblingsStart > boundaryCount + 2\n      ? ([\"start-ellipsis\"] as PaginationItem[])\n      : boundaryCount + 1 < count - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n    ...range(siblingsStart, siblingsEnd),\n    ...(siblingsEnd < count - boundaryCount - 1\n      ? ([\"end-ellipsis\"] as PaginationItem[])\n      : count - boundaryCount > boundaryCount\n        ? [count - boundaryCount]\n        : []),\n    ...endPages,\n  ];\n};\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(\n  {\n    className,\n    count,\n    page,\n    siblingCount = 1,\n    boundaryCount = 1,\n    size = \"medium\",\n    variant = \"filled\",\n    shape = \"circular\",\n    color = \"default\",\n    disabled = false,\n    showFirstButton = false,\n    showLastButton = false,\n    hidePrevButton = false,\n    hideNextButton = false,\n    onChange,\n    ...props\n  },\n  ref\n) {\n  const navRef = useRef<HTMLElement>(null);\n  const mergedRef = useForkRef<HTMLElement>(ref, navRef);\n\n  const go = (target: number) => {\n    if (disabled || target === page || target < 1 || target > count) {\n      return;\n    }\n    onChange?.(target);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {\n    if (![\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(e.key)) {\n      return;\n    }\n    const buttons = Array.from(\n      navRef.current?.querySelectorAll<HTMLButtonElement>(\"button.smwb-pagination__item:not(:disabled)\") ?? []\n    );\n    if (buttons.length === 0) {\n      return;\n    }\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    let next = current;\n    if (e.key === \"ArrowRight\") next = Math.min(current + 1, buttons.length - 1);\n    else if (e.key === \"ArrowLeft\") next = Math.max(current - 1, 0);\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = buttons.length - 1;\n    e.preventDefault();\n    buttons[next]?.focus();\n  };\n\n  const items = buildItems(count, page, siblingCount, boundaryCount);\n\n  const navButton = (key: string, label: string, target: number, iconName: string, hidden?: boolean) =>\n    hidden ? null : (\n      <li key={key}>\n        <button\n          type=\"button\"\n          className=\"smwb-pagination__item smwb-pagination__nav\"\n          aria-label={label}\n          disabled={disabled || target < 1 || target > count}\n          onClick={() => go(target)}\n        >\n          <Icon name={iconName} size={size === \"small\" ? 16 : 18} />\n        </button>\n      </li>\n    );\n\n  return (\n    <nav\n      {...props}\n      ref={mergedRef}\n      data-testid=\"pagination\"\n      aria-label=\"pagination\"\n      className={cn(\n        \"smwb-pagination\",\n        `smwb-pagination_${size}`,\n        `smwb-pagination_${variant}`,\n        `smwb-pagination_shape-${shape}`,\n        color !== \"default\" && `smwb-pagination_color-${color}`,\n        { \"smwb-pagination_disabled\": disabled },\n        className\n      )}\n    >\n      <ul className=\"smwb-pagination__list\" onKeyDown={onKeyDown}>\n        {navButton(\"first\", \"First page\", 1, \"first_page\", !showFirstButton)}\n        {navButton(\"prev\", \"Previous page\", page - 1, \"chevron_left\", hidePrevButton)}\n        {items.map((item, index) =>\n          typeof item === \"number\" ? (\n            <li key={item}>\n              <button\n                type=\"button\"\n                className={cn(\"smwb-pagination__item\", { \"smwb-pagination__item_selected\": item === page })}\n                aria-current={item === page ? \"page\" : undefined}\n                disabled={disabled}\n                onClick={() => go(item)}\n              >\n                {item}\n              </button>\n            </li>\n          ) : (\n            <li key={`${item}-${index}`} className=\"smwb-pagination__ellipsis\" aria-hidden=\"true\">\n              …\n            </li>\n          )\n        )}\n        {navButton(\"next\", \"Next page\", page + 1, \"chevron_right\", hideNextButton)}\n        {navButton(\"last\", \"Last page\", count, \"last_page\", !showLastButton)}\n      </ul>\n    </nav>\n  );\n});\n\nexport default Pagination;\n"],"names":["range","start","end","_","i","buildItems","count","page","siblingCount","boundaryCount","startPages","endPages","siblingsStart","siblingsEnd","Pagination","forwardRef","className","size","variant","shape","color","disabled","showFirstButton","showLastButton","hidePrevButton","hideNextButton","onChange","props","ref","navRef","useRef","mergedRef","useForkRef","go","target","onKeyDown","e","buttons","_b","_a","current","next","_c","items","navButton","key","label","iconName","hidden","jsx","Icon","cn","jsxs","item","index"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../../src/components/navigation/pagination/pagination.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, KeyboardEvent, useRef } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport type PaginationColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n  className?: string;\n  /** Total number of pages. */\n  count: number;\n  /** Current page (1-based). */\n  page: number;\n  /** Pages shown on each side of the current page. */\n  siblingCount?: number;\n  /** Pages always shown at the start and end. */\n  boundaryCount?: number;\n  size?: \"small\" | \"medium\";\n  /** Item style. */\n  variant?: \"filled\" | \"outlined\";\n  /** Item shape. */\n  shape?: \"rounded\" | \"circular\";\n  color?: PaginationColor;\n  disabled?: boolean;\n  showFirstButton?: boolean;\n  showLastButton?: boolean;\n  hidePrevButton?: boolean;\n  hideNextButton?: boolean;\n  onChange?: (page: number) => void;\n  /** Test id of the root `<nav>`; `pagination` unless given. */\n  \"data-testid\"?: string;\n}\n\ntype PaginationItem = number | \"start-ellipsis\" | \"end-ellipsis\";\n\nconst range = (start: number, end: number): number[] =>\n  Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);\n\nconst buildItems = (count: number, page: number, siblingCount: number, boundaryCount: number): PaginationItem[] => {\n  const startPages = range(1, Math.min(boundaryCount, count));\n  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);\n\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2\n  );\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0] - 2 : count - 1\n  );\n\n  return [\n    ...startPages,\n    ...(siblingsStart > boundaryCount + 2\n      ? ([\"start-ellipsis\"] as PaginationItem[])\n      : boundaryCount + 1 < count - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n    ...range(siblingsStart, siblingsEnd),\n    ...(siblingsEnd < count - boundaryCount - 1\n      ? ([\"end-ellipsis\"] as PaginationItem[])\n      : count - boundaryCount > boundaryCount\n        ? [count - boundaryCount]\n        : []),\n    ...endPages,\n  ];\n};\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(\n  {\n    className,\n    count,\n    page,\n    siblingCount = 1,\n    boundaryCount = 1,\n    size = \"medium\",\n    variant = \"filled\",\n    shape = \"circular\",\n    color = \"default\",\n    disabled = false,\n    showFirstButton = false,\n    showLastButton = false,\n    hidePrevButton = false,\n    hideNextButton = false,\n    onChange,\n    \"data-testid\": dataTestId = \"pagination\",\n    ...props\n  },\n  ref\n) {\n  const navRef = useRef<HTMLElement>(null);\n  const mergedRef = useForkRef<HTMLElement>(ref, navRef);\n\n  const go = (target: number) => {\n    if (disabled || target === page || target < 1 || target > count) {\n      return;\n    }\n    onChange?.(target);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {\n    if (![\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(e.key)) {\n      return;\n    }\n    const buttons = Array.from(\n      navRef.current?.querySelectorAll<HTMLButtonElement>(\"button.smwb-pagination__item:not(:disabled)\") ?? []\n    );\n    if (buttons.length === 0) {\n      return;\n    }\n    const current = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    let next = current;\n    if (e.key === \"ArrowRight\") next = Math.min(current + 1, buttons.length - 1);\n    else if (e.key === \"ArrowLeft\") next = Math.max(current - 1, 0);\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = buttons.length - 1;\n    e.preventDefault();\n    buttons[next]?.focus();\n  };\n\n  const items = buildItems(count, page, siblingCount, boundaryCount);\n\n  const navButton = (key: string, label: string, target: number, iconName: string, hidden?: boolean) =>\n    hidden ? null : (\n      <li key={key}>\n        <button\n          type=\"button\"\n          className=\"smwb-pagination__item smwb-pagination__nav\"\n          aria-label={label}\n          disabled={disabled || target < 1 || target > count}\n          onClick={() => go(target)}\n        >\n          <Icon name={iconName} size={size === \"small\" ? 16 : 18} />\n        </button>\n      </li>\n    );\n\n  return (\n    <nav\n      {...props}\n      ref={mergedRef}\n      data-testid={dataTestId}\n      // A default the caller's own replaces, to name it in their language; an\n      // explicit undefined keeps it.\n      aria-label={props[\"aria-label\"] ?? \"pagination\"}\n      className={cn(\n        \"smwb-pagination\",\n        `smwb-pagination_${size}`,\n        `smwb-pagination_${variant}`,\n        `smwb-pagination_shape-${shape}`,\n        color !== \"default\" && `smwb-pagination_color-${color}`,\n        { \"smwb-pagination_disabled\": disabled },\n        className\n      )}\n    >\n      <ul className=\"smwb-pagination__list\" onKeyDown={onKeyDown}>\n        {navButton(\"first\", \"First page\", 1, \"first_page\", !showFirstButton)}\n        {navButton(\"prev\", \"Previous page\", page - 1, \"chevron_left\", hidePrevButton)}\n        {items.map((item, index) =>\n          typeof item === \"number\" ? (\n            <li key={item}>\n              <button\n                type=\"button\"\n                className={cn(\"smwb-pagination__item\", { \"smwb-pagination__item_selected\": item === page })}\n                aria-current={item === page ? \"page\" : undefined}\n                disabled={disabled}\n                onClick={() => go(item)}\n              >\n                {item}\n              </button>\n            </li>\n          ) : (\n            <li key={`${item}-${index}`} className=\"smwb-pagination__ellipsis\" aria-hidden=\"true\">\n              …\n            </li>\n          )\n        )}\n        {navButton(\"next\", \"Next page\", page + 1, \"chevron_right\", hideNextButton)}\n        {navButton(\"last\", \"Last page\", count, \"last_page\", !showLastButton)}\n      </ul>\n    </nav>\n  );\n});\n\nexport default Pagination;\n"],"names":["range","start","end","_","i","buildItems","count","page","siblingCount","boundaryCount","startPages","endPages","siblingsStart","siblingsEnd","Pagination","forwardRef","className","size","variant","shape","color","disabled","showFirstButton","showLastButton","hidePrevButton","hideNextButton","onChange","dataTestId","props","ref","navRef","useRef","mergedRef","useForkRef","go","target","onKeyDown","e","buttons","_b","_a","current","next","_c","items","navButton","key","label","iconName","hidden","jsx","Icon","cn","jsxs","item","index"],"mappings":"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"}

package/dist/components/navigation/sidebar/sidebar.d.ts

@@ -19,6 +19,16 @@ export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
     onCollapsedChange?: (collapsed: boolean) => void;
     /** Accessible label for the built-in collapse toggle. */
     collapseToggleAriaLabel?: string;
+    /**
+     * Place the rail inside its container instead of pinning it to the window.
+     * The sidebar stays in the page flow (`position: relative`), keeps its
+     * variant width as a non-shrinking flex item and scrolls a long menu inside
+     * itself, so sibling content flows beside it and reflows when it collapses.
+     * Give the container a definite height (e.g. a fixed-height flex row) to
+     * make the rail fill it; with an auto-height container the rail sizes
+     * itself to the menu. Defaults to `false`: the sidebar stays viewport-fixed.
+     */
+    contained?: boolean;
 }
 export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
 export default Sidebar;

package/dist/components/navigation/sidebar/sidebar.js

@@ -1,107 +1,110 @@
-import { jsxs as R, jsx as e } from "react/jsx-runtime";
+import { jsxs as k, jsx as e } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/sidebar/sidebar.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                         */
-import j, { forwardRef as V, useState as g } from "react";
-import S from "clsx";
-import { Ripple as x } from "../../base/ripple/ripple.js";
-import { Icon as z } from "../../base/icon/icon.js";
-import { useControllableState as $ } from "../../../hooks/useControllableState.js";
-const O = V(function({
-  className: o,
-  variant: d = "default",
+import g, { forwardRef as x, useState as z } from "react";
+import y from "clsx";
+import { Ripple as $ } from "../../base/ripple/ripple.js";
+import { Icon as q } from "../../base/icon/icon.js";
+import { useControllableState as B } from "../../../hooks/useControllableState.js";
+const U = x(function({
+  className: c,
+  variant: o = "default",
   menuItems: s,
-  activeItem: m,
-  defaultActiveItem: l = null,
-  onActiveItemChange: n,
-  collapsible: t = !1,
-  collapsed: f,
-  defaultCollapsed: b = !1,
+  activeItem: d,
+  defaultActiveItem: n = null,
+  onActiveItemChange: i,
+  collapsible: l = !1,
+  collapsed: m,
+  defaultCollapsed: p = !1,
   onCollapsedChange: _,
   collapseToggleAriaLabel: v = "Toggle navigation",
-  ...w
-}, r) {
-  const i = m !== void 0, [k, y] = g(l), C = i ? m : k, [c, E] = $({
-    value: f,
-    defaultValue: b,
+  contained: w = !1,
+  ...t
+}, b) {
+  var R;
+  const h = d !== void 0, [C, E] = z(n), T = h ? d : C, [r, j] = B({
+    value: m,
+    defaultValue: p,
     onChange: _
-  }), h = t && c ? "compactMini" : d;
-  return /* @__PURE__ */ R(
+  }), N = l && r ? "compactMini" : o;
+  return /* @__PURE__ */ k(
     "aside",
     {
-      ref: r,
-      className: S("smwb-sidebar", o, `smwb-${h}`, {
-        "smwb-sidebar_collapsible": t,
-        "smwb-sidebar_collapsed": t && c
+      ref: b,
+      className: y("smwb-sidebar", c, `smwb-${N}`, {
+        "smwb-sidebar_collapsible": l,
+        "smwb-sidebar_collapsed": l && r,
+        "smwb-sidebar_contained": w
       }),
-      role: "menubar",
-      ...w,
+      ...t,
+      role: (R = t.role) != null ? R : "menubar",
       children: [
-        t && /* @__PURE__ */ e("div", { className: "smwb-sidebar__collapse", children: /* @__PURE__ */ e(
+        l && /* @__PURE__ */ e("div", { className: "smwb-sidebar__collapse", children: /* @__PURE__ */ e(
           "button",
           {
             type: "button",
             className: "smwb-sidebar__collapse-btn",
             "aria-label": v,
-            "aria-expanded": !c,
-            onClick: () => E(!c),
-            children: /* @__PURE__ */ e(z, { name: c ? "chevron_right" : "chevron_left", size: 20 })
+            "aria-expanded": !r,
+            onClick: () => j(!r),
+            children: /* @__PURE__ */ e(q, { name: r ? "chevron_right" : "chevron_left", size: 20 })
           }
         ) }),
-        /* @__PURE__ */ e("nav", { className: "smwb-sidebar__nav", children: s && (s == null ? void 0 : s.map((a, p) => /* @__PURE__ */ e(
-          q,
+        /* @__PURE__ */ e("nav", { className: "smwb-sidebar__nav", children: s && (s == null ? void 0 : s.map((a, f) => /* @__PURE__ */ e(
+          F,
           {
             as: a.as,
-            isActive: C === p,
-            onClick: (T) => {
-              var N;
-              i || y(p), n == null || n(p), (N = a.onClick) == null || N.call(a, T);
+            isActive: T === f,
+            onClick: (V) => {
+              var S;
+              h || E(f), i == null || i(f), (S = a.onClick) == null || S.call(a, V);
             },
             icon: a.icon,
             title: a.title,
             href: a.href,
-            variant: h
+            variant: N
           },
-          p
+          f
         ))) })
       ]
     }
   );
 });
-function q({
+function F({
   isActive: u,
-  icon: o,
-  title: d,
+  icon: c,
+  title: o,
   as: s = "div",
-  href: m,
-  onMouseDown: l,
-  variant: n,
-  ...t
+  href: d,
+  onMouseDown: n,
+  variant: i,
+  ...l
 }) {
-  const f = j.useRef(null), b = (r) => {
-    l == null || l(r);
-  }, _ = (r) => {
-    var i;
-    (i = f.current) == null || i.onRipple(r);
-  }, v = /* @__PURE__ */ e(x, { actionRef: f });
-  return /* @__PURE__ */ R(
+  const m = g.useRef(null), p = (t) => {
+    n == null || n(t);
+  }, _ = (t) => {
+    var b;
+    (b = m.current) == null || b.onRipple(t);
+  }, v = /* @__PURE__ */ e($, { actionRef: m });
+  return /* @__PURE__ */ k(
     s,
     {
-      href: m,
+      href: d,
       role: "menuitem",
-      className: S("sidebar__nav__item", "smwb-nav-item", n, { active: u }),
-      onMouseDown: b,
+      className: y("sidebar__nav__item", "smwb-nav-item", i, { active: u }),
+      onMouseDown: p,
       onPointerDown: _,
-      ...t,
+      ...l,
       children: [
-        o && /* @__PURE__ */ e("span", { className: "smwb-nav-item__icon", children: o }),
-        d && /* @__PURE__ */ e("span", { className: "smwb-nav-item__title", children: d }),
+        c && /* @__PURE__ */ e("span", { className: "smwb-nav-item__icon", children: c }),
+        o && /* @__PURE__ */ e("span", { className: "smwb-nav-item__title", children: o }),
         v
       ]
     }
   );
 }
 export {
-  O as Sidebar,
-  O as default
+  U as Sidebar,
+  U as default
 };
 //# sourceMappingURL=sidebar.js.map

package/dist/components/navigation/sidebar/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","sources":["../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {\n  className?: string;\n  variant?: \"compact\" | \"default\" | \"compactMini\";\n  menuItems?: MenuItemProps[];\n  /** Controlled index of the active menu item. */\n  activeItem?: number | null;\n  /** Default active index (uncontrolled). */\n  defaultActiveItem?: number | null;\n  /** Called with the index of the activated item. */\n  onActiveItemChange?: (index: number) => void;\n  /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Accessible label for the built-in collapse toggle. */\n  collapseToggleAriaLabel?: string;\n}\n\nexport const Sidebar = forwardRef<HTMLElement, SidebarProps>(function Sidebar(\n  {\n    className,\n    variant = \"default\",\n    menuItems,\n    activeItem: activeItemProp,\n    defaultActiveItem = null,\n    onActiveItemChange,\n    collapsible = false,\n    collapsed: collapsedProp,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    collapseToggleAriaLabel = \"Toggle navigation\",\n    ...rest\n  },\n  ref\n) {\n  const isControlled = activeItemProp !== undefined;\n  const [activeItemState, setActiveItemState] = useState<number | null>(defaultActiveItem);\n  const activeItem = isControlled ? activeItemProp : activeItemState;\n\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant,\n  // otherwise it honours the requested variant.\n  const effectiveVariant = collapsible && collapsed ? \"compactMini\" : variant;\n\n  return (\n    <aside\n      ref={ref}\n      className={cn(\"smwb-sidebar\", className, `smwb-${effectiveVariant}`, {\n        \"smwb-sidebar_collapsible\": collapsible,\n        \"smwb-sidebar_collapsed\": collapsible && collapsed,\n      })}\n      role=\"menubar\"\n      {...rest}\n    >\n      {collapsible && (\n        <div className=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            className=\"smwb-sidebar__collapse-btn\"\n            aria-label={collapseToggleAriaLabel}\n            aria-expanded={!collapsed}\n            onClick={() => setCollapsed(!collapsed)}\n          >\n            <Icon name={collapsed ? \"chevron_right\" : \"chevron_left\"} size={20} />\n          </button>\n        </div>\n      )}\n      <nav className=\"smwb-sidebar__nav\">\n        {menuItems &&\n          menuItems?.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              as={item.as}\n              isActive={activeItem === idx}\n              onClick={(e) => {\n                if (!isControlled) {\n                  setActiveItemState(idx);\n                }\n                onActiveItemChange?.(idx);\n                item.onClick?.(e);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant}\n            />\n          ))}\n      </nav>\n    </aside>\n  );\n});\n\nexport default Sidebar;\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: React.ReactNode;\n  title: string;\n  isActive?: boolean;\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  as?: React.ElementType;\n  href?: string;\n  variant?: \"compact\" | \"default\" | \"compactMini\";\n}\n\nfunction MenuItem({\n  isActive,\n  icon,\n  title,\n  as = \"div\",\n  href,\n  onMouseDown: onMouseDownProp,\n  variant,\n  ...rest\n}: MenuItemProps) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const rippleElement = <Ripple actionRef={rippleRef} />;\n\n  const ElementType = as;\n\n  return (\n    <ElementType\n      href={href}\n      role=\"menuitem\"\n      className={cn(\"sidebar__nav__item\", \"smwb-nav-item\", variant, { active: isActive })}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {icon && <span className=\"smwb-nav-item__icon\">{icon}</span>}\n      {title && <span className=\"smwb-nav-item__title\">{title}</span>}\n      {rippleElement}\n    </ElementType>\n  );\n}\n"],"names":["Sidebar","forwardRef","className","variant","menuItems","activeItemProp","defaultActiveItem","onActiveItemChange","collapsible","collapsedProp","defaultCollapsed","onCollapsedChange","collapseToggleAriaLabel","rest","ref","isControlled","activeItemState","setActiveItemState","useState","activeItem","collapsed","setCollapsed","useControllableState","effectiveVariant","jsxs","cn","jsx","Icon","item","idx","MenuItem","e","_a","isActive","icon","title","as","href","onMouseDownProp","rippleRef","React","onMouseDown","event","onPointerDown","rippleElement","Ripple"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","sources":["../../../../src/components/navigation/sidebar/sidebar.tsx"],"sourcesContent":["import React, { forwardRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\n\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {\n  className?: string;\n  variant?: \"compact\" | \"default\" | \"compactMini\";\n  menuItems?: MenuItemProps[];\n  /** Controlled index of the active menu item. */\n  activeItem?: number | null;\n  /** Default active index (uncontrolled). */\n  defaultActiveItem?: number | null;\n  /** Called with the index of the activated item. */\n  onActiveItemChange?: (index: number) => void;\n  /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. */\n  collapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Accessible label for the built-in collapse toggle. */\n  collapseToggleAriaLabel?: string;\n  /**\n   * Place the rail inside its container instead of pinning it to the window.\n   * The sidebar stays in the page flow (`position: relative`), keeps its\n   * variant width as a non-shrinking flex item and scrolls a long menu inside\n   * itself, so sibling content flows beside it and reflows when it collapses.\n   * Give the container a definite height (e.g. a fixed-height flex row) to\n   * make the rail fill it; with an auto-height container the rail sizes\n   * itself to the menu. Defaults to `false`: the sidebar stays viewport-fixed.\n   */\n  contained?: boolean;\n}\n\nexport const Sidebar = forwardRef<HTMLElement, SidebarProps>(function Sidebar(\n  {\n    className,\n    variant = \"default\",\n    menuItems,\n    activeItem: activeItemProp,\n    defaultActiveItem = null,\n    onActiveItemChange,\n    collapsible = false,\n    collapsed: collapsedProp,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    collapseToggleAriaLabel = \"Toggle navigation\",\n    contained = false,\n    ...rest\n  },\n  ref\n) {\n  const isControlled = activeItemProp !== undefined;\n  const [activeItemState, setActiveItemState] = useState<number | null>(defaultActiveItem);\n  const activeItem = isControlled ? activeItemProp : activeItemState;\n\n  const [collapsed, setCollapsed] = useControllableState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n  });\n\n  // When collapsed the rail always shows the icon-only mini variant,\n  // otherwise it honours the requested variant.\n  const effectiveVariant = collapsible && collapsed ? \"compactMini\" : variant;\n\n  return (\n    <aside\n      ref={ref}\n      className={cn(\"smwb-sidebar\", className, `smwb-${effectiveVariant}`, {\n        \"smwb-sidebar_collapsible\": collapsible,\n        \"smwb-sidebar_collapsed\": collapsible && collapsed,\n        \"smwb-sidebar_contained\": contained,\n      })}\n      {...rest}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={rest.role ?? \"menubar\"}\n    >\n      {collapsible && (\n        <div className=\"smwb-sidebar__collapse\">\n          <button\n            type=\"button\"\n            className=\"smwb-sidebar__collapse-btn\"\n            aria-label={collapseToggleAriaLabel}\n            aria-expanded={!collapsed}\n            onClick={() => setCollapsed(!collapsed)}\n          >\n            <Icon name={collapsed ? \"chevron_right\" : \"chevron_left\"} size={20} />\n          </button>\n        </div>\n      )}\n      <nav className=\"smwb-sidebar__nav\">\n        {menuItems &&\n          menuItems?.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              as={item.as}\n              isActive={activeItem === idx}\n              onClick={(e) => {\n                if (!isControlled) {\n                  setActiveItemState(idx);\n                }\n                onActiveItemChange?.(idx);\n                item.onClick?.(e);\n              }}\n              icon={item.icon}\n              title={item.title}\n              href={item.href}\n              variant={effectiveVariant}\n            />\n          ))}\n      </nav>\n    </aside>\n  );\n});\n\nexport default Sidebar;\n\nexport interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: React.ReactNode;\n  title: string;\n  isActive?: boolean;\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n  as?: React.ElementType;\n  href?: string;\n  variant?: \"compact\" | \"default\" | \"compactMini\";\n}\n\nfunction MenuItem({\n  isActive,\n  icon,\n  title,\n  as = \"div\",\n  href,\n  onMouseDown: onMouseDownProp,\n  variant,\n  ...rest\n}: MenuItemProps) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const rippleElement = <Ripple actionRef={rippleRef} />;\n\n  const ElementType = as;\n\n  return (\n    <ElementType\n      href={href}\n      role=\"menuitem\"\n      className={cn(\"sidebar__nav__item\", \"smwb-nav-item\", variant, { active: isActive })}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {icon && <span className=\"smwb-nav-item__icon\">{icon}</span>}\n      {title && <span className=\"smwb-nav-item__title\">{title}</span>}\n      {rippleElement}\n    </ElementType>\n  );\n}\n"],"names":["Sidebar","forwardRef","className","variant","menuItems","activeItemProp","defaultActiveItem","onActiveItemChange","collapsible","collapsedProp","defaultCollapsed","onCollapsedChange","collapseToggleAriaLabel","contained","rest","ref","isControlled","activeItemState","setActiveItemState","useState","activeItem","collapsed","setCollapsed","useControllableState","effectiveVariant","jsxs","cn","_a","jsx","Icon","item","idx","MenuItem","e","isActive","icon","title","as","href","onMouseDownProp","rippleRef","React","onMouseDown","event","onPointerDown","rippleElement","Ripple"],"mappings":"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"}

package/dist/components/navigation/stepper/stepper.d.ts

@@ -28,6 +28,8 @@ export interface StepperProps extends HTMLAttributes<HTMLDivElement> {
     alternativeLabel?: boolean;
     /** Makes steps clickable; receives the clicked step index. */
     onStepClick?: (index: number) => void;
+    /** Test id of the stepper `<div>`; `stepper` unless given. */
+    "data-testid"?: string;
 }
 export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Stepper;

package/dist/components/navigation/stepper/stepper.js

@@ -1,48 +1,57 @@
-import { jsx as s, jsxs as m } from "react/jsx-runtime";
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/stepper/stepper.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                         */
-import { forwardRef as y, Fragment as z } from "react";
-import w from "clsx";
-import { Icon as D } from "../../base/icon/icon.js";
-const j = 12, F = y(function({ className: h, steps: p, activeStep: d, orientation: o = "horizontal", alternativeLabel: u = !1, onStepClick: r, ...v }, f) {
-  const l = o === "auto", n = /* @__PURE__ */ s(
+import { forwardRef as z, Fragment as D } from "react";
+import h from "clsx";
+import { Icon as j } from "../../base/icon/icon.js";
+const A = 12, L = z(function({
+  className: u,
+  steps: p,
+  activeStep: m,
+  orientation: o = "horizontal",
+  alternativeLabel: v = !1,
+  onStepClick: r,
+  "data-testid": f = "stepper",
+  ...n
+}, N) {
+  const l = o === "auto", c = /* @__PURE__ */ s(
     "div",
     {
-      ...v,
-      ref: f,
-      "data-testid": "stepper",
-      "data-steps": l ? String(Math.min(p.length, j)) : void 0,
-      className: w(
+      ...n,
+      ref: N,
+      "data-testid": f,
+      "data-steps": l ? String(Math.min(p.length, A)) : n["data-steps"],
+      className: h(
         "smwb-stepper",
         l ? "smwb-stepper_horizontal smwb-stepper_auto" : `smwb-stepper_${o}`,
-        { "smwb-stepper_alt-label": u && o !== "vertical" },
-        h
+        { "smwb-stepper_alt-label": v && o !== "vertical" },
+        u
       ),
       children: p.map((e, a) => {
-        var b;
-        const c = a < d, _ = a === d, N = a === p.length - 1, t = !!r && !e.disabled, g = (i) => {
+        var w;
+        const _ = a < m, b = a === m, g = a === p.length - 1, t = !!r && !e.disabled, y = (i) => {
           t && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), r == null || r(a));
         };
-        return /* @__PURE__ */ m(z, { children: [
-          /* @__PURE__ */ m(
+        return /* @__PURE__ */ d(D, { children: [
+          /* @__PURE__ */ d(
             "div",
             {
-              className: w("smwb-stepper__step", {
-                "smwb-stepper__step_active": _,
-                "smwb-stepper__step_completed": c,
+              className: h("smwb-stepper__step", {
+                "smwb-stepper__step_active": b,
+                "smwb-stepper__step_completed": _,
                 "smwb-stepper__step_error": e.error,
                 "smwb-stepper__step_disabled": e.disabled,
                 "smwb-stepper__step_clickable": t
               }),
-              "aria-current": _ ? "step" : void 0,
+              "aria-current": b ? "step" : void 0,
               "aria-disabled": e.disabled || void 0,
               role: t ? "button" : void 0,
               tabIndex: t ? 0 : void 0,
               onClick: t ? () => r == null ? void 0 : r(a) : void 0,
-              onKeyDown: t ? g : void 0,
+              onKeyDown: t ? y : void 0,
               children: [
-                /* @__PURE__ */ s("div", { className: "smwb-stepper__icon", "aria-hidden": "true", children: (b = e.icon) != null ? b : c ? /* @__PURE__ */ s(D, { name: "check", size: 16 }) : /* @__PURE__ */ s("span", { children: a + 1 }) }),
-                /* @__PURE__ */ m("div", { className: "smwb-stepper__text", children: [
+                /* @__PURE__ */ s("div", { className: "smwb-stepper__icon", "aria-hidden": "true", children: (w = e.icon) != null ? w : _ ? /* @__PURE__ */ s(j, { name: "check", size: 16 }) : /* @__PURE__ */ s("span", { children: a + 1 }) }),
+                /* @__PURE__ */ d("div", { className: "smwb-stepper__text", children: [
                   /* @__PURE__ */ s("span", { className: "smwb-stepper__label", children: e.label }),
                   e.optional ? /* @__PURE__ */ s("span", { className: "smwb-stepper__optional", children: e.optional }) : null,
                   e.description ? /* @__PURE__ */ s("span", { className: "smwb-stepper__description", children: e.description }) : null
@@ -50,15 +59,15 @@ const j = 12, F = y(function({ className: h, steps: p, activeStep: d, orientatio
               ]
             }
           ),
-          N ? null : /* @__PURE__ */ s("div", { className: "smwb-stepper__connector", "aria-hidden": "true" })
+          g ? null : /* @__PURE__ */ s("div", { className: "smwb-stepper__connector", "aria-hidden": "true" })
         ] }, a);
       })
     }
   );
-  return l ? /* @__PURE__ */ s("div", { className: "smwb-stepper-auto", children: n }) : n;
+  return l ? /* @__PURE__ */ s("div", { className: "smwb-stepper-auto", children: c }) : c;
 });
 export {
-  F as Stepper,
-  F as default
+  L as Stepper,
+  L as default
 };
 //# sourceMappingURL=stepper.js.map

package/dist/components/navigation/stepper/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sources":["../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { forwardRef, Fragment, HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface StepItem {\n  label: ReactNode;\n  /** Longer text under the label, in every orientation. */\n  description?: ReactNode;\n  optional?: ReactNode;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: ReactNode;\n}\n\n/**\n * `auto` lays the steps out in a row while the stepper's container is wide\n * enough for them — about 8rem per step, a theme variable — and in a column when\n * it is not. It is a CSS container query, so the server renders the same markup\n * and nothing changes on hydration.\n */\nexport type StepperOrientation = \"horizontal\" | \"vertical\" | \"auto\";\n\nexport interface StepperProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: StepperOrientation;\n  /** Place the label under the icon (in a row: horizontal, or auto while wide). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n}\n\n/** Step counts with their own `auto` breakpoint; longer steppers use the last one. */\nconst AUTO_MAX_STEPS = 12;\n\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  { className, steps, activeStep, orientation = \"horizontal\", alternativeLabel = false, onStepClick, ...props },\n  ref\n) {\n  const auto = orientation === \"auto\";\n  const stepper = (\n    <div\n      {...props}\n      ref={ref}\n      data-testid=\"stepper\"\n      data-steps={auto ? String(Math.min(steps.length, AUTO_MAX_STEPS)) : undefined}\n      className={cn(\n        \"smwb-stepper\",\n        auto ? \"smwb-stepper_horizontal smwb-stepper_auto\" : `smwb-stepper_${orientation}`,\n        { \"smwb-stepper_alt-label\": alternativeLabel && orientation !== \"vertical\" },\n        className\n      )}\n    >\n      {steps.map((step, index) => {\n        const completed = index < activeStep;\n        const active = index === activeStep;\n        const isLast = index === steps.length - 1;\n        const clickable = Boolean(onStepClick) && !step.disabled;\n\n        const onStepKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n          if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n            event.preventDefault();\n            onStepClick?.(index);\n          }\n        };\n\n        return (\n          <Fragment key={index}>\n            <div\n              className={cn(\"smwb-stepper__step\", {\n                \"smwb-stepper__step_active\": active,\n                \"smwb-stepper__step_completed\": completed,\n                \"smwb-stepper__step_error\": step.error,\n                \"smwb-stepper__step_disabled\": step.disabled,\n                \"smwb-stepper__step_clickable\": clickable,\n              })}\n              aria-current={active ? \"step\" : undefined}\n              aria-disabled={step.disabled || undefined}\n              role={clickable ? \"button\" : undefined}\n              tabIndex={clickable ? 0 : undefined}\n              onClick={clickable ? () => onStepClick?.(index) : undefined}\n              onKeyDown={clickable ? onStepKeyDown : undefined}\n            >\n              <div className=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                {step.icon ?? (completed ? <Icon name=\"check\" size={16} /> : <span>{index + 1}</span>)}\n              </div>\n              <div className=\"smwb-stepper__text\">\n                <span className=\"smwb-stepper__label\">{step.label}</span>\n                {step.optional ? <span className=\"smwb-stepper__optional\">{step.optional}</span> : null}\n                {step.description ? <span className=\"smwb-stepper__description\">{step.description}</span> : null}\n              </div>\n            </div>\n            {!isLast ? <div className=\"smwb-stepper__connector\" aria-hidden=\"true\" /> : null}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n\n  // `auto` needs a query container around the stepper: its own flex direction is\n  // what the container query switches.\n  return auto ? <div className=\"smwb-stepper-auto\">{stepper}</div> : stepper;\n});\n\nexport default Stepper;\n"],"names":["AUTO_MAX_STEPS","Stepper","forwardRef","className","steps","activeStep","orientation","alternativeLabel","onStepClick","props","ref","auto","stepper","jsx","cn","step","index","completed","active","isLast","clickable","onStepKeyDown","event","Fragment","jsxs","_a","Icon"],"mappings":";;;;;;AAwCA,MAAMA,IAAiB,IAEVC,IAAUC,EAAyC,SAC9D,EAAE,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,IAAc,cAAc,kBAAAC,IAAmB,IAAO,aAAAC,GAAa,GAAGC,EAAA,GACtGC,GACA;AACA,QAAMC,IAAOL,MAAgB,QACvBM,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,cAAYC,IAAO,OAAO,KAAK,IAAIP,EAAM,QAAQJ,CAAc,CAAC,IAAI;AAAA,MACpE,WAAWc;AAAA,QACT;AAAA,QACAH,IAAO,8CAA8C,gBAAgBL,CAAW;AAAA,QAChF,EAAE,0BAA0BC,KAAoBD,MAAgB,WAAA;AAAA,QAChEH;AAAA,MAAA;AAAA,MAGD,UAAAC,EAAM,IAAI,CAACW,GAAMC,MAAU;;AAC1B,cAAMC,IAAYD,IAAQX,GACpBa,IAASF,MAAUX,GACnBc,IAASH,MAAUZ,EAAM,SAAS,GAClCgB,IAAY,EAAQZ,KAAgB,CAACO,EAAK,UAE1CM,IAAgB,CAACC,MAAyC;AAC9D,UAAIF,MAAcE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvDA,EAAM,eAAA,GACNd,KAAA,QAAAA,EAAcQ;AAAA,QAElB;AAEA,iCACGO,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWV,EAAG,sBAAsB;AAAA,gBAClC,6BAA6BI;AAAA,gBAC7B,gCAAgCD;AAAA,gBAChC,4BAA4BF,EAAK;AAAA,gBACjC,+BAA+BA,EAAK;AAAA,gBACpC,gCAAgCK;AAAA,cAAA,CACjC;AAAA,cACD,gBAAcF,IAAS,SAAS;AAAA,cAChC,iBAAeH,EAAK,YAAY;AAAA,cAChC,MAAMK,IAAY,WAAW;AAAA,cAC7B,UAAUA,IAAY,IAAI;AAAA,cAC1B,SAASA,IAAY,MAAMZ,KAAA,gBAAAA,EAAcQ,KAAS;AAAA,cAClD,WAAWI,IAAYC,IAAgB;AAAA,cAEvC,UAAA;AAAA,gBAAA,gBAAAR,EAAC,SAAI,WAAU,sBAAqB,eAAY,QAC7C,WAAAY,IAAAV,EAAK,SAAL,OAAAU,IAAcR,IAAY,gBAAAJ,EAACa,KAAK,MAAK,SAAQ,MAAM,GAAA,CAAI,sBAAM,QAAA,EAAM,UAAAV,IAAQ,GAAE,EAAA,CAChF;AAAA,gBACA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,kBAAA,gBAAAX,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAE,EAAK,OAAM;AAAA,kBACjDA,EAAK,WAAW,gBAAAF,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAE,EAAK,UAAS,IAAU;AAAA,kBAClFA,EAAK,cAAc,gBAAAF,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAE,EAAK,aAAY,IAAU;AAAA,gBAAA,EAAA,CAC9F;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEAI,IAA0E,OAAjE,gBAAAN,EAAC,OAAA,EAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,QAAK,EAAA,GAzB/DG,CA0Bf;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAML,SAAOL,IAAO,gBAAAE,EAAC,OAAA,EAAI,WAAU,qBAAqB,aAAQ,IAASD;AACrE,CAAC;"}
+{"version":3,"file":"stepper.js","sources":["../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { forwardRef, Fragment, HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\n\nexport interface StepItem {\n  label: ReactNode;\n  /** Longer text under the label, in every orientation. */\n  description?: ReactNode;\n  optional?: ReactNode;\n  /** Marks the step as errored. */\n  error?: boolean;\n  /** Disables interaction with the step. */\n  disabled?: boolean;\n  /** Custom icon overriding the default number/check. */\n  icon?: ReactNode;\n}\n\n/**\n * `auto` lays the steps out in a row while the stepper's container is wide\n * enough for them — about 8rem per step, a theme variable — and in a column when\n * it is not. It is a CSS container query, so the server renders the same markup\n * and nothing changes on hydration.\n */\nexport type StepperOrientation = \"horizontal\" | \"vertical\" | \"auto\";\n\ntype DataAttributes = Record<`data-${string}`, unknown>;\n\nexport interface StepperProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: StepperOrientation;\n  /** Place the label under the icon (in a row: horizontal, or auto while wide). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n  /** Test id of the stepper `<div>`; `stepper` unless given. */\n  \"data-testid\"?: string;\n}\n\n/** Step counts with their own `auto` breakpoint; longer steppers use the last one. */\nconst AUTO_MAX_STEPS = 12;\n\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  {\n    className,\n    steps,\n    activeStep,\n    orientation = \"horizontal\",\n    alternativeLabel = false,\n    onStepClick,\n    \"data-testid\": dataTestId = \"stepper\",\n    ...props\n  },\n  ref\n) {\n  const auto = orientation === \"auto\";\n  const stepper = (\n    <div\n      {...props}\n      ref={ref}\n      data-testid={dataTestId}\n      // The auto layout's step count wins; without it, the caller's data-steps stays.\n      data-steps={auto ? String(Math.min(steps.length, AUTO_MAX_STEPS)) : (props as DataAttributes)[\"data-steps\"]}\n      className={cn(\n        \"smwb-stepper\",\n        auto ? \"smwb-stepper_horizontal smwb-stepper_auto\" : `smwb-stepper_${orientation}`,\n        { \"smwb-stepper_alt-label\": alternativeLabel && orientation !== \"vertical\" },\n        className\n      )}\n    >\n      {steps.map((step, index) => {\n        const completed = index < activeStep;\n        const active = index === activeStep;\n        const isLast = index === steps.length - 1;\n        const clickable = Boolean(onStepClick) && !step.disabled;\n\n        const onStepKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n          if (clickable && (event.key === \"Enter\" || event.key === \" \")) {\n            event.preventDefault();\n            onStepClick?.(index);\n          }\n        };\n\n        return (\n          <Fragment key={index}>\n            <div\n              className={cn(\"smwb-stepper__step\", {\n                \"smwb-stepper__step_active\": active,\n                \"smwb-stepper__step_completed\": completed,\n                \"smwb-stepper__step_error\": step.error,\n                \"smwb-stepper__step_disabled\": step.disabled,\n                \"smwb-stepper__step_clickable\": clickable,\n              })}\n              aria-current={active ? \"step\" : undefined}\n              aria-disabled={step.disabled || undefined}\n              role={clickable ? \"button\" : undefined}\n              tabIndex={clickable ? 0 : undefined}\n              onClick={clickable ? () => onStepClick?.(index) : undefined}\n              onKeyDown={clickable ? onStepKeyDown : undefined}\n            >\n              <div className=\"smwb-stepper__icon\" aria-hidden=\"true\">\n                {step.icon ?? (completed ? <Icon name=\"check\" size={16} /> : <span>{index + 1}</span>)}\n              </div>\n              <div className=\"smwb-stepper__text\">\n                <span className=\"smwb-stepper__label\">{step.label}</span>\n                {step.optional ? <span className=\"smwb-stepper__optional\">{step.optional}</span> : null}\n                {step.description ? <span className=\"smwb-stepper__description\">{step.description}</span> : null}\n              </div>\n            </div>\n            {!isLast ? <div className=\"smwb-stepper__connector\" aria-hidden=\"true\" /> : null}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n\n  // `auto` needs a query container around the stepper: its own flex direction is\n  // what the container query switches.\n  return auto ? <div className=\"smwb-stepper-auto\">{stepper}</div> : stepper;\n});\n\nexport default Stepper;\n"],"names":["AUTO_MAX_STEPS","Stepper","forwardRef","className","steps","activeStep","orientation","alternativeLabel","onStepClick","dataTestId","props","ref","auto","stepper","jsx","cn","step","index","completed","active","isLast","clickable","onStepKeyDown","event","Fragment","jsxs","_a","Icon"],"mappings":";;;;;;AA4CA,MAAMA,IAAiB,IAEVC,IAAUC,EAAyC,SAC9D;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,kBAAAC,IAAmB;AAAA,EACnB,aAAAC;AAAA,EACA,eAAeC,IAAa;AAAA,EAC5B,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAON,MAAgB,QACvBO,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,eAAaF;AAAA,MAEb,cAAYG,IAAO,OAAO,KAAK,IAAIR,EAAM,QAAQJ,CAAc,CAAC,IAAKU,EAAyB,YAAY;AAAA,MAC1G,WAAWK;AAAA,QACT;AAAA,QACAH,IAAO,8CAA8C,gBAAgBN,CAAW;AAAA,QAChF,EAAE,0BAA0BC,KAAoBD,MAAgB,WAAA;AAAA,QAChEH;AAAA,MAAA;AAAA,MAGD,UAAAC,EAAM,IAAI,CAACY,GAAMC,MAAU;;AAC1B,cAAMC,IAAYD,IAAQZ,GACpBc,IAASF,MAAUZ,GACnBe,IAASH,MAAUb,EAAM,SAAS,GAClCiB,IAAY,EAAQb,KAAgB,CAACQ,EAAK,UAE1CM,IAAgB,CAACC,MAAyC;AAC9D,UAAIF,MAAcE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvDA,EAAM,eAAA,GACNf,KAAA,QAAAA,EAAcS;AAAA,QAElB;AAEA,iCACGO,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWV,EAAG,sBAAsB;AAAA,gBAClC,6BAA6BI;AAAA,gBAC7B,gCAAgCD;AAAA,gBAChC,4BAA4BF,EAAK;AAAA,gBACjC,+BAA+BA,EAAK;AAAA,gBACpC,gCAAgCK;AAAA,cAAA,CACjC;AAAA,cACD,gBAAcF,IAAS,SAAS;AAAA,cAChC,iBAAeH,EAAK,YAAY;AAAA,cAChC,MAAMK,IAAY,WAAW;AAAA,cAC7B,UAAUA,IAAY,IAAI;AAAA,cAC1B,SAASA,IAAY,MAAMb,KAAA,gBAAAA,EAAcS,KAAS;AAAA,cAClD,WAAWI,IAAYC,IAAgB;AAAA,cAEvC,UAAA;AAAA,gBAAA,gBAAAR,EAAC,SAAI,WAAU,sBAAqB,eAAY,QAC7C,WAAAY,IAAAV,EAAK,SAAL,OAAAU,IAAcR,IAAY,gBAAAJ,EAACa,KAAK,MAAK,SAAQ,MAAM,GAAA,CAAI,sBAAM,QAAA,EAAM,UAAAV,IAAQ,GAAE,EAAA,CAChF;AAAA,gBACA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,kBAAA,gBAAAX,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAE,EAAK,OAAM;AAAA,kBACjDA,EAAK,WAAW,gBAAAF,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAE,EAAK,UAAS,IAAU;AAAA,kBAClFA,EAAK,cAAc,gBAAAF,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAAE,EAAK,aAAY,IAAU;AAAA,gBAAA,EAAA,CAC9F;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEAI,IAA0E,OAAjE,gBAAAN,EAAC,OAAA,EAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,QAAK,EAAA,GAzB/DG,CA0Bf;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAML,SAAOL,IAAO,gBAAAE,EAAC,OAAA,EAAI,WAAU,qBAAqB,aAAQ,IAASD;AACrE,CAAC;"}

package/dist/components/navigation/tabs/index.d.ts

@@ -1,4 +1,6 @@
 export { Tabs } from "./tabs";
 export type { TabsProps } from "./tabs";
 export { Tab } from "./tab/tab";
-export type { TabProps } from "./tab/tab";
+export type { TabActionsApi, TabCloseReason, TabProps } from "./tab/tab";
+export { TabPanel } from "./tabPanel/tabPanel";
+export type { TabPanelProps } from "./tabPanel/tabPanel";