@flytedan/flytebot-design-system 0.11.6 → 0.12.0

package/dist/index.cjs

@@ -1092,8 +1092,34 @@ function Tabs({ tabs = [], value, onChange, className = "", ...rest }) {
 // src/components/navigation/Topbar.tsx
 var React5 = __toESM(require("react"), 1);
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function Topbar({ crumbs = [], actions, loading = false, onMenu, className = "", ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { className: ["fd-topbar", className].filter(Boolean).join(" "), ...rest, children: [
+function useIsNarrow(breakpoint) {
+  const [narrow, setNarrow] = React5.useState(
+    () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(`(max-width: ${breakpoint}px)`).matches
+  );
+  React5.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
+    const apply = () => setNarrow(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, [breakpoint]);
+  return narrow;
+}
+function Topbar({
+  crumbs = [],
+  actions,
+  overflowActions,
+  overflowBreakpoint = 640,
+  loading = false,
+  onMenu,
+  className = "",
+  ...rest
+}) {
+  const narrow = useIsNarrow(overflowBreakpoint);
+  const [moreOpen, setMoreOpen] = React5.useState(false);
+  const moreRef = React5.useRef(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { className: ["fd-topbar", narrow ? "is-narrow" : "", className].filter(Boolean).join(" "), ...rest, children: [
     onMenu ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "fd-btn-icon", "aria-label": "Menu", onClick: onMenu, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "ph ph-list" }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("nav", { className: "fd-crumb", "aria-label": "Breadcrumb", children: crumbs.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(React5.Fragment, { children: [
       i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "ph ph-caret-right", style: { fontSize: 11, opacity: 0.6 }, "aria-hidden": "true" }) : null,
@@ -1110,6 +1136,34 @@ function Topbar({ crumbs = [], actions, loading = false, onMenu, className = "",
       )
     ] }, i)) }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { flex: 1 } }),
+    overflowActions != null ? narrow ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "button",
+        {
+          type: "button",
+          ref: moreRef,
+          className: "fd-btn-icon",
+          "aria-label": "More actions",
+          "aria-haspopup": "dialog",
+          "aria-expanded": moreOpen,
+          onClick: () => setMoreOpen((v) => !v),
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "ph ph-dots-three-vertical", "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Popover,
+        {
+          open: moreOpen,
+          anchorRef: moreRef,
+          onClose: () => setMoreOpen(false),
+          placement: "bottom-end",
+          padded: true,
+          label: "More actions",
+          className: "fd-topbar-overflow",
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "fd-stack fd-topbar-overflow-list", children: overflowActions })
+        }
+      )
+    ] }) : overflowActions : null,
     actions,
     loading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fd-topload", "aria-hidden": "true" }) : null
   ] });