@vizel/react 0.0.1-alpha.1

package/dist/index.js

@@ -0,0 +1,60 @@
+import { useVizelContext as r, useVizelContextSafe as t } from "./index2.js";
+import { VizelIconProvider as l, useVizelIconContext as m } from "./index3.js";
+import { VizelThemeProvider as z, useVizelTheme as f, useVizelThemeSafe as x } from "./index4.js";
+import { Vizel as u } from "./index5.js";
+import { VizelBubbleMenu as a } from "./index6.js";
+import { VizelBubbleMenuButton as d } from "./index7.js";
+import { VizelBubbleMenuColorPicker as S } from "./index8.js";
+import { VizelBubbleMenuDefault as c } from "./index9.js";
+import { VizelBubbleMenuDivider as v } from "./index10.js";
+import { VizelColorPicker as E } from "./index11.js";
+import { VizelEditor as C } from "./index12.js";
+import { VizelEmbedView as k } from "./index13.js";
+import { VizelIcon as w } from "./index14.js";
+import { VizelLinkEditor as y } from "./index15.js";
+import { VizelNodeSelector as L } from "./index16.js";
+import { VizelPortal as R } from "./index17.js";
+import { VizelProvider as j } from "./index18.js";
+import { VizelSaveIndicator as F } from "./index19.js";
+import { VizelSlashMenu as H } from "./index20.js";
+import { VizelSlashMenuEmpty as K } from "./index21.js";
+import { VizelSlashMenuItem as Q } from "./index22.js";
+import { createVizelSlashMenuRenderer as W } from "./index23.js";
+import { useVizelAutoSave as Y } from "./index24.js";
+import { useVizelEditor as _ } from "./index25.js";
+import { useVizelEditorState as ee } from "./index26.js";
+import { useVizelMarkdown as re } from "./index27.js";
+import { useVizelState as ie } from "./index28.js";
+export {
+  u as Vizel,
+  a as VizelBubbleMenu,
+  d as VizelBubbleMenuButton,
+  S as VizelBubbleMenuColorPicker,
+  c as VizelBubbleMenuDefault,
+  v as VizelBubbleMenuDivider,
+  E as VizelColorPicker,
+  C as VizelEditor,
+  k as VizelEmbedView,
+  w as VizelIcon,
+  l as VizelIconProvider,
+  y as VizelLinkEditor,
+  L as VizelNodeSelector,
+  R as VizelPortal,
+  j as VizelProvider,
+  F as VizelSaveIndicator,
+  H as VizelSlashMenu,
+  K as VizelSlashMenuEmpty,
+  Q as VizelSlashMenuItem,
+  z as VizelThemeProvider,
+  W as createVizelSlashMenuRenderer,
+  Y as useVizelAutoSave,
+  r as useVizelContext,
+  t as useVizelContextSafe,
+  _ as useVizelEditor,
+  ee as useVizelEditorState,
+  m as useVizelIconContext,
+  re as useVizelMarkdown,
+  ie as useVizelState,
+  f as useVizelTheme,
+  x as useVizelThemeSafe
+};

package/dist/index10.js

@@ -0,0 +1,7 @@
+import { jsx as i } from "react/jsx-runtime";
+function n({ className: e }) {
+  return /* @__PURE__ */ i("span", { className: `vizel-bubble-menu-divider ${e ?? ""}` });
+}
+export {
+  n as VizelBubbleMenuDivider
+};

package/dist/index11.js

