@smwb/ui-react 2.0.0

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

@@ -0,0 +1,107 @@
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/pagination/pagination.entry.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) => {
+  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),
+    e + 2
+  ), o = Math.min(
+    Math.max(m + s, e + s * 2 + 2),
+    f.length > 0 ? f[0] - 2 : a - 1
+  );
+  return [
+    ...g,
+    ...c > e + 2 ? ["start-ellipsis"] : e + 1 < a - e ? [e + 1] : [],
+    ...d(c, o),
+    ...o < a - e - 1 ? ["end-ellipsis"] : a - e > e ? [a - e] : [],
+    ...f
+  ];
+}, V = S(function({
+  className: m,
+  count: s,
+  page: e,
+  siblingCount: g = 1,
+  boundaryCount: f = 1,
+  size: c = "medium",
+  variant: o = "filled",
+  shape: R = "circular",
+  color: x = "default",
+  disabled: p = !1,
+  showFirstButton: N = !1,
+  showLastButton: $ = !1,
+  hidePrevButton: P = !1,
+  hideNextButton: E = !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;
+    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 : []
+    );
+    if (t.length === 0)
+      return;
+    const l = t.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(
+    "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 })
+    }
+  ) }, i);
+  return /* @__PURE__ */ r(
+    "nav",
+    {
+      ...L,
+      ref: D,
+      "data-testid": "pagination",
+      "aria-label": "pagination",
+      className: A(
+        "smwb-pagination",
+        `smwb-pagination_${c}`,
+        `smwb-pagination_${o}`,
+        `smwb-pagination_shape-${R}`,
+        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(
+            "button",
+            {
+              type: "button",
+              className: A("smwb-pagination__item", { "smwb-pagination__item_selected": i === e }),
+              "aria-current": i === e ? "page" : void 0,
+              disabled: p,
+              onClick: () => b(i),
+              children: i
+            }
+          ) }, i) : /* @__PURE__ */ r("li", { className: "smwb-pagination__ellipsis", "aria-hidden": "true", children: "…" }, `${i}-${t}`)
+        ),
+        _("next", "Next page", e + 1, "chevron_right", E),
+        _("last", "Last page", s, "last_page", !$)
+      ] })
+    }
+  );
+});
+export {
+  V as Pagination,
+  V as default
+};
+//# sourceMappingURL=pagination.js.map

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

