@mittwald/flow-react-components 0.1.0-alpha.100 → 0.1.0-alpha.102

package/dist/Accordion-DUOvbD7N.js

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

package/dist/Accordion.js

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

package/dist/Button-DNeV_sZ5.js

@@ -0,0 +1,117 @@
+"use client"
+/* */
+import n, { useEffect as F } from "react";
+import * as E from "react-aria-components";
+import y from "clsx";
+import { C } from "./ClearPropsContext-CeCMjUK9.js";
+import { P as I } from "./PropsContextProvider-DZvwqHLP.js";
+import "@react-aria/utils";
+import "./propsContext-CauylOgH.js";
+import "remeda";
+import "@tabler/icons-react";
+import "./Icon-DXXYYNLl.js";
+import { I as N, a as h } from "./IconSucceeded-DQfjj1t4.js";
+import { W as u } from "./Wrap-DGT1h1o3.js";
+import { T as A } from "./Text-DdC3zDyH.js";
+import { f as D } from "./flowComponent-CEBe_ATh.js";
+import { L as T } from "./LoadingSpinner-BmvbSvoO.js";
+import { useLocalizedStringFormatter as z } from "react-aria";
+import { useLiveRegion as B } from "@chakra-ui/live-region";
+const L = "flow--button", k = "flow--button--content", R = "flow--button--state-icon", K = "flow--button--avatar", U = "flow--button--icon", W = "flow--button--text", $ = "flow--button--is-succeeded", j = "flow--button--is-failed", q = "flow--button--is-pending", G = "flow--button--plain", H = "flow--button--primary", J = "flow--button--solid", M = "flow--button--aria-disabled", O = "flow--button--accent", Q = "flow--button--danger", V = "flow--button--secondary", X = "flow--button--soft", Y = "flow--button--inverse", t = {
+  button: L,
+  content: k,
+  stateIcon: R,
+  avatar: K,
+  icon: U,
+  text: W,
+  isSucceeded: $,
+  isFailed: j,
+  isPending: q,
+  plain: G,
+  "size-s": "flow--button--size-s",
+  primary: H,
+  solid: J,
+  ariaDisabled: M,
+  accent: O,
+  danger: Q,
+  secondary: V,
+  soft: X,
+  inverse: Y
+}, Z = {
+  "de-DE": {
+    "action.isFailed": "Fehlgeschlagen",
+    "action.isPending": "Ausstehend...",
+    "action.isSucceeded": "Erfolgreich"
+  },
+  "en-EN": {
+    "action.isFailed": "Failed",
+    "action.isPending": "Pending...",
+    "action.isSucceeded": "Succeeded"
+  }
+}, _ = (e, r = {}) => {
+  const i = z(Z), {
+    isPendingText: a = i.format("action.isPending"),
+    isSucceededText: c = i.format("action.isSucceeded"),
+    isFailedText: s = i.format("action.isFailed")
+  } = r, o = B({
+    "aria-live": "polite",
+    "aria-atomic": !1,
+    "aria-relevant": "text additions",
+    role: "status"
+  });
+  F(() => {
+    e === "isPending" ? o.speak(a) : e === "isSucceeded" ? o.speak(c) : e === "isFailed" && o.speak(s);
+  }, [e]);
+}, ee = (e) => ((e.isPending || e.isSucceeded || e.isFailed || e["aria-disabled"]) && (e = { ...e }, e.onPress = void 0, e.onPressStart = void 0, e.onPressEnd = void 0, e.onPressChange = void 0, e.onPressUp = void 0, e.onKeyDown = void 0, e.onKeyUp = void 0), e), Pe = D("Button", (e) => {
+  e = ee(e);
+  const {
+    color: r = "primary",
+    variant: i = "solid",
+    children: a,
+    className: c,
+    size: s = "m",
+    isPending: o,
+    isSucceeded: d,
+    isFailed: l,
+    "aria-disabled": b,
+    ref: g,
+    inverse: v,
+    unstyled: m,
+    ...P
+  } = e, w = m ? c : y(
+    t.button,
+    o && t.isPending,
+    d && t.isSucceeded,
+    l && t.isFailed,
+    v && t.inverse,
+    t[`size-${s}`],
+    t[r],
+    t[i],
+    c,
+    /**
+     * Workaround warning: The Aria.Button does not support "aria-disabled"
+     * by now, so this Button will be visually disabled via CSS.
+     */
+    b && t.ariaDisabled
+  );
+  _(
+    o ? "isPending" : d ? "isSucceeded" : l ? "isFailed" : "isIdle"
+  );
+  const p = {
+    Icon: {
+      className: t.icon,
+      "aria-hidden": !0,
+      size: s
+    },
+    Text: {
+      className: t.text
+    },
+    Avatar: {
+      className: t.avatar
+    }
+  }, f = d ? N : l ? h : o ? T : void 0, S = f && /* @__PURE__ */ n.createElement(f, { size: s, className: t.stateIcon }), x = typeof a == "string";
+  return /* @__PURE__ */ n.createElement(C, null, /* @__PURE__ */ n.createElement(E.Button, { className: w, ref: g, ...P }, /* @__PURE__ */ n.createElement(I, { props: p }, /* @__PURE__ */ n.createElement(u, { if: !m }, /* @__PURE__ */ n.createElement("span", { className: t.content }, /* @__PURE__ */ n.createElement(u, { if: x }, /* @__PURE__ */ n.createElement(A, null, a))))), S));
+});
+export {
+  Pe as B
+};

