@mittwald/flow-react-components 0.1.0-alpha.135 → 0.1.0-alpha.136

package/dist/{Link-TcBL3IVI.js → Link-CcYCy_KC.js}

@@ -7,8 +7,8 @@ import { P as L } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "./propsContext-DzAKlmhS.js";
 import "remeda";
-import g from "clsx";
-import { f as h } from "./flowComponent-CPKCCJEg.js";
+import h from "clsx";
+import { f as g } from "./flowComponent-CPKCCJEg.js";
 import { l as y } from "./context-BlNV7smK.js";
 const N = "flow--link", E = "flow--link--inline", F = "flow--link--icon", v = "flow--link--dark", z = "flow--link--light", n = {
   link: N,
@@ -16,34 +16,34 @@ const N = "flow--link", E = "flow--link--inline", F = "flow--link--icon", v = "f
   icon: F,
   dark: v,
   light: z
-}, G = h("Link", (r) => {
+}, G = g("Link", (t) => {
   const {
-    children: i,
-    className: t,
-    inline: e,
-    linkComponent: l,
-    color: s = "primary",
-    unstyled: m = !1,
-    "aria-current": a,
-    refProp: c,
-    ...p
-  } = r, { linkComponent: k } = d(y), f = l ?? k ?? P.Link, C = m ? t : g(n.link, e && n.inline, n[s], t), u = {
+    children: l,
+    className: r,
+    inline: s,
+    linkComponent: i,
+    color: m = "primary",
+    unstyled: a = !1,
+    "aria-current": c,
+    refProp: p,
+    ...k
+  } = t, { linkComponent: e } = d(y), f = i || (t.href && e ? e : P.Link), C = a ? r : h(n.link, s && n.inline, n[m], r), u = {
     Icon: {
       className: n.icon,
       size: "s"
     }
   }, x = {
-    "aria-current": a
+    "aria-current": c
   };
   return /* @__PURE__ */ o.createElement(w, null, /* @__PURE__ */ o.createElement(
     f,
     {
-      ...p,
+      ...k,
       ...x,
       className: C,
-      ref: c
+      ref: p
     },
-    /* @__PURE__ */ o.createElement(L, { props: u }, i)
+    /* @__PURE__ */ o.createElement(L, { props: u }, l)
   ));
 });
 export {

package/dist/Link.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { L as o } from "./Link-TcBL3IVI.js";
+import { L as o } from "./Link-CcYCy_KC.js";
 export {
   o as Link,
   o as default

package/dist/List.js

@@ -35,7 +35,7 @@ import { P as Tt } from "./PropsContextProvider-C6Z4XGp6.js";
 import { d as Lt } from "./dynamic-ClpUSmEt.js";
 import { I as wt } from "./IconContextMenu-Bmk1_j_0.js";
 import { TunnelProvider as Bt, TunnelExit as z } from "@mittwald/react-tunnel";
-import { L as At } from "./Link-TcBL3IVI.js";
+import { L as At } from "./Link-CcYCy_KC.js";
 import { d as E, a as O } from "./deepFindOfType-6pG0fH7S.js";
 import { ListLoaderAsyncResource as kt } from "./List/ListLoaderAsyncResource.js";
 import { I as Dt } from "./InlineCode-BT-PKxVv.js";

package/dist/Notification.js

@@ -0,0 +1,67 @@
+"use client"
+/* */
+import t from "react";
+import d from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { P as w } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "remeda";
+import { S as g } from "./StatusIcon-Dj5p-iL1.js";
+import { L as h } from "./Link-CcYCy_KC.js";
+import { B as k } from "./Button-BPAhEOTg.js";
+import "@tabler/icons-react";
+import "./Icon-D4bkU_pz.js";
+import { I as x } from "./IconClose-FTrJdf_N.js";
+const N = "flow--notification", C = "flow--notification--link", E = "flow--notification--status-icon", I = "flow--notification--heading", L = "flow--notification--text", P = "flow--notification--close", v = "flow--notification--info", y = "flow--notification--has-link", B = "flow--notification--warning", S = "flow--notification--danger", z = "flow--notification--success", o = {
+  notification: N,
+  link: C,
+  statusIcon: E,
+  heading: I,
+  text: L,
+  close: P,
+  info: v,
+  hasLink: y,
+  warning: B,
+  danger: S,
+  success: z
+}, O = (a) => {
+  const {
+    children: c,
+    className: l,
+    status: i = "info",
+    role: r = "alert",
+    href: s,
+    onClick: e,
+    onClose: n,
+    autoClose: A,
+    ...f
+  } = a, m = d(
+    o.notification,
+    o[i],
+    (e || n || s) && o.hasLink,
+    l
+  ), p = {
+    Heading: {
+      className: o.heading,
+      level: 4
+    },
+    Text: {
+      className: o.text
+    }
+  }, u = n && /* @__PURE__ */ t.createElement(
+    k,
+    {
+      size: "s",
+      className: o.close,
+      variant: "plain",
+      color: "secondary",
+      onPress: n
+    },
+    /* @__PURE__ */ t.createElement(x, null)
+  );
+  return /* @__PURE__ */ t.createElement("div", { ...f, className: m, role: r }, /* @__PURE__ */ t.createElement(h, { unstyled: !0, href: s, className: o.link, onPress: e }, /* @__PURE__ */ t.createElement(g, { className: o.statusIcon, status: i }), /* @__PURE__ */ t.createElement(w, { props: p }, c)), u);
+};
+export {
+  O as Notification,
+  O as default
+};

package/dist/NotificationProvider.js

@@ -0,0 +1,140 @@
+"use client"
+/* */
+var w = Object.defineProperty;
+var A = (i, t, e) => t in i ? w(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var o = (i, t, e) => (A(i, typeof t != "symbol" ? t + "" : t, e), e);
+import s, { useRef as v, cloneElement as D, createContext as C, useContext as N } from "react";
+import { u as E } from "./useSelector-DpU7_HMO.js";
+import { makeObservable as g, observable as x, action as c } from "mobx";
+import { Duration as u, DateTime as m } from "luxon";
+import y from "react-dom";
+import b from "clsx";
+import { LazyMotion as I, domAnimation as M, AnimatePresence as P, m as k } from "framer-motion";
+import { useIsSSR as L } from "react-aria";
+class R {
+  constructor() {
+    o(this, "duration", u.fromDurationLike(0));
+    o(this, "onDone");
+    o(this, "startedAt");
+    o(this, "pausedAt");
+    o(this, "runningTimeoutId");
+  }
+  start(t, e) {
+    if (this.startedAt)
+      throw new Error("Timer already started");
+    this.duration = u.fromDurationLike(t), this.onDone = e, this.startTimeout(this.duration);
+  }
+  restart() {
+    this.stop(), this.startTimeout(this.duration);
+  }
+  pause() {
+    this.clearTimeout();
+    const t = m.now();
+    this.pausedAt = t, this.startedAt || (this.startedAt = t);
+  }
+  resume() {
+    if (this.startedAt) {
+      if (this.pausedAt) {
+        const t = this.pausedAt.diff(this.startedAt), e = this.duration.minus(t);
+        this.startTimeout(e);
+      }
+    } else
+      throw new Error("Timer not paused");
+  }
+  stop() {
+    this.clearTimeout(), this.startedAt = void 0, this.pausedAt = void 0;
+  }
+  get state() {
+    return this.pausedAt ? "paused" : this.startedAt ? "running" : "idle";
+  }
+  clearTimeout() {
+    this.runningTimeoutId && window.clearTimeout(this.runningTimeoutId), this.runningTimeoutId = void 0;
+  }
+  startTimeout(t) {
+    this.startedAt = m.now(), this.pausedAt = void 0, this.runningTimeoutId = window.setTimeout(() => {
+      this.stop(), this.onDone && this.onDone();
+    }, t.toMillis());
+  }
+}
+class a {
+  constructor() {
+    o(this, "notificationsData", /* @__PURE__ */ new Map());
+    o(this, "id", 0);
+    g(this, {
+      notificationsData: x.shallow,
+      add: c.bound,
+      remove: c.bound
+    });
+  }
+  static useNew() {
+    return v(new a()).current;
+  }
+  useNotifications() {
+    return E(() => Array.from(this.notificationsData.values()));
+  }
+  add(t) {
+    const e = this.id++, n = {
+      id: e,
+      createdAt: Date.now(),
+      autoCloseTimer: new R()
+    };
+    this.notificationsData.set(e, {
+      element: t,
+      meta: n
+    }), t.props.autoClose && n.autoCloseTimer.start({ seconds: 10 }, () => {
+      this.remove(e);
+    });
+  }
+  remove(t) {
+    this.notificationsData.delete(t);
+  }
+}
+const S = "flow--notification-provider--notification-container", O = "flow--notification-provider--notification", d = {
+  notificationContainer: S,
+  notification: O
+}, z = (i) => {
+  const { notification: t, controller: e } = i;
+  return D(t.element, {
+    onMouseEnter: () => {
+      t.meta.autoCloseTimer.pause();
+    },
+    onMouseLeave: () => {
+      t.meta.autoCloseTimer.resume();
+    },
+    onClose: () => {
+      e.remove(t.meta.id);
+    }
+  });
+}, B = (i) => {
+  const { className: t, controller: e, ...n } = i, f = b(d.notificationContainer, t), h = e.useNotifications(), p = L(), T = /* @__PURE__ */ s.createElement(I, { features: M }, /* @__PURE__ */ s.createElement("div", { className: f, ...n }, /* @__PURE__ */ s.createElement(P, null, h.map((r) => /* @__PURE__ */ s.createElement(
+    k.div,
+    {
+      className: d.notification,
+      key: r.meta.id,
+      initial: { opacity: 0, x: 200 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: 200, height: 0, paddingBottom: 0 },
+      transition: {
+        bounce: 0
+      }
+    },
+    /* @__PURE__ */ s.createElement(
+      z,
+      {
+        notification: r,
+        controller: e
+      }
+    )
+  )))));
+  return p ? null : y.createPortal(T, document.body);
+}, l = C(
+  new a()
+), V = () => N(l), W = (i) => {
+  const { children: t, ...e } = i, n = a.useNew();
+  return /* @__PURE__ */ s.createElement(l.Provider, { value: n }, /* @__PURE__ */ s.createElement(B, { controller: n, ...e }), t);
+};
+export {
+  W as NotificationProvider,
+  W as default,
+  V as useNotificationController
+};

package/dist/nextjs.js

@@ -1,12 +1,13 @@
 "use client"
 /* */
-import n, { forwardRef as o } from "react";
-import i from "next/link";
-import { L as m } from "./context-BlNV7smK.js";
-const f = o(function(r, t) {
-  return /* @__PURE__ */ n.createElement(i, { href: r.href ?? "#", ...r, ref: t });
-}), L = (e) => /* @__PURE__ */ n.createElement(m, { value: { linkComponent: f } }, e.children);
+import r, { forwardRef as m } from "react";
+import c from "next/link";
+import { L as f } from "./context-BlNV7smK.js";
+const a = m(function(t, n) {
+  const { href: o, ...i } = t;
+  return /* @__PURE__ */ r.createElement(c, { href: o ?? "#", ...i, ref: n });
+}), p = (e) => /* @__PURE__ */ r.createElement(f, { value: { linkComponent: a } }, e.children);
 export {
-  f as Link,
-  L as LinkProvider
+  a as Link,
+  p as LinkProvider
 };