@mittwald/flow-react-components 0.1.0-alpha.31 → 0.1.0-alpha.310

package/dist/js/Action-CiJBykBu.js

@@ -0,0 +1,291 @@
+"use client"
+/* */
+var k = Object.defineProperty;
+var M = (n, t, e) => t in n ? k(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var r = (n, t, e) => M(n, typeof t != "symbol" ? t + "" : t, e);
+import g, { createContext as O, useRef as I, useContext as w } from "react";
+import { u as E, O as D } from "./context-Cf7tqFtF.js";
+import T from "invariant";
+import { makeObservable as N, observable as R, action as V, computed as $ } from "mobx";
+import { u as b } from "./useSelector-DpU7_HMO.js";
+import { a as G, g as L, u as U } from "./getActionGroupSlot-BHzMGEA7.js";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as j } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "remeda";
+import { d as l } from "./dynamic-ClpUSmEt.js";
+import { u as q, f as z } from "./flowComponent-E-Gp2Toe.js";
+const A = O(void 0), H = A.Provider, v = (n) => new Promise((t) => setTimeout(t, n)), C = {
+  pending: 1e3,
+  succeeded: 1500,
+  failed: 2e3
+};
+class x {
+  constructor() {
+    r(this, "showFeedback");
+    r(this, "state", "isIdle");
+    r(this, "setPendingTimeout");
+    r(this, "error");
+    r(this, "isAsync", !1);
+    N(this, {
+      state: R,
+      updateState: V,
+      isBusy: $
+    });
+  }
+  static useNew() {
+    return I(new x()).current;
+  }
+  updateState(t) {
+    this.state = t;
+  }
+  useValue() {
+    return b(() => this.state, [this]);
+  }
+  useIsBusy() {
+    return b(() => this.isBusy, [this]);
+  }
+  get isBusy() {
+    return this.state !== "isIdle";
+  }
+  onAsyncStart() {
+    this.isAsync = !0, this.updateState("isExecuting"), this.setPendingTimeout = window.setTimeout(
+      () => this.startPending(),
+      C.pending
+    );
+  }
+  async onSucceeded() {
+    await this.onDone();
+  }
+  async onFailed(t) {
+    this.error = t ?? new Error("Unknown error"), await this.onDone();
+  }
+  withFeedback(t) {
+    return this.showFeedback = t, this;
+  }
+  async startFailedFeedback() {
+    this.updateState("isFailed"), await v(C.failed), this.resetAfterDone();
+  }
+  async startSucceededFeedback() {
+    this.updateState("isSucceeded"), await v(C.succeeded), this.resetAfterDone();
+  }
+  resetAfterDone() {
+    this.updateState("isIdle"), this.isAsync = !1, this.error = void 0;
+  }
+  async onDone() {
+    this.setPendingTimeout && window.clearTimeout(this.setPendingTimeout), this.error ? await this.startFailedFeedback() : this.showFeedback !== !1 && (this.showFeedback || this.isAsync) ? await this.startSucceededFeedback() : this.resetAfterDone();
+  }
+  startPending() {
+    this.updateState("isPending");
+  }
+}
+const B = (n) => (...t) => {
+  const e = [...n], o = e.shift();
+  if (o) {
+    const s = o(...t), a = () => e.length === 0 ? s : B(e)(...t);
+    return s instanceof Promise ? s.then(a) : a();
+  }
+}, f = () => {
+}, J = (n, t = {}) => {
+  const {
+    onSync: e = f,
+    onAsync: o = f,
+    then: s = f,
+    catch: a = f,
+    finally: c = f
+  } = t;
+  try {
+    const i = n();
+    return i instanceof Promise ? (o(), i.then(s).catch(a).finally(c)) : (e(), s(i), c(), i);
+  } catch (i) {
+    e(), a(i), c();
+  }
+}, P = () => {
+};
+function K(n) {
+  var i, h, d;
+  if (n.needsConfirmation)
+    return n.confirmationModalController.open;
+  const t = (p) => typeof p == "string" ? n.getOverlayController(p) : p, {
+    action: e,
+    toggleOverlay: o,
+    closeOverlay: s,
+    openOverlay: a
+  } = n.actionProps;
+  return (e || (a ? (i = t(a)) == null ? void 0 : i.open : s ? (h = t(s)) == null ? void 0 : h.close : o ? (d = t(o)) == null ? void 0 : d.toggle : P)) ?? P;
+}
+class S {
+  constructor(t) {
+    r(this, "actions", []);
+    r(this, "baseAction");
+    this.baseAction = t;
+  }
+  addAction(t) {
+    this.actions.push(t);
+  }
+  async executeBatch(t) {
+    if (this.actions.length === 0)
+      return;
+    const e = this.actions[this.actions.length - 1].actionProps.showFeedback, o = this.baseAction.state.withFeedback(
+      this.baseAction.needsConfirmation ? !1 : e
+    ), s = this.actions.map((i) => K(i)), a = B(s);
+    let c;
+    if (await J(() => a(...t), {
+      onAsync: () => o.onAsyncStart(),
+      then: () => o.onSucceeded(),
+      catch: (i) => {
+        o.onFailed(i), c = i;
+      }
+    }), c)
+      throw c;
+  }
+}
+class Q {
+  constructor(t) {
+    r(this, "action");
+    r(this, "execute", (...t) => {
+      const e = this.getBatchedActions();
+      (async () => {
+        for (const s of e)
+          await s.executeBatch(t);
+      })().catch((s) => console.error(s));
+    });
+    r(this, "getBatchedActions", () => {
+      let t = this.action;
+      const e = [];
+      let o = new S(
+        this.action
+      ), s = 0;
+      for (; t; ) {
+        const { action: a, break: c, skip: i } = t.actionProps;
+        if (t.needsConfirmation) {
+          o.addAction(t);
+          break;
+        }
+        if (i) {
+          s = i === !0 ? 1 : i, t = t.parentAction;
+          continue;
+        }
+        if (s > 0) {
+          t = t.parentAction, s--;
+          continue;
+        }
+        if (c)
+          break;
+        a || (e.push(o), o = new S(this.action)), o.addAction(t), t = t.parentAction;
+      }
+      return e.push(o), e;
+    });
+    this.action = t;
+  }
+}
+class u {
+  constructor(t) {
+    r(this, "state");
+    r(this, "needsConfirmation");
+    r(this, "actionProps");
+    r(this, "parentAction");
+    r(this, "confirmationModalController");
+    r(this, "overlayContext");
+    r(this, "execute", (...t) => {
+      new Q(this).execute(...t);
+    });
+    const {
+      actionProps: e,
+      needsConfirmation: o,
+      parentAction: s,
+      overlayContext: a,
+      confirmationModalController: c,
+      state: i
+    } = t;
+    this.actionProps = e, this.parentAction = s, this.confirmationModalController = c, this.needsConfirmation = o, this.overlayContext = a, this.state = i;
+  }
+  static useNew(t, e = {}) {
+    const o = w(A), s = E(), a = D.useNew(), c = x.useNew();
+    return new u({
+      parentAction: o,
+      overlayContext: s,
+      confirmationModalController: a,
+      needsConfirmation: !1,
+      actionProps: t,
+      state: c,
+      ...e
+    });
+  }
+  static use() {
+    const t = w(A);
+    return T(!!t, "Action context is not defined"), G.useRegisterState(t.state), t;
+  }
+  static useConfirmationAction() {
+    const t = u.use();
+    return new u({
+      actionProps: t.actionProps,
+      confirmationModalController: t.confirmationModalController,
+      overlayContext: t.overlayContext,
+      state: t.state,
+      needsConfirmation: !1,
+      parentAction: u.useNew(
+        {
+          closeOverlay: t.confirmationModalController
+        },
+        {
+          parentAction: t.parentAction
+        }
+      )
+    });
+  }
+  getOverlayController(t) {
+    const e = (o) => o === void 0 ? void 0 : o ? this.overlayContext[t] : void 0;
+    return e(this.actionProps.openOverlay) ?? e(this.actionProps.closeOverlay) ?? e(this.actionProps.toggleOverlay);
+  }
+}
+const W = (n) => q()[n], y = (n) => W("Modal") === "actionConfirm" ? L(n) : void 0, m = (n) => {
+  const t = u.use(), e = t.state.useValue(), o = y(n) === "primary", s = t.confirmationModalController.useIsOpen();
+  return t.needsConfirmation && s && !o ? "isIdle" : e;
+}, F = {
+  onPress: l((n) => {
+    const t = u.use(), e = u.useConfirmationAction(), o = y(n) === "primary";
+    return y(n) === "abort" ? t.confirmationModalController.close : o ? e.execute : t.execute;
+  }),
+  isPending: l((n) => m(n) === "isPending"),
+  isSucceeded: l(
+    (n) => m(n) === "isSucceeded"
+  ),
+  isFailed: l((n) => m(n) === "isFailed"),
+  "aria-disabled": l((n) => {
+    const t = m(n), e = U().useIsBusy();
+    return t === "isExecuting" || e;
+  })
+}, ut = z("Action", (n) => {
+  const { children: t, actionModel: e, ...o } = n, s = u.useNew(o), a = e ?? s, c = {
+    Button: F,
+    Link: {
+      onPress: l(() => u.use().execute)
+    },
+    MenuItem: {
+      onAction: l(() => u.use().execute)
+    },
+    Modal: {
+      slot: l((i) => {
+        const { slot: h } = i, d = u.use();
+        return d.needsConfirmation = h === "actionConfirm", h;
+      }),
+      isDismissable: l((i) => {
+        const d = u.use().state.useValue();
+        return d === "isExecuting" || d === "isPending" ? !1 : i.isDismissable;
+      }),
+      controller: l(() => {
+        const i = u.use();
+        return i.needsConfirmation ? i.confirmationModalController : i.getOverlayController("Modal");
+      }),
+      ActionGroup: {
+        Button: F
+      }
+    }
+  };
+  return /* @__PURE__ */ g.createElement(H, { value: a }, /* @__PURE__ */ g.createElement(j, { props: c, mergeInParentContext: !0 }, t));
+});
+export {
+  ut as A,
+  u as a
+};

