@mittwald/flow-react-components 0.1.0-alpha.13 → 0.1.0-alpha.131

package/dist/Accordion-BzgwSHYE.js

@@ -0,0 +1,77 @@
+"use client"
+/* */
+import e, { useState as E, useId as a } from "react";
+import I from "clsx";
+import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import { P as N } from "./PropsContextProvider-B7e3QrmR.js";
+import "@react-aria/utils";
+import "remeda";
+import { d } from "./dynamic-ClpUSmEt.js";
+import { B as w } from "./Button-DAoWF37n.js";
+import "@tabler/icons-react";
+import "./Icon-DdmDlHdu.js";
+import { I as y } from "./IconChevronDown-1Ln2Aunx.js";
+import { TunnelProvider as B, TunnelExit as C } from "@mittwald/react-tunnel";
+import { A as P } from "./Activity-CmfZpgOM.js";
+const A = "flow--accordion", b = "flow--accordion--header", g = "flow--accordion--header-button", D = "flow--accordion--content", T = "flow--accordion--content-inner", H = "flow--accordion--chevron", L = "flow--accordion--expanded", n = {
+  accordion: A,
+  header: b,
+  headerButton: g,
+  content: D,
+  contentInner: T,
+  chevron: H,
+  expanded: L
+}, U = (s) => {
+  const { children: i, className: l, defaultExpanded: m = !1, ...p } = s, [t, h] = E(m), f = I(
+    n.accordion,
+    t && n.expanded,
+    l
+  ), u = a(), r = a(), c = (o) => /* @__PURE__ */ e.createElement(
+    w,
+    {
+      unstyled: !0,
+      "aria-expanded": t,
+      className: n.headerButton,
+      onPress: () => h((v) => !v),
+      "aria-controls": r
+    },
+    o,
+    /* @__PURE__ */ e.createElement(y, { className: n.chevron })
+  ), x = {
+    Content: {
+      className: n.contentInner,
+      tunnelId: "content"
+    },
+    Heading: {
+      className: n.header,
+      level: 4,
+      children: d((o) => c(o.children))
+    },
+    Label: {
+      className: n.header,
+      children: d((o) => c(o.children))
+    }
+  };
+  return /* @__PURE__ */ e.createElement("div", { ...p, className: f }, /* @__PURE__ */ e.createElement(
+    N,
+    {
+      mergeInParentContext: !0,
+      props: x,
+      dependencies: [t]
+    },
+    /* @__PURE__ */ e.createElement(B, null, i, /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        "aria-labelledby": u,
+        id: r,
+        role: "region",
+        hidden: !t,
+        className: n.content
+      },
+      /* @__PURE__ */ e.createElement(P, { isActive: t, inactiveDelay: 1e3 }, /* @__PURE__ */ e.createElement(C, { id: "content" }))
+    ))
+  ));
+};
+export {
+  U as A
+};

package/dist/Accordion.js

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

package/dist/Action-COYULIMl.js