@@ -0,0 +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":";;;;;;AAkCA,MAAMA,IAAQ,CAACC,GAAeC,MAC5B,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAIA,IAAMD,IAAQ,GAAG,CAAC,EAAA,GAAK,CAACE,GAAGC,MAAMH,IAAQG,CAAC,GAEpEC,IAAa,CAACC,GAAeC,GAAcC,GAAsBC,MAA4C;AACjH,QAAMC,IAAaV,EAAM,GAAG,KAAK,IAAIS,GAAeH,CAAK,CAAC,GACpDK,IAAWX,EAAM,KAAK,IAAIM,IAAQG,IAAgB,GAAGA,IAAgB,CAAC,GAAGH,CAAK,GAE9EM,IAAgB,KAAK;AAAA,IACzB,KAAK,IAAIL,IAAOC,GAAcF,IAAQG,IAAgBD,IAAe,IAAI,CAAC;AAAA,IAC1EC,IAAgB;AAAA,EAAA,GAEZI,IAAc,KAAK;AAAA,IACvB,KAAK,IAAIN,IAAOC,GAAcC,IAAgBD,IAAe,IAAI,CAAC;AAAA,IAClEG,EAAS,SAAS,IAAIA,EAAS,CAAC,IAAI,IAAIL,IAAQ;AAAA,EAAA;AAGlD,SAAO;AAAA,IACL,GAAGI;AAAA,IACH,GAAIE,IAAgBH,IAAgB,IAC/B,CAAC,gBAAgB,IAClBA,IAAgB,IAAIH,IAAQG,IAC1B,CAACA,IAAgB,CAAC,IAClB,CAAA;AAAA,IACN,GAAGT,EAAMY,GAAeC,CAAW;AAAA,IACnC,GAAIA,IAAcP,IAAQG,IAAgB,IACrC,CAAC,cAAc,IAChBH,IAAQG,IAAgBA,IACtB,CAACH,IAAQG,CAAa,IACtB,CAAA;AAAA,IACN,GAAGE;AAAA,EAAA;AAEP,GAEaG,IAAaC,EAAyC,SACjE;AAAA,EACE,WAAAC;AAAA,EACA,OAAAV;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,eAAAC,IAAgB;AAAA,EAChB,MAAAQ,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,iBAAAC,IAAkB;AAAA,EAClB,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAASC,EAAoB,IAAI,GACjCC,IAAYC,EAAwBJ,GAAKC,CAAM,GAE/CI,IAAK,CAACC,MAAmB;AAC7B,IAAIb,KAAYa,MAAW3B,KAAQ2B,IAAS,KAAKA,IAAS5B,KAG1DoB,KAAA,QAAAA,EAAWQ;AAAA,EACb,GAEMC,IAAY,CAACC,MAAuC;;AACxD,QAAI,CAAC,CAAC,aAAa,cAAc,QAAQ,KAAK,EAAE,SAASA,EAAE,GAAG;AAC5D;AAEF,UAAMC,IAAU,MAAM;AAAA,OACpBC,KAAAC,IAAAV,EAAO,YAAP,gBAAAU,EAAgB,iBAAoC,mDAApD,OAAAD,IAAsG,CAAA;AAAA,IAAC;AAEzG,QAAID,EAAQ,WAAW;AACrB;AAEF,UAAMG,IAAUH,EAAQ,QAAQ,SAAS,aAAkC;AAC3E,QAAII,IAAOD;AACX,IAAIJ,EAAE,QAAQ,eAAcK,IAAO,KAAK,IAAID,IAAU,GAAGH,EAAQ,SAAS,CAAC,IAClED,EAAE,QAAQ,cAAaK,IAAO,KAAK,IAAID,IAAU,GAAG,CAAC,IACrDJ,EAAE,QAAQ,SAAQK,IAAO,IACzBL,EAAE,QAAQ,UAAOK,IAAOJ,EAAQ,SAAS,IAClDD,EAAE,eAAA,IACFM,IAAAL,EAAQI,CAAI,MAAZ,QAAAC,EAAe;AAAA,EACjB,GAEMC,IAAQtC,EAAWC,GAAOC,GAAMC,GAAcC,CAAa,GAE3DmC,IAAY,CAACC,GAAaC,GAAeZ,GAAgBa,GAAkBC,MAC/EA,IAAS,OACP,gBAAAC,EAAC,MAAA,EACC,UAAA,gBAAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,cAAYH;AAAA,MACZ,UAAUzB,KAAYa,IAAS,KAAKA,IAAS5B;AAAA,MAC7C,SAAS,MAAM2B,EAAGC,CAAM;AAAA,MAExB,UAAA,gBAAAe,EAACC,KAAK,MAAMH,GAAU,MAAM9B,MAAS,UAAU,KAAK,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA,KARnD4B,CAUT;AAGJ,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGtB;AAAA,MACJ,KAAKI;AAAA,MACL,eAAY;AAAA,MACZ,cAAW;AAAA,MACX,WAAWoB;AAAA,QACT;AAAA,QACA,mBAAmBlC,CAAI;AAAA,QACvB,mBAAmBC,CAAO;AAAA,QAC1B,yBAAyBC,CAAK;AAAA,QAC9BC,MAAU,aAAa,yBAAyBA,CAAK;AAAA,QACrD,EAAE,4BAA4BC,EAAA;AAAA,QAC9BL;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAoC,EAAC,MAAA,EAAG,WAAU,yBAAwB,WAAAjB,GACnC,UAAA;AAAA,QAAAS,EAAU,SAAS,cAAc,GAAG,cAAc,CAACtB,CAAe;AAAA,QAClEsB,EAAU,QAAQ,iBAAiBrC,IAAO,GAAG,gBAAgBiB,CAAc;AAAA,QAC3EmB,EAAM;AAAA,UAAI,CAACU,GAAMC,MAChB,OAAOD,KAAS,6BACb,MAAA,EACC,UAAA,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAWE,EAAG,yBAAyB,EAAE,kCAAkCE,MAAS9C,GAAM;AAAA,cAC1F,gBAAc8C,MAAS9C,IAAO,SAAS;AAAA,cACvC,UAAAc;AAAA,cACA,SAAS,MAAMY,EAAGoB,CAAI;AAAA,cAErB,UAAAA;AAAA,YAAA;AAAA,UAAA,EACH,GATOA,CAUT,IAEA,gBAAAJ,EAAC,QAA4B,WAAU,6BAA4B,eAAY,QAAO,UAAA,OAA7E,GAAGI,CAAI,IAAIC,CAAK,EAEzB;AAAA,QAAA;AAAA,QAGHV,EAAU,QAAQ,aAAarC,IAAO,GAAG,iBAAiBkB,CAAc;AAAA,QACxEmB,EAAU,QAAQ,aAAatC,GAAO,aAAa,CAACiB,CAAc;AAAA,MAAA,EAAA,CACrE;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -0,0 +1,2 @@
+export { default as Sidebar } from "./sidebar";
+export type { SidebarProps } from "./sidebar";

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

