@smwb/ui-react 2.0.0

package/dist/components/layout/sheet/sheet.js

@@ -0,0 +1,218 @@
+import { jsx as n, jsxs as re } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/sheet/sheet.entry.css';/* empty css                                                     */
+import T, { forwardRef as ne, useState as W, useRef as H, useEffect as oe, useCallback as w } from "react";
+import B from "clsx";
+import { CSSTransition as j } from "react-transition-group";
+import { createPortal as se } from "react-dom";
+import { Button as C } from "../../inputs/button/button.js";
+import { Icon as $ } from "../../base/icon/icon.js";
+import { useForkRef as ie } from "../../../hooks/useForkRef.js";
+import { ClickAwayListener as ae } from "../../clickAwayListener/clickAwayListener.js";
+const ge = ne(function({
+  isOpen: u,
+  onClose: a,
+  variant: d = "default",
+  children: r,
+  placement: _ = "bottom",
+  disableOutsideClick: p,
+  closeOnEsc: v = !0,
+  ...k
+}, A) {
+  const [m, b] = W(null), D = H(null);
+  oe(() => {
+    if (!u || !v || !a)
+      return;
+    const o = (R) => {
+      R.key === "Escape" && a();
+    };
+    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
+  }, [u, v, a]);
+  const y = () => {
+    b(m === "expanded" ? "small" : m ? null : "expanded");
+  }, i = () => {
+    a == null || a(), b(null);
+  };
+  return se(
+    /* @__PURE__ */ n(
+      j,
+      {
+        in: u,
+        timeout: 70,
+        mountOnEnter: !0,
+        unmountOnExit: !0,
+        classNames: { enterDone: "smwb-entered" },
+        appear: !0,
+        nodeRef: D,
+        children: d === "default" ? /* @__PURE__ */ n("div", { className: B(p ? "smwb-sheet__overlay" : "smwb-sheet__default"), ref: D, children: /* @__PURE__ */ n(
+          U,
+          {
+            ref: A,
+            onClose: a,
+            handleSizeButton: y,
+            handleClose: i,
+            isOpen: u,
+            mode: m,
+            placement: _,
+            variant: d,
+            ...k,
+            children: r
+          }
+        ) }) : /* @__PURE__ */ n(
+          "div",
+          {
+            className: B("smwb-sheet__overlay", "smwb-dark", `smwb-${_}`, `smwb-sheet_${d}`),
+            ref: D,
+            children: /* @__PURE__ */ n(ae, { onClickAway: () => !p && i(), children: /* @__PURE__ */ n(
+              U,
+              {
+                ref: A,
+                onClose: a,
+                handleSizeButton: y,
+                handleClose: i,
+                isOpen: u,
+                mode: m,
+                placement: _,
+                variant: d,
+                ...k,
+                children: r
+              }
+            ) })
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}), le = (z) => z === "bottom" || z === "top", U = T.forwardRef(function(u, a) {
+  const {
+    isOpen: d,
+    placement: r,
+    className: _,
+    mode: p,
+    size: v = "60%",
+    variant: k,
+    onClose: A,
+    withSizeToggle: m = !0,
+    hideHeaderActions: b = !1,
+    reverseHeaderActions: D = !1,
+    resizable: y = !1,
+    minSize: i = 80,
+    maxSize: o,
+    resizeStep: R = 24,
+    resizeHandleAriaLabel: X = "Resize sheet",
+    onResize: N,
+    style: Y,
+    handleClose: F,
+    handleSizeButton: V,
+    children: q,
+    ...G
+  } = u, J = !b && (!!A || m), P = [];
+  m && P.push(
+    /* @__PURE__ */ n(C, { variant: "outlined", size: "small", onClick: V, children: /* @__PURE__ */ n($, { name: "open_in_full" }) }, "size")
+  ), A && P.push(
+    /* @__PURE__ */ n(C, { variant: "outlined", size: "small", onClick: F, children: /* @__PURE__ */ n($, { name: "close" }) }, "close")
+  ), D && P.reverse();
+  const I = H(null), S = H(null), Q = ie(a, I, S), [l, L] = W(null), s = le(r), M = w(
+    (e) => {
+      const t = s ? window.innerHeight : window.innerWidth, c = o != null ? o : t;
+      return Math.max(i, Math.min(c, e));
+    },
+    [s, o, i]
+  ), x = w(() => {
+    var t;
+    const e = (t = S.current) == null ? void 0 : t.getBoundingClientRect();
+    return e ? s ? e.height : e.width : i;
+  }, [s, i]), h = w(
+    (e) => {
+      const t = M(e);
+      L(t), N == null || N(t);
+    },
+    [M, N]
+  ), E = H(null), Z = w(
+    (e) => {
+      var t, c;
+      e.preventDefault(), E.current = {
+        start: s ? e.clientY : e.clientX,
+        size: x()
+      };
+      try {
+        (c = (t = e.currentTarget).setPointerCapture) == null || c.call(t, e.pointerId);
+      } catch {
+      }
+    },
+    [s, x]
+  ), O = w(
+    (e) => {
+      const t = E.current;
+      if (!t)
+        return;
+      const f = (s ? e.clientY : e.clientX) - t.start, g = r === "bottom" || r === "right" ? -f : f;
+      h(t.size + g);
+    },
+    [s, r, h]
+  ), K = w((e) => {
+    var t, c, f, g;
+    E.current = null, (c = (t = e.currentTarget).hasPointerCapture) != null && c.call(t, e.pointerId) && ((g = (f = e.currentTarget).releasePointerCapture) == null || g.call(f, e.pointerId));
+  }, []), ee = w(
+    (e) => {
+      const t = l != null ? l : x(), c = o != null ? o : s ? window.innerHeight : window.innerWidth, f = r === "bottom" ? "ArrowUp" : r === "top" ? "ArrowDown" : r === "left" ? "ArrowRight" : "ArrowLeft", g = r === "bottom" ? "ArrowDown" : r === "top" ? "ArrowUp" : r === "left" ? "ArrowLeft" : "ArrowRight";
+      e.key === f ? (e.preventDefault(), h(t + R)) : e.key === g ? (e.preventDefault(), h(t - R)) : e.key === "Home" ? (e.preventDefault(), h(i)) : e.key === "End" && (e.preventDefault(), h(c));
+    },
+    [l, x, s, r, h, R, i, o]
+  );
+  T.useEffect(() => {
+    var e;
+    if (!d) {
+      L(null);
+      return;
+    }
+    (e = S.current) == null || e.focus();
+  }, [d]);
+  const te = y && l !== null ? { ...s ? { height: l } : { width: l }, transition: "none" } : {};
+  return /* @__PURE__ */ n(j, { in: d, timeout: 120, appear: !0, classNames: { enterDone: "smwb-sheet_entered" }, nodeRef: I, children: /* @__PURE__ */ re(
+    "div",
+    {
+      ref: Q,
+      "data-testid": "sheet",
+      tabIndex: -1,
+      role: "dialog",
+      "aria-modal": k === "modal" || void 0,
+      ...G,
+      className: B("smwb-sheet", _, `smwb-sheet_${k}`, `smwb-${r}`, {
+        "smwb-expanded": p === "expanded",
+        "smwb-small": p === "small",
+        "smwb-sheet_resizable": y
+      }),
+      style: { "--sizeProp": v, ...te, ...Y },
+      children: [
+        y && /* @__PURE__ */ n(
+          "div",
+          {
+            className: "smwb-sheet__drag-handle",
+            "data-testid": "sheet-drag-handle",
+            role: "separator",
+            tabIndex: 0,
+            "aria-orientation": s ? "horizontal" : "vertical",
+            "aria-label": X,
+            "aria-valuemin": i,
+            "aria-valuemax": Math.round(o != null ? o : s ? window.innerHeight : window.innerWidth),
+            "aria-valuenow": Math.round(l != null ? l : x()),
+            onPointerDown: Z,
+            onPointerMove: O,
+            onPointerUp: K,
+            onPointerCancel: K,
+            onKeyDown: ee,
+            children: /* @__PURE__ */ n("span", { className: "smwb-sheet__drag-handle-bar" })
+          }
+        ),
+        J && /* @__PURE__ */ n("div", { className: "smwb-sheet__header", children: P }),
+        d && p !== "small" && /* @__PURE__ */ n("div", { className: "smwb-sheet__inner", children: q })
+      ]
+    }
+  ) });
+});
+export {
+  ge as Sheet,
+  ge as default
+};
+//# sourceMappingURL=sheet.js.map

package/dist/components/layout/sheet/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","sources":["../../../../src/components/layout/sheet/sheet.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, PropsWithChildren, useCallback, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { createPortal } from \"react-dom\";\nimport Button from \"../../inputs/button/button\";\nimport Icon from \"../../base/icon/icon\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface SheetProps extends React.HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  placement?: \"top\" | \"bottom\" | \"right\" | \"left\";\n  isOpen: boolean;\n  onClose?: () => void;\n  variant?: \"default\" | \"modal\";\n  withSizeToggle?: boolean;\n  /** Hide built-in header actions; onClose still handles Esc and backdrop. */\n  hideHeaderActions?: boolean;\n  reverseHeaderActions?: boolean;\n  size?: string;\n  disableOutsideClick?: boolean;\n  /** Close the sheet when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /**\n   * Allow the user to resize the sheet by dragging a grab handle with\n   * touch or mouse (mobile bottom-sheet style). Off by default.\n   */\n  resizable?: boolean;\n  /** Minimum size in px while resizing (default 80). */\n  minSize?: number;\n  /** Maximum size in px while resizing (default: viewport dimension). */\n  maxSize?: number;\n  /** Step in px for keyboard resizing (default 24). */\n  resizeStep?: number;\n  /** Accessible label for the resize handle. */\n  resizeHandleAriaLabel?: string;\n  /** Called with the new size in px while/after resizing. */\n  onResize?: (size: number) => void;\n  \"aria-label\"?: string;\n}\n\ntype Mode = \"small\" | \"expanded\" | null;\n\nexport const Sheet = forwardRef<HTMLDivElement, PropsWithChildren<SheetProps>>(function Sheet(\n  {\n    isOpen,\n    onClose,\n    variant = \"default\",\n    children,\n    placement = \"bottom\",\n    disableOutsideClick,\n    closeOnEsc = true,\n    ...props\n  },\n  ref\n) {\n  const [mode, setMode] = useState<Mode>(null);\n  const nodeRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!isOpen || !closeOnEsc || !onClose) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [isOpen, closeOnEsc, onClose]);\n\n  const handleSizeButton = () => {\n    if (mode === \"expanded\") {\n      setMode(\"small\");\n    } else if (!mode) {\n      setMode(\"expanded\");\n    } else {\n      setMode(null);\n    }\n  };\n\n  const handleClose = () => {\n    onClose?.();\n    setMode(null);\n  };\n\n  return createPortal(\n    <CSSTransition\n      in={isOpen}\n      timeout={70}\n      mountOnEnter\n      unmountOnExit\n      classNames={{ enterDone: \"smwb-entered\" }}\n      appear\n      nodeRef={nodeRef}\n    >\n      {variant === \"default\" ? (\n        <div className={cn(disableOutsideClick ? \"smwb-sheet__overlay\" : \"smwb-sheet__default\")} ref={nodeRef}>\n          <SheetBlock\n            ref={ref}\n            onClose={onClose}\n            handleSizeButton={handleSizeButton}\n            handleClose={handleClose}\n            isOpen={isOpen}\n            mode={mode}\n            placement={placement}\n            variant={variant}\n            {...props}\n          >\n            {children}\n          </SheetBlock>\n        </div>\n      ) : (\n        <div\n          className={cn(\"smwb-sheet__overlay\", \"smwb-dark\", `smwb-${placement}`, `smwb-sheet_${variant}`)}\n          ref={nodeRef}\n        >\n          <ClickAwayListener onClickAway={() => !disableOutsideClick && handleClose()}>\n            <SheetBlock\n              ref={ref}\n              onClose={onClose}\n              handleSizeButton={handleSizeButton}\n              handleClose={handleClose}\n              isOpen={isOpen}\n              mode={mode}\n              placement={placement}\n              variant={variant}\n              {...props}\n            >\n              {children}\n            </SheetBlock>\n          </ClickAwayListener>\n        </div>\n      )}\n    </CSSTransition>,\n    document.body\n  );\n});\n\nexport default Sheet;\n\ninterface SheetBlockProps extends SheetProps {\n  mode: Mode;\n  handleSizeButton: () => void;\n  handleClose: () => void;\n}\n\n/** Sheets anchored to a horizontal edge resize on the Y axis, vertical edges on X. */\nconst isVerticalAxis = (placement: SheetProps[\"placement\"]) => placement === \"bottom\" || placement === \"top\";\n\nconst SheetBlock = React.forwardRef(function SheetBlock(props: SheetBlockProps, ref: React.Ref<HTMLDivElement>) {\n  const {\n    isOpen,\n    placement,\n    className,\n    mode,\n\n    size = \"60%\",\n    variant,\n    onClose,\n    withSizeToggle = true,\n    hideHeaderActions = false,\n    reverseHeaderActions = false,\n    resizable = false,\n    minSize = 80,\n    maxSize,\n    resizeStep = 24,\n    resizeHandleAriaLabel = \"Resize sheet\",\n    onResize,\n    style,\n    handleClose,\n    handleSizeButton,\n    children,\n    ...rest\n  } = props;\n  const showActions = !hideHeaderActions && (!!onClose || withSizeToggle);\n  const headerActionNodes: React.ReactNode[] = [];\n  if (withSizeToggle) {\n    headerActionNodes.push(\n      <Button variant={\"outlined\"} size=\"small\" onClick={handleSizeButton} key=\"size\">\n        <Icon name=\"open_in_full\" />\n      </Button>\n    );\n  }\n  if (onClose) {\n    headerActionNodes.push(\n      <Button variant={\"outlined\"} size=\"small\" onClick={handleClose} key=\"close\">\n        <Icon name=\"close\" />\n      </Button>\n    );\n  }\n  if (reverseHeaderActions) {\n    headerActionNodes.reverse();\n  }\n  const nodeRef = useRef<HTMLDivElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forkRef = useForkRef(ref, nodeRef, rootRef);\n\n  // Drag-to-resize state. `dragSize` (px) wins over the CSS size when set\n  // (inline style beats the .smwb-expanded/.smwb-small rules).\n  const [dragSize, setDragSize] = useState<number | null>(null);\n  const vertical = isVerticalAxis(placement);\n\n  const clamp = useCallback(\n    (px: number) => {\n      const viewport = vertical ? window.innerHeight : window.innerWidth;\n      const max = maxSize ?? viewport;\n      return Math.max(minSize, Math.min(max, px));\n    },\n    [vertical, maxSize, minSize]\n  );\n\n  const currentSizePx = useCallback(() => {\n    const rect = rootRef.current?.getBoundingClientRect();\n    if (!rect) {\n      return minSize;\n    }\n    return vertical ? rect.height : rect.width;\n  }, [vertical, minSize]);\n\n  const applySize = useCallback(\n    (px: number) => {\n      const next = clamp(px);\n      setDragSize(next);\n      onResize?.(next);\n    },\n    [clamp, onResize]\n  );\n\n  const dragRef = useRef<{ start: number; size: number } | null>(null);\n\n  const onPointerDown = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      dragRef.current = {\n        start: vertical ? event.clientY : event.clientX,\n        size: currentSizePx(),\n      };\n      try {\n        event.currentTarget.setPointerCapture?.(event.pointerId);\n      } catch {\n        /* pointer capture is best-effort (unsupported in some envs) */\n      }\n    },\n    [vertical, currentSizePx]\n  );\n\n  const onPointerMove = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      const drag = dragRef.current;\n      if (!drag) {\n        return;\n      }\n      const pos = vertical ? event.clientY : event.clientX;\n      const delta = pos - drag.start;\n      // Sign so dragging *away* from the anchored edge grows the sheet.\n      const grow = placement === \"bottom\" || placement === \"right\" ? -delta : delta;\n      applySize(drag.size + grow);\n    },\n    [vertical, placement, applySize]\n  );\n\n  const endDrag = useCallback((event: React.PointerEvent<HTMLDivElement>) => {\n    dragRef.current = null;\n    if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    }\n  }, []);\n\n  const onHandleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const base = dragSize ?? currentSizePx();\n      const max = maxSize ?? (vertical ? window.innerHeight : window.innerWidth);\n      // Key that should make the sheet *bigger*, per anchored edge.\n      const incKey =\n        placement === \"bottom\"\n          ? \"ArrowUp\"\n          : placement === \"top\"\n            ? \"ArrowDown\"\n            : placement === \"left\"\n              ? \"ArrowRight\"\n              : \"ArrowLeft\";\n      const decKey =\n        placement === \"bottom\"\n          ? \"ArrowDown\"\n          : placement === \"top\"\n            ? \"ArrowUp\"\n            : placement === \"left\"\n              ? \"ArrowLeft\"\n              : \"ArrowRight\";\n      if (event.key === incKey) {\n        event.preventDefault();\n        applySize(base + resizeStep);\n      } else if (event.key === decKey) {\n        event.preventDefault();\n        applySize(base - resizeStep);\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        applySize(minSize);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        applySize(max);\n      }\n    },\n    [dragSize, currentSizePx, vertical, placement, applySize, resizeStep, minSize, maxSize]\n  );\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      setDragSize(null);\n      return;\n    }\n\n    rootRef.current?.focus();\n  }, [isOpen]);\n\n  // While a drag size is applied, suppress the sheet's 0.2s size\n  // transition so the panel tracks the pointer in real time instead\n  // of lagging 200ms behind every move.\n  const sizeStyle: CSSProperties =\n    resizable && dragSize !== null\n      ? { ...(vertical ? { height: dragSize } : { width: dragSize }), transition: \"none\" }\n      : {};\n\n  return (\n    <CSSTransition in={isOpen} timeout={120} appear classNames={{ enterDone: \"smwb-sheet_entered\" }} nodeRef={nodeRef}>\n      <div\n        ref={forkRef}\n        data-testid=\"sheet\"\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal={variant === \"modal\" || undefined}\n        {...rest}\n        className={cn(\"smwb-sheet\", className, `smwb-sheet_${variant}`, `smwb-${placement}`, {\n          \"smwb-expanded\": mode === \"expanded\",\n          \"smwb-small\": mode === \"small\",\n          \"smwb-sheet_resizable\": resizable,\n        })}\n        style={{ \"--sizeProp\": size, ...sizeStyle, ...style } as CSSProperties}\n      >\n        {resizable && (\n          <div\n            className=\"smwb-sheet__drag-handle\"\n            data-testid=\"sheet-drag-handle\"\n            role=\"separator\"\n            tabIndex={0}\n            aria-orientation={vertical ? \"horizontal\" : \"vertical\"}\n            aria-label={resizeHandleAriaLabel}\n            aria-valuemin={minSize}\n            aria-valuemax={Math.round(maxSize ?? (vertical ? window.innerHeight : window.innerWidth))}\n            aria-valuenow={Math.round(dragSize ?? currentSizePx())}\n            onPointerDown={onPointerDown}\n            onPointerMove={onPointerMove}\n            onPointerUp={endDrag}\n            onPointerCancel={endDrag}\n            onKeyDown={onHandleKeyDown}\n          >\n            <span className=\"smwb-sheet__drag-handle-bar\" />\n          </div>\n        )}\n        {showActions && <div className=\"smwb-sheet__header\">{headerActionNodes}</div>}\n        {isOpen && mode !== \"small\" && <div className=\"smwb-sheet__inner\">{children}</div>}\n      </div>\n    </CSSTransition>\n  );\n});\n"],"names":["Sheet","forwardRef","isOpen","onClose","variant","children","placement","disableOutsideClick","closeOnEsc","props","ref","mode","setMode","useState","nodeRef","useRef","useEffect","onKeyDown","event","handleSizeButton","handleClose","createPortal","jsx","CSSTransition","cn","SheetBlock","ClickAwayListener","isVerticalAxis","React","className","size","withSizeToggle","hideHeaderActions","reverseHeaderActions","resizable","minSize","maxSize","resizeStep","resizeHandleAriaLabel","onResize","style","rest","showActions","headerActionNodes","Button","Icon","rootRef","forkRef","useForkRef","dragSize","setDragSize","vertical","clamp","useCallback","px","viewport","max","currentSizePx","rect","_a","applySize","next","dragRef","onPointerDown","_b","onPointerMove","drag","delta","grow","endDrag","_d","_c","onHandleKeyDown","base","incKey","decKey","sizeStyle","jsxs"],"mappings":"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"}

package/dist/components/layout/stack/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Stack } from "./stack";
+export type { StackProps, StackSpacing } from "./stack";

package/dist/components/layout/stack/stack.d.ts

@@ -0,0 +1,17 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export type StackSpacing = number | "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    /** Gap between items: scale keyword, or a number = N × spacing unit. */
+    spacing?: StackSpacing;
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    justify?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+    wrap?: boolean;
+    /** Optional element rendered between each child. */
+    divider?: ReactNode;
+    className?: string;
+}
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Stack;

package/dist/components/layout/stack/stack.js

@@ -0,0 +1,34 @@
+import { jsx as s, jsxs as k } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/stack/stack.entry.css';/* empty css                                                     */
+import y, { Children as w, isValidElement as b, Fragment as h } from "react";
+import j from "clsx";
+const n = (t) => t === "start" || t === "end" ? `flex-${t}` : t, v = (t) => typeof t == "number" ? `calc(var(--smui-spacing-unit, 4px) * ${t})` : t === "none" ? "0" : `var(--smui-space-${t})`, R = y.forwardRef(function({ direction: i = "column", spacing: l = "md", align: c, justify: o, wrap: m, divider: e, className: f, style: p, children: a, ...d }, u) {
+  const x = w.toArray(a).filter(b);
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: u,
+      "data-testid": "stack",
+      className: j("smwb-stack", f),
+      style: {
+        display: "flex",
+        flexDirection: i,
+        flexWrap: m ? "wrap" : void 0,
+        alignItems: n(c),
+        justifyContent: n(o),
+        gap: v(l),
+        ...p
+      },
+      ...d,
+      children: e ? x.map((g, r) => /* @__PURE__ */ k(h, { children: [
+        r > 0 ? /* @__PURE__ */ s("div", { className: "smwb-stack__divider", children: e }) : null,
+        g
+      ] }, r)) : a
+    }
+  );
+});
+export {
+  R as Stack,
+  R as default
+};
+//# sourceMappingURL=stack.js.map

