@serendie/ui/dist/components/TopAppBar/TopAppBar.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsx as e, jsxs as o } from "react/jsx-runtime";
import { NotificationBadge as d } from "../NotificationBadge/NotificationBadge.js";
import { cx as y } from "../../styled-system/css/cx.js";
import { sva as x } from "../../styled-system/css/sva.js";
const n = x({
  slots: ["root", "container", "left", "buttonContainer", "title"],
  base: {
    root: {
      width: "100%",
      backgroundColor: "sd.system.color.component.surface"
    },
    container: {
      height: "48px",
      display: "flex",
      justifyContent: "space-between",
      gap: "8px",
      alignItems: "center"
    },
    left: {
      display: "flex",
      alignItems: "center",
      gap: "8px",
      width: "100%"
    },
    buttonContainer: {
      display: "flex",
      alignItems: "center",
      gap: "8px"
    },
    title: {
      textStyle: "sd.system.typography.title.medium_compact",
      maxW: "100%",
      _expanded: {
        textStyle: "sd.system.typography.title.medium_expanded"
      }
    }
  },
  variants: {
    type: {
      navbar: {},
      titleBar: {},
      titleBarTitleOnly: {
        root: {
          _lastOfType: {
            paddingBottom: "8px"
          },
          _firstOfType: {
            paddingBottom: "0px"
          }
        }
      }
    }
  },
  defaultVariants: {
    type: "navbar"
  }
}), v = ({
  headingIconButton: i,
  trailingIconButtons: s,
  badge: a,
  title: r,
  ...l
}) => {
  const [p, { className: c, ...m }] = n.splitVariantProps(l), t = n(p);
  return /* @__PURE__ */ e("nav", { className: y(t.root, c), ...m, children: /* @__PURE__ */ o("div", { className: t.container, children: [
    /* @__PURE__ */ o("div", { className: t.left, children: [
      /* @__PURE__ */ e("div", { className: t.buttonContainer, children: i }),
      /* @__PURE__ */ e("h1", { className: t.title, children: r }),
      a && /* @__PURE__ */ e(d, { count: a, position: "relative" })
    ] }),
    /* @__PURE__ */ e("div", { className: t.buttonContainer, children: s })
  ] }) });
};
export {
  v as TopAppBar
};