package/dist/js/Action.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { A as t } from "./Action-CiJBykBu.js";
+export {
+  t as Action,
+  t as default
+};

package/dist/js/ActionGroup-DqTdnFoM.js

@@ -0,0 +1,48 @@
+"use client"
+/* */
+import o from "react";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as w } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "remeda";
+import { d as n } from "./dynamic-ClpUSmEt.js";
+import e from "clsx";
+import { f as C } from "./flowComponent-E-Gp2Toe.js";
+import { TunnelProvider as G } from "@mittwald/react-tunnel";
+import { A as y, g as a } from "./getActionGroupSlot-BHzMGEA7.js";
+const x = "flow--action-group", A = "flow--action-group--primary", N = "flow--action-group--secondary", P = "flow--action-group--abort", k = "flow--action-group--action-group-container", v = "flow--action-group--ignore-breakpoint", B = "flow--action-group--s", E = "flow--action-group--m", t = {
+  actionGroup: x,
+  primary: A,
+  secondary: N,
+  abort: P,
+  actionGroupContainer: k,
+  ignoreBreakpoint: v,
+  s: B,
+  m: E
+}, F = C("ActionGroup", (i) => {
+  const {
+    children: c,
+    className: s,
+    refProp: p,
+    ignoreBreakpoint: m,
+    spacing: l = "s",
+    ...u
+  } = i, f = e(
+    t.actionGroupContainer,
+    s,
+    m && t.ignoreBreakpoint,
+    t[l]
+  ), g = {
+    Button: {
+      slot: n((r) => a(r)),
+      className: n((r) => {
+        const d = a(r);
+        return e(r.className, t[d]);
+      })
+    }
+  };
+  return /* @__PURE__ */ o.createElement(y, null, /* @__PURE__ */ o.createElement(w, { props: g, mergeInParentContext: !0 }, /* @__PURE__ */ o.createElement(G, null, /* @__PURE__ */ o.createElement("div", { ...u, className: f, ref: p }, /* @__PURE__ */ o.createElement("div", { className: t.actionGroup, role: "group" }, c)))));
+});
+export {
+  F as A
+};