@@ -0,0 +1,33 @@
+import React from "react";
+export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
+    className?: string;
+    variant?: "compact" | "default" | "compactMini";
+    menuItems?: MenuItemProps[];
+    /** Controlled index of the active menu item. */
+    activeItem?: number | null;
+    /** Default active index (uncontrolled). */
+    defaultActiveItem?: number | null;
+    /** Called with the index of the activated item. */
+    onActiveItemChange?: (index: number) => void;
+    /** Render a built-in toggle that collapses the rail to an icon-only mini rail. */
+    collapsible?: boolean;
+    /** Controlled collapsed state. */
+    collapsed?: boolean;
+    /** Initial collapsed state (uncontrolled). */
+    defaultCollapsed?: boolean;
+    /** Called whenever the collapsed state changes. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Accessible label for the built-in collapse toggle. */
+    collapseToggleAriaLabel?: string;
+}
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
+export default Sidebar;
+export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    icon?: React.ReactNode;
+    title: string;
+    isActive?: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    as?: React.ElementType;
+    href?: string;
+    variant?: "compact" | "default" | "compactMini";
+}

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

@@ -0,0 +1,106 @@
+import { jsxs as R, jsx as e } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/sidebar/sidebar.entry.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 M = V(function({
+  className: o,
+  variant: d = "default",
+  menuItems: s,
+  activeItem: m,
+  defaultActiveItem: l = null,
+  onActiveItemChange: n,
+  collapsible: t = !1,
+  collapsed: f,
+  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: p,
+    onChange: _
+  }), h = t && c ? "compactMini" : d;
+  return /* @__PURE__ */ R(
+    "aside",
+    {
+      ref: r,
+      className: S("smwb-sidebar", o, `smwb-${h}`, {
+        "smwb-sidebar_collapsible": t,
+        "smwb-sidebar_collapsed": t && c
+      }),
+      role: "menubar",
+      ...w,
+      children: [
+        t && /* @__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 })
+          }
+        ) }),
+        /* @__PURE__ */ e("nav", { className: "smwb-sidebar__nav", children: s && (s == null ? void 0 : s.map((a, b) => /* @__PURE__ */ e(
+          q,
+          {
+            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);
+            },
+            icon: a.icon,
+            title: a.title,
+            href: a.href,
+            variant: h
+          },
+          b
+        ))) })
+      ]
+    }
+  );
+});
+function q({
+  isActive: u,
+  icon: o,
+  title: d,
+  as: s = "div",
+  href: m,
+  onMouseDown: l,
+  variant: n,
+  ...t
+}) {
+  const f = j.useRef(null), p = (r) => {
+    l == null || l(r);
+  }, _ = (r) => {
+    var i;
+    (i = f.current) == null || i.onRipple(r);
+  }, v = /* @__PURE__ */ e(x, { actionRef: f });
+  return /* @__PURE__ */ R(
+    s,
+    {
+      href: m,
+      role: "menuitem",
+      className: S("sidebar__nav__item", "smwb-nav-item", n, { active: u }),
+      onMouseDown: p,
+      onPointerDown: _,
+      ...t,
+      children: [
+        o && /* @__PURE__ */ e("span", { className: "smwb-nav-item__icon", children: o }),
+        d && /* @__PURE__ */ e("span", { className: "smwb-nav-item__title", children: d }),
+        v
+      ]
+    }
+  );
+}
+export {
+  M as Sidebar,
+  M as default
+};
+//# sourceMappingURL=sidebar.js.map

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

