@synnaxlabs/pluto 0.44.8 → 0.45.1

package/dist/external-Du8Z1FRh.js

@@ -0,0 +1,380 @@
+import { j as l } from "./jsx-runtime-C5mzlN2N.js";
+import { C as o, H as L, K as $, a as G, p as U } from "./css-BUXMI9PB.js";
+import { createContext as q, use as z, useState as I, useCallback as C } from "react";
+import { m as J, j as Q, v as B, B as w, av as W, h as Y, g as K, aw as ee, T as te, E as ne, ax as se, ay as le, as as oe, au as re } from "./main-mGfIFfsW.js";
+import { C as k, y as ae } from "./eraser-BcLVtorx.js";
+import "react-dom";
+import { z as f } from "zod";
+const A = q({ tabs: [] }), R = A, M = () => z(A), _ = "tabs-selector", V = ({
+  className: s,
+  altColor: t = !1,
+  size: e = "medium",
+  direction: r = "x",
+  contextMenu: n,
+  addTooltip: a,
+  actions: c,
+  ...d
+}) => {
+  const {
+    tabs: p,
+    selected: j,
+    onSelect: E,
+    onClose: h,
+    closable: S,
+    onDragEnd: T,
+    onDragStart: D,
+    onDrop: x,
+    onRename: b,
+    onCreate: m
+  } = M(), v = J(), [O, g] = I(!1);
+  return /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+    n != null && /* @__PURE__ */ l.jsx(
+      Q,
+      {
+        style: { height: "fit-content" },
+        ...v,
+        menu: n
+      }
+    ),
+    /* @__PURE__ */ l.jsxs(
+      B,
+      {
+        className: o(
+          o.B(_),
+          s,
+          v.className,
+          O && o.M("drag-over")
+        ),
+        size: e,
+        align: "center",
+        justify: "between",
+        empty: !0,
+        direction: r,
+        onContextMenu: v.open,
+        onDrop: x,
+        ...d,
+        children: [
+          /* @__PURE__ */ l.jsxs(B, { direction: r, className: o.BE(_, "tabs"), empty: !0, children: [
+            p.map((i) => /* @__PURE__ */ l.jsx(
+              de,
+              {
+                selected: j,
+                altColor: t,
+                onSelect: E,
+                onClose: h,
+                onDragStart: D,
+                onDragEnd: T,
+                onRename: b,
+                closable: i.closable ?? S,
+                size: e,
+                ...i
+              },
+              i.tabKey
+            )),
+            x != null && /* @__PURE__ */ l.jsx(
+              B,
+              {
+                onDragOver: () => g(!0),
+                onDragLeave: () => g(!1),
+                onDragEnd: () => g(!1),
+                onDrop: () => g(!1),
+                grow: !0
+              }
+            )
+          ] }),
+          (c != null || m != null) && /* @__PURE__ */ l.jsxs(B, { className: o.BE(_, "actions"), children: [
+            m != null && /* @__PURE__ */ l.jsx(
+              w,
+              {
+                size: e,
+                sharp: !0,
+                onClick: m,
+                tooltip: a,
+                variant: "text",
+                children: /* @__PURE__ */ l.jsx(W, {})
+              }
+            ),
+            c
+          ] })
+        ]
+      }
+    )
+  ] });
+}, ce = ({ unsavedChanges: s, ...t }) => {
+  const e = /* @__PURE__ */ l.jsx(se, { ...t });
+  return s ? /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+    /* @__PURE__ */ l.jsx(le, {}),
+    e
+  ] }) : e;
+}, H = o.BE("tabs-selector", "btn"), ie = (s) => {
+  if (!(s.target instanceof HTMLElement)) return "right";
+  const t = L.construct(s.target.closest(`.${H}`)), e = $.construct(s);
+  return G.Scale.scale(L.left(t), L.right(t)).scale(0, 1).pos(e.x) < 0.5 ? "left" : "right";
+}, ue = ({ loading: s, icon: t, level: e = "p" }) => (s && (t = /* @__PURE__ */ l.jsx(oe, {})), ee(t, {
+  className: o.BE(_, "icon"),
+  style: {
+    color: o.colorVar(9),
+    height: o.levelSizeVar(e),
+    width: o.levelSizeVar(e)
+  }
+})), de = ({
+  selected: s,
+  altColor: t = !1,
+  onSelect: e,
+  onClose: r,
+  tabKey: n,
+  name: a,
+  onDragStart: c,
+  onDragEnd: d,
+  onRename: p,
+  closable: j = !0,
+  icon: E,
+  size: h,
+  editable: S = !0,
+  unsavedChanges: T = !1,
+  loading: D = !1,
+  onDrop: x
+}) => {
+  const b = C(
+    (u) => c?.(u, { tabKey: n, name: a }),
+    [c, n, a]
+  ), m = C(
+    (u) => d?.(u, { tabKey: n, name: a }),
+    [d, n, a]
+  ), v = C(
+    (u) => {
+      u.preventDefault(), u.stopPropagation(), r?.(n);
+    },
+    [r, n]
+  ), O = C(() => e?.(n), [e, n]), [g, i] = I(null), y = C(
+    (u) => {
+      i(ie(u));
+    },
+    [i, x]
+  ), P = C(
+    (u) => {
+      x?.(u), i(null);
+    },
+    [x, i]
+  ), N = s === n, X = k[h];
+  return /* @__PURE__ */ l.jsxs(
+    w,
+    {
+      el: "div",
+      size: h,
+      id: n,
+      variant: "text",
+      sharp: !0,
+      className: o(
+        Y,
+        H,
+        N && K,
+        o.selected(N),
+        o.altColor(t),
+        j && r != null && o.M("closable"),
+        o.editable(S && p != null),
+        g != null && o.M("drag-over"),
+        g != null && o.loc(g)
+      ),
+      draggable: !0,
+      justify: "center",
+      align: "center",
+      empty: !0,
+      tabIndex: 0,
+      preventClick: N,
+      onClick: O,
+      onDragOver: y,
+      onDrop: P,
+      onDragLeave: () => i(null),
+      onDragStart: b,
+      onDragEnd: (u) => {
+        i(null), m(u);
+      },
+      bordered: !1,
+      rounded: !1,
+      children: [
+        /* @__PURE__ */ l.jsx(ue, { loading: D, icon: E, level: X }),
+        /* @__PURE__ */ l.jsx(
+          ge,
+          {
+            name: a,
+            tabKey: n,
+            onRename: p,
+            editable: S,
+            level: k[h]
+          }
+        ),
+        j && r != null && /* @__PURE__ */ l.jsx(
+          w,
+          {
+            "aria-label": "pluto-tabs__close",
+            onClick: v,
+            className: o.E("close"),
+            variant: "text",
+            sharp: !0,
+            children: /* @__PURE__ */ l.jsx(ce, { unsavedChanges: T })
+          }
+        )
+      ]
+    }
+  );
+}, ge = ({
+  onRename: s,
+  name: t,
+  tabKey: e,
+  editable: r = !0,
+  level: n
+}) => s == null || !r ? /* @__PURE__ */ l.jsx(te, { overflow: "ellipsis", level: n, children: t }) : /* @__PURE__ */ l.jsx(
+  ne,
+  {
+    level: n,
+    id: o.B(`tab-${e}`),
+    onChange: (a) => s?.(e, a),
+    value: t,
+    overflow: "ellipsis"
+  }
+), fe = (s = "", t = []) => {
+  if (t.length !== 0)
+    return t.find((e) => e.tabKey === s) != null ? s : t[t.length - 1]?.tabKey;
+}, pe = (s, t, e) => {
+  if (t = t.trim(), t.length === 0) return e;
+  const r = e.find((n) => n.tabKey === s);
+  return r == null || r.name === t ? e : e.map((n) => n.tabKey === s ? { ...n, name: t } : n);
+}, xe = ({
+  tabs: s,
+  content: t,
+  selected: e,
+  onSelect: r
+}) => {
+  const [n, a] = ae({
+    initial: e ?? s[0]?.tabKey ?? "",
+    value: e,
+    onChange: r
+  }), c = re(e ?? n), d = C(
+    (p) => {
+      a(p), c.current == null && r?.(p);
+    },
+    [n, r]
+  );
+  return {
+    tabs: s,
+    selected: n,
+    content: t,
+    onSelect: d
+  };
+}, he = ({
+  id: s,
+  content: t,
+  children: e,
+  onSelect: r,
+  selected: n,
+  selectedAltColor: a,
+  closable: c,
+  tabs: d,
+  onClose: p,
+  onDragStart: j,
+  onDragEnd: E,
+  onCreate: h,
+  onRename: S,
+  emptyContent: T,
+  className: D,
+  onDragOver: x,
+  onDrop: b,
+  contextMenu: m,
+  actions: v,
+  addTooltip: O,
+  size: g = "medium",
+  direction: i = "y",
+  x: y,
+  y: P,
+  ...N
+}) => /* @__PURE__ */ l.jsx(
+  B,
+  {
+    id: s,
+    empty: !0,
+    className: o(o.B("tabs"), D),
+    direction: i,
+    x: y,
+    y: P,
+    onDragOver: x,
+    onDrop: b,
+    ...N,
+    children: /* @__PURE__ */ l.jsxs(
+      R,
+      {
+        value: {
+          tabs: d,
+          emptyContent: T,
+          selected: n,
+          closable: c,
+          content: e ?? t,
+          onSelect: r,
+          onClose: p,
+          onDragStart: j,
+          onDragEnd: E,
+          onRename: S,
+          onCreate: h,
+          onDrop: b
+        },
+        children: [
+          /* @__PURE__ */ l.jsx(
+            V,
+            {
+              size: g,
+              direction: U.swap(i),
+              altColor: a,
+              contextMenu: m,
+              addTooltip: O,
+              actions: v
+            }
+          ),
+          /* @__PURE__ */ l.jsx(Z, {})
+        ]
+      }
+    )
+  }
+), Z = () => {
+  const { tabs: s, selected: t, content: e, emptyContent: r, onSelect: n } = M();
+  let a = null;
+  const c = s.find((d) => d.tabKey === t);
+  return t == null || c == null ? a = r ?? null : e != null ? typeof e == "function" ? a = e(c) : a = e : c.content != null && (a = c.content), /* @__PURE__ */ l.jsx(
+    "div",
+    {
+      className: o.B("tabs-content"),
+      onClick: () => t != null && n?.(t),
+      children: a
+    }
+  );
+}, F = f.object({
+  tabKey: f.string(),
+  name: f.string(),
+  closable: f.boolean().optional(),
+  icon: f.unknown().optional(),
+  editable: f.boolean().optional(),
+  visible: f.boolean().optional(),
+  unsavedChanges: f.boolean().optional(),
+  loading: f.boolean().optional()
+}), me = F.extend({
+  content: f.unknown().optional()
+}), De = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Content: Z,
+  Provider: R,
+  Selector: V,
+  Tabs: he,
+  rename: pe,
+  resetSelection: fe,
+  specZ: F,
+  tabZ: me,
+  useContext: M,
+  useStatic: xe
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  he as T,
+  pe as a,
+  De as e,
+  fe as r,
+  me as t,
+  xe as u
+};