package/dist/js/ActionGroup.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { A as r } from "./ActionGroup-DqTdnFoM.js";
+export {
+  r as ActionGroup,
+  r as default
+};

package/dist/js/Activity-CmfZpgOM.js

@@ -0,0 +1,28 @@
+"use client"
+/* */
+import n, { lazy as a, useState as m, useEffect as f, Suspense as v } from "react";
+import { useIsSSR as S } from "react-aria";
+const A = new Promise(
+  () => {
+  }
+), p = a(() => A), E = (c) => {
+  const { children: s, isActive: e = !0, inactiveDelay: t } = c, [o, i] = m(e), l = S();
+  f(() => {
+    if (t)
+      if (e)
+        i(!0);
+      else {
+        const u = setTimeout(() => {
+          i(!1);
+        }, t);
+        return () => {
+          clearTimeout(u);
+        };
+      }
+  }, [e, t]);
+  const r = t ? o : e;
+  return l ? r ? s : null : /* @__PURE__ */ n.createElement(v, { fallback: null }, s, !r && /* @__PURE__ */ n.createElement(p, null));
+};
+export {
+  E as A
+};

package/dist/js/Activity.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { A as a } from "./Activity-CmfZpgOM.js";
+export {
+  a as Activity,
+  a as default
+};