@@ -0,0 +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":";;;;;;;AA6BO,MAAMA,IAAUC,EAAsC,SAC3D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,YAAYC;AAAA,EACZ,mBAAAC,IAAoB;AAAA,EACpB,oBAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,WAAWC;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,mBAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAeV,MAAmB,QAClC,CAACW,GAAiBC,CAAkB,IAAIC,EAAwBZ,CAAiB,GACjFa,IAAaJ,IAAeV,IAAiBW,GAE7C,CAACI,GAAWC,CAAY,IAAIC,EAA8B;AAAA,IAC9D,OAAOb;AAAA,IACP,cAAcC;AAAA,IACd,UAAUC;AAAA,EAAA,CACX,GAIKY,IAAmBf,KAAeY,IAAY,gBAAgBjB;AAEpE,SACE,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAV;AAAA,MACA,WAAWW,EAAG,gBAAgBvB,GAAW,QAAQqB,CAAgB,IAAI;AAAA,QACnE,4BAA4Bf;AAAA,QAC5B,0BAA0BA,KAAeY;AAAA,MAAA,CAC1C;AAAA,MACD,MAAK;AAAA,MACJ,GAAGP;AAAA,MAEH,UAAA;AAAA,QAAAL,KACC,gBAAAkB,EAAC,OAAA,EAAI,WAAU,0BACb,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,cAAYd;AAAA,YACZ,iBAAe,CAACQ;AAAA,YAChB,SAAS,MAAMC,EAAa,CAACD,CAAS;AAAA,YAEtC,4BAACO,GAAA,EAAK,MAAMP,IAAY,kBAAkB,gBAAgB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA,GAExE;AAAA,QAEF,gBAAAM,EAAC,SAAI,WAAU,qBACZ,gBACCtB,KAAA,gBAAAA,EAAW,IAAI,CAACwB,GAAMC,MACpB,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YAEC,IAAIF,EAAK;AAAA,YACT,UAAUT,MAAeU;AAAA,YACzB,SAAS,CAACE,MAAM;;AACd,cAAKhB,KACHE,EAAmBY,CAAG,GAExBtB,KAAA,QAAAA,EAAqBsB,KACrBG,IAAAJ,EAAK,YAAL,QAAAI,EAAA,KAAAJ,GAAeG;AAAA,YACjB;AAAA,YACA,MAAMH,EAAK;AAAA,YACX,OAAOA,EAAK;AAAA,YACZ,MAAMA,EAAK;AAAA,YACX,SAASL;AAAA,UAAA;AAAA,UAbJM;AAAA,QAAA,IAeR,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AAcD,SAASC,EAAS;AAAA,EAChB,UAAAG;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,IAAAC,IAAK;AAAA,EACL,MAAAC;AAAA,EACA,aAAaC;AAAA,EACb,SAAAnC;AAAA,EACA,GAAGU;AACL,GAAkB;AAChB,QAAM0B,IAAYC,EAAM,OAAyB,IAAI,GAE/CC,IAAc,CAACC,MAA4C;AAC/D,IAAAJ,KAAA,QAAAA,EAAkBI;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAA8C;;AACnE,KAAAV,IAAAO,EAAU,YAAV,QAAAP,EAAmB,SAASU;AAAA,EAC9B,GAEME,IAAgB,gBAAAlB,EAACmB,GAAA,EAAO,WAAWN,EAAA,CAAW;AAIpD,SACE,gBAAAf;AAAA,IAHkBY;AAAA,IAGjB;AAAA,MACC,MAAAC;AAAA,MACA,MAAK;AAAA,MACL,WAAWZ,EAAG,sBAAsB,iBAAiBtB,GAAS,EAAE,QAAQ8B,GAAU;AAAA,MAClF,aAAAQ;AAAA,MACA,eAAAE;AAAA,MACC,GAAG9B;AAAA,MAEH,UAAA;AAAA,QAAAqB,KAAQ,gBAAAR,EAAC,QAAA,EAAK,WAAU,uBAAuB,UAAAQ,GAAK;AAAA,QACpDC,KAAS,gBAAAT,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAS,GAAM;AAAA,QACvDS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -0,0 +1,2 @@
+export { default as Stepper } from "./stepper";
+export type { StepperProps, StepItem } from "./stepper";

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

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from "react";
+export interface StepItem {
+    label: ReactNode;
+    description?: ReactNode;
+    optional?: ReactNode;
+    /** Marks the step as errored. */
+    error?: boolean;
+    /** Disables interaction with the step. */
+    disabled?: boolean;
+    /** Custom icon overriding the default number/check. */
+    icon?: ReactNode;
+}
+export interface StepperProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    steps: StepItem[];
+    /** Index of the active (current) step. */
+    activeStep: number;
+    orientation?: "horizontal" | "vertical";
+    /** Place the label under the icon (horizontal only). */
+    alternativeLabel?: boolean;
+    /** Makes steps clickable; receives the clicked step index. */
+    onStepClick?: (index: number) => void;
+}
+export declare const Stepper: import("react").ForwardRefExoticComponent<StepperProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Stepper;

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

