@mittwald/flow-react-components 0.1.0-alpha.76 → 0.1.0-alpha.78

package/dist/{Action-DFbRza4T.js → Action-DdvvHPkT.js}

@@ -1,50 +1,50 @@
 "use client"
 /* */
 var S = Object.defineProperty;
-var b = (e, t, o) => t in e ? S(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var r = (e, t, o) => (b(e, typeof t != "symbol" ? t + "" : t, o), o);
-import A, { useRef as M } from "react";
+var A = (e, t, o) => t in e ? S(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var d = (e, t, o) => (A(e, typeof t != "symbol" ? t + "" : t, o), o);
+import b, { useRef as M } from "react";
 import "./propsContext-CauylOgH.js";
-import { P } from "./PropsContextProvider-DZvwqHLP.js";
+import { P as y } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
-import { u as C } from "./useProps-Dx3m8kCJ.js";
-import { u as F } from "./index-ViVxK7d1.js";
-import { makeObservable as k, observable as y, runInAction as x } from "mobx";
+import { u as P } from "./useProps-Dx3m8kCJ.js";
+import { u as C } from "./index-ViVxK7d1.js";
+import { makeObservable as F, observable as k, runInAction as x } from "mobx";
 import { u as I } from "./useSelector-DpU7_HMO.js";
 const v = () => {
 }, w = (e) => {
-  const t = F();
+  const t = C();
   return (e == null ? void 0 : e.type) === "function" ? e.fn : (e == null ? void 0 : e.type) === "toggleModal" ? t.toggle : (e == null ? void 0 : e.type) === "openModal" ? t.open : (e == null ? void 0 : e.type) === "closeModal" ? t.close : v;
-}, m = (e, t) => {
+}, g = (e, t) => {
   const o = [...t];
   let s;
   for (; o.length > 0; )
     if (s = o.shift(), s) {
       const i = s(...e);
       if (i instanceof Promise)
-        return i.then(() => m(e, o));
+        return i.then(() => g(e, o));
     }
 }, p = {
   pending: 1e3,
   succeeded: 1500,
   failed: 2e3
 };
-class h {
+class f {
   constructor(t = {}) {
-    r(this, "feedback");
-    r(this, "executionCount", 0);
-    r(this, "state", "isIdle");
+    d(this, "feedback");
+    d(this, "executionCount", 0);
+    d(this, "state", "isIdle");
     const { feedback: o = !1 } = t;
-    this.feedback = o, k(this, {
-      state: y
+    this.feedback = o, F(this, {
+      state: k
     });
   }
   static useNew(t) {
-    return M(new h(t)).current;
+    return M(new f(t)).current;
   }
-  onStart() {
+  onAsyncStart() {
     const t = ++this.executionCount;
     this.updateState("isExecuting"), setTimeout(() => this.startPending(t), p.pending);
   }
@@ -60,31 +60,34 @@ class h {
     });
   }
   startFailedFeedback() {
-    this.feedback && (this.updateState("isFailed"), setTimeout(() => this.updateState("isIdle"), p.failed));
+    this.updateState("isFailed"), setTimeout(() => this.updateState("isIdle"), p.failed);
   }
   startSucceededFeedback() {
-    this.feedback && (this.updateState("isSucceeded"), setTimeout(() => this.updateState("isIdle"), p.succeeded));
+    this.updateState("isSucceeded"), setTimeout(() => this.updateState("isIdle"), p.succeeded);
   }
   onDone(t) {
+    if (!this.feedback) {
+      this.updateState("isIdle");
+      return;
+    }
     t ? this.startSucceededFeedback() : this.startFailedFeedback();
   }
   startPending(t) {
-    this.state !== "isIdle" && t === this.executionCount && this.updateState("isPending");
+    this.state === "isExecuting" && t === this.executionCount && this.updateState("isPending");
   }
   useState() {
     return I(() => this.state, [this]);
   }
 }
 const W = (e, t) => {
-  const { action: o } = C("Action", {}), s = w(e), i = (...c) => m(c, [s, o]), n = h.useNew(t);
+  const { action: o } = P("Action", {}), s = w(e), i = (...c) => g(c, [s, o]), n = f.useNew(t);
   return {
     callAction: i,
     callActionWithStateHandling: (...c) => {
       try {
-        n.onStart();
         const a = i(...c);
         if (a instanceof Promise)
-          return a.then(() => n.onSucceeded()).catch(() => n.onFailed());
+          return n.onAsyncStart(), a.then(() => n.onSucceeded()).catch(() => n.onFailed());
         n.onSucceeded();
       } catch {
         n.onFailed();
@@ -93,25 +96,25 @@ const W = (e, t) => {
     state: n
   };
 };
-function f(e) {
+function h(e) {
   return typeof e == "boolean" ? void 0 : e;
 }
-const d = {
+const r = {
   fn: (e) => ({
     type: "function",
     fn: e
   }),
   openModal: (e) => ({
     type: "openModal",
-    controller: f(e)
+    controller: h(e)
   }),
   closeModal: (e) => ({
     type: "closeModal",
-    controller: f(e)
+    controller: h(e)
   }),
   toggleModal: (e) => ({
     type: "toggleModal",
-    controller: f(e)
+    controller: h(e)
   })
 }, G = (e) => {
   const {
@@ -121,9 +124,9 @@ const d = {
     toggleModal: i,
     openModal: n,
     closeModal: u
-  } = e, c = s ? d.fn(s) : i ? d.toggleModal(i) : n ? d.openModal(n) : u ? d.closeModal(u) : void 0, a = W(c, {
+  } = e, c = s ? r.fn(s) : i ? r.toggleModal(i) : n ? r.openModal(n) : u ? r.closeModal(u) : void 0, a = W(c, {
     feedback: o
-  }), l = a.state.useState(), g = {
+  }), l = a.state.useState(), m = {
     Button: {
       onPress: a.callActionWithStateHandling,
       isPending: l === "isPending",
@@ -135,11 +138,11 @@ const d = {
       action: a.callAction
     }
   };
-  return /* @__PURE__ */ A.createElement(
-    P,
+  return /* @__PURE__ */ b.createElement(
+    y,
     {
       mergeInParentContext: !0,
-      props: g,
+      props: m,
       dependencies: [l]
     },
     t

package/dist/Action.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { A as t } from "./Action-DFbRza4T.js";
+import { A as t } from "./Action-DdvvHPkT.js";
 export {
   t as Action,
   t as default

package/dist/Breadcrumb.js

@@ -1,35 +1,34 @@
 "use client"
 /* */
 import r from "react";
-import * as s from "react-aria-components";
+import * as m from "react-aria-components";
 import a from "clsx";
 import "@tabler/icons-react";
 import "./Icon-DdQwrIup.js";
-import { I as u } from "./IconChevronRight-Bsu-sUej.js";
+import { I as i } from "./IconChevronRight-Bsu-sUej.js";
 import "./propsContext-CauylOgH.js";
-import { P as d } from "./PropsContextProvider-DZvwqHLP.js";
+import { P as u } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "remeda";
-const p = "flow--breadcrumb", f = "flow--breadcrumb--link", c = {
-  breadcrumb: p,
-  link: f
-}, N = "flow--breadcrumb--breadcrumb-item", I = "flow--breadcrumb--breadcrumb-item--icon", m = {
-  breadcrumbItem: N,
-  icon: I
-}, h = (e) => {
-  const { children: t } = e, o = a(m.breadcrumbItem);
-  return /* @__PURE__ */ r.createElement(s.Breadcrumb, { className: o }, t, /* @__PURE__ */ r.createElement(u, { size: "s", className: m.icon }));
-}, R = (e) => {
-  const { children: t, className: o, ...n } = e, l = a(c.breadcrumb, o), b = {
+const d = "flow--breadcrumb", p = "flow--breadcrumb--link", f = "flow--breadcrumb--breadcrumb-item", N = "flow--breadcrumb--icon", e = {
+  breadcrumb: d,
+  link: p,
+  breadcrumbItem: f,
+  icon: N
+}, I = (t) => {
+  const { children: o } = t, c = a(e.breadcrumbItem);
+  return /* @__PURE__ */ r.createElement(m.Breadcrumb, { className: c }, o, /* @__PURE__ */ r.createElement(i, { size: "s", className: e.icon }));
+}, y = (t) => {
+  const { children: o, className: c, ...s } = t, n = a(e.breadcrumb, c), l = {
     Link: {
       unstyled: !0,
-      className: c.link,
-      hoc: (i) => /* @__PURE__ */ r.createElement(h, null, i)
+      className: e.link,
+      hoc: (b) => /* @__PURE__ */ r.createElement(I, null, b)
     }
   };
-  return /* @__PURE__ */ r.createElement(s.Breadcrumbs, { ...n, className: l }, /* @__PURE__ */ r.createElement(d, { props: b }, t));
+  return /* @__PURE__ */ r.createElement(m.Breadcrumbs, { ...s, className: n }, /* @__PURE__ */ r.createElement(u, { props: l }, o));
 };
 export {
-  R as Breadcrumb,
-  R as default
+  y as Breadcrumb,
+  y as default
 };

package/dist/{Button-BPCYuj3x.js → Button-D5_aNpTg.js}

@@ -17,18 +17,18 @@ import { f as h } from "./flowComponent-BuF0s2uG.js";
 import { L as A } from "./LoadingSpinner-DqsZ7IDL.js";
 import { useLocalizedStringFormatter as D } from "react-aria";
 import { useLiveRegion as T } from "@chakra-ui/live-region";
-const z = "flow--button", B = "flow--button--avatar", L = "flow--button--icon", k = "flow--button--text", R = "flow--button--content", K = "flow--button--state-icon", U = "flow--button--is-succeeded", W = "flow--button--is-failed", $ = "flow--button--is-pending", j = "flow--button--plain", q = "flow--button--primary", G = "flow--button--solid", H = "flow--button--aria-disabled", J = "flow--button--accent", M = "flow--button--danger", O = "flow--button--secondary", Q = "flow--button--soft", t = {
+const z = "flow--button", B = "flow--button--content", L = "flow--button--state-icon", k = "flow--button--avatar", R = "flow--button--icon", K = "flow--button--text", U = "flow--button--is-succeeded", W = "flow--button--is-failed", $ = "flow--button--is-pending", j = "flow--button--plain", q = "flow--button--primary", G = "flow--button--solid", H = "flow--button--aria-disabled", J = "flow--button--accent", M = "flow--button--danger", O = "flow--button--secondary", Q = "flow--button--soft", t = {
   button: z,
-  avatar: B,
-  icon: L,
-  text: k,
-  content: R,
-  stateIcon: K,
-  "size-s": "flow--button--size-s",
+  content: B,
+  stateIcon: L,
+  avatar: k,
+  icon: R,
+  text: K,
   isSucceeded: U,
   isFailed: W,
   isPending: $,
   plain: j,
+  "size-s": "flow--button--size-s",
   primary: q,
   solid: G,
   ariaDisabled: H,

package/dist/Button.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { B as o } from "./Button-BPCYuj3x.js";
+import { B as o } from "./Button-D5_aNpTg.js";
 export {
   o as Button,
   o as default

package/dist/ButtonGroup.js

@@ -1,27 +1,31 @@
 "use client"
 /* */
 import o from "react";
-import { C as c } from "./ClearPropsContext-CeCMjUK9.js";
-import { P as m } from "./PropsContextProvider-DZvwqHLP.js";
-import { u as l } from "./useProps-Dx3m8kCJ.js";
-import { d as i } from "./dynamic-ClpUSmEt.js";
-import d from "clsx";
+import { C as m } from "./ClearPropsContext-CeCMjUK9.js";
+import { P as l } from "./PropsContextProvider-DZvwqHLP.js";
+import { u as i } from "./useProps-Dx3m8kCJ.js";
+import { d as b } from "./dynamic-ClpUSmEt.js";
+import r from "clsx";
 import { f } from "./flowComponent-BuF0s2uG.js";
-const b = "flow--button-group--button-group-container", C = "flow--button-group", G = "flow--button-group--secondary", t = {
-  buttonGroupContainer: b,
+const d = "flow--button-group--button-group-container", C = "flow--button-group", G = "flow--button-group--button", y = "flow--button-group--secondary", t = {
+  buttonGroupContainer: d,
   buttonGroup: C,
-  secondary: G
-}, B = f("ButtonGroup", (r) => {
-  const { children: n, className: e, ...s } = l("ButtonGroup", r), a = d(t.buttonGroupContainer, e), u = {
+  button: G,
+  secondary: y
+}, E = f("ButtonGroup", (n) => {
+  const { children: e, className: s, ...u } = i("ButtonGroup", n), a = r(t.buttonGroupContainer, s), p = {
     Button: {
-      className: i(
-        (p) => p.variant === "secondary" ? t.secondary : void 0
+      className: b(
+        (c) => r(
+          t.button,
+          c.variant === "secondary" ? t.secondary : void 0
+        )
       )
     }
   };
-  return /* @__PURE__ */ o.createElement(c, null, /* @__PURE__ */ o.createElement("div", { ...s, className: a }, /* @__PURE__ */ o.createElement("div", { className: t.buttonGroup, role: "group" }, /* @__PURE__ */ o.createElement(m, { props: u }, n))));
+  return /* @__PURE__ */ o.createElement(m, null, /* @__PURE__ */ o.createElement("div", { ...u, className: a }, /* @__PURE__ */ o.createElement("div", { className: t.buttonGroup, role: "group" }, /* @__PURE__ */ o.createElement(l, { props: p }, e))));
 });
 export {
-  B as ButtonGroup,
-  B as default
+  E as ButtonGroup,
+  E as default
 };

package/dist/{CheckboxButton-BjHq5R2V.js → CheckboxButton-CPgQad5Z.js}

@@ -9,10 +9,10 @@ import "./propsContext-CauylOgH.js";
 import "remeda";
 import { C as b } from "./Checkbox-BoIUZoUj.js";
 import { f as x } from "./flowComponent-BuF0s2uG.js";
-const C = "flow--checkbox-button", f = "flow--checkbox-button--content", i = "flow--checkbox-button--label", o = {
+const C = "flow--checkbox-button", f = "flow--checkbox-button--label", i = "flow--checkbox-button--content", o = {
   checkboxButton: C,
-  content: f,
-  label: i
+  label: f,
+  content: i
 }, v = x("CheckboxButton", (e) => {
   const { children: c, className: n, ...r } = e, s = a(o.checkboxButton, n), l = {
     Text: {

package/dist/CheckboxButton.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { C as t } from "./CheckboxButton-BjHq5R2V.js";
+import { C as t } from "./CheckboxButton-CPgQad5Z.js";
 export {
   t as CheckboxButton,
   t as default

package/dist/CheckboxGroup.js

@@ -8,7 +8,7 @@ import { P as b } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "remeda";
 import { F as h } from "./FieldError-De8_olcs.js";
-import { C as E } from "./CheckboxButton-BjHq5R2V.js";
+import { C as E } from "./CheckboxButton-CPgQad5Z.js";
 import { TunnelProvider as k, TunnelExit as r } from "@mittwald/react-tunnel";
 import { s as o } from "./FormField.module-DHK6nIcD.js";
 import { C } from "./ColumnLayout-FMONjI17.js";

package/dist/CopyButton.js

@@ -2,7 +2,7 @@
 /* */
 import o from "react";
 import a from "copy-to-clipboard";
-import { B as i } from "./Button-BPCYuj3x.js";
+import { B as i } from "./Button-D5_aNpTg.js";
 import "@tabler/icons-react";
 import "./Icon-DdQwrIup.js";
 import { I as c } from "./IconCopy-D40P_nc1.js";
@@ -15,7 +15,7 @@ import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
 import { f as C } from "./flowComponent-BuF0s2uG.js";
-import { A as E } from "./Action-DFbRza4T.js";
+import { A as E } from "./Action-DdvvHPkT.js";
 const B = {
   "de-DE": {
     "copyButton.copy": "Kopieren"

package/dist/HeaderNavigation.js

@@ -8,10 +8,10 @@ import "remeda";
 import { d } from "./dynamic-ClpUSmEt.js";
 import v from "clsx";
 import { E as p } from "./EmulatedBoldText-Dtox8Wd1.js";
-const u = "flow--header-navigation", h = "flow--header-navigation--button", f = "flow--header-navigation--link", g = "flow--header-navigation--inverse", n = {
+const u = "flow--header-navigation", h = "flow--header-navigation--link", f = "flow--header-navigation--button", g = "flow--header-navigation--inverse", n = {
   headerNavigation: u,
-  button: h,
-  link: f,
+  link: h,
+  button: f,
   inverse: g
 }, P = (o) => {
   const { children: a, className: r, inverse: i, ...l } = o, s = v(

package/dist/IllustratedMessage.js

@@ -1,7 +1,7 @@
 "use client"
 /* */
 import t from "react";
-import c from "clsx";
+import s from "clsx";
 import "./propsContext-CauylOgH.js";
 import { P as m } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
@@ -14,12 +14,8 @@ const d = "flow--illustrated-message--illustrated-message-container", g = "flow-
   text: p,
   button: x,
   negative: v
-}, E = (s) => {
-  const { className: a, children: l, variant: o = "info", ...n } = s, i = c(
-    e.illustratedMessageContainer,
-    e[o],
-    a
-  ), r = {
+}, E = (a) => {
+  const { className: l, children: o, variant: n = "info", ...i } = a, r = s(e.illustratedMessageContainer, l), c = {
     Icon: {
       className: e.icon,
       size: "l"
@@ -35,7 +31,7 @@ const d = "flow--illustrated-message--illustrated-message-container", g = "flow-
       variant: "accent"
     }
   };
-  return /* @__PURE__ */ t.createElement("div", { ...n, className: i }, /* @__PURE__ */ t.createElement("div", { className: e.illustratedMessage }, /* @__PURE__ */ t.createElement(m, { props: r }, l)));
+  return /* @__PURE__ */ t.createElement("div", { ...i, className: r }, /* @__PURE__ */ t.createElement("div", { className: s(e.illustratedMessage, e[n]) }, /* @__PURE__ */ t.createElement(m, { props: c }, o)));
 };
 export {
   E as IllustratedMessage,

package/dist/InlineAlert.js

@@ -9,11 +9,11 @@ import "remeda";
 import p from "clsx";
 import { S as u } from "./StatusIcon-BTL-kqaV.js";
 import { f as d } from "./flowComponent-BuF0s2uG.js";
-const w = "flow--inline-alert", g = "flow--inline-alert--content", C = "flow--inline-alert--status-icon", I = "flow--inline-alert--heading", N = "flow--inline-alert--info", h = "flow--inline-alert--warning", x = "flow--inline-alert--danger", A = "flow--inline-alert--success", n = {
+const w = "flow--inline-alert", g = "flow--inline-alert--status-icon", C = "flow--inline-alert--heading", I = "flow--inline-alert--content", N = "flow--inline-alert--info", h = "flow--inline-alert--warning", x = "flow--inline-alert--danger", A = "flow--inline-alert--success", n = {
   inlineAlert: w,
-  content: g,
-  statusIcon: C,
-  heading: I,
+  statusIcon: g,
+  heading: C,
+  content: I,
   info: N,
   warning: h,
   danger: x,

package/dist/List.js

@@ -12,7 +12,7 @@ import { T as b } from "./Text-CBzyk1oM.js";
 import "@tabler/icons-react";
 import "./Icon-DdQwrIup.js";
 import { I as $ } from "./IconChevronDown-a_vSoTxH.js";
-import { B as h } from "./Button-BPCYuj3x.js";
+import { B as h } from "./Button-D5_aNpTg.js";
 import { useMessageFormatter as H, useLocalizedStringFormatter as q } from "react-aria";
 import K from "clsx";
 import { I as rt } from "./IconClose-BcM-VKmn.js";

package/dist/Modal.js

@@ -10,12 +10,12 @@ import "@react-aria/utils";
 import "remeda";
 import { TunnelProvider as y, TunnelExit as x } from "@mittwald/react-tunnel";
 import { u as z, a as E } from "./index-ViVxK7d1.js";
-const b = "flow--modal", T = "flow--modal--dialog", N = "flow--modal--overlay", P = "flow--modal--button-group", G = "flow--modal--content", I = "flow--modal--off-canvas", t = {
-  modal: b,
-  "modal-zoom": "flow--modal--modal-zoom",
-  dialog: T,
-  overlay: N,
+const b = "flow--modal--overlay", T = "flow--modal", N = "flow--modal--dialog", P = "flow--modal--button-group", G = "flow--modal--content", I = "flow--modal--off-canvas", t = {
+  overlay: b,
   "modal-fade": "flow--modal--modal-fade",
+  modal: T,
+  "modal-zoom": "flow--modal--modal-zoom",
+  dialog: N,
   buttonGroup: P,
   content: G,
   "size-s": "flow--modal--size-s",

package/dist/NumberField.js

@@ -10,7 +10,7 @@ import "@react-aria/utils";
 import "./propsContext-CauylOgH.js";
 import "remeda";
 import { F as I } from "./FieldError-De8_olcs.js";
-import { B as a } from "./Button-BPCYuj3x.js";
+import { B as a } from "./Button-D5_aNpTg.js";
 import "@tabler/icons-react";
 import "./Icon-DdQwrIup.js";
 import { I as C } from "./IconChevronDown-a_vSoTxH.js";

package/dist/ProgressBar.js

@@ -13,8 +13,8 @@ const N = "flow--progress-bar", v = "flow--progress-bar--label", B = "flow--prog
   label: v,
   value: B,
   bar: E,
-  "size-s": "flow--progress-bar--size-s",
   fill: P,
+  "size-s": "flow--progress-bar--size-s",
   info: z,
   success: V,
   danger: h,

package/dist/Tabs.js

@@ -9,7 +9,7 @@ import { f as S } from "./flowComponent-BuF0s2uG.js";
 import { useCallbackRef as B } from "use-callback-ref";
 import { C as K } from "./ContextMenu-DJ4VRDCG.js";
 import { M as L } from "./MenuItem-DbXZNJo6.js";
-import { B as F } from "./Button-BPCYuj3x.js";
+import { B as F } from "./Button-D5_aNpTg.js";
 import "@tabler/icons-react";
 import "./Icon-DdQwrIup.js";
 import { I as A } from "./IconContextMenu-bD7n5nvt.js";