package/dist/components/layout/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sources":["../../../../src/components/layout/stack/stack.tsx"],"sourcesContent":["import React, { Children, Fragment, HTMLAttributes, PropsWithChildren, ReactNode, isValidElement } from \"react\";\nimport cn from \"clsx\";\n\nexport type StackSpacing = number | \"none\" | \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"xxxl\";\n\nexport interface StackProps extends HTMLAttributes<HTMLDivElement> {\n  direction?: \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\n  /** Gap between items: scale keyword, or a number = N × spacing unit. */\n  spacing?: StackSpacing;\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  justify?: \"start\" | \"center\" | \"end\" | \"space-between\" | \"space-around\" | \"space-evenly\";\n  wrap?: boolean;\n  /** Optional element rendered between each child. */\n  divider?: ReactNode;\n  className?: string;\n}\n\nconst flexAlign = (v?: string): string | undefined => (v === \"start\" || v === \"end\" ? `flex-${v}` : v);\n\nconst resolveGap = (s: StackSpacing): string =>\n  typeof s === \"number\" ? `calc(var(--smui-spacing-unit, 4px) * ${s})` : s === \"none\" ? \"0\" : `var(--smui-space-${s})`;\n\nexport const Stack = React.forwardRef<HTMLDivElement, PropsWithChildren<StackProps>>(function Stack(\n  { direction = \"column\", spacing = \"md\", align, justify, wrap, divider, className, style, children, ...rest },\n  ref\n) {\n  const items = Children.toArray(children).filter(isValidElement);\n  return (\n    <div\n      ref={ref}\n      data-testid=\"stack\"\n      className={cn(\"smwb-stack\", className)}\n      style={{\n        display: \"flex\",\n        flexDirection: direction,\n        flexWrap: wrap ? \"wrap\" : undefined,\n        alignItems: flexAlign(align),\n        justifyContent: flexAlign(justify),\n        gap: resolveGap(spacing),\n        ...style,\n      }}\n      {...rest}\n    >\n      {divider\n        ? items.map((child, i) => (\n            <Fragment key={i}>\n              {i > 0 ? <div className=\"smwb-stack__divider\">{divider}</div> : null}\n              {child}\n            </Fragment>\n          ))\n        : children}\n    </div>\n  );\n});\n\nexport default Stack;\n"],"names":["flexAlign","v","resolveGap","s","Stack","React","direction","spacing","align","justify","wrap","divider","className","style","children","rest","ref","items","Children","isValidElement","jsx","cn","child","i","Fragment"],"mappings":";;;;AAkBA,MAAMA,IAAY,CAACC,MAAoCA,MAAM,WAAWA,MAAM,QAAQ,QAAQA,CAAC,KAAKA,GAE9FC,IAAa,CAACC,MAClB,OAAOA,KAAM,WAAW,wCAAwCA,CAAC,MAAMA,MAAM,SAAS,MAAM,oBAAoBA,CAAC,KAEtGC,IAAQC,EAAM,WAA0D,SACnF,EAAE,WAAAC,IAAY,UAAU,SAAAC,IAAU,MAAM,OAAAC,GAAO,SAAAC,GAAS,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,GACtGC,GACA;AACA,QAAMC,IAAQC,EAAS,QAAQJ,CAAQ,EAAE,OAAOK,CAAc;AAC9D,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAJ;AAAA,MACA,eAAY;AAAA,MACZ,WAAWK,EAAG,cAAcT,CAAS;AAAA,MACrC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAeN;AAAA,QACf,UAAUI,IAAO,SAAS;AAAA,QAC1B,YAAYV,EAAUQ,CAAK;AAAA,QAC3B,gBAAgBR,EAAUS,CAAO;AAAA,QACjC,KAAKP,EAAWK,CAAO;AAAA,QACvB,GAAGM;AAAA,MAAA;AAAA,MAEJ,GAAGE;AAAA,MAEH,cACGE,EAAM,IAAI,CAACK,GAAOC,wBACfC,GAAA,EACE,UAAA;AAAA,QAAAD,IAAI,IAAI,gBAAAH,EAAC,OAAA,EAAI,WAAU,uBAAuB,aAAQ,IAAS;AAAA,QAC/DE;AAAA,MAAA,EAAA,GAFYC,CAGf,CACD,IACDT;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

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