@@ -0,0 +1,179 @@
+import { jsxs as z, jsx as l } from "react/jsx-runtime";
+import { normalizeVizelHexColor as N, isVizelValidHexColor as I } from "@vizel/core";
+import { useState as K, useRef as L, useMemo as $, useEffect as y, useCallback as b } from "react";
+import { VizelIcon as w } from "./index14.js";
+const S = 4, j = ["transparent", "inherit"];
+function q({
+  colors: f,
+  value: a,
+  onChange: m,
+  label: M = "Color palette",
+  className: O,
+  allowCustomColor: U = !0,
+  recentColors: s = [],
+  showRecentColors: h = !0,
+  noneValues: g = j
+}) {
+  const [p, d] = K(""), [x, v] = K(-1), u = L([]), D = L(null), i = $(
+    () => [...h ? s : [], ...f.map((e) => e.color)],
+    [h, s, f]
+  );
+  y(() => {
+    u.current.length > i.length && (u.current.length = i.length);
+  }, [i.length]);
+  const H = h ? s.length : 0, o = b(
+    (e) => g.includes(e),
+    [g]
+  ), k = b(
+    (e) => {
+      m(e), d("");
+    },
+    [m]
+  ), V = b(() => {
+    const e = N(p);
+    I(e) && (m(e), d(""));
+  }, [p, m]), R = (e) => {
+    e.key === "Enter" && (e.preventDefault(), V());
+  }, A = b(
+    (e, r) => {
+      const t = i.length;
+      if (t === 0) return;
+      let n = r, c = !1;
+      switch (e.key) {
+        case "ArrowRight":
+          n = (r + 1) % t, c = !0;
+          break;
+        case "ArrowLeft":
+          n = (r - 1 + t) % t, c = !0;
+          break;
+        case "ArrowDown":
+          n = Math.min(r + S, t - 1), c = !0;
+          break;
+        case "ArrowUp":
+          n = Math.max(r - S, 0), c = !0;
+          break;
+        case "Home":
+          n = 0, c = !0;
+          break;
+        case "End":
+          n = t - 1, c = !0;
+          break;
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          const E = i[r];
+          E && k(E);
+          return;
+        }
+      }
+      c && (e.preventDefault(), v(n), u.current[n]?.focus());
+    },
+    [i, k]
+  );
+  y(() => {
+    a && !o(a) ? d(a) : d("");
+  }, [a, o]), y(() => {
+    const e = a ? i.indexOf(a) : -1;
+    e >= 0 ? v(e) : i.length > 0 && v(0);
+  }, [i, a]);
+  const C = I(N(p)), _ = C ? N(p) : void 0;
+  return /* @__PURE__ */ z(
+    "div",
+    {
+      className: `vizel-color-picker-content ${O ?? ""}`,
+      role: "listbox",
+      "aria-label": M,
+      children: [
+        h && s.length > 0 && /* @__PURE__ */ z("div", { className: "vizel-color-picker-section", children: [
+          /* @__PURE__ */ l("div", { className: "vizel-color-picker-label", children: "Recent" }),
+          /* @__PURE__ */ l("div", { className: "vizel-color-picker-recent", children: s.map((e, r) => /* @__PURE__ */ l(
+            "button",
+            {
+              ref: (t) => {
+                u.current[r] = t;
+              },
+              type: "button",
+              role: "option",
+              "aria-selected": a === e,
+              "aria-label": e,
+              tabIndex: x === r ? 0 : -1,
+              className: `vizel-color-picker-swatch ${a === e ? "is-active" : ""}`,
+              onClick: () => k(e),
+              onKeyDown: (t) => A(t, r),
+              style: {
+                backgroundColor: o(e) ? "transparent" : e
+              },
+              "data-color": e,
+              children: o(e) ? /* @__PURE__ */ l("span", { className: "vizel-color-picker-none", children: /* @__PURE__ */ l(w, { name: "x" }) }) : null
+            },
+            e
+          )) })
+        ] }),
+        /* @__PURE__ */ l("div", { className: "vizel-color-picker-section", children: /* @__PURE__ */ l("div", { className: "vizel-color-picker-grid", children: f.map((e, r) => {
+          const t = H + r;
+          return /* @__PURE__ */ l(
+            "button",
+            {
+              ref: (n) => {
+                u.current[t] = n;
+              },
+              type: "button",
+              role: "option",
+              "aria-selected": a === e.color,
+              "aria-label": e.name,
+              tabIndex: x === t ? 0 : -1,
+              className: `vizel-color-picker-swatch ${a === e.color ? "is-active" : ""}`,
+              onClick: () => k(e.color),
+              onKeyDown: (n) => A(n, t),
+              style: {
+                backgroundColor: o(e.color) ? "transparent" : e.color
+              },
+              "data-color": e.color,
+              children: o(e.color) ? /* @__PURE__ */ l("span", { className: "vizel-color-picker-none", children: /* @__PURE__ */ l(w, { name: "x" }) }) : null
+            },
+            e.color
+          );
+        }) }) }),
+        U && /* @__PURE__ */ z("div", { className: "vizel-color-picker-input-row", children: [
+          /* @__PURE__ */ l(
+            "span",
+            {
+              className: "vizel-color-picker-preview",
+              style: { backgroundColor: _ || "transparent" },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "input",
+            {
+              ref: D,
+              type: "text",
+              className: "vizel-color-picker-input",
+              placeholder: "#000000",
+              value: p,
+              onChange: (e) => d(e.target.value),
+              onKeyDown: R,
+              maxLength: 7,
+              "aria-label": "Custom color hex value"
+            }
+          ),
+          /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              className: "vizel-color-picker-apply",
+              onClick: V,
+              disabled: !C,
+              title: "Apply",
+              "aria-label": "Apply custom color",
+              children: /* @__PURE__ */ l(w, { name: "check" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  q as VizelColorPicker
+};

package/dist/index12.js

@@ -0,0 +1,24 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useRef as a, useImperativeHandle as c, useEffect as l } from "react";
+import { useVizelContextSafe as s } from "./index2.js";
+function v({ ref: i, editor: o, className: n }) {
+  const d = s(), e = o ?? d?.editor, r = a(null);
+  return c(
+    i,
+    () => ({
+      container: r.current
+    }),
+    []
+  ), l(() => {
+    const t = r.current;
+    if (e && t)
+      return t.appendChild(e.view.dom), e.view.setProps({
+        editable: () => e?.isEditable ?? !1
+      }), () => {
+        e.view.dom.parentNode === t && t.removeChild(e.view.dom);
+      };
+  }, [e]), e ? /* @__PURE__ */ f("div", { ref: r, className: n, "data-vizel-content": "" }) : null;
+}
+export {
+  v as VizelEditor
+};

package/dist/index13.js

@@ -0,0 +1,79 @@
+import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import { useRef as a, useEffect as v } from "react";
+import { VizelIcon as p } from "./index14.js";
+const b = (r, e, n) => `vizel-embed ${r ? "is-loading" : ""} ${e ? "ProseMirror-selectednode" : ""} ${n ?? ""}`, h = (r, e) => /* @__PURE__ */ i("div", { className: r, "data-embed-type": "loading", "data-embed-provider": e, children: /* @__PURE__ */ s("div", { className: "vizel-embed-loading", children: [
+  /* @__PURE__ */ i("div", { className: "vizel-embed-loading-spinner" }),
+  /* @__PURE__ */ i("span", { children: "Loading embed..." })
+] }) }), f = (r, e, n) => {
+  const l = ["youtube", "vimeo", "loom", "tiktok"].includes(e.provider ?? "");
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: n,
+      className: r,
+      "data-embed-type": "oembed",
+      "data-embed-provider": e.provider,
+      children: /* @__PURE__ */ i(
+        "div",
+        {
+          className: l ? "vizel-embed-video" : "vizel-embed-oembed",
+          dangerouslySetInnerHTML: { __html: e.html ?? "" }
+        }
+      )
+    }
+  );
+}, u = (r, e) => {
+  const n = !!e.image, l = n ? "vizel-embed-card-horizontal" : "";
+  return /* @__PURE__ */ i("div", { className: r, "data-embed-type": "ogp", "data-embed-provider": e.provider, children: /* @__PURE__ */ s(
+    "a",
+    {
+      href: e.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: `vizel-embed-card ${l}`,
+      children: [
+        n && /* @__PURE__ */ i("img", { src: e.image, alt: "", className: "vizel-embed-card-image", loading: "lazy" }),
+        /* @__PURE__ */ s("div", { className: "vizel-embed-card-content", children: [
+          (e.siteName || e.favicon) && /* @__PURE__ */ s("div", { className: "vizel-embed-card-site", children: [
+            e.favicon && /* @__PURE__ */ i("img", { src: e.favicon, alt: "", className: "vizel-embed-card-favicon" }),
+            e.siteName && /* @__PURE__ */ i("span", { children: e.siteName })
+          ] }),
+          e.title && /* @__PURE__ */ i("div", { className: "vizel-embed-card-title", children: e.title }),
+          e.description && /* @__PURE__ */ i("div", { className: "vizel-embed-card-description", children: e.description }),
+          /* @__PURE__ */ i("div", { className: "vizel-embed-card-url", children: new URL(e.url).hostname })
+        ] })
+      ]
+    }
+  ) });
+}, N = (r, e, n) => /* @__PURE__ */ i("div", { className: r, "data-embed-type": "title", "data-embed-provider": e.provider, children: /* @__PURE__ */ s("a", { href: e.url, target: "_blank", rel: "noopener noreferrer", className: "vizel-embed-link", children: [
+  /* @__PURE__ */ i("span", { className: "vizel-embed-link-icon", children: n }),
+  /* @__PURE__ */ i("span", { className: "vizel-embed-link-text", children: e.title })
+] }) }), z = (r, e, n) => /* @__PURE__ */ i("div", { className: r, "data-embed-type": "link", "data-embed-provider": e.provider, children: /* @__PURE__ */ s("a", { href: e.url, target: "_blank", rel: "noopener noreferrer", className: "vizel-embed-link", children: [
+  /* @__PURE__ */ i("span", { className: "vizel-embed-link-icon", children: n }),
+  /* @__PURE__ */ i("span", { className: "vizel-embed-link-text", children: e.url })
+] }) });
+function w({ data: r, className: e, selected: n }) {
+  const l = a(null);
+  v(() => {
+    if (r.type === "oembed" && r.html && l.current) {
+      const m = l.current.querySelectorAll("script");
+      for (const o of m) {
+        const d = document.createElement("script");
+        o.src ? d.src = o.src : d.textContent = o.textContent, o.parentNode?.replaceChild(d, o);
+      }
+      r.provider === "twitter" && "twttr" in window && window.twttr?.widgets?.load?.();
+    }
+  }, [r.type, r.html, r.provider]);
+  const c = b(r.loading, n, e);
+  if (r.loading)
+    return h(c, r.provider);
+  if (r.type === "oembed" && r.html)
+    return f(c, r, l);
+  if (r.type === "ogp")
+    return u(c, r);
+  const t = /* @__PURE__ */ i(p, { name: "link" });
+  return r.type === "title" && r.title ? N(c, r, t) : z(c, r, t);
+}
+export {
+  w as VizelEmbedView
+};

package/dist/index14.js

@@ -0,0 +1,11 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Icon as s } from "@iconify/react";
+import { vizelDefaultIconIds as I } from "@vizel/core";
+import { useVizelIconContext as m } from "./index3.js";
+function x({ name: o, customIcons: t, style: n, ...c }) {
+  const { customIcons: r } = m(), e = t?.[o] ?? r?.[o] ?? I[o];
+  return /* @__PURE__ */ i(s, { icon: e, style: { pointerEvents: "none", ...n }, ...c });
+}
+export {
+  x as VizelIcon
+};

package/dist/index15.js

@@ -0,0 +1,81 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { detectVizelEmbedProvider as R } from "@vizel/core";
+import { useState as h, useRef as k, useMemo as v, useEffect as b, useCallback as p } from "react";
+import { VizelIcon as g } from "./index14.js";
+function P({
+  editor: e,
+  onClose: n,
+  className: E,
+  enableEmbed: m = !1
+}) {
+  const d = e.getAttributes("link").href || "", [s, z] = h(d), [l, L] = h(!1), u = k(null), f = k(null), o = v(() => m ? e.extensionManager.extensions.some((r) => r.name === "embed") : !1, [e, m]), x = v(() => s.trim() ? R(s.trim()) !== null : !1, [s]);
+  b(() => {
+    f.current?.focus();
+  }, []), b(() => {
+    const t = (c) => {
+      u.current && !u.current.contains(c.target) && n();
+    }, r = (c) => {
+      c.key === "Escape" && (c.preventDefault(), c.stopImmediatePropagation(), n());
+    }, N = setTimeout(() => {
+      document.addEventListener("mousedown", t);
+    }, 0);
+    return document.addEventListener("keydown", r, !0), () => {
+      clearTimeout(N), document.removeEventListener("mousedown", t), document.removeEventListener("keydown", r, !0);
+    };
+  }, [n]);
+  const y = p(
+    (t) => {
+      t.preventDefault();
+      const r = s.trim();
+      if (!r) {
+        e.chain().focus().unsetLink().run(), n();
+        return;
+      }
+      l && o ? e.chain().focus().unsetLink().setEmbed({ url: r }).run() : e.chain().focus().setLink({ href: r }).run(), n();
+    },
+    [e, s, l, o, n]
+  ), w = p(() => {
+    e.chain().focus().unsetLink().run(), n();
+  }, [e, n]);
+  return /* @__PURE__ */ a("form", { ref: u, onSubmit: y, className: `vizel-link-editor ${E ?? ""}`, children: [
+    /* @__PURE__ */ a("div", { className: "vizel-link-editor-row", children: [
+      /* @__PURE__ */ i(
+        "input",
+        {
+          ref: f,
+          type: "url",
+          value: s,
+          onChange: (t) => z(t.target.value),
+          placeholder: "Enter URL...",
+          className: "vizel-link-input"
+        }
+      ),
+      /* @__PURE__ */ i("button", { type: "submit", className: "vizel-link-button", title: "Apply", children: /* @__PURE__ */ i(g, { name: "check" }) }),
+      d && /* @__PURE__ */ i(
+        "button",
+        {
+          type: "button",
+          onClick: w,
+          className: "vizel-link-button vizel-link-remove",
+          title: "Remove link",
+          children: /* @__PURE__ */ i(g, { name: "x" })
+        }
+      )
+    ] }),
+    o && x && /* @__PURE__ */ a("div", { className: "vizel-link-editor-embed-toggle", children: [
+      /* @__PURE__ */ i(
+        "input",
+        {
+          type: "checkbox",
+          id: "vizel-embed-toggle",
+          checked: l,
+          onChange: (t) => L(t.target.checked)
+        }
+      ),
+      /* @__PURE__ */ i("label", { htmlFor: "vizel-embed-toggle", children: "Embed as rich content" })
+    ] })
+  ] });
+}
+export {
+  P as VizelLinkEditor
+};

package/dist/index16.js

@@ -0,0 +1,118 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { getVizelActiveNodeType as x, vizelDefaultNodeTypes as E } from "@vizel/core";
+import { useState as z, useRef as N, useEffect as w } from "react";
+import { useVizelState as y } from "./index28.js";
+import { VizelIcon as s } from "./index14.js";
+function $({
+  editor: c,
+  nodeTypes: r = E,
+  className: D
+}) {
+  y(() => c);
+  const [o, l] = z(!1), [f, a] = z(0), i = N(null), d = N(null), m = x(c, r), h = m?.label ?? "Text", g = m?.icon ?? "paragraph";
+  w(() => {
+    if (!o) return;
+    const e = (t) => {
+      i.current && !i.current.contains(t.target) && l(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [o]), w(() => {
+    o && d.current && d.current.focus();
+  }, [o]);
+  const b = (e) => {
+    if (!o) {
+      (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), l(!0), a(0));
+      return;
+    }
+    switch (e.key) {
+      case "Escape":
+        e.preventDefault(), l(!1);
+        break;
+      case "ArrowDown":
+        e.preventDefault(), a((t) => (t + 1) % r.length);
+        break;
+      case "ArrowUp":
+        e.preventDefault(), a((t) => (t - 1 + r.length) % r.length);
+        break;
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        const t = r[f];
+        t && v(t);
+        break;
+      }
+      case "Home":
+        e.preventDefault(), a(0);
+        break;
+      case "End":
+        e.preventDefault(), a(r.length - 1);
+        break;
+    }
+  }, v = (e) => {
+    e.command(c), l(!1);
+  };
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      ref: i,
+      className: `vizel-node-selector ${D ?? ""}`,
+      "data-vizel-node-selector": !0,
+      children: [
+        /* @__PURE__ */ p(
+          "button",
+          {
+            type: "button",
+            className: "vizel-node-selector-trigger",
+            onClick: () => l(!o),
+            onKeyDown: b,
+            "aria-haspopup": "listbox",
+            "aria-expanded": o,
+            "aria-label": `Current block type: ${h}`,
+            title: "Change block type",
+            children: [
+              /* @__PURE__ */ n("span", { className: "vizel-node-selector-icon", children: /* @__PURE__ */ n(s, { name: g }) }),
+              /* @__PURE__ */ n("span", { className: "vizel-node-selector-label", children: h }),
+              /* @__PURE__ */ n("span", { className: "vizel-node-selector-chevron", "aria-hidden": "true", children: /* @__PURE__ */ n(s, { name: "chevronDown" }) })
+            ]
+          }
+        ),
+        o && /* @__PURE__ */ n(
+          "div",
+          {
+            ref: d,
+            className: "vizel-node-selector-dropdown",
+            role: "listbox",
+            "aria-label": "Block types",
+            "data-vizel-node-selector-dropdown": !0,
+            tabIndex: -1,
+            onKeyDown: b,
+            children: r.map((e, t) => {
+              const u = e.isActive(c), k = t === f;
+              return /* @__PURE__ */ p(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": u,
+                  className: `vizel-node-selector-option ${u ? "is-active" : ""} ${k ? "is-focused" : ""}`,
+                  onClick: () => v(e),
+                  onMouseEnter: () => a(t),
+                  tabIndex: k ? 0 : -1,
+                  children: [
+                    /* @__PURE__ */ n("span", { className: "vizel-node-selector-option-icon", children: /* @__PURE__ */ n(s, { name: e.icon }) }),
+                    /* @__PURE__ */ n("span", { className: "vizel-node-selector-option-label", children: e.label }),
+                    u && /* @__PURE__ */ n("span", { className: "vizel-node-selector-check", "aria-hidden": "true", children: /* @__PURE__ */ n(s, { name: "check" }) })
+                  ]
+                },
+                e.name
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  $ as VizelNodeSelector
+};

package/dist/index17.js

@@ -0,0 +1,38 @@
+import { jsx as n } from "react/jsx-runtime";
+import { getVizelPortalContainer as s, VIZEL_PORTAL_Z_INDEX as f } from "@vizel/core";
+import { useState as m, useEffect as p } from "react";
+import { createPortal as u } from "react-dom";
+function d({
+  children: t,
+  layer: o = "dropdown",
+  className: e,
+  disabled: r = !1
+}) {
+  const [a, i] = m(!1);
+  if (p(() => {
+    i(!0);
+  }, []), !a || r)
+    return t;
+  const l = s();
+  return u(
+    /* @__PURE__ */ n(
+      "div",
+      {
+        "data-vizel-portal-layer": o,
+        className: e,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          zIndex: f[o]
+        },
+        children: t
+      }
+    ),
+    l
+  );
+}
+d.displayName = "VizelPortal";
+export {
+  d as VizelPortal
+};

package/dist/index18.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import { VizelInternalProvider as t } from "./index2.js";
+function l({ editor: i, children: o, className: e }) {
+  return /* @__PURE__ */ r(t, { editor: i, children: /* @__PURE__ */ r("div", { className: e, "data-vizel-root": "", children: o }) });
+}
+export {
+  l as VizelProvider
+};

package/dist/index19.js

@@ -0,0 +1,71 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { formatVizelRelativeTime as p } from "@vizel/core";
+import { useState as h, useEffect as f } from "react";
+import { VizelIcon as i } from "./index14.js";
+function I({
+  status: r,
+  lastSaved: a,
+  showTimestamp: c = !0,
+  className: o
+}) {
+  const [n, t] = h("");
+  f(() => {
+    if (!a) {
+      t("");
+      return;
+    }
+    const s = () => {
+      t(p(a));
+    };
+    s();
+    const u = setInterval(s, 1e4);
+    return () => clearInterval(u);
+  }, [a]);
+  const l = () => {
+    switch (r) {
+      case "saved":
+        return /* @__PURE__ */ e(i, { name: "check" });
+      case "saving":
+        return /* @__PURE__ */ e("span", { className: "vizel-save-indicator-spinner", "aria-hidden": "true", children: /* @__PURE__ */ e(i, { name: "loader" }) });
+      case "unsaved":
+        return /* @__PURE__ */ e(i, { name: "circle" });
+      case "error":
+        return /* @__PURE__ */ e(i, { name: "warning" });
+      default:
+        return null;
+    }
+  }, v = () => {
+    switch (r) {
+      case "saved":
+        return "Saved";
+      case "saving":
+        return "Saving...";
+      case "unsaved":
+        return "Unsaved";
+      case "error":
+        return "Error saving";
+      default:
+        return "";
+    }
+  }, d = c && a && n && r === "saved";
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: role="status" is appropriate for non-form status announcements
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: `vizel-save-indicator vizel-save-indicator--${r} ${o ?? ""}`,
+        role: "status",
+        "aria-live": "polite",
+        "data-vizel-save-indicator": !0,
+        children: [
+          /* @__PURE__ */ e("span", { className: "vizel-save-indicator-icon", "aria-hidden": "true", children: l() }),
+          /* @__PURE__ */ e("span", { className: "vizel-save-indicator-text", children: v() }),
+          d && /* @__PURE__ */ e("span", { className: "vizel-save-indicator-timestamp", children: n })
+        ]
+      }
+    )
+  );
+}
+export {
+  I as VizelSaveIndicator
+};