@mittwald/flow-react-components 0.1.0-alpha.14 → 0.1.0-alpha.141

package/dist/LoadingSpinner-CoSM7GIL.js

@@ -0,0 +1,17 @@
+"use client"
+/* */
+import r from "react";
+import "@tabler/icons-react";
+import "./Icon-D4bkU_pz.js";
+import { I as e } from "./IconPending-BV7TXz8_.js";
+import t from "clsx";
+const a = "flow--loading-spinner", p = "flow--loading-spinner--spin", l = {
+  loadingSpinner: a,
+  spin: p
+}, S = (n) => {
+  const { className: o, ...s } = n, i = t(l.loadingSpinner, o);
+  return /* @__PURE__ */ r.createElement(e, { className: i, ...s });
+};
+export {
+  S as L
+};

package/dist/LoadingSpinner.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { L as o } from "./LoadingSpinner-CoSM7GIL.js";
+export {
+  o as LoadingSpinner,
+  o as default
+};

package/dist/MenuItem-Dny58Rqq.js

@@ -0,0 +1,54 @@
+"use client"
+/* */
+import e from "react";
+import * as I from "react-aria-components";
+import f from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { P as i } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "remeda";
+import "@tabler/icons-react";
+import "./Icon-D4bkU_pz.js";
+import { I as x, a as d } from "./IconCheckboxEmpty-DQLeOSmS.js";
+import { I as E, a as C } from "./IconRadioOn-BIS8wd64.js";
+import { T as p } from "./Text-D6e-S6em.js";
+import { d as h } from "./deepFindOfType-6pG0fH7S.js";
+import { W as M } from "./Wrap-DGT1h1o3.js";
+import { f as N } from "./flowComponent-CPKCCJEg.js";
+const w = "flow--menu-item", P = "flow--menu-item--icon", T = "flow--menu-item--text", g = "flow--menu-item--control-icon", c = {
+  menuItem: w,
+  icon: P,
+  text: T,
+  controlIcon: g
+}, k = (o, t) => !!h(o, t), y = (o) => {
+  const {
+    selectionMode: t,
+    isSelected: n,
+    selectionVariant: m = "control",
+    children: r
+  } = o, s = {
+    Icon: {
+      className: c.icon
+    },
+    Text: {
+      className: c.text
+    }
+  }, l = {
+    Icon: {
+      className: f(c.controlIcon, c.icon)
+    }
+  }, a = t === "none" || m === "navigation" ? null : t === "single" && n ? /* @__PURE__ */ e.createElement(E, null) : t === "single" && !n ? /* @__PURE__ */ e.createElement(C, null) : t === "multiple" && n ? /* @__PURE__ */ e.createElement(x, null) : /* @__PURE__ */ e.createElement(d, null), u = k(r, p);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(i, { props: l }, a), /* @__PURE__ */ e.createElement(i, { props: s }, /* @__PURE__ */ e.createElement(M, { if: !u }, /* @__PURE__ */ e.createElement(p, null, r))));
+}, D = N("MenuItem", (o) => {
+  const {
+    children: t,
+    className: n,
+    selectionVariant: m,
+    refProp: r,
+    ...s
+  } = o, l = f(c.menuItem, n);
+  return /* @__PURE__ */ e.createElement(I.MenuItem, { ...s, className: l, ref: r }, (a) => /* @__PURE__ */ e.createElement(y, { ...a, selectionVariant: m }, t));
+});
+export {
+  D as M
+};

package/dist/MenuItem.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { M as t } from "./MenuItem-Dny58Rqq.js";
+export {
+  t as MenuItem,
+  t as default
+};

package/dist/Modal.js