@@ -0,0 +1,61 @@
+import { jsx as s, jsxs as o } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/stepper/stepper.entry.css';/* empty css                                                         */
+import { forwardRef as N, Fragment as y } from "react";
+import _ from "clsx";
+import { Icon as z } from "../../base/icon/icon.js";
+const E = N(function({ className: b, steps: i, activeStep: d, orientation: l = "horizontal", alternativeLabel: w = !1, onStepClick: r, ...h }, u) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ...h,
+      ref: u,
+      "data-testid": "stepper",
+      className: _(
+        "smwb-stepper",
+        `smwb-stepper_${l}`,
+        { "smwb-stepper_alt-label": w && l === "horizontal" },
+        b
+      ),
+      children: i.map((e, a) => {
+        var n;
+        const m = a < d, c = a === d, v = a === i.length - 1, t = !!r && !e.disabled, f = (p) => {
+          t && (p.key === "Enter" || p.key === " ") && (p.preventDefault(), r == null || r(a));
+        };
+        return /* @__PURE__ */ o(y, { children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: _("smwb-stepper__step", {
+                "smwb-stepper__step_active": c,
+                "smwb-stepper__step_completed": m,
+                "smwb-stepper__step_error": e.error,
+                "smwb-stepper__step_disabled": e.disabled,
+                "smwb-stepper__step_clickable": t
+              }),
+              "aria-current": c ? "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 ? f : void 0,
+              children: [
+                /* @__PURE__ */ s("div", { className: "smwb-stepper__icon", "aria-hidden": "true", children: (n = e.icon) != null ? n : m ? /* @__PURE__ */ s(z, { name: "check", size: 16 }) : /* @__PURE__ */ s("span", { children: a + 1 }) }),
+                /* @__PURE__ */ o("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 && l === "vertical" ? /* @__PURE__ */ s("span", { className: "smwb-stepper__description", children: e.description }) : null
+                ] })
+              ]
+            }
+          ),
+          v ? null : /* @__PURE__ */ s("div", { className: "smwb-stepper__connector", "aria-hidden": "true" })
+        ] }, a);
+      })
+    }
+  );
+});
+export {
+  E as Stepper,
+  E as default
+};
+//# sourceMappingURL=stepper.js.map

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