@@ -0,0 +1,307 @@
+"use client"
+/* */
+var P = Object.defineProperty;
+var F = (o, t, e) => t in o ? P(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var r = (o, t, e) => (F(o, typeof t != "symbol" ? t + "" : t, e), e);
+import a, { useRef as S, useContext as p } from "react";
+import { makeObservable as k, observable as B, action as O, computed as I } from "mobx";
+import { u as A } from "./useOverlayController-CGKumeGL.js";
+import M from "invariant";
+import { a as C, A as x } from "./context-D_-mRqs8.js";
+import { u as y } from "./useSelector-DpU7_HMO.js";
+import { a as D, u as T } from "./ActionStateContext-C_nPivaA.js";
+import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import { P as v } from "./PropsContextProvider-B7e3QrmR.js";
+import "@react-aria/utils";
+import "remeda";
+import { g as N } from "./getActionGroupSlot-B4Vu4Kix.js";
+const b = (o) => new Promise((t) => setTimeout(t, o)), m = {
+  pending: 1e3,
+  succeeded: 1500,
+  failed: 2e3
+};
+class f {
+  constructor() {
+    r(this, "showFeedback");
+    r(this, "state", "isIdle");
+    r(this, "setPendingTimeout");
+    r(this, "error");
+    r(this, "isAsync", !1);
+    k(this, {
+      state: B,
+      updateState: O,
+      isBusy: I
+    });
+  }
+  static useNew() {
+    return S(new f()).current;
+  }
+  updateState(t) {
+    this.state = t;
+  }
+  useValue() {
+    return y(() => this.state, [this]);
+  }
+  useIsBusy() {
+    return y(() => this.isBusy, [this]);
+  }
+  get isBusy() {
+    return this.state === "isExecuting" || this.state === "isPending";
+  }
+  onAsyncStart() {
+    this.isAsync = !0, this.updateState("isExecuting"), this.setPendingTimeout = window.setTimeout(
+      () => this.startPending(),
+      m.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 b(m.failed), this.resetAfterDone();
+  }
+  async startSucceededFeedback() {
+    this.updateState("isSucceeded"), await b(m.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 E = (o) => (...t) => {
+  const e = [...o], n = e.shift();
+  if (n) {
+    const s = n(...t), i = () => e.length === 0 ? s : E(e)(...t);
+    return s instanceof Promise ? s.then(i) : i();
+  }
+}, d = () => {
+}, R = (o, t = {}) => {
+  const {
+    onSync: e = d,
+    onAsync: n = d,
+    then: s = d,
+    catch: i = d,
+    finally: l = d
+  } = t;
+  try {
+    const c = o();
+    return c instanceof Promise ? (n(), c.then(s).catch(i).finally(l)) : (e(), s(c), l(), c);
+  } catch (c) {
+    e(), i(c), l();
+  }
+}, V = () => {
+};
+function $(o) {
+  if (o.needsConfirmation)
+    return o.confirmationModalController.open;
+  const t = o.getOverlayController(), {
+    action: e,
+    toggleOverlay: n,
+    closeOverlay: s,
+    openOverlay: i
+  } = o.actionProps;
+  return e || (i && t ? t.open : s && t || n && t ? t.close : V);
+}
+class g {
+  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, n = this.baseAction.state.withFeedback(
+      this.baseAction.needsConfirmation ? !1 : e
+    ), s = this.actions.map((c) => $(c)), i = E(s);
+    let l;
+    if (await R(() => i(...t), {
+      onAsync: () => n.onAsyncStart(),
+      then: () => n.onSucceeded(),
+      catch: (c) => {
+        n.onFailed(c), l = c;
+      }
+    }), l)
+      throw l;
+  }
+}
+class G {
+  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 n = new g(
+        this.action
+      ), s = 0;
+      for (; t; ) {
+        const { action: i, break: l, skip: c } = t.actionProps;
+        if (t.needsConfirmation) {
+          n.addAction(t);
+          break;
+        }
+        if (c) {
+          s = c === !0 ? 1 : c, t = t.parentAction;
+          continue;
+        }
+        if (s > 0) {
+          t = t.parentAction, s--;
+          continue;
+        }
+        if (l)
+          break;
+        i || (e.push(n), n = new g(this.action)), n.addAction(t), t = t.parentAction;
+      }
+      return e.push(n), 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, "overlayController");
+    r(this, "execute", (...t) => {
+      new G(this).execute(...t);
+    });
+    const {
+      actionProps: e,
+      needsConfirmation: n,
+      parentAction: s,
+      overlayController: i,
+      confirmationModalController: l,
+      state: c
+    } = t;
+    this.actionProps = e, this.parentAction = s, this.confirmationModalController = l, this.needsConfirmation = n, this.overlayController = i, this.state = c;
+  }
+  static useNew(t, e = {}) {
+    const n = p(C), s = A(), i = A(), l = f.useNew();
+    return new u({
+      parentAction: n,
+      overlayController: s,
+      confirmationModalController: i,
+      needsConfirmation: !1,
+      actionProps: t,
+      state: l,
+      ...e
+    });
+  }
+  static use() {
+    const t = p(C);
+    return M(!!t, "Action context is not defined"), D.useRegisterState(t.state), t;
+  }
+  static useConfirmationAction() {
+    const t = u.use();
+    return new u({
+      actionProps: t.actionProps,
+      confirmationModalController: t.confirmationModalController,
+      overlayController: t.overlayController,
+      state: t.state,
+      needsConfirmation: !1,
+      parentAction: u.useNew(
+        {
+          closeOverlay: !0
+        },
+        {
+          parentAction: t.parentAction
+        }
+      )
+    });
+  }
+  getOverlayController() {
+    const t = (e) => e === void 0 ? void 0 : e === !0 ? this.overlayController : e === !1 ? void 0 : e;
+    return t(this.actionProps.openOverlay) ?? t(this.actionProps.closeOverlay) ?? t(this.actionProps.toggleOverlay);
+  }
+}
+const L = (o, t) => {
+  const e = u.use();
+  e.needsConfirmation = t.slot === "actionConfirm";
+  const n = e.state.useIsBusy(), s = e.needsConfirmation ? e.confirmationModalController : e.getOverlayController(), i = n ? !1 : t.isDismissable;
+  return /* @__PURE__ */ a.createElement(
+    o,
+    {
+      ...t,
+      isDismissable: i,
+      controller: s ?? t.controller
+    },
+    t.children
+  );
+}, U = (o, t) => {
+  const e = u.use(), n = e.state.useValue(), s = T().useIsBusy();
+  return e.confirmationModalController.useIsOpen() && e.needsConfirmation ? /* @__PURE__ */ a.createElement(o, { ...t, onPress: e.execute }) : /* @__PURE__ */ a.createElement(
+    o,
+    {
+      onPress: e.execute,
+      isPending: n === "isPending",
+      "aria-disabled": n === "isExecuting" || s,
+      isSucceeded: n === "isSucceeded",
+      isFailed: n === "isFailed",
+      ...t
+    }
+  );
+}, j = (o, t) => {
+  const e = u.use(), n = e.state.useValue();
+  return e.needsConfirmation ? /* @__PURE__ */ a.createElement(o, { ...t, onPress: e.execute }) : /* @__PURE__ */ a.createElement(
+    o,
+    {
+      ...t,
+      onPress: e.execute,
+      "aria-disabled": n !== "isIdle"
+    }
+  );
+}, h = (o) => /* @__PURE__ */ a.createElement(
+  v,
+  {
+    props: {
+      Button: { render: U },
+      Link: {
+        render: j
+      }
+    },
+    mergeInParentContext: !0
+  },
+  o.children
+), q = (o, t) => {
+  const e = u.useConfirmationAction(), n = N(t), s = n === "abort";
+  return !(n === "primary") && !s ? /* @__PURE__ */ a.createElement(h, null, /* @__PURE__ */ a.createElement(o, { ...t })) : s ? /* @__PURE__ */ a.createElement(h, null, /* @__PURE__ */ a.createElement(w, { break: !0 }, /* @__PURE__ */ a.createElement(w, { closeOverlay: !0 }, /* @__PURE__ */ a.createElement(o, { ...t, slot: n })))) : /* @__PURE__ */ a.createElement(h, null, /* @__PURE__ */ a.createElement(x, { value: e }, /* @__PURE__ */ a.createElement(o, { ...t, slot: n })));
+}, w = (o) => {
+  const { children: t, ...e } = o, n = u.useNew(e), s = {
+    Modal: {
+      render: L,
+      ActionGroup: {
+        Button: {
+          render: q
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ a.createElement(x, { value: n }, /* @__PURE__ */ a.createElement(h, null, /* @__PURE__ */ a.createElement(v, { props: s, mergeInParentContext: !0 }, t)));
+};
+export {
+  w as A
+};

package/dist/Action.js

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

package/dist/ActionGroup.js

@@ -0,0 +1,38 @@
+"use client"
+/* */
+import o from "react";
+import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import { P as E } from "./PropsContextProvider-B7e3QrmR.js";
+import "@react-aria/utils";
+import "remeda";
+import { d as g } from "./dynamic-ClpUSmEt.js";
+import c from "clsx";
+import { f as C } from "./flowComponent-CpHt0lsO.js";
+import { TunnelProvider as G, TunnelExit as n } from "@mittwald/react-tunnel";
+import { A as N } from "./ActionStateContext-C_nPivaA.js";
+import { g as i } from "./getActionGroupSlot-B4Vu4Kix.js";
+const v = "flow--action-group--action-group-container", x = "flow--action-group", w = "flow--action-group--primary", A = "flow--action-group--secondary", P = "flow--action-group--abort", t = {
+  actionGroupContainer: v,
+  actionGroup: x,
+  primary: w,
+  secondary: A,
+  abort: P
+}, D = C("ActionGroup", (s) => {
+  const { children: m, className: l, refProp: p, ...u } = s, d = c(t.actionGroupContainer, l), f = {
+    Button: {
+      render: (r, e) => {
+        const a = i(e), y = c(
+          e.className,
+          a !== "secondary" ? t[a] : void 0
+        );
+        return /* @__PURE__ */ o.createElement(r, { ...e, className: y });
+      },
+      tunnelId: g((r) => i(r))
+    }
+  };
+  return /* @__PURE__ */ o.createElement(N, null, /* @__PURE__ */ o.createElement(E, { props: f, mergeInParentContext: !0 }, /* @__PURE__ */ o.createElement(G, null, /* @__PURE__ */ o.createElement("div", { ...u, className: d, ref: p }, /* @__PURE__ */ o.createElement("div", { className: t.actionGroup, role: "group" }, m, /* @__PURE__ */ o.createElement(n, { id: "primary" }), /* @__PURE__ */ o.createElement("div", { className: t.secondary }, /* @__PURE__ */ o.createElement(n, { id: "secondary" })), /* @__PURE__ */ o.createElement(n, { id: "abort" }))))));
+});
+export {
+  D as ActionGroup,
+  D as default
+};

package/dist/ActionStateContext-C_nPivaA.js

@@ -0,0 +1,55 @@
+"use client"
+/* */
+var n = Object.defineProperty;
+var i = (s, t, e) => t in s ? n(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var a = (s, t, e) => (i(s, typeof t != "symbol" ? t + "" : t, e), e);
+import c, { createContext as d, useRef as m, useEffect as S, useContext as f } from "react";
+import { makeObservable as l, observable as v, action as o, computed as h } from "mobx";
+import { u as w } from "./useSelector-DpU7_HMO.js";
+class r {
+  constructor() {
+    a(this, "states", /* @__PURE__ */ new Set());
+    l(this, {
+      states: v,
+      addState: o,
+      removeState: o,
+      isBusy: h
+    });
+  }
+  static useNew() {
+    return m(new r()).current;
+  }
+  static useRegisterState(t) {
+    const e = p();
+    S(() => (e == null || e.addState(t), () => {
+      e == null || e.removeState(t);
+    }), [e, t]);
+  }
+  addState(t) {
+    this.states.add(t);
+  }
+  removeState(t) {
+    this.states.delete(t);
+  }
+  useIsBusy() {
+    return w(() => this.isBusy, [this.states.size]);
+  }
+  get isBusy() {
+    for (const t of this.states)
+      if (t.isBusy)
+        return !0;
+    return !1;
+  }
+}
+const u = d(void 0), b = (s) => {
+  const { children: t } = s, e = r.useNew();
+  return /* @__PURE__ */ c.createElement(u.Provider, { value: e }, t);
+}, p = () => {
+  const s = r.useNew();
+  return f(u) ?? s;
+};
+export {
+  b as A,
+  r as a,
+  p as u
+};

package/dist/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/Avatar.js

@@ -1,25 +1,54 @@
 "use client"
 /* */
-import s from "react";
-import { c as n } from "./clsx-DB4S2d7J.js";
-import "./propsContext-Dx7WKmmM.js";
-import { P as c } from "./PropsContextProvider-CEoxD8yK.js";
+import i, { isValidElement as p } from "react";
+import v from "clsx";
+import { C as c } from "./ClearPropsContext-mes1t7Bj.js";
+import { P as f } from "./PropsContextProvider-B7e3QrmR.js";
 import "@react-aria/utils";
-const m = "flow--avatar", p = "flow--avatar--initials", a = {
-  avatar: m,
-  initials: p,
-  "size-s": "flow--avatar--size-s",
+import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import "remeda";
+import { hash as w } from "object-code";
+import { deepForEach as z } from "react-children-utilities";
+import { f as d } from "./flowComponent-CpHt0lsO.js";
+const C = "flow--avatar", h = "flow--avatar--icon", x = "flow--avatar--initials", r = {
+  avatar: C,
+  icon: h,
+  initials: x,
   "size-m": "flow--avatar--size-m",
-  "size-l": "flow--avatar--size-l"
-}, x = (t) => {
-  const { children: i, className: e, size: o = "s" } = t, r = n(a.avatar, a[`size-${o}`], e), l = {
+  "size-xs": "flow--avatar--size-xs",
+  "size-s": "flow--avatar--size-s",
+  "size-l": "flow--avatar--size-l",
+  "variant-1": "flow--avatar--variant-1",
+  "variant-2": "flow--avatar--variant-2",
+  "variant-3": "flow--avatar--variant-3",
+  "variant-4": "flow--avatar--variant-4"
+}, u = (o) => {
+  const a = [];
+  z(o, (t) => {
+    p(t) ? a.push({
+      props: t.props,
+      type: t.type
+    }) : a.push(t);
+  });
+  const s = w(a);
+  return Math.abs(s % 4) + 1;
+}, $ = d("Avatar", (o) => {
+  const { children: a, className: s, variant: t, size: e = "m", refProp: n } = o, l = v(
+    r.avatar,
+    r[`size-${e}`],
+    s,
+    r[`variant-${t ?? u(a)}`]
+  ), m = {
     Initials: {
-      className: a.initials
+      className: r.initials
+    },
+    Icon: {
+      className: r.icon
     }
   };
-  return /* @__PURE__ */ s.createElement("div", { className: r }, /* @__PURE__ */ s.createElement(c, { props: l }, i));
-};
+  return /* @__PURE__ */ i.createElement(c, null, /* @__PURE__ */ i.createElement("div", { className: l, ref: n }, /* @__PURE__ */ i.createElement(f, { props: m }, a)));
+});
 export {
-  x as Avatar,
-  x as default
+  $ as Avatar,
+  $ as default
 };

package/dist/Breadcrumb.js

@@ -0,0 +1,34 @@
+"use client"
+/* */
+import r from "react";
+import * as m from "react-aria-components";
+import a from "clsx";
+import "@tabler/icons-react";
+import "./Icon-DdmDlHdu.js";
+import { I as u } from "./IconChevronRight-CAcIYBGT.js";
+import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import { P as p } from "./PropsContextProvider-B7e3QrmR.js";
+import "@react-aria/utils";
+import "remeda";
+const f = "flow--breadcrumb", k = "flow--breadcrumb--link", h = "flow--breadcrumb--breadcrumb-item", N = "flow--breadcrumb--icon", w = "flow--breadcrumb--dark", E = "flow--breadcrumb--light", e = {
+  breadcrumb: f,
+  link: k,
+  breadcrumbItem: h,
+  icon: N,
+  dark: w,
+  light: E
+}, I = (t) => {
+  const { children: o } = t, c = a(e.breadcrumbItem);
+  return /* @__PURE__ */ r.createElement(m.Breadcrumb, { className: c }, o, /* @__PURE__ */ r.createElement(u, { size: "s", className: e.icon }));
+}, A = (t) => {
+  const { children: o, className: c, color: s = "primary", ...n } = t, l = a(e.breadcrumb, e[s], c), b = {
+    Link: {
+      render: (i, d) => /* @__PURE__ */ r.createElement(I, null, /* @__PURE__ */ r.createElement(i, { ...d, unstyled: !0, className: e.link }))
+    }
+  };
+  return /* @__PURE__ */ r.createElement(m.Breadcrumbs, { ...n, className: l }, /* @__PURE__ */ r.createElement(p, { props: b }, o));
+};
+export {
+  A as Breadcrumb,
+  A as default
+};