@smwb/ui-react 2.7.0 → 2.9.0

package/dist/headless/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/headless/components/navigation/sidebar/sidebar.js

@@ -1,38 +1,41 @@
-import { jsxs as R, jsx as e } from "react/jsx-runtime";
-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 L = V(function({
-  className: o,
-  variant: d = "default",
+import { jsxs as k, jsx as e } from "react/jsx-runtime";
+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 O = x(function({
+  className: c,
+  variant: o = "default",
   menuItems: s,
-  activeItem: f,
+  activeItem: d,
   defaultActiveItem: t = null,
-  onActiveItemChange: n,
+  onActiveItemChange: i,
   collapsible: l = !1,
-  collapsed: m,
+  collapsed: b,
   defaultCollapsed: p = !1,
   onCollapsedChange: _,
   collapseToggleAriaLabel: v = "Toggle navigation",
-  ...w
-}, r) {
-  const i = f !== void 0, [k, y] = g(t), C = i ? f : k, [c, E] = $({
-    value: m,
+  contained: w = !1,
+  ...n
+}, f) {
+  var R;
+  const h = d !== void 0, [C, E] = z(t), T = h ? d : C, [r, j] = B({
+    value: b,
     defaultValue: p,
     onChange: _
-  }), h = l && c ? "compactMini" : d;
-  return /* @__PURE__ */ R(
+  }), N = l && r ? "compactMini" : o;
+  return /* @__PURE__ */ k(
     "aside",
     {
-      ref: r,
-      className: S("smwb-sidebar", o, `smwb-${h}`, {
+      ref: f,
+      className: y("smwb-sidebar", c, `smwb-${N}`, {
         "smwb-sidebar_collapsible": l,
-        "smwb-sidebar_collapsed": l && c
+        "smwb-sidebar_collapsed": l && r,
+        "smwb-sidebar_contained": w
       }),
-      role: "menubar",
-      ...w,
+      ...n,
+      role: (R = n.role) != null ? R : "menubar",
       children: [
         l && /* @__PURE__ */ e("div", { className: "smwb-sidebar__collapse", children: /* @__PURE__ */ e(
           "button",
@@ -40,66 +43,66 @@ const L = V(function({
             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, b) => /* @__PURE__ */ e(
-          q,
+        /* @__PURE__ */ e("nav", { className: "smwb-sidebar__nav", children: s && (s == null ? void 0 : s.map((a, m) => /* @__PURE__ */ e(
+          F,
           {
             as: a.as,
-            isActive: C === b,
-            onClick: (T) => {
-              var N;
-              i || y(b), n == null || n(b), (N = a.onClick) == null || N.call(a, T);
+            isActive: T === m,
+            onClick: (V) => {
+              var S;
+              h || E(m), i == null || i(m), (S = a.onClick) == null || S.call(a, V);
             },
             icon: a.icon,
             title: a.title,
             href: a.href,
-            variant: h
+            variant: N
           },
-          b
+          m
         ))) })
       ]
     }
   );
 });
-function q({
+function F({
   isActive: u,
-  icon: o,
-  title: d,
+  icon: c,
+  title: o,
   as: s = "div",
-  href: f,
+  href: d,
   onMouseDown: t,
-  variant: n,
+  variant: i,
   ...l
 }) {
-  const m = j.useRef(null), p = (r) => {
-    t == null || t(r);
-  }, _ = (r) => {
-    var i;
-    (i = m.current) == null || i.onRipple(r);
-  }, v = /* @__PURE__ */ e(x, { actionRef: m });
-  return /* @__PURE__ */ R(
+  const b = g.useRef(null), p = (n) => {
+    t == null || t(n);
+  }, _ = (n) => {
+    var f;
+    (f = b.current) == null || f.onRipple(n);
+  }, v = /* @__PURE__ */ e($, { actionRef: b });
+  return /* @__PURE__ */ k(
     s,
     {
-      href: f,
+      href: d,
       role: "menuitem",
-      className: S("sidebar__nav__item", "smwb-nav-item", n, { active: u }),
+      className: y("sidebar__nav__item", "smwb-nav-item", i, { active: u }),
       onMouseDown: p,
       onPointerDown: _,
       ...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 {
-  L as Sidebar,
-  L as default
+  O as Sidebar,
+  O as default
 };
 //# sourceMappingURL=sidebar.js.map

package/dist/headless/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/headless/components/navigation/stepper/stepper.js

@@ -1,46 +1,55 @@
-import { jsx as s, jsxs as d } from "react/jsx-runtime";
-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, T = y(function({ className: h, steps: p, activeStep: m, orientation: o = "horizontal", alternativeLabel: u = !1, onStepClick: r, ...v }, f) {
-  const l = o === "auto", n = /* @__PURE__ */ s(
+import { jsx as s, jsxs as i } from "react/jsx-runtime";
+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, B = z(function({
+  className: u,
+  steps: p,
+  activeStep: m,
+  orientation: l = "horizontal",
+  alternativeLabel: v = !1,
+  onStepClick: a,
+  "data-testid": f = "stepper",
+  ...n
+}, N) {
+  const o = l === "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": o ? 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
+        o ? "smwb-stepper_horizontal smwb-stepper_auto" : `smwb-stepper_${l}`,
+        { "smwb-stepper_alt-label": v && l !== "vertical" },
+        u
       ),
-      children: p.map((e, a) => {
-        var b;
-        const c = a < m, _ = a === m, N = a === p.length - 1, t = !!r && !e.disabled, g = (i) => {
-          t && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), r == null || r(a));
+      children: p.map((e, r) => {
+        var w;
+        const _ = r < m, b = r === m, g = r === p.length - 1, t = !!a && !e.disabled, y = (d) => {
+          t && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), a == null || a(r));
         };
-        return /* @__PURE__ */ d(z, { children: [
-          /* @__PURE__ */ d(
+        return /* @__PURE__ */ i(D, { children: [
+          /* @__PURE__ */ i(
             "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,
+              onClick: t ? () => a == null ? void 0 : a(r) : 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__ */ d("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: r + 1 }) }),
+                /* @__PURE__ */ i("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
@@ -48,15 +57,15 @@ const j = 12, T = y(function({ className: h, steps: p, activeStep: m, orientatio
               ]
             }
           ),
-          N ? null : /* @__PURE__ */ s("div", { className: "smwb-stepper__connector", "aria-hidden": "true" })
-        ] }, a);
+          g ? null : /* @__PURE__ */ s("div", { className: "smwb-stepper__connector", "aria-hidden": "true" })
+        ] }, r);
       })
     }
   );
-  return l ? /* @__PURE__ */ s("div", { className: "smwb-stepper-auto", children: n }) : n;
+  return o ? /* @__PURE__ */ s("div", { className: "smwb-stepper-auto", children: c }) : c;
 });
 export {
-  T as Stepper,
-  T as default
+  B as Stepper,
+  B as default
 };
 //# sourceMappingURL=stepper.js.map

package/dist/headless/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":";;;;AAsCA,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":";;;;AA0CA,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/headless/components/navigation/tabs/tab/tab.js

@@ -1,53 +1,134 @@
-import { jsxs as d, jsx as c } from "react/jsx-runtime";
-import m from "react";
+import { jsxs as C, jsx as c } from "react/jsx-runtime";
+import r from "react";
 import v from "clsx";
-import { Ripple as T } from "../../../base/ripple/ripple.js";
-const M = m.forwardRef(function(p, f) {
+import { Ripple as X } from "../../../base/ripple/ripple.js";
+import { Icon as Y } from "../../../base/icon/icon.js";
+import { useSafeLayoutEffect as Z } from "../../../../hooks/useSafeLayoutEffect.js";
+const $ = (e) => e.ctrlKey || e.metaKey || e.altKey || e.shiftKey, g = 'button:not(:disabled), a[href], [role="button"]:not([aria-disabled="true"]), [tabindex]', tt = '[role^="menuitem"]:not([aria-disabled="true"])', et = (e) => {
+  var u, f, d;
+  for (const i of (f = (u = e == null ? void 0 : e.getAttribute("aria-controls")) == null ? void 0 : u.split(/\s+/)) != null ? f : []) {
+    const s = i ? (d = e == null ? void 0 : e.ownerDocument.getElementById(i)) == null ? void 0 : d.querySelector(tt) : null;
+    if (s) {
+      s.focus({ preventScroll: !0 });
+      return;
+    }
+  }
+}, lt = r.forwardRef(function(u, f) {
   const {
-    className: w,
-    label: o,
+    className: d,
+    label: i,
     isActive: s = !1,
-    contentRef: u,
-    icon: l,
-    stacked: R = !1,
-    tag: e,
-    disabled: a,
-    onMouseDown: t,
-    ..._
-  } = p, i = m.useRef(null), h = (n) => {
-    t == null || t(n);
-  }, x = (n) => {
-    var r;
-    (r = i.current) == null || r.onRipple(n);
-  }, b = e != null ? e : e || "button", N = v("smwb-tab", w, {
+    contentRef: G,
+    icon: N,
+    stacked: L = !1,
+    tag: y,
+    href: T,
+    tabStop: w,
+    disabled: o,
+    // `Tabs` passes this when the row is reorderable. It belongs to the item, so it is taken out of
+    // the spread below and placed on the wrapper (or on the bare tab when there is no wrapper).
+    draggable: I,
+    closable: n,
+    onClose: k,
+    closeLabel: O = "Close tab",
+    actions: b,
+    onClick: R,
+    onKeyDown: _,
+    onMouseDown: D,
+    // The tab sets this on its root too; its own handler calls the caller's first.
+    onPointerDown: M,
+    ...S
+  } = u, K = r.useRef(null), q = r.useRef(null), A = r.useRef(null), [B, W] = r.useState(0), m = y != null ? y : T !== void 0 ? "a" : "button", E = !!o && m !== "button", z = (t) => {
+    if (E) {
+      t.preventDefault();
+      return;
+    }
+    R == null || R(t);
+  }, p = (t, a) => k == null ? void 0 : k(t, a), h = typeof b == "function" ? b({ close: (t) => p(t, "actions") }) : b, x = h != null && h !== !1;
+  Z(() => {
+    B > 0 && et(A.current);
+  }, [B]);
+  const U = (t) => {
+    var a;
+    if (_ == null || _(t), !(o || t.defaultPrevented || t.target !== t.currentTarget)) {
+      if (m !== "button" && t.key === " ")
+        t.preventDefault(), t.currentTarget.click();
+      else if (n && (t.key === "Delete" || t.key === "Backspace") && !$(t))
+        t.preventDefault(), p(t, "key");
+      else if (x && (t.key === "ContextMenu" || t.key === "F10" && t.shiftKey)) {
+        const l = (a = q.current) == null ? void 0 : a.querySelector(g);
+        l && (t.preventDefault(), l.focus(), l.getAttribute("aria-expanded") !== "true" && l.click(), A.current = l, W((V) => V + 1));
+      }
+    }
+  }, H = (t) => {
+    D == null || D(t), t.button === 1 && n && !o && (t.preventDefault(), p(t, "middleClick"));
+  }, J = (t) => {
+    var a;
+    M == null || M(t), (a = K.current) == null || a.onRipple(t);
+  }, P = [
+    S["aria-keyshortcuts"],
+    !o && n ? "Delete Backspace" : void 0,
+    !o && x ? "Shift+F10 ContextMenu" : void 0,
+    !o && n ? "Meta+W Control+W" : void 0,
+    o ? void 0 : "Meta+Shift+[ Control+Shift+[ Meta+Shift+] Control+Shift+]"
+  ].filter(Boolean).join(" ") || void 0, Q = v("smwb-tab", d, {
     "smwb-tab--active": s,
-    "smwb-tab--stacked": R,
-    "smwb-tab--disabled": a
-  });
-  return /* @__PURE__ */ d(
-    b,
+    "smwb-tab--stacked": L,
+    "smwb-tab--disabled": o
+  }), F = n !== void 0 || b !== void 0, j = /* @__PURE__ */ C(
+    m,
     {
+      ...S,
       ref: f,
-      className: N,
-      onMouseDown: h,
-      onPointerDown: x,
+      className: Q,
+      draggable: F ? void 0 : I,
+      href: E ? void 0 : T,
+      target: void 0,
+      onClick: z,
+      onKeyDown: U,
+      onMouseDown: H,
+      onPointerDown: J,
       role: "tab",
       "aria-selected": s,
-      "aria-disabled": a || void 0,
-      tabIndex: s ? 0 : -1,
-      disabled: b === "button" ? a : void 0,
-      ..._,
+      "aria-disabled": o || S["aria-disabled"],
+      "aria-keyshortcuts": P,
+      tabIndex: (w != null ? w : s) ? 0 : -1,
+      disabled: m === "button" ? o : void 0,
       children: [
-        /* @__PURE__ */ d("span", { className: "smwb-tab__content", ref: u, children: [
-          l && /* @__PURE__ */ c("span", { className: "smwb-tab__icon", children: l }),
-          o && /* @__PURE__ */ c("span", { className: "smwb-tab__text-label", children: o })
+        /* @__PURE__ */ C("span", { className: "smwb-tab__content", ref: G, children: [
+          N && /* @__PURE__ */ c("span", { className: "smwb-tab__icon", "aria-hidden": "true", children: N }),
+          i && /* @__PURE__ */ c("span", { className: "smwb-tab__text-label", children: i })
         ] }),
-        /* @__PURE__ */ c(T, { actionRef: i, classes: { child: "tab__ripple-child" } })
+        /* @__PURE__ */ c(X, { actionRef: K, classes: { child: "tab__ripple-child" } })
       ]
     }
   );
+  return F ? /* @__PURE__ */ C(
+    "div",
+    {
+      className: v("smwb-tab-item", { "smwb-tab-item--active": s, "smwb-tab-item--disabled": o }),
+      draggable: I,
+      children: [
+        j,
+        x && /* @__PURE__ */ c("span", { className: "smwb-tab__actions", ref: q, children: h }),
+        n && /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            className: "smwb-tab__close",
+            tabIndex: -1,
+            "aria-label": O,
+            disabled: o,
+            onMouseDown: (t) => t.preventDefault(),
+            onClick: (t) => p(t, "button"),
+            children: /* @__PURE__ */ c(Y, { name: "close", size: 16 })
+          }
+        )
+      ]
+    }
+  ) : j;
 });
 export {
-  M as Tab
+  lt as Tab
 };
 //# sourceMappingURL=tab.js.map