package/dist/js/Alert.js

@@ -0,0 +1,41 @@
+"use client"
+/* */
+import e from "react";
+import { C as f } from "./ClearPropsContext-CUvsbMn8.js";
+import { PropsContextProvider as p } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "./propsContext-DzAKlmhS.js";
+import "remeda";
+import { d } from "./dynamic-ClpUSmEt.js";
+import g from "clsx";
+import { A as w } from "./AlertIcon-4pw8iuBh.js";
+import { f as u } from "./flowComponent-E-Gp2Toe.js";
+const C = "flow--alert", h = "flow--alert--content", x = "flow--alert--info", E = "flow--alert--heading", N = "flow--alert--warning", A = "flow--alert--danger", P = "flow--alert--success", t = {
+  alert: C,
+  content: h,
+  info: x,
+  heading: E,
+  warning: N,
+  danger: A,
+  success: P
+}, k = u("Alert", (n) => {
+  const { children: r, className: s, status: o = "info", refProp: a, ...l } = n, c = g(t.alert, t[o], s), i = {
+    Heading: {
+      className: t.heading,
+      level: 3,
+      size: "s",
+      children: d((m) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(w, { status: o }), m.children))
+    },
+    Content: {
+      className: t.content,
+      Button: {
+        size: "s"
+      }
+    }
+  };
+  return /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement("aside", { ...l, className: c, ref: a }, /* @__PURE__ */ e.createElement(p, { props: i }, r)));
+});
+export {
+  k as Alert,
+  k as default
+};

package/dist/js/AlertBadge.js

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import e from "react";
+import m from "clsx";
+import { A as f } from "./AlertIcon-4pw8iuBh.js";
+import { T as i } from "./Text-CtABaZjp.js";
+import { C as d } from "./ClearPropsContext-CUvsbMn8.js";
+import "./propsContext-DzAKlmhS.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import { f as g } from "./flowComponent-E-Gp2Toe.js";
+const p = "flow--alert-badge", w = "flow--alert-badge--text", x = "flow--alert-badge--info", u = "flow--alert-badge--success", b = "flow--alert-badge--warning", B = "flow--alert-badge--danger", t = {
+  alertBadge: p,
+  text: w,
+  info: x,
+  success: u,
+  warning: b,
+  danger: B
+}, z = g("AlertBadge", (r) => {
+  const { children: o, className: s, status: a = "info", refProp: l, ...n } = r, c = m(t.alertBadge, t[a], s);
+  return /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement("div", { className: c, ...n, ref: l }, /* @__PURE__ */ e.createElement(f, { size: "s", className: t.alertIcon, status: a }), /* @__PURE__ */ e.createElement(i, { className: t.text }, o)));
+});
+export {
+  z as AlertBadge,
+  z as default
+};