@@ -0,0 +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  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\nexport interface StepperProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  steps: StepItem[];\n  /** Index of the active (current) step. */\n  activeStep: number;\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Place the label under the icon (horizontal only). */\n  alternativeLabel?: boolean;\n  /** Makes steps clickable; receives the clicked step index. */\n  onStepClick?: (index: number) => void;\n}\n\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(function Stepper(\n  { className, steps, activeStep, orientation = \"horizontal\", alternativeLabel = false, onStepClick, ...props },\n  ref\n) {\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-testid=\"stepper\"\n      className={cn(\n        \"smwb-stepper\",\n        `smwb-stepper_${orientation}`,\n        { \"smwb-stepper_alt-label\": alternativeLabel && orientation === \"horizontal\" },\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 && orientation === \"vertical\" ? (\n                  <span className=\"smwb-stepper__description\">{step.description}</span>\n                ) : 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\nexport default Stepper;\n"],"names":["Stepper","forwardRef","className","steps","activeStep","orientation","alternativeLabel","onStepClick","props","ref","jsx","cn","step","index","completed","active","isLast","clickable","onStepKeyDown","event","Fragment","jsxs","_a","Icon"],"mappings":";;;;;AA6BO,MAAMA,IAAUC,EAAyC,SAC9D,EAAE,WAAAC,GAAW,OAAAC,GAAO,YAAAC,GAAY,aAAAC,IAAc,cAAc,kBAAAC,IAAmB,IAAO,aAAAC,GAAa,GAAGC,EAAA,GACtGC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,WAAWE;AAAA,QACT;AAAA,QACA,gBAAgBN,CAAW;AAAA,QAC3B,EAAE,0BAA0BC,KAAoBD,MAAgB,aAAA;AAAA,QAChEH;AAAA,MAAA;AAAA,MAGD,UAAAC,EAAM,IAAI,CAACS,GAAMC,MAAU;;AAC1B,cAAMC,IAAYD,IAAQT,GACpBW,IAASF,MAAUT,GACnBY,IAASH,MAAUV,EAAM,SAAS,GAClCc,IAAY,EAAQV,KAAgB,CAACK,EAAK,UAE1CM,IAAgB,CAACC,MAAyC;AAC9D,UAAIF,MAAcE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvDA,EAAM,eAAA,GACNZ,KAAA,QAAAA,EAAcM;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,MAAMV,KAAA,gBAAAA,EAAcM,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,eAAeP,MAAgB,aACnC,gBAAAK,EAAC,UAAK,WAAU,6BAA6B,UAAAE,EAAK,YAAA,CAAY,IAC5D;AAAA,gBAAA,EAAA,CACN;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEAI,IAA0E,OAAjE,gBAAAN,EAAC,OAAA,EAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,QAAK,EAAA,GA3B/DG,CA4Bf;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

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

@@ -0,0 +1,4 @@
+export { Tabs } from "./tabs";
+export type { TabsProps } from "./tabs";
+export { Tab } from "./tab/tab";
+export type { TabProps } from "./tab/tab";

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

@@ -0,0 +1,11 @@
+import React from "react";
+export interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+    label?: string | React.ReactNode;
+    isActive?: boolean;
+    contentRef?: React.Ref<unknown>;
+    icon?: React.ReactNode;
+    stacked?: boolean;
+    tag?: React.ElementType;
+    disabled?: boolean;
+}
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/navigation/tabs/tab/tab.js

@@ -0,0 +1,54 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import '../../../../assets/styles/less/components/tabs/tab/tab.entry.css';/* empty css                                                         */
+import m from "react";
+import v from "clsx";
+import { Ripple as T } from "../../../base/ripple/ripple.js";
+const g = m.forwardRef(function(p, f) {
+  const {
+    className: w,
+    label: c,
+    isActive: s = !1,
+    contentRef: u,
+    icon: i,
+    stacked: R = !1,
+    tag: e,
+    disabled: a,
+    onMouseDown: t,
+    ..._
+  } = p, l = m.useRef(null), h = (n) => {
+    t == null || t(n);
+  }, x = (n) => {
+    var r;
+    (r = l.current) == null || r.onRipple(n);
+  }, b = e != null ? e : e || "button", N = v("smwb-tab", w, {
+    "smwb-tab--active": s,
+    "smwb-tab--stacked": R,
+    "smwb-tab--disabled": a
+  });
+  return /* @__PURE__ */ d(
+    b,
+    {
+      ref: f,
+      className: N,
+      onMouseDown: h,
+      onPointerDown: x,
+      role: "tab",
+      "aria-selected": s,
+      "aria-disabled": a || void 0,
+      tabIndex: s ? 0 : -1,
+      disabled: b === "button" ? a : void 0,
+      ..._,
+      children: [
+        /* @__PURE__ */ d("span", { className: "smwb-tab__content", ref: u, children: [
+          i && /* @__PURE__ */ o("span", { className: "smwb-tab__icon", children: i }),
+          c && /* @__PURE__ */ o("span", { className: "smwb-tab__text-label", children: c })
+        ] }),
+        /* @__PURE__ */ o(T, { actionRef: l, classes: { child: "tab__ripple-child" } })
+      ]
+    }
+  );
+});
+export {
+  g as Tab
+};
+//# sourceMappingURL=tab.js.map

package/dist/components/navigation/tabs/tab/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sources":["../../../../../src/components/navigation/tabs/tab/tab.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../../base/ripple/ripple\";\n\nexport interface TabProps extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  label?: string | React.ReactNode;\n  isActive?: boolean;\n  contentRef?: React.Ref<unknown>;\n  icon?: React.ReactNode;\n  stacked?: boolean;\n  tag?: React.ElementType;\n  disabled?: boolean;\n}\n\nexport const Tab = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, TabProps>(function Tab(props, ref) {\n  const {\n    className,\n    label,\n    isActive = false,\n    contentRef,\n    icon,\n    stacked = false,\n    tag,\n    disabled,\n    onMouseDown: onMouseDownProp,\n    ...rest\n  } = props;\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\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<HTMLButtonElement | HTMLAnchorElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const Tag = tag ?? (tag || \"button\");\n  const classes = cn(\"smwb-tab\", className, {\n    \"smwb-tab--active\": isActive,\n    \"smwb-tab--stacked\": stacked,\n    \"smwb-tab--disabled\": disabled,\n  });\n\n  return (\n    <Tag\n      ref={ref}\n      className={classes}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      role={\"tab\"}\n      aria-selected={isActive}\n      aria-disabled={disabled || undefined}\n      tabIndex={isActive ? 0 : -1}\n      disabled={Tag === \"button\" ? disabled : undefined}\n      {...rest}\n    >\n      <span className=\"smwb-tab__content\" ref={contentRef as React.Ref<HTMLSpanElement>}>\n        {icon && <span className=\"smwb-tab__icon\">{icon}</span>}\n        {label && <span className=\"smwb-tab__text-label\">{label}</span>}\n      </span>\n      <Ripple actionRef={rippleRef} classes={{ child: \"tab__ripple-child\" }} />\n    </Tag>\n  );\n});\n"],"names":["Tab","React","props","ref","className","label","isActive","contentRef","icon","stacked","tag","disabled","onMouseDownProp","rest","rippleRef","onMouseDown","event","onPointerDown","_a","Tag","classes","cn","jsxs","jsx","Ripple"],"mappings":";;;;;AAeO,MAAMA,IAAMC,EAAM,WAA4D,SAAaC,GAAOC,GAAK;AAC5G,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAaC;AAAA,IACb,GAAGC;AAAA,EAAA,IACDX,GACEY,IAAYb,EAAM,OAAyB,IAAI,GAE/Cc,IAAc,CAACC,MAAmE;AACtF,IAAAJ,KAAA,QAAAA,EAAkBI;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAqE;;AAC1F,KAAAE,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAC9B,GAEMG,IAAMT,KAAA,OAAAA,IAAQA,KAAO,UACrBU,IAAUC,EAAG,YAAYjB,GAAW;AAAA,IACxC,oBAAoBE;AAAA,IACpB,qBAAqBG;AAAA,IACrB,sBAAsBE;AAAA,EAAA,CACvB;AAED,SACE,gBAAAW;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,KAAAhB;AAAA,MACA,WAAWiB;AAAA,MACX,aAAAL;AAAA,MACA,eAAAE;AAAA,MACA,MAAM;AAAA,MACN,iBAAeX;AAAA,MACf,iBAAeK,KAAY;AAAA,MAC3B,UAAUL,IAAW,IAAI;AAAA,MACzB,UAAUa,MAAQ,WAAWR,IAAW;AAAA,MACvC,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAS,EAAC,QAAA,EAAK,WAAU,qBAAoB,KAAKf,GACtC,UAAA;AAAA,UAAAC,KAAQ,gBAAAe,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAf,GAAK;AAAA,UAC/CH,KAAS,gBAAAkB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAlB,EAAA,CAAM;AAAA,QAAA,GAC1D;AAAA,QACA,gBAAAkB,EAACC,KAAO,WAAWV,GAAW,SAAS,EAAE,OAAO,sBAAoB,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7E,CAAC;"}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { Tab, TabProps } from "./tab/tab";
+export interface TabsProps {
+    value: number;
+    onChange: (e: React.MouseEvent<HTMLButtonElement>, index: number) => void;
+    indicatorContent?: boolean;
+    scrollable?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    /** Accessible label for the tab list. */
+    "aria-label"?: string;
+}
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export { Tab };
+export type { TabProps };

