@rafal.lemieszewski/tide-ui 0.83.0 → 0.84.3

package/dist/es/components/product/bookmarks.js

@@ -0,0 +1,833 @@
+import { jsxs as s, jsx as e, Fragment as O } from "react/jsx-runtime";
+import * as r from "react";
+import { cn as X } from "../../lib/utils.js";
+import { Button as T } from "../fundamental/button.js";
+import { ButtonGroup as De } from "../fundamental/button-group.js";
+import { Icon as w } from "../fundamental/icon.js";
+import { Separator as ue } from "../fundamental/separator.js";
+import { Select as Ne, SelectTrigger as Se, SelectContent as ye, SelectItem as de, SelectSeparator as Be, SelectGroup as ze, SelectLabel as Re } from "../fundamental/select.js";
+import { DropdownMenu as se, DropdownMenuTrigger as oe, DropdownMenuContent as le, DropdownMenuItem as L, DropdownMenuSeparator as Me } from "../fundamental/dropdown-menu.js";
+import { Popover as Oe, PopoverTrigger as Te, PopoverContent as Ee } from "../fundamental/popover.js";
+import { Dialog as Ae, DialogContent as Ue, DialogHeader as Ve, DialogTitle as Pe, DialogBody as We, DialogFooter as Ie } from "../fundamental/dialog.js";
+import { Input as Le } from "../fundamental/input.js";
+import { Label as Fe } from "../fundamental/label.js";
+import { Badge as je } from "../fundamental/badge.js";
+import { Skeleton as me } from "../fundamental/skeleton.js";
+const ae = r.createContext(null);
+function J() {
+  const t = r.useContext(ae);
+  if (!t)
+    throw new Error("useBookmarksActions must be used within Bookmarks");
+  return t;
+}
+function te({
+  open: t,
+  onOpenChange: o,
+  mode: u,
+  initialName: c = "",
+  onSave: x
+}) {
+  const [g, S] = r.useState(c);
+  r.useEffect(() => {
+    t && S(c);
+  }, [t, c]);
+  const k = () => {
+    g.trim() && (x(g.trim()), o(!1));
+  };
+  return /* @__PURE__ */ e(Ae, { open: t, onOpenChange: o, children: /* @__PURE__ */ s(Ue, { children: [
+    /* @__PURE__ */ e(Ve, { children: /* @__PURE__ */ e(Pe, { children: u === "create" ? "Create bookmark" : "Rename bookmark" }) }),
+    /* @__PURE__ */ e(We, { children: /* @__PURE__ */ s("div", { className: "flex flex-col gap-[var(--space-s)]", children: [
+      /* @__PURE__ */ e(Fe, { htmlFor: "bookmark-name", children: "Bookmark name" }),
+      /* @__PURE__ */ e(
+        Le,
+        {
+          id: "bookmark-name",
+          value: g,
+          onChange: (b) => S(b.target.value),
+          placeholder: "Enter bookmark name...",
+          onKeyDown: (b) => {
+            b.key === "Enter" && (b.preventDefault(), k());
+          },
+          autoFocus: !0
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ s(Ie, { children: [
+      /* @__PURE__ */ e(T, { variant: "default", onClick: () => o(!1), children: "Cancel" }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          variant: "primary",
+          onClick: k,
+          disabled: !g.trim(),
+          children: u === "create" ? "Create" : "Save"
+        }
+      )
+    ] })
+  ] }) });
+}
+function $e({
+  bookmarks: t,
+  systemBookmarks: o,
+  activeBookmarkId: u,
+  onSelect: c,
+  onRename: x,
+  onDelete: g,
+  onSetDefault: S
+}) {
+  const k = r.useMemo(
+    () => [...o, ...t],
+    [o, t]
+  ), b = r.useMemo(
+    () => k.find((d) => d.id === u),
+    [k, u]
+  ), h = b?.type === "system";
+  return /* @__PURE__ */ s(De, { children: [
+    /* @__PURE__ */ s(
+      Ne,
+      {
+        value: u,
+        onValueChange: (d) => {
+          const B = k.find((v) => v.id === d);
+          B && c(B);
+        },
+        children: [
+          /* @__PURE__ */ s(
+            Se,
+            {
+              className: X(
+                "!text-label-md relative z-0 h-[var(--size-m)] w-auto gap-[var(--space-xs)] border border-[var(--color-border-action-outline)] bg-[var(--color-background-neutral-subtlest)] pr-[var(--space-m)] pl-[var(--space-s)] text-[var(--color-text-primary)] hover:border-[var(--color-border-action-outline-hovered)] hover:bg-[var(--color-background-neutral-subtlest-hovered)] hover:shadow-sm focus:border-[var(--color-border-action-outline)] focus:ring-0 focus:outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 active:translate-y-px active:bg-[var(--grey-alpha-50)] active:shadow-xs data-[state=open]:ring-0",
+                h ? "rounded-m" : "rounded-l-m !rounded-r-none !border-r-0"
+              ),
+              children: [
+                /* @__PURE__ */ e(w, { name: "bookmark", size: "m", color: "primary" }),
+                b?.name || "Bookmarks"
+              ]
+            }
+          ),
+          /* @__PURE__ */ s(ye, { align: "start", position: "popper", className: "min-w-[200px]", children: [
+            o.length > 0 && /* @__PURE__ */ e(O, { children: o.map((d) => /* @__PURE__ */ e(de, { value: d.id, children: /* @__PURE__ */ e("div", { className: "flex items-center gap-[var(--space-s)] pr-6", children: /* @__PURE__ */ e("span", { children: d.name }) }) }, d.id)) }),
+            o.length > 0 && t.length > 0 && /* @__PURE__ */ e(Be, {}),
+            t.length > 0 && /* @__PURE__ */ s(ze, { children: [
+              /* @__PURE__ */ e(Re, { children: "Custom Bookmarks" }),
+              t.map((d) => /* @__PURE__ */ e(de, { value: d.id, children: /* @__PURE__ */ s("div", { className: "flex items-center gap-[var(--space-s)] pr-6", children: [
+                /* @__PURE__ */ e(
+                  w,
+                  {
+                    name: "bookmark",
+                    className: "h-[var(--size-2xs)] w-[var(--size-2xs)]"
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "truncate", children: d.name }),
+                d.isDefault && /* @__PURE__ */ e(
+                  w,
+                  {
+                    name: "star",
+                    className: "h-[var(--size-2xs)] w-[var(--size-2xs)] flex-shrink-0 text-[var(--color-icon-warning-bold)]"
+                  }
+                )
+              ] }) }, d.id))
+            ] })
+          ] })
+        ]
+      }
+    ),
+    !h && /* @__PURE__ */ s(se, { children: [
+      /* @__PURE__ */ e(oe, { asChild: !0, children: /* @__PURE__ */ e(
+        T,
+        {
+          icon: "more-horizontal",
+          "aria-label": "Bookmark options",
+          className: "!rounded-l-none rounded-r-md !border-l !border-l-[var(--color-border-action-outline)] focus:ring-0 data-[state=open]:ring-0"
+        }
+      ) }),
+      /* @__PURE__ */ s(le, { align: "end", children: [
+        /* @__PURE__ */ s(
+          L,
+          {
+            onClick: (d) => {
+              if (h) {
+                d.preventDefault();
+                return;
+              }
+              x();
+            },
+            disabled: h,
+            children: [
+              /* @__PURE__ */ e(w, { name: "pencil", className: "mr-2 h-4 w-4" }),
+              "Rename"
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(
+          L,
+          {
+            onClick: (d) => {
+              if (h) {
+                d.preventDefault();
+                return;
+              }
+              g();
+            },
+            disabled: h,
+            destructive: !0,
+            children: [
+              /* @__PURE__ */ e(w, { name: "trash-2", className: "mr-2 h-4 w-4" }),
+              "Delete"
+            ]
+          }
+        ),
+        !h && /* @__PURE__ */ s(O, { children: [
+          /* @__PURE__ */ e(Me, {}),
+          /* @__PURE__ */ s(L, { onClick: S, children: [
+            /* @__PURE__ */ e(
+              w,
+              {
+                name: (b?.isDefault, "star"),
+                className: X(
+                  "mr-2 h-4 w-4",
+                  b?.isDefault && "text-[var(--color-icon-warning-bold)]"
+                )
+              }
+            ),
+            b?.isDefault ? "Unset as Default" : "Set as Default"
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function Ke({ onUpdate: t, onCreate: o }) {
+  return /* @__PURE__ */ s(se, { children: [
+    /* @__PURE__ */ e(oe, { asChild: !0, children: /* @__PURE__ */ s(
+      T,
+      {
+        variant: "ghost",
+        className: "h-[var(--size-m)] gap-[var(--space-xs)] px-[var(--space-m)] data-[state=open]:ring-0",
+        children: [
+          /* @__PURE__ */ e("span", { className: "text-label-md", children: "Save" }),
+          /* @__PURE__ */ e(
+            w,
+            {
+              name: "chevron-down",
+              className: "h-[var(--size-2xs)] w-[var(--size-2xs)]"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ s(le, { align: "end", children: [
+      /* @__PURE__ */ e(L, { onClick: t, children: "Update bookmark" }),
+      /* @__PURE__ */ e(L, { onClick: o, children: "Create new bookmark" })
+    ] })
+  ] });
+}
+const he = /* @__PURE__ */ r.memo(
+  /* @__PURE__ */ r.forwardRef(
+    ({
+      bookmark: t,
+      isActive: o,
+      isVisible: u = !0,
+      index: c,
+      totalTabs: x,
+      onSelect: g,
+      onRename: S,
+      onDelete: k,
+      onSetDefault: b,
+      onNavigate: h,
+      onNavigateFirst: d,
+      onNavigateLast: B,
+      onHover: v
+    }, W) => {
+      const A = t.type === "user", y = r.useCallback(() => {
+        g(t);
+      }, [g, t]), F = r.useCallback(() => {
+        v?.(t);
+      }, [v, t]), U = r.useCallback(() => {
+        S(t.id);
+      }, [S, t.id]), C = r.useCallback(() => {
+        k(t.id);
+      }, [k, t.id]), f = r.useCallback(
+        (a) => {
+          switch (a.key) {
+            case "Enter":
+            case " ":
+              a.preventDefault(), g(t);
+              break;
+            case "ArrowRight":
+              a.preventDefault(), h(c, 1);
+              break;
+            case "ArrowLeft":
+              a.preventDefault(), h(c, -1);
+              break;
+            case "Home":
+              a.preventDefault(), d();
+              break;
+            case "End":
+              a.preventDefault(), B();
+              break;
+          }
+        },
+        [t, c, g, h, d, B]
+      );
+      return /* @__PURE__ */ s(
+        "div",
+        {
+          ref: W,
+          role: "tab",
+          "aria-selected": o,
+          "aria-posinset": c + 1,
+          "aria-setsize": x,
+          tabIndex: o ? 0 : -1,
+          onClick: y,
+          onKeyDown: f,
+          onMouseEnter: F,
+          className: X(
+            "group relative flex min-w-[160px] flex-shrink-0 cursor-pointer flex-col gap-[var(--space-xs)] rounded-l p-[var(--space-l)] transition-colors",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-brand-bold)] focus-visible:ring-offset-2",
+            o ? "bg-[var(--blue-50)] hover:bg-[var(--blue-50)]" : "bg-[var(--color-background-neutral-default)] hover:bg-[var(--color-background-neutral-hovered)]",
+            !u && "pointer-events-none invisible absolute"
+          ),
+          children: [
+            /* @__PURE__ */ s("div", { className: "flex min-h-[var(--size-s)] items-center justify-between gap-[var(--space-xs)]", children: [
+              /* @__PURE__ */ s("div", { className: "flex items-center gap-[var(--space-xs)]", children: [
+                A && /* @__PURE__ */ e(
+                  w,
+                  {
+                    name: "bookmark",
+                    size: "s",
+                    color: "secondary",
+                    className: "flex-shrink-0"
+                  }
+                ),
+                /* @__PURE__ */ e("div", { className: "text-body-md whitespace-nowrap text-[var(--color-text-primary)]", children: t.name })
+              ] }),
+              A && /* @__PURE__ */ s(se, { children: [
+                /* @__PURE__ */ e(oe, { asChild: !0, children: /* @__PURE__ */ e(
+                  T,
+                  {
+                    variant: "ghost",
+                    size: "s",
+                    "aria-label": `Options for ${t.name}`,
+                    className: "p-[var(--space-xs)] opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
+                    tabIndex: -1,
+                    onClick: (a) => a.stopPropagation(),
+                    children: /* @__PURE__ */ e(
+                      w,
+                      {
+                        name: "more-horizontal",
+                        className: "h-[var(--size-2xs)] w-[var(--size-2xs)]"
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ s(le, { align: "end", children: [
+                  /* @__PURE__ */ s(
+                    L,
+                    {
+                      onClick: (a) => {
+                        a.stopPropagation(), U();
+                      },
+                      children: [
+                        /* @__PURE__ */ e(w, { name: "pencil", className: "mr-2 h-4 w-4" }),
+                        "Rename"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    L,
+                    {
+                      onClick: (a) => {
+                        a.stopPropagation(), C();
+                      },
+                      destructive: !0,
+                      children: [
+                        /* @__PURE__ */ e(w, { name: "trash-2", className: "mr-2 h-4 w-4" }),
+                        "Delete"
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "text-heading-lg text-[var(--color-text-primary)]", children: t.isLoadingCount ? /* @__PURE__ */ e(me, { height: 32, width: 40 }) : t.count ?? " " })
+          ]
+        }
+      );
+    }
+  )
+);
+he.displayName = "BookmarkTab";
+function Ge({
+  bookmarks: t,
+  systemBookmarks: o,
+  activeBookmarkId: u,
+  "aria-label": c = "Bookmarks",
+  onSelect: x,
+  onRename: g,
+  onDelete: S,
+  onSetDefault: k,
+  onBookmarkHover: b,
+  onOverflowMenuChange: h
+}) {
+  const [d, B] = r.useState(!1), [v, W] = r.useState(null), A = r.useCallback(
+    (n) => {
+      B(n), h?.(n);
+    },
+    [h]
+  ), [y, F] = r.useState(null), U = r.useRef(null), C = r.useRef(/* @__PURE__ */ new Map()), f = r.useMemo(
+    () => [...o, ...t],
+    [o, t]
+  );
+  r.useEffect(() => {
+    v && !f.some((n) => n.id === v) && W(null);
+  }, [f, v]), r.useEffect(() => {
+    if (!U.current || f.length === 0) return;
+    let n = null;
+    const m = () => {
+      n && clearTimeout(n), n = setTimeout(() => {
+        const p = U.current;
+        if (!p || C.current.size < f.length)
+          return;
+        const M = p.offsetWidth, D = /* @__PURE__ */ new Map();
+        f.forEach((P) => {
+          const ne = C.current.get(P.id);
+          ne && D.set(P.id, ne.offsetWidth);
+        });
+        const V = 8, i = 32, z = 52;
+        let q = 0, R = 0, N = !1;
+        const ie = o.length, ke = t.length > 0, Ce = ie > 0 && ke ? ie : -1;
+        for (let P = 0; P < f.length; P++) {
+          const ne = f[P], ce = D.get(ne.id);
+          if (ce === void 0) continue;
+          P === Ce && (N = !0, q += i + V);
+          const re = q + ce + (R > 0 || N ? V : 0);
+          if ((P < f.length - 1 ? re + V + z : re) > M)
+            break;
+          q = re, R++;
+        }
+        R === 0 && f.length > 0 && (R = 1), F(R);
+      }, 100);
+    };
+    m();
+    const l = new ResizeObserver(m);
+    return l.observe(U.current), () => {
+      n && clearTimeout(n), l.disconnect();
+    };
+  }, [f, o.length, t.length]);
+  const { visibleBookmarks: a, overflowBookmarks: I } = r.useMemo(() => {
+    if (y === null)
+      return { visibleBookmarks: f, overflowBookmarks: [] };
+    const n = f.slice(0, y), m = f.slice(y), l = v ? m.find((p) => p.id === v) : null;
+    if (l && n.length > 0) {
+      const p = n[n.length - 1], M = [
+        ...n.slice(0, -1),
+        l
+      ], D = [
+        p,
+        ...m.filter((V) => V.id !== v)
+      ];
+      return { visibleBookmarks: M, overflowBookmarks: D };
+    }
+    return { visibleBookmarks: n, overflowBookmarks: m };
+  }, [f, y, v]), j = r.useCallback(
+    (n, m) => {
+      let l = n + m;
+      l < 0 ? l = a.length - 1 : l >= a.length && (l = 0);
+      const p = a[l];
+      p && C.current.get(p.id)?.focus();
+    },
+    [a]
+  ), $ = r.useCallback(
+    (n) => {
+      x(n);
+    },
+    [x]
+  ), K = r.useCallback(() => {
+    const n = a[0];
+    n && C.current.get(n.id)?.focus();
+  }, [a]), Q = r.useCallback(() => {
+    const n = a[a.length - 1];
+    n && C.current.get(n.id)?.focus();
+  }, [a]), Y = a.length, G = r.useMemo(() => {
+    for (let n = 0; n < a.length - 1; n++)
+      if (a[n].type === "system" && a[n + 1].type === "user")
+        return n;
+    return -1;
+  }, [a]), Z = r.useCallback(
+    (n) => {
+      a.some((l) => l.id === n.id) && n.id !== v && W(null), x(n);
+    },
+    [a, v, x]
+  ), ee = r.useCallback(
+    (n) => {
+      W(n.id), x(n), A(!1);
+    },
+    [x, A]
+  ), H = r.useMemo(() => [...a, ...I], [a, I]), _ = r.useMemo(() => new Set(a.map((n) => n.id)), [a]);
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: U,
+      role: "tablist",
+      "aria-label": c,
+      className: "flex items-center gap-[var(--space-s)]",
+      children: [
+        H.map((n, m) => {
+          const l = _.has(n.id), p = l ? a.findIndex((D) => D.id === n.id) : -1, M = l && p === G;
+          return /* @__PURE__ */ s(r.Fragment, { children: [
+            /* @__PURE__ */ e(
+              he,
+              {
+                ref: (D) => {
+                  D ? C.current.set(n.id, D) : C.current.delete(n.id);
+                },
+                bookmark: n,
+                isActive: u === n.id,
+                isVisible: l,
+                index: p >= 0 ? p : m,
+                totalTabs: Y,
+                onSelect: l ? Z : $,
+                onRename: g,
+                onDelete: S,
+                onSetDefault: k,
+                onNavigate: j,
+                onNavigateFirst: K,
+                onNavigateLast: Q,
+                onHover: b
+              }
+            ),
+            M && /* @__PURE__ */ e(
+              ue,
+              {
+                type: "line",
+                layout: "horizontal",
+                className: "h-20 flex-shrink-0",
+                "aria-hidden": "true"
+              }
+            )
+          ] }, n.id);
+        }),
+        I.length > 0 && /* @__PURE__ */ s(Oe, { open: d, onOpenChange: A, children: [
+          /* @__PURE__ */ e(Te, { asChild: !0, children: /* @__PURE__ */ e(
+            "button",
+            {
+              "aria-label": `Show ${I.length} more bookmarks`,
+              "aria-expanded": d,
+              className: X(
+                "flex cursor-pointer flex-shrink-0 items-center justify-center rounded-l border border-[var(--color-border-action-outline)] bg-transparent px-[var(--space-m)] transition-colors hover:bg-[var(--color-background-neutral-subtlest-hovered)]",
+                "min-h-[88px]",
+                // Match the height of bookmark tabs (padding + content + padding)
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-brand-bold)] focus-visible:ring-offset-2"
+              ),
+              children: /* @__PURE__ */ e(
+                w,
+                {
+                  name: "chevron-down",
+                  className: "h-[var(--size-2xs)] w-[var(--size-2xs)]"
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            Ee,
+            {
+              align: "end",
+              side: "bottom",
+              className: "w-[280px] p-[var(--space-s)]",
+              role: "menu",
+              "aria-label": "More bookmarks",
+              children: /* @__PURE__ */ e("div", { className: "flex flex-col", children: I.map((n) => {
+                const m = u === n.id, l = n.type === "user";
+                return /* @__PURE__ */ s(
+                  "button",
+                  {
+                    role: "menuitem",
+                    "aria-label": `Select ${n.name} bookmark${m ? " (currently selected)" : ""}`,
+                    onClick: () => ee(n),
+                    className: X(
+                      "text-body-md flex cursor-pointer items-center gap-[var(--space-s)] rounded-m px-[var(--space-m)] py-[var(--space-s)] text-left transition-colors",
+                      "hover:bg-[var(--color-background-neutral-subtlest-hovered)]",
+                      "focus:outline-none focus-visible:bg-[var(--color-background-neutral-subtlest-hovered)]"
+                    ),
+                    children: [
+                      l && /* @__PURE__ */ e(
+                        w,
+                        {
+                          name: "bookmark",
+                          className: "h-[var(--size-2xs)] w-[var(--size-2xs)]",
+                          "aria-hidden": "true"
+                        }
+                      ),
+                      !l && /* @__PURE__ */ e("div", { className: "w-[var(--size-2xs)]", "aria-hidden": "true" }),
+                      /* @__PURE__ */ s("div", { className: "flex flex-1 items-center gap-[var(--space-xs)]", children: [
+                        /* @__PURE__ */ e("span", { className: "truncate", children: n.name }),
+                        (n.count !== void 0 || n.isLoadingCount) && /* @__PURE__ */ e(je, { size: "s", intent: "neutral", appearance: "subtle", children: n.isLoadingCount ? /* @__PURE__ */ e(me, { height: 16, width: 24 }) : n.count })
+                      ] }),
+                      n.isDefault && /* @__PURE__ */ e(
+                        w,
+                        {
+                          name: "star",
+                          className: "h-[var(--size-2xs)] w-[var(--size-2xs)] text-[var(--color-icon-warning-bold)]",
+                          "aria-hidden": "true"
+                        }
+                      ),
+                      m && /* @__PURE__ */ e(
+                        w,
+                        {
+                          name: "check",
+                          className: "h-[var(--size-2xs)] w-[var(--size-2xs)] text-[var(--color-icon-primary)]",
+                          "aria-hidden": "true"
+                        }
+                      )
+                    ]
+                  },
+                  n.id
+                );
+              }) })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function pe({ children: t }) {
+  return /* @__PURE__ */ e(O, { children: t });
+}
+function fe({ children: t }) {
+  return /* @__PURE__ */ e(O, { children: t });
+}
+function ve({ children: t }) {
+  return /* @__PURE__ */ e(O, { children: t });
+}
+function ge() {
+  const { isDirty: t, handleRevert: o } = J();
+  return t ? /* @__PURE__ */ e(T, { variant: "ghost", onClick: o, className: "h-[var(--size-m)]", children: "Revert changes" }) : null;
+}
+function be() {
+  const { isDirty: t, isSystemBookmark: o, openCreateDialog: u } = J();
+  return !t || !o ? null : /* @__PURE__ */ e(T, { variant: "ghost", onClick: u, className: "h-[var(--size-m)]", children: "Create bookmark" });
+}
+function He() {
+  const { isDirty: t, isSystemBookmark: o, handleUpdate: u } = J();
+  return !t || o ? null : /* @__PURE__ */ e(T, { variant: "ghost", onClick: u, className: "h-[var(--size-m)]", children: "Update bookmark" });
+}
+function xe() {
+  const { isDirty: t, isSystemBookmark: o, handleRevert: u } = J();
+  return !t || !o ? null : /* @__PURE__ */ e(T, { variant: "ghost", onClick: u, className: "h-[var(--size-m)]", children: "Reset" });
+}
+function we() {
+  const { isDirty: t, isSystemBookmark: o, handleUpdate: u, openCreateDialog: c } = J();
+  return !t || o ? null : /* @__PURE__ */ e(
+    Ke,
+    {
+      onUpdate: u,
+      onCreate: c
+    }
+  );
+}
+function _e() {
+  const { isDirty: t, isSystemBookmark: o } = J();
+  return t ? /* @__PURE__ */ s(O, { children: [
+    /* @__PURE__ */ e(ue, { type: "dot", layout: "horizontal" }),
+    o ? /* @__PURE__ */ s(O, { children: [
+      /* @__PURE__ */ e(xe, {}),
+      /* @__PURE__ */ e(be, {})
+    ] }) : /* @__PURE__ */ s(O, { children: [
+      /* @__PURE__ */ e(ge, {}),
+      /* @__PURE__ */ e(we, {})
+    ] })
+  ] }) : null;
+}
+function E({
+  variant: t,
+  bookmarks: o,
+  systemBookmarks: u,
+  activeBookmarkId: c,
+  isDirty: x,
+  children: g,
+  "aria-label": S = "Bookmarks",
+  onSelect: k,
+  onRevert: b,
+  onSave: h,
+  onRename: d,
+  onDelete: B,
+  onSetDefault: v,
+  onBookmarkHover: W,
+  onOverflowMenuChange: A,
+  onDialogChange: y
+}) {
+  const [F, U] = r.useState(!1), [C, f] = r.useState(!1), [a, I] = r.useState(), j = r.useCallback(
+    (i) => {
+      f(i), y?.(i ? "create" : null);
+    },
+    [y]
+  ), $ = r.useCallback(
+    (i) => {
+      U(i), y?.(i ? "rename" : null);
+    },
+    [y]
+  ), K = r.useMemo(
+    () => [...u, ...o],
+    [u, o]
+  ), Q = r.useMemo(
+    () => K.find((i) => i.id === c),
+    [K, c]
+  ), Y = Q?.type === "system", G = r.useCallback((i) => {
+    I(i || c), $(!0);
+  }, [c, $]), Z = r.useCallback(async (i) => {
+    a && await d(a, i);
+  }, [a, d]), ee = r.useCallback(async (i) => {
+    await h("create", i);
+  }, [h]), H = r.useCallback(async (i) => {
+    const z = i || c;
+    z && await B(z);
+  }, [c, B]), _ = r.useCallback(async (i) => {
+    const z = i || c;
+    z && await v(z);
+  }, [c, v]), n = r.useMemo(
+    () => K.find((i) => i.id === a),
+    [K, a]
+  ), { contentSlot: m, actionsSlot: l, settingsSlot: p } = r.useMemo(() => {
+    let i = null, z = null, q = null;
+    const R = [];
+    return r.Children.forEach(g, (N) => {
+      r.isValidElement(N) ? N.type === pe ? i = N.props.children : N.type === fe ? z = N.props.children : N.type === ve ? q = N.props.children : R.push(N) : R.push(N);
+    }), !i && R.length > 0 && (i = R), {
+      contentSlot: i,
+      actionsSlot: z,
+      settingsSlot: q
+    };
+  }, [g]), M = r.useCallback(() => j(!0), [j]), D = r.useCallback(() => h("update"), [h]), V = r.useMemo(
+    () => ({
+      isDirty: x,
+      isSystemBookmark: Y,
+      activeBookmark: Q,
+      openCreateDialog: M,
+      openRenameDialog: G,
+      handleRevert: b,
+      handleUpdate: D,
+      handleDelete: H,
+      handleSetDefault: _
+    }),
+    [
+      x,
+      Y,
+      Q,
+      M,
+      G,
+      b,
+      D,
+      H,
+      _
+    ]
+  );
+  return t === "tabs" ? /* @__PURE__ */ s(ae.Provider, { value: V, children: [
+    /* @__PURE__ */ e(
+      Ge,
+      {
+        bookmarks: o,
+        systemBookmarks: u,
+        activeBookmarkId: c,
+        "aria-label": S,
+        onSelect: k,
+        onRename: G,
+        onDelete: H,
+        onSetDefault: _,
+        onBookmarkHover: W,
+        onOverflowMenuChange: A
+      }
+    ),
+    (m || l || p) && /* @__PURE__ */ s("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ s("div", { className: "flex items-center gap-[7px] flex-1 min-w-0 overflow-hidden", children: [
+        m && /* @__PURE__ */ e("div", { className: "flex items-center gap-[7px] min-w-0", children: m }),
+        l && /* @__PURE__ */ e("div", { className: "flex items-center gap-[7px] flex-shrink-0", children: l })
+      ] }),
+      p && /* @__PURE__ */ s(O, { children: [
+        /* @__PURE__ */ e("div", { className: "w-[var(--space-m)]" }),
+        /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: p })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      te,
+      {
+        open: C,
+        onOpenChange: j,
+        mode: "create",
+        onSave: ee
+      }
+    ),
+    /* @__PURE__ */ e(
+      te,
+      {
+        open: F,
+        onOpenChange: $,
+        mode: "rename",
+        initialName: n?.name,
+        onSave: Z
+      }
+    )
+  ] }) : /* @__PURE__ */ s(ae.Provider, { value: V, children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center gap-[var(--space-m)]", children: [
+      /* @__PURE__ */ e(
+        $e,
+        {
+          bookmarks: o,
+          systemBookmarks: u,
+          activeBookmarkId: c,
+          onSelect: k,
+          onRename: () => G(),
+          onDelete: () => H(),
+          onSetDefault: () => _()
+        }
+      ),
+      /* @__PURE__ */ s("div", { className: "flex items-center gap-[7px] flex-1 min-w-0 overflow-hidden", children: [
+        m && /* @__PURE__ */ e("div", { className: "flex items-center gap-[7px]", children: m }),
+        l && /* @__PURE__ */ e("div", { className: "flex items-center gap-[7px] flex-shrink-0", children: l })
+      ] }),
+      p && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: p })
+    ] }),
+    /* @__PURE__ */ e(
+      te,
+      {
+        open: C,
+        onOpenChange: j,
+        mode: "create",
+        onSave: ee
+      }
+    ),
+    /* @__PURE__ */ e(
+      te,
+      {
+        open: F,
+        onOpenChange: $,
+        mode: "rename",
+        initialName: n?.name,
+        onSave: Z
+      }
+    )
+  ] });
+}
+E.Content = pe;
+E.Actions = fe;
+E.Settings = ve;
+E.DefaultActions = _e;
+E.RevertButton = ge;
+E.CreateButton = be;
+E.SaveButton = He;
+E.ResetButton = xe;
+E.SaveDropdown = we;
+export {
+  E as Bookmarks,
+  fe as BookmarksActions,
+  pe as BookmarksContent,
+  be as BookmarksCreateButton,
+  _e as BookmarksDefaultActions,
+  xe as BookmarksResetButton,
+  ge as BookmarksRevertButton,
+  He as BookmarksSaveButton,
+  we as BookmarksSaveDropdown,
+  ve as BookmarksSettings,
+  J as useBookmarksActions
+};