package/dist/js/AlertIcon-4pw8iuBh.js

@@ -0,0 +1,47 @@
+"use client"
+/* */
+import n from "react";
+import "@tabler/icons-react";
+import "./Icon-C3JkDOTi.js";
+import { I as m } from "./IconDanger-m38r1QkL.js";
+import { I as f } from "./IconInfo-CmzJdfyz.js";
+import { I, a as u } from "./IconWarning-BSzhRWnw.js";
+import { useLocalizedStringFormatter as g } from "react-aria";
+import { C as p } from "./ClearPropsContext-CUvsbMn8.js";
+import "./propsContext-DzAKlmhS.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import w from "clsx";
+const S = { "de-DE": {
+  "alertIcon.danger": "Status Fehler",
+  "alertIcon.info": "Status Information",
+  "alertIcon.success": "Status Erfolg",
+  "alertIcon.warning": "Status Warnung"
+}, "en-EN": {
+  "alertIcon.danger": "Status error",
+  "alertIcon.info": "Status information",
+  "alertIcon.success": "Status success",
+  "alertIcon.warning": "Status warning"
+} }, d = "flow--alert-icon--info", E = "flow--alert-icon", C = "flow--alert-icon--warning", N = "flow--alert-icon--danger", x = "flow--alert-icon--success", t = {
+  info: d,
+  alertIcon: E,
+  warning: C,
+  danger: N,
+  success: x
+}, F = {
+  danger: m,
+  info: f,
+  success: I,
+  warning: u
+}, q = (r) => {
+  const { status: o = "info", className: a, ...s } = r, c = w(t.alertIcon, t[o], a), e = g(S), i = F[o], l = {
+    className: c,
+    "aria-label": e.format(`alertIcon.${o}`),
+    ...s
+  };
+  return /* @__PURE__ */ n.createElement(p, null, /* @__PURE__ */ n.createElement(i, { ...l }));
+};
+export {
+  q as A
+};

package/dist/js/AlertIcon.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { A as r } from "./AlertIcon-4pw8iuBh.js";
+export {
+  r as AlertIcon,
+  r as default
+};

package/dist/js/Avatar.js

@@ -0,0 +1,61 @@
+"use client"
+/* */
+import l, { isValidElement as p } from "react";
+import f from "clsx";
+import { C as v } from "./ClearPropsContext-CUvsbMn8.js";
+import { PropsContextProvider as w } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "./propsContext-DzAKlmhS.js";
+import "remeda";
+import { hash as u } from "object-code";
+import { deepForEach as C } from "react-children-utilities";
+import { f as z } from "./flowComponent-E-Gp2Toe.js";
+const d = "flow--avatar", h = "flow--avatar--icon", b = "flow--avatar--initials", g = "flow--avatar--blue", x = "flow--avatar--teal", E = "flow--avatar--green", N = "flow--avatar--violet", y = "flow--avatar--lilac", o = {
+  avatar: d,
+  icon: h,
+  initials: b,
+  "size-m": "flow--avatar--size-m",
+  "size-xs": "flow--avatar--size-xs",
+  "size-s": "flow--avatar--size-s",
+  "size-l": "flow--avatar--size-l",
+  blue: g,
+  teal: x,
+  green: E,
+  violet: N,
+  lilac: y
+}, P = (e) => {
+  const a = [];
+  C(e, (t) => {
+    p(t) ? a.push({
+      props: t.props,
+      type: t.type
+    }) : a.push(t);
+  });
+  const r = u(a), s = Math.abs(r % (i.length - 1));
+  return i[s];
+}, i = [
+  "blue",
+  "teal",
+  "green",
+  "violet",
+  "lilac"
+], q = z("Avatar", (e) => {
+  const { children: a, className: r, color: s, size: t = "m", refProp: n } = e, c = f(
+    o.avatar,
+    o[`size-${t}`],
+    r,
+    o[s ?? P(a)]
+  ), m = {
+    Initials: {
+      className: o.initials
+    },
+    Icon: {
+      className: o.icon
+    }
+  };
+  return /* @__PURE__ */ l.createElement(v, null, /* @__PURE__ */ l.createElement("div", { className: c, ref: n }, /* @__PURE__ */ l.createElement(w, { props: m }, a)));
+});
+export {
+  q as Avatar,
+  q as default
+};