@@ -0,0 +1,56 @@
+"use client"
+/* */
+import o from "react";
+import d from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { P as c } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "remeda";
+import { TunnelProvider as f, TunnelExit as p } from "@mittwald/react-tunnel";
+import { f as u } from "./flowComponent-CPKCCJEg.js";
+import { M as g } from "./ModalOverlay-BSu4UEnW.js";
+import * as v from "react-aria-components";
+import { O as w } from "./OverlayTrigger-DbjMkqKf.js";
+const z = "flow--modal", C = "flow--modal--action-group", E = "flow--modal--content", T = "flow--modal--off-canvas", e = {
+  modal: z,
+  "modal-zoom": "flow--modal--modal-zoom",
+  actionGroup: C,
+  content: E,
+  "size-s": "flow--modal--size-s",
+  "size-m": "flow--modal--size-m",
+  "size-l": "flow--modal--size-l",
+  offCanvas: T,
+  "modal-slide-in": "flow--modal--modal-slide-in",
+  "modal-slide-up": "flow--modal--modal-slide-up"
+}, D = u("Modal", (l) => {
+  const {
+    size: t = "s",
+    offCanvas: a,
+    controller: n,
+    children: r,
+    refProp: x,
+    ...m
+  } = l, s = d(
+    e.modal,
+    e[`size-${t}`],
+    a && e.offCanvas
+  ), i = {
+    Content: {
+      elementType: o.Fragment
+    },
+    Heading: {
+      level: 2,
+      slot: "title"
+    },
+    ActionGroup: {
+      className: e.actionGroup,
+      tunnelId: "buttons"
+    }
+  };
+  return /* @__PURE__ */ o.createElement(g, { className: s, controller: n, ...m }, /* @__PURE__ */ o.createElement(c, { props: i }, /* @__PURE__ */ o.createElement(f, null, /* @__PURE__ */ o.createElement("div", { className: e.content }, r), /* @__PURE__ */ o.createElement(p, { id: "buttons" }))));
+}), F = (l) => /* @__PURE__ */ o.createElement(w, null, /* @__PURE__ */ o.createElement(v.DialogTrigger, null, l.children));
+export {
+  D as Modal,
+  F as ModalTrigger,
+  D as default
+};

package/dist/ModalOverlay-BSu4UEnW.js

@@ -0,0 +1,33 @@
+"use client"
+/* */
+import * as r from "react-aria-components";
+import e from "react";
+import y from "clsx";
+import { u as p, a as u } from "./useOverlayController-CGKumeGL.js";
+import "mobx";
+const d = "flow--modal-overlay--overlay", f = {
+  overlay: d,
+  "overlay-fade": "flow--modal-overlay--overlay-fade"
+}, M = (l) => {
+  const {
+    controller: t,
+    children: a,
+    isDismissable: s = !0,
+    className: n
+  } = l, m = p({
+    reuseControllerFromContext: !0
+  }), o = t ?? m, c = o.useIsOpen(), v = y(f.overlay, n);
+  return /* @__PURE__ */ e.createElement(
+    r.ModalOverlay,
+    {
+      className: v,
+      isDismissable: s,
+      isOpen: c,
+      onOpenChange: (i) => o.setOpen(i)
+    },
+    /* @__PURE__ */ e.createElement(r.Modal, null, /* @__PURE__ */ e.createElement(r.Dialog, null, /* @__PURE__ */ e.createElement(u, { value: o }, a)))
+  );
+};
+export {
+  M
+};

package/dist/Navigation.js

@@ -1,53 +1,63 @@
 "use client"
 /* */