package/dist/components/navigation/tabs/tabs.js

@@ -0,0 +1,137 @@
+import { jsx as u, jsxs as B } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/tabs/tabs.entry.css';/* empty css                                                   */
+import s from "react";
+import v from "clsx";
+import { debounce as D } from "../../../utils/debounce.js";
+import { useEventCallback as S } from "../../../hooks/useEventCallback.js";
+import { setRef as O } from "../../../utils/setRef.js";
+import { animate as j } from "../../../utils/animate.js";
+const L = {
+  root: {},
+  content: {}
+}, Q = s.forwardRef(function(M, N) {
+  const {
+    className: C,
+    children: _,
+    onChange: E,
+    value: f,
+    indicatorContent: d = !1,
+    scrollable: y = !1,
+    "aria-label": z,
+    ...T
+  } = M, [x, I] = s.useState(!1), [c, h] = s.useState(L), l = s.useRef(null), a = s.useRef(null), b = s.useRef([]), w = 40, p = () => {
+    const t = l.current;
+    let e;
+    if (t) {
+      const n = t.getBoundingClientRect();
+      e = {
+        clientWidth: t.clientWidth,
+        scrollLeft: t.scrollLeft,
+        scrollTop: t.scrollTop,
+        scrollWidth: t.scrollWidth,
+        top: n.top,
+        bottom: n.bottom,
+        left: n.left,
+        right: n.right
+      };
+    }
+    let r = null, o = null;
+    if (a.current || console.error("tabListRef.current is undefined"), t && a.current) {
+      const n = a.current.children;
+      if (n.length > 0) {
+        const i = n[f];
+        r = i ? i.getBoundingClientRect() : null, d && (o = b.current[f] ? b.current[f].getBoundingClientRect() : null);
+      }
+    }
+    return { tabsMeta: e, tabMeta: r, tabContentMeta: o };
+  }, m = S(() => {
+    const { tabsMeta: t, tabMeta: e, tabContentMeta: r } = p();
+    let o = 0;
+    e && t && (o = 1 * (e.left - t.left + t.scrollLeft));
+    const n = {
+      root: {
+        left: o,
+        width: e ? e.width : 0
+      }
+    };
+    if (d && r && (n.content = {
+      width: r.width
+    }), isNaN(c.root.left) || isNaN(c.root.width))
+      h(n);
+    else {
+      const i = Math.abs(c.root.left - n.root.left), W = Math.abs(c.root.width - n.root.width);
+      (i >= 1 || W >= 1) && h(n);
+    }
+  }), R = (t, { animation: e = !0 } = {}) => {
+    l.current && (e ? j(l.current, "scrollLeft", t, {
+      duration: 300
+    }) : l.current.scrollLeft = t);
+  }, g = S((t) => {
+    const { tabsMeta: e, tabMeta: r } = p();
+    if (!(!r || !e)) {
+      if (r.left < e.left) {
+        const o = e.scrollLeft + (r.left - e.left);
+        R(o - w, { animation: t });
+      } else if (r.right > e.right) {
+        const o = e.scrollLeft + (r.right - e.right);
+        R(o + w, { animation: t });
+      }
+    }
+  });
+  s.useEffect(() => {
+    I(!0);
+  }, []), s.useEffect(() => {
+    m();
+  }), s.useEffect(() => {
+    var o, n;
+    const t = D(() => {
+      l.current && m();
+    }, 166);
+    if (!l.current || !l.current.ownerDocument.defaultView) {
+      console.error("tabsRef.current.ownerDocument.defaultView is undefined");
+      return;
+    }
+    const e = l.current.ownerDocument.defaultView;
+    e.addEventListener("resize", t);
+    let r;
+    return typeof ResizeObserver != "undefined" && (r = new ResizeObserver(t), Array.from((n = (o = a.current) == null ? void 0 : o.children) != null ? n : []).forEach((i) => {
+      r.observe(i);
+    })), () => {
+      t.cancel(), e.removeEventListener("resize", t), r && r.disconnect();
+    };
+  }, [m]), s.useEffect(() => {
+    g(L !== c);
+  }, [g, c]);
+  const V = s.Children.map(
+    _,
+    (t, e) => s.cloneElement(t, {
+      isActive: f === e,
+      onClick: (r) => {
+        E(r, e);
+      },
+      ...d && {
+        contentRef: (r) => {
+          const { contentRef: o } = t.props;
+          b.current.push(r), o && O(o, r);
+        }
+      }
+    })
+  );
+  return /* @__PURE__ */ u("div", { className: v("smwb-tabs", C), role: "tabpanel", ref: N, ...T, children: /* @__PURE__ */ B(
+    "div",
+    {
+      className: v("smwb-tabs__scroller", {
+        "smwb-tabs__scroller--scrollable": y
+      }),
+      ref: l,
+      children: [
+        /* @__PURE__ */ u("div", { className: "smwb-tabs__scroll-area", ref: a, role: "tablist", "aria-label": z, children: V }),
+        x && /* @__PURE__ */ u("span", { className: "smwb-tabs__indicator", style: c.root, children: /* @__PURE__ */ u("span", { className: "smwb-tabs__indicator-content", style: c.content }) })
+      ]
+    }
+  ) });
+});
+export {
+  Q as Tabs
+};
+//# sourceMappingURL=tabs.js.map