package/dist/js/Badge-Bz0TmmU0.js

@@ -0,0 +1,94 @@
+"use client"
+/* */
+import o from "react";
+import g from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as f } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "remeda";
+import { f as u } from "./flowComponent-E-Gp2Toe.js";
+import { B as n } from "./Button-a4Hq_zmE.js";
+import "@tabler/icons-react";
+import "./Icon-C3JkDOTi.js";
+import { I as w } from "./IconClose-GXU9h7Kw.js";
+const v = "flow--badge", y = "flow--badge--content", N = "flow--badge--button", x = "flow--badge--close", B = "flow--badge--scope", C = "flow--badge--value", E = "flow--badge--neutral", T = "flow--badge--disabled", P = "flow--badge--blue", h = "flow--badge--navy", k = "flow--badge--violet", I = "flow--badge--teal", L = "flow--badge--lilac", z = "flow--badge--green", D = "flow--badge--orange", R = "flow--badge--red", j = "flow--badge--dark", q = "flow--badge--light", e = {
+  badge: v,
+  content: y,
+  button: N,
+  close: x,
+  scope: B,
+  value: C,
+  neutral: E,
+  disabled: T,
+  blue: P,
+  navy: h,
+  violet: k,
+  teal: I,
+  lilac: L,
+  green: z,
+  orange: D,
+  red: R,
+  dark: j,
+  light: q
+}, V = u("Badge", (r) => {
+  const {
+    children: l,
+    className: c,
+    color: d = "neutral",
+    refProp: m,
+    onPress: t,
+    onClose: s,
+    isDisabled: a,
+    ...b
+  } = r, i = g(
+    e.badge,
+    e[d],
+    a && e.disabled,
+    c
+  ), p = {
+    Label: {
+      elementType: "span",
+      className: e.scope,
+      unstyled: !0
+    },
+    Text: {
+      elementType: "span",
+      className: e.value
+    },
+    Button: {
+      Label: {
+        elementType: "span",
+        className: e.scope,
+        unstyled: !0
+      },
+      Text: {
+        elementType: "span",
+        className: e.value
+      }
+    }
+  };
+  return /* @__PURE__ */ o.createElement(f, { props: p }, /* @__PURE__ */ o.createElement("div", { className: i, ...b, ref: m }, !t && /* @__PURE__ */ o.createElement("div", { className: e.content }, l), t && /* @__PURE__ */ o.createElement(
+    n,
+    {
+      isDisabled: a,
+      unstyled: !0,
+      className: e.button,
+      onPress: t
+    },
+    l
+  ), s && /* @__PURE__ */ o.createElement(
+    n,
+    {
+      className: e.close,
+      size: "s",
+      color: "dark",
+      variant: "plain",
+      onPress: s,
+      isDisabled: a
+    },
+    /* @__PURE__ */ o.createElement(w, null)
+  )));
+});
+export {
+  V as B
+};

package/dist/js/Badge.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { B as e } from "./Badge-Bz0TmmU0.js";
+export {
+  e as Badge,
+  e as default
+};