package/dist/Button.js

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

package/dist/Content-hKTYy54n.js

@@ -0,0 +1,23 @@
+"use client"
+/* */
+import t from "react";
+import { C as i } from "./ClearPropsContext-CeCMjUK9.js";
+import "./propsContext-CauylOgH.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import { f as l } from "./flowComponent-CEBe_ATh.js";
+import { W as s } from "./Wrap-DGT1h1o3.js";
+const W = l("Content", (e) => {
+  const {
+    children: r,
+    elementType: o = "div",
+    ref: n,
+    clearPropsContext: m = !0,
+    ...p
+  } = e, a = o;
+  return /* @__PURE__ */ t.createElement(s, { if: m }, /* @__PURE__ */ t.createElement(i, null, /* @__PURE__ */ t.createElement(a, { ref: n, ...p }, r)));
+});
+export {
+  W as C
+};

package/dist/Content.js

@@ -1,17 +1,7 @@
 "use client"
 /* */
-import t from "react";
-import { C as l } from "./ClearPropsContext-CeCMjUK9.js";
-import "./propsContext-CauylOgH.js";
-import "@react-aria/utils";
-import "remeda";
-import "dot-prop";
-import { f as i } from "./flowComponent-CEBe_ATh.js";
-const E = i("Content", (e) => {
-  const { children: o, elementType: r = "div", ref: n, ...m } = e, p = r;
-  return /* @__PURE__ */ t.createElement(l, null, /* @__PURE__ */ t.createElement(p, { ref: n, ...m }, o));
-});
+import { C as o } from "./Content-hKTYy54n.js";
 export {
-  E as Content,
-  E as default
+  o as Content,
+  o as default
 };

package/dist/CopyButton.js

@@ -2,7 +2,7 @@
 /* */
 import o from "react";
 import a from "copy-to-clipboard";
-import { B as i } from "./Button-DoFsBmn5.js";
+import { B as i } from "./Button-DNeV_sZ5.js";
 import "@tabler/icons-react";
 import "./Icon-DXXYYNLl.js";
 import { I as c } from "./IconCopy-CWcw0z9V.js";

package/dist/List.js

@@ -12,7 +12,7 @@ import { T as b } from "./Text-DdC3zDyH.js";
 import "@tabler/icons-react";
 import "./Icon-DXXYYNLl.js";
 import { I as $ } from "./IconChevronDown-Hoy6GbIi.js";
-import { B as h } from "./Button-DoFsBmn5.js";
+import { B as h } from "./Button-DNeV_sZ5.js";
 import { useMessageFormatter as H, useLocalizedStringFormatter as q } from "react-aria";
 import K from "clsx";
 import { I as rt } from "./IconClose-DBGgwbZE.js";

package/dist/Navigation.js

@@ -1,57 +1,59 @@
 "use client"
 /* */
-import t, { useId as v } from "react";
-import m from "clsx";
-import { d } from "./deepFindOfType-6pG0fH7S.js";
-import { W as f } from "./Wrap-DGT1h1o3.js";
+import e, { useId as v } from "react";
+import g from "clsx";
+import { d as E } from "./deepFindOfType-6pG0fH7S.js";
+import { W as x } from "./Wrap-DGT1h1o3.js";
 import "./propsContext-CauylOgH.js";