-import a from "react";
-import { useTreeState as p, Item as v } from "react-stately";
-import "./propsContext-Dx7WKmmM.js";
-import { P as g } from "./PropsContextProvider-CEoxD8yK.js";
+import e, { useId as f } from "react";
+import d from "clsx";
+import { d as v } from "./deepFindOfType-6pG0fH7S.js";
+import { W as E } from "./Wrap-DGT1h1o3.js";
+import "./propsContext-DzAKlmhS.js";
+import { P as l } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
-import * as l from "remeda";
-import { useMenuItem as f, useMenu as I } from "react-aria";
-import { c as N } from "./clsx-DB4S2d7J.js";
-const x = "flow--navigation", c = {
-  navigation: x
-}, P = "flow--navigation--navigation-item", y = "flow--navigation--navigation-item--icon", k = "flow--navigation--navigation-item--text", r = {
-  navigationItem: P,
-  icon: y,
-  text: k
-}, C = (e, n, o) => {
-  const t = f(e, n, o);
-  return t.menuItemProps = l.omit(t.menuItemProps, ["role"]), t;
-};
-function E(e) {
-  const { item: n, state: o } = e, { isCurrent: t, linkComponent: m = "a" } = n.props, i = a.useRef(null), { menuItemProps: s } = C({ key: n.key }, o, i), u = {
-    Text: {
-      className: r.text
+import "remeda";
+import { TunnelProvider as u, TunnelExit as p } from "@mittwald/react-tunnel";
+import { A as x } from "./Accordion-rCpRbkUM.js";
+import { C as N } from "./Content-DlB-BYko.js";
+const C = "flow--navigation", I = "flow--navigation--item", b = "flow--navigation--icon", P = "flow--navigation--text", w = "flow--navigation--control-icon", r = {
+  navigation: C,
+  item: I,
+  icon: b,
+  text: P,
+  controlIcon: w
+}, z = (i) => {
+  const { className: t, children: n, ...s } = i, c = d(r.navigation, t), o = !!v(n, y), a = {
+    Link: {
+      wrapWith: /* @__PURE__ */ e.createElement("li", null),
+      className: r.item,
+      unstyled: !0,
+      Text: {
+        className: r.text
+      },
+      Icon: {
+        className: r.icon
+      }
+    }
+  };
+  return /* @__PURE__ */ e.createElement("nav", { className: c, role: "navigation", ...s }, /* @__PURE__ */ e.createElement(l, { props: a, mergeInParentContext: !0 }, /* @__PURE__ */ e.createElement(E, { if: !o }, /* @__PURE__ */ e.createElement("ul", null, n))));
+}, h = "flow--navigation--navigation-group", k = "flow--navigation--navigation-group--label", g = {
+  navigationGroup: h,
+  label: k
+}, y = (i) => {
+  const { children: t, className: n, collapsable: s, ...c } = i, o = d(g.navigationGroup, n), a = f(), m = {
+    Label: {
+      id: a,
+      className: g.label,
+      "aria-hidden": !0
     },
-    Icon: {
-      className: r.icon
+    Link: {
+      tunnelId: "links"
     }
   };
-  return /* @__PURE__ */ a.createElement("li", { className: r.navigationItem }, /* @__PURE__ */ a.createElement(
-    m,
+  return s ? /* @__PURE__ */ e.createElement(l, { mergeInParentContext: !0, props: m }, /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement(x, { defaultExpanded: !0, className: o }, t, /* @__PURE__ */ e.createElement(N, { clearPropsContext: !1 }, /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement(p, { id: "links" })))))) : /* @__PURE__ */ e.createElement(l, { mergeInParentContext: !0, props: m }, /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement(
+    "section",
     {
-      ...s,
-      ref: i,
-      "aria-current": t ? "page" : !1
+      "aria-labelledby": a,
+      className: o,
+      ...c
     },
-    /* @__PURE__ */ a.createElement(g, { props: u }, n.rendered)
-  ));
-}
-const d = (e, n, o) => {
-  const t = I(e, n, o);
-  return t.menuProps = l.omit(t.menuProps, ["role"]), t;
+    /* @__PURE__ */ e.createElement(l, { mergeInParentContext: !0, props: m }, t, /* @__PURE__ */ e.createElement(p, { id: "Label" }), /* @__PURE__ */ e.createElement("ul", null, /* @__PURE__ */ e.createElement(p, { id: "links" })))
+  )));
 };
-function $(e) {
-  const { className: n } = e, o = p(e), t = a.useRef(null), { menuProps: m } = d(e, o, t), i = N(c.navigation, n);
-  return /* @__PURE__ */ a.createElement("nav", { ...m, className: i, ref: t }, /* @__PURE__ */ a.createElement("ul", { className: c.list }, Array.from(o.collection).map((s) => /* @__PURE__ */ a.createElement(E, { state: o, item: s, key: s.key }))));
-}
-const b = v;
 export {
-  $ as Navigation,
-  b as NavigationItem,
-  $ as default
+  z as Navigation,
+  y as NavigationGroup,
+  z as default
 };

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-l795M3JX.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 = (o, t, e) => t in o ? w(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var i = (o, t, e) => (A(o, 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() {
+    i(this, "duration", u.fromDurationLike(0));
+    i(this, "onDone");
+    i(this, "startedAt");
+    i(this, "pausedAt");
+    i(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() {
+    i(this, "notificationsData", /* @__PURE__ */ new Map());
+    i(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 = (o) => {
+  const { notification: t, controller: e } = o;
+  return D(t.element, {
+    onMouseEnter: () => {
+      t.meta.autoCloseTimer.pause();
+    },
+    onMouseLeave: () => {
+      t.meta.autoCloseTimer.resume();
+    },
+    onClose: () => {
+      e.remove(t.meta.id);
+    }
+  });
+}, B = (o) => {
+  const { className: t, ...e } = o, n = j(), f = n.useNotifications(), h = L(), p = b(d.notificationContainer, t), T = /* @__PURE__ */ s.createElement(I, { features: M }, /* @__PURE__ */ s.createElement("div", { className: p, ...e }, /* @__PURE__ */ s.createElement(P, null, f.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: n
+      }
+    )
+  )))));
+  return h ? null : y.createPortal(T, document.body);
+}, l = C(
+  new a()
+), j = () => N(l), W = (o) => {
+  const { children: t, ...e } = o, n = a.useNew();
+  return /* @__PURE__ */ s.createElement(l.Provider, { value: n }, /* @__PURE__ */ s.createElement(B, { ...e }), t);
+};
+export {
+  W as NotificationProvider,
+  W as default,
+  j as useNotificationController
+};