@@ -0,0 +1,18 @@
+import React from "react";
+export type AppBarColor = "default" | "primary" | "secondary" | "error" | "success" | "warning" | "info";
+export interface AppBarProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    children?: React.ReactNode;
+    className?: string;
+    dense?: boolean;
+    position?: "relative" | "static" | "absolute" | "sticky" | "fixed";
+    placement?: "top" | "bottom";
+    leftContent?: React.ReactNode;
+    midContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    title?: React.ReactNode | string;
+    midContentAlign?: "middle" | "left" | "right";
+    /** Semantic background color. */
+    color?: AppBarColor;
+}
+export declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<HTMLElement>>;
+export default AppBar;

package/dist/components/navigation/appBar/appBar.js

@@ -0,0 +1,48 @@
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/appBar/appBar.entry.css';/* empty css                                                       */
+import { forwardRef as w } from "react";
+import i from "clsx";
+const x = w(function({
+  className: t,
+  children: s,
+  dense: d,
+  position: b = "static",
+  placement: r = "top",
+  leftContent: l,
+  midContent: o,
+  midContentAlign: c = "middle",
+  rightContent: n,
+  title: p,
+  color: e = "default",
+  ..._
+}, f) {
+  return /* @__PURE__ */ a(
+    r === "top" ? "header" : "footer",
+    {
+      ref: f,
+      className: i(
+        "smwb-appbar",
+        t,
+        `smwb-${b}`,
+        `smwb-${r}`,
+        { "smwb-dense": d },
+        e !== "default" && `smwb-appbar_color-${e}`
+      ),
+      "data-testid": "app-bar",
+      ..._,
+      children: s || /* @__PURE__ */ m("div", { className: "smwb-appbar__inner", children: [
+        /* @__PURE__ */ m("div", { className: "smwb-appbar__left", children: [
+          p && /* @__PURE__ */ a("div", { className: "smwb-appbar__left__title", children: p }),
+          l
+        ] }),
+        /* @__PURE__ */ a("div", { className: i("smwb-appbar__mid", `smwb-${c}`), children: o }),
+        /* @__PURE__ */ a("div", { className: "smwb-appbar__right", children: n })
+      ] })
+    }
+  );
+});
+export {
+  x as AppBar,
+  x as default
+};
+//# sourceMappingURL=appBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"appBar.js","sources":["../../../../src/components/navigation/appBar/appBar.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cn from \"clsx\";\n\nexport type AppBarColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface AppBarProps extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  children?: React.ReactNode;\n  className?: string;\n  dense?: boolean;\n  position?: \"relative\" | \"static\" | \"absolute\" | \"sticky\" | \"fixed\";\n  placement?: \"top\" | \"bottom\";\n  leftContent?: React.ReactNode;\n  midContent?: React.ReactNode;\n  rightContent?: React.ReactNode;\n  title?: React.ReactNode | string;\n  midContentAlign?: \"middle\" | \"left\" | \"right\";\n  /** Semantic background color. */\n  color?: AppBarColor;\n}\n\nexport const AppBar = forwardRef<HTMLElement, AppBarProps>(function AppBar(\n  {\n    className,\n    children,\n    dense,\n    position = \"static\",\n    placement = \"top\",\n    leftContent,\n    midContent,\n    midContentAlign = \"middle\",\n    rightContent,\n    title,\n    color = \"default\",\n    ...rest\n  },\n  ref\n) {\n  const MainTag = placement === \"top\" ? \"header\" : \"footer\";\n\n  return (\n    <MainTag\n      ref={ref}\n      className={cn(\n        \"smwb-appbar\",\n        className,\n        `smwb-${position}`,\n        `smwb-${placement}`,\n        { \"smwb-dense\": dense },\n        color !== \"default\" && `smwb-appbar_color-${color}`\n      )}\n      data-testid=\"app-bar\"\n      {...rest}\n    >\n      {children ? (\n        children\n      ) : (\n        <div className=\"smwb-appbar__inner\">\n          <div className=\"smwb-appbar__left\">\n            {title && <div className=\"smwb-appbar__left__title\">{title}</div>}\n            {leftContent}\n          </div>\n          <div className={cn(\"smwb-appbar__mid\", `smwb-${midContentAlign}`)}>{midContent}</div>\n          <div className=\"smwb-appbar__right\">{rightContent}</div>\n        </div>\n      )}\n    </MainTag>\n  );\n});\n\nexport default AppBar;\n"],"names":["AppBar","forwardRef","className","children","dense","position","placement","leftContent","midContent","midContentAlign","rightContent","title","color","rest","ref","jsx","cn","jsxs"],"mappings":";;;;AAqBO,MAAMA,IAASC,EAAqC,SACzD;AAAA,EACE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,GACAC,GACA;AAGA,SACE,gBAAAC;AAAA,IAHcT,MAAc,QAAQ,WAAW;AAAA,IAG9C;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAd;AAAA,QACA,QAAQG,CAAQ;AAAA,QAChB,QAAQC,CAAS;AAAA,QACjB,EAAE,cAAcF,EAAA;AAAA,QAChBQ,MAAU,aAAa,qBAAqBA,CAAK;AAAA,MAAA;AAAA,MAEnD,eAAY;AAAA,MACX,GAAGC;AAAA,MAEH,UAAAV,KAGC,gBAAAc,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,UAAAN,KAAS,gBAAAI,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAJ,GAAM;AAAA,UAC1DJ;AAAA,QAAA,GACH;AAAA,QACA,gBAAAQ,EAAC,SAAI,WAAWC,EAAG,oBAAoB,QAAQP,CAAe,EAAE,GAAI,UAAAD,EAAA,CAAW;AAAA,QAC/E,gBAAAO,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAL,EAAA,CAAa;AAAA,MAAA,EAAA,CACpD;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

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