-import { P as p } from "./PropsContextProvider-DZvwqHLP.js";
+import { P as i } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "remeda";
-import { TunnelProvider as x, TunnelExit as E } from "@mittwald/react-tunnel";
-const N = "flow--navigation", b = "flow--navigation--item", w = "flow--navigation--icon", I = "flow--navigation--text", C = "flow--navigation--control-icon", o = {
-  navigation: N,
-  item: b,
-  icon: w,
-  text: I,
-  controlIcon: C
-}, j = (a) => {
-  const { className: i, children: e, ...r } = a, l = m(o.navigation, i), n = !!d(e, P), s = {
+import { TunnelProvider as p, TunnelExit as u } from "@mittwald/react-tunnel";
+import { A as N } from "./Accordion-DUOvbD7N.js";
+import { C as b } from "./Content-hKTYy54n.js";
+const C = "flow--navigation", I = "flow--navigation--item", P = "flow--navigation--icon", w = "flow--navigation--text", y = "flow--navigation--control-icon", l = {
+  navigation: C,
+  item: I,
+  icon: P,
+  text: w,
+  controlIcon: y
+}, B = (s) => {
+  const { className: n, children: o, ...c } = s, m = g(l.navigation, n), a = !!E(o, h), r = {
     Link: {
-      render: (u, g) => /* @__PURE__ */ t.createElement("li", null, /* @__PURE__ */ t.createElement(u, { ...g, className: o.item, unstyled: !0 })),
+      render: (t, f) => /* @__PURE__ */ e.createElement("li", null, /* @__PURE__ */ e.createElement(t, { ...f, className: l.item, unstyled: !0 })),
       Text: {
-        className: o.text
+        className: l.text
       },
       Icon: {
-        className: o.icon
+        className: l.icon
       }
     }
   };
-  return /* @__PURE__ */ t.createElement("nav", { className: l, role: "navigation", ...r }, /* @__PURE__ */ t.createElement(p, { props: s }, /* @__PURE__ */ t.createElement(f, { if: !n }, /* @__PURE__ */ t.createElement("ul", null, e))));
-}, y = "flow--navigation--navigation-group", G = "flow--navigation--navigation-group--label", c = {
-  navigationGroup: y,
-  label: G
-}, P = (a) => {
-  const { children: i, className: e, ...r } = a, l = m(c.navigationGroup, e), n = v(), s = {
+  return /* @__PURE__ */ e.createElement("nav", { className: m, role: "navigation", ...c }, /* @__PURE__ */ e.createElement(i, { props: r }, /* @__PURE__ */ e.createElement(x, { if: !a }, /* @__PURE__ */ e.createElement("ul", null, o))));
+}, G = "flow--navigation--navigation-group", L = "flow--navigation--navigation-group--label", d = {
+  navigationGroup: G,
+  label: L
+}, h = (s) => {
+  const { children: n, className: o, collapsable: c, ...m } = s, a = g(d.navigationGroup, o), r = v(), t = {
     Label: {
       tunnelId: "Label",
-      id: n,
-      className: c.label,
+      id: r,
+      className: d.label,
       "aria-hidden": !0
     }
   };
-  return /* @__PURE__ */ t.createElement(x, null, /* @__PURE__ */ t.createElement(
+  return c ? /* @__PURE__ */ e.createElement(i, { mergeInParentContext: !0, props: t }, /* @__PURE__ */ e.createElement(p, null, /* @__PURE__ */ e.createElement(N, { defaultExpanded: !0, className: a }, /* @__PURE__ */ e.createElement(u, { id: "Label" }), /* @__PURE__ */ e.createElement(b, { clearPropsContext: !1 }, /* @__PURE__ */ e.createElement("ul", null, n))))) : /* @__PURE__ */ e.createElement(i, { mergeInParentContext: !0, props: t }, /* @__PURE__ */ e.createElement(p, null, /* @__PURE__ */ e.createElement(
     "section",
     {
-      "aria-labelledby": n,
-      className: l,
-      ...r
+      "aria-labelledby": r,
+      className: a,
+      ...m
     },
-    /* @__PURE__ */ t.createElement(p, { mergeInParentContext: !0, props: s }, /* @__PURE__ */ t.createElement(E, { id: "Label" }), /* @__PURE__ */ t.createElement("ul", null, i))
-  ));
+    /* @__PURE__ */ e.createElement(i, { mergeInParentContext: !0, props: t }, /* @__PURE__ */ e.createElement(u, { id: "Label" }), /* @__PURE__ */ e.createElement("ul", null, n))
+  )));
 };
 export {
-  j as Navigation,
-  P as NavigationGroup,
-  j as default
+  B as Navigation,
+  h as NavigationGroup,
+  B as default
 };

package/dist/NumberField.js

@@ -10,7 +10,7 @@ import "@react-aria/utils";
 import "./propsContext-CauylOgH.js";
 import "remeda";
 import { F as I } from "./FieldError-1ByhwDR1.js";
-import { B as c } from "./Button-DoFsBmn5.js";
+import { B as c } from "./Button-DNeV_sZ5.js";
 import "@tabler/icons-react";
 import "./Icon-DXXYYNLl.js";
 import { I as C } from "./IconChevronDown-Hoy6GbIi.js";

package/dist/OffCanvas.js

@@ -2,7 +2,7 @@
 /* */
 import o from "react";
 import c from "clsx";
-import { B as f } from "./Button-DoFsBmn5.js";
+import { B as f } from "./Button-DNeV_sZ5.js";
 import "@tabler/icons-react";
 import "./Icon-DXXYYNLl.js";
 import { I as m } from "./IconClose-DBGgwbZE.js";

package/dist/Tabs.js

@@ -9,7 +9,7 @@ import { f as S } from "./flowComponent-CEBe_ATh.js";
 import { useCallbackRef as B } from "use-callback-ref";
 import { C as K } from "./ContextMenu-DgjLaam6.js";
 import { M as L } from "./MenuItem-_30E41JK.js";
-import { B as F } from "./Button-DoFsBmn5.js";
+import { B as F } from "./Button-DNeV_sZ5.js";
 import "@tabler/icons-react";
 import "./Icon-DXXYYNLl.js";
 import { I as A } from "./IconContextMenu-DpGh2Lgn.js";