@@ -0,0 +1,2 @@
+export { default as AppBar } from "./appBar";
+export type { AppBarProps, AppBarColor } from "./appBar";

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

@@ -0,0 +1,14 @@
+import React from "react";
+import type { MenuItemProps as SidebarMenuItemProps } from "../sidebar/sidebar";
+export interface BottomBarProps extends React.HTMLAttributes<HTMLElement> {
+    className?: string;
+    menuItems?: SidebarMenuItemProps[];
+    visibleCount?: number;
+    activeItem?: number | null;
+    defaultActiveItem?: number | null;
+    onActiveItemChange?: (index: number) => void;
+    overflowMenuAriaLabel?: string;
+}
+export type BottomBarMenuItemProps = SidebarMenuItemProps;
+export declare const BottomBar: React.ForwardRefExoticComponent<BottomBarProps & React.RefAttributes<HTMLElement>>;
+export default BottomBar;

package/dist/components/navigation/bottomBar/bottomBar.js

@@ -0,0 +1,106 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/bottomBar/bottomBar.entry.css';/* empty css                                                             */
+import F, { forwardRef as E, useState as O, useMemo as T } from "react";
+import S from "clsx";
+import { Icon as G } from "../../base/icon/icon.js";
+import { Ripple as H } from "../../base/ripple/ripple.js";
+import { Menu as J } from "../menu/menu.js";
+import { MenuItem as K } from "../menu/menuItem.js";
+import { MenuItemIcon as L } from "../menu/menuItemIcon.js";
+import { MenuItemText as Q } from "../menu/menuItemText.js";
+const te = E(function({
+  className: b,
+  menuItems: r = [],
+  visibleCount: i = 4,
+  activeItem: m,
+  defaultActiveItem: v = null,
+  onActiveItemChange: s,
+  overflowMenuAriaLabel: d = "More navigation",
+  ...h
+}, f) {
+  const p = m !== void 0, [w, I] = O(v), n = p ? m : w, [c, R] = O(!1), [y, g] = O(null), l = Math.max(0, i), k = T(() => r.slice(0, l), [r, l]), B = T(() => r.slice(l), [r, l]), _ = B.length > 0, z = _ && n !== null && n >= l, M = (e) => {
+    p || I(e), s == null || s(e);
+  }, C = (e, o) => (a) => {
+    M(e), o == null || o(a);
+  }, V = () => {
+    R((e) => !e);
+  }, N = () => {
+    R(!1);
+  };
+  return /* @__PURE__ */ u("nav", { ref: f, className: S("smwb-bottom-bar", b), role: "navigation", ...h, children: [
+    /* @__PURE__ */ u("div", { className: "smwb-bottom-bar__nav", role: "menubar", children: [
+      k.map((e, o) => /* @__PURE__ */ t(
+        A,
+        {
+          as: e.as,
+          isActive: n === o,
+          onClick: C(o, e.onClick),
+          icon: e.icon,
+          title: e.title,
+          href: e.href
+        },
+        o
+      )),
+      _ && /* @__PURE__ */ t(
+        A,
+        {
+          ref: g,
+          isActive: z,
+          onClick: V,
+          icon: /* @__PURE__ */ t(G, { name: "menu", size: 24 }),
+          "aria-label": d,
+          "aria-haspopup": "menu",
+          "aria-expanded": c
+        }
+      )
+    ] }),
+    _ && /* @__PURE__ */ t(J, { isOpen: c, onClose: N, anchorElement: y, placement: "top", dense: !0, children: B.map((e, o) => {
+      const a = l + o;
+      return /* @__PURE__ */ u(
+        K,
+        {
+          selected: n === a,
+          href: e.href,
+          onClick: (q) => {
+            var x;
+            M(a), (x = e.onClick) == null || x.call(e, q), N();
+          },
+          children: [
+            e.icon ? /* @__PURE__ */ t(L, { children: e.icon }) : null,
+            /* @__PURE__ */ t(Q, { inset: !e.icon, children: e.title })
+          ]
+        },
+        a
+      );
+    }) })
+  ] });
+}), A = E(function({ isActive: b, icon: r, title: i, as: m = "div", href: v, onMouseDown: s, ...d }, h) {
+  const f = F.useRef(null), p = (n) => {
+    s == null || s(n);
+  }, w = (n) => {
+    var c;
+    (c = f.current) == null || c.onRipple(n);
+  };
+  return /* @__PURE__ */ u(
+    m,
+    {
+      ref: h,
+      href: v,
+      role: "menuitem",
+      className: S("smwb-bottom-bar__item", { "smwb-bottom-bar__item_active": b }),
+      onMouseDown: p,
+      onPointerDown: w,
+      ...d,
+      children: [
+        r && /* @__PURE__ */ t("span", { className: "smwb-bottom-bar__item-icon", children: r }),
+        i ? /* @__PURE__ */ t("span", { className: "smwb-bottom-bar__item-title", children: i }) : null,
+        /* @__PURE__ */ t(H, { actionRef: f })
+      ]
+    }
+  );
+});
+export {
+  te as BottomBar,
+  te as default
+};
+//# sourceMappingURL=bottomBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bottomBar.js","sources":["../../../../src/components/navigation/bottomBar/bottomBar.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useState } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport { Menu, MenuItem, MenuItemIcon, MenuItemText } from \"../menu\";\nimport type { MenuItemProps as SidebarMenuItemProps } from \"../sidebar/sidebar\";\n\nexport interface BottomBarProps extends React.HTMLAttributes<HTMLElement> {\n  className?: string;\n  menuItems?: SidebarMenuItemProps[];\n  visibleCount?: number;\n  activeItem?: number | null;\n  defaultActiveItem?: number | null;\n  onActiveItemChange?: (index: number) => void;\n  overflowMenuAriaLabel?: string;\n}\n\nexport type BottomBarMenuItemProps = SidebarMenuItemProps;\n\nexport const BottomBar = forwardRef<HTMLElement, BottomBarProps>(function BottomBar(\n  {\n    className,\n    menuItems = [],\n    visibleCount = 4,\n    activeItem: activeItemProp,\n    defaultActiveItem = null,\n    onActiveItemChange,\n    overflowMenuAriaLabel = \"More 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 [overflowOpen, setOverflowOpen] = useState(false);\n  const [overflowAnchor, setOverflowAnchor] = useState<HTMLElement | null>(null);\n\n  const safeVisibleCount = Math.max(0, visibleCount);\n  const visibleItems = useMemo(() => menuItems.slice(0, safeVisibleCount), [menuItems, safeVisibleCount]);\n  const overflowItems = useMemo(() => menuItems.slice(safeVisibleCount), [menuItems, safeVisibleCount]);\n  const hasOverflow = overflowItems.length > 0;\n  const overflowActive = hasOverflow && activeItem !== null && activeItem >= safeVisibleCount;\n\n  const setActive = (index: number) => {\n    if (!isControlled) {\n      setActiveItemState(index);\n    }\n    onActiveItemChange?.(index);\n  };\n\n  const activateItem = (index: number, onClick?: React.MouseEventHandler<HTMLDivElement>) => {\n    return (event: React.MouseEvent<HTMLDivElement>) => {\n      setActive(index);\n      onClick?.(event);\n    };\n  };\n\n  const onOverflowToggle = () => {\n    setOverflowOpen((prev) => !prev);\n  };\n\n  const onOverflowClose = () => {\n    setOverflowOpen(false);\n  };\n\n  return (\n    <nav ref={ref} className={cn(\"smwb-bottom-bar\", className)} role=\"navigation\" {...rest}>\n      <div className=\"smwb-bottom-bar__nav\" role=\"menubar\">\n        {visibleItems.map((item, idx) => (\n          <BarItem\n            key={idx}\n            as={item.as}\n            isActive={activeItem === idx}\n            onClick={activateItem(idx, item.onClick)}\n            icon={item.icon}\n            title={item.title}\n            href={item.href}\n          />\n        ))}\n        {hasOverflow && (\n          <BarItem\n            ref={setOverflowAnchor}\n            isActive={overflowActive}\n            onClick={onOverflowToggle}\n            icon={<Icon name=\"menu\" size={24} />}\n            aria-label={overflowMenuAriaLabel}\n            aria-haspopup=\"menu\"\n            aria-expanded={overflowOpen}\n          />\n        )}\n      </div>\n      {hasOverflow && (\n        <Menu isOpen={overflowOpen} onClose={onOverflowClose} anchorElement={overflowAnchor} placement=\"top\" dense>\n          {overflowItems.map((item, idx) => {\n            const itemIndex = safeVisibleCount + idx;\n\n            return (\n              <MenuItem\n                key={itemIndex}\n                selected={activeItem === itemIndex}\n                href={item.href}\n                onClick={(event) => {\n                  setActive(itemIndex);\n                  item.onClick?.(event as unknown as React.MouseEvent<HTMLDivElement>);\n                  onOverflowClose();\n                }}\n              >\n                {item.icon ? <MenuItemIcon>{item.icon}</MenuItemIcon> : null}\n                <MenuItemText inset={!item.icon}>{item.title}</MenuItemText>\n              </MenuItem>\n            );\n          })}\n        </Menu>\n      )}\n    </nav>\n  );\n});\n\nexport default BottomBar;\n\ninterface BarItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  icon?: React.ReactNode;\n  title?: string;\n  isActive?: boolean;\n  as?: React.ElementType;\n  href?: string;\n}\n\nconst BarItem = forwardRef<HTMLDivElement, BarItemProps>(function BarItem(\n  { isActive, icon, title, as = \"div\", href, onMouseDown: onMouseDownProp, ...rest },\n  ref\n) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    rippleRef.current?.onRipple(event);\n  };\n\n  const ElementType = as;\n\n  return (\n    <ElementType\n      ref={ref}\n      href={href}\n      role=\"menuitem\"\n      className={cn(\"smwb-bottom-bar__item\", { \"smwb-bottom-bar__item_active\": isActive })}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {icon && <span className=\"smwb-bottom-bar__item-icon\">{icon}</span>}\n      {title ? <span className=\"smwb-bottom-bar__item-title\">{title}</span> : null}\n      <Ripple actionRef={rippleRef} />\n    </ElementType>\n  );\n});\n"],"names":["BottomBar","forwardRef","className","menuItems","visibleCount","activeItemProp","defaultActiveItem","onActiveItemChange","overflowMenuAriaLabel","rest","ref","isControlled","activeItemState","setActiveItemState","useState","activeItem","overflowOpen","setOverflowOpen","overflowAnchor","setOverflowAnchor","safeVisibleCount","visibleItems","useMemo","overflowItems","hasOverflow","overflowActive","setActive","index","activateItem","onClick","event","onOverflowToggle","prev","onOverflowClose","jsxs","cn","item","idx","jsx","BarItem","Icon","Menu","itemIndex","MenuItem","_a","MenuItemIcon","MenuItemText","isActive","icon","title","as","href","onMouseDownProp","rippleRef","React","onMouseDown","onPointerDown","Ripple"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { default as BottomBar } from "./bottomBar";
+export type { BottomBarProps, BottomBarMenuItemProps } from "./bottomBar";

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

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactNode } from "react";
+export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+    className?: string;
+    /** Node placed between every crumb. */
+    separator?: ReactNode;
+    /** Collapse the middle of the trail when there are more than `maxItems` crumbs. */
+    maxItems?: number;
+    /** How many leading crumbs to keep when collapsed. */
+    itemsBeforeCollapse?: number;
+    /** How many trailing crumbs to keep when collapsed. */
+    itemsAfterCollapse?: number;
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Fired when the user activates the expand control. */
+    onExpand?: () => void;
+    /** Accessible label for the expand button. */
+    expandLabel?: string;
+}
+export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<BreadcrumbsProps & {
+    children?: ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export default Breadcrumbs;

package/dist/components/navigation/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,53 @@
+import { jsx as r, jsxs as j } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/breadcrumbs/breadcrumbs.entry.css';/* empty css                                                                 */
+import { forwardRef as v, useState as y, Children as S, isValidElement as k, Fragment as B } from "react";
+import C from "clsx";
+const z = v(function({
+  className: m,
+  separator: b = "/",
+  maxItems: i = 8,
+  itemsBeforeCollapse: s = 1,
+  itemsAfterCollapse: t = 1,
+  expanded: l,
+  onExpand: a,
+  expandLabel: o = "Show path",
+  children: u,
+  ...h
+}, p) {
+  const c = l !== void 0, [f, w] = y(!1), _ = c ? !!l : f, e = S.toArray(u).filter(k), g = !_ && e.length > i && s + t < e.length, N = () => {
+    a == null || a(), c || w(!0);
+  }, n = g ? [
+    ...e.slice(0, s),
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: "smwb-breadcrumbs__expand",
+        "aria-label": o,
+        onClick: N,
+        children: "…"
+      },
+      "smwb-breadcrumbs-expand"
+    ),
+    ...e.slice(e.length - t)
+  ] : e;
+  return /* @__PURE__ */ r(
+    "nav",
+    {
+      ...h,
+      ref: p,
+      "data-testid": "breadcrumbs",
+      "aria-label": "breadcrumb",
+      className: C("smwb-breadcrumbs", m),
+      children: /* @__PURE__ */ r("ol", { className: "smwb-breadcrumbs__list", children: n.map((x, d) => /* @__PURE__ */ j(B, { children: [
+        /* @__PURE__ */ r("li", { className: "smwb-breadcrumbs__item", children: x }),
+        d < n.length - 1 ? /* @__PURE__ */ r("li", { className: "smwb-breadcrumbs__separator", "aria-hidden": "true", children: b }) : null
+      ] }, d)) })
+    }
+  );
+});
+export {
+  z as Breadcrumbs,
+  z as default
+};
+//# sourceMappingURL=breadcrumbs.js.map