@mittwald/flow-react-components 0.1.0-alpha.17 → 0.1.0-alpha.170

package/dist/Text-Bl9Rk0W3.js

@@ -0,0 +1,43 @@
+"use client"
+/* */
+import t from "react";
+import * as d from "react-aria-components";
+import { C as E } from "./ClearPropsContext-CUvsbMn8.js";
+import { P as u } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "./propsContext-DzAKlmhS.js";
+import "remeda";
+import T from "invariant";
+import { f as C } from "./flowComponent-TgbbWDzO.js";
+import { E as h } from "./EmulatedBoldText-Dtox8Wd1.js";
+import { W as P } from "./Wrap-DGT1h1o3.js";
+import g from "clsx";
+const y = "flow--text--light", k = "flow--text--dark", w = {
+  light: y,
+  dark: k
+}, D = C("Text", (o) => {
+  const {
+    children: l,
+    className: a,
+    elementType: e = "span",
+    emulateBoldWidth: i,
+    refProp: r,
+    color: n,
+    ...p
+  } = o, c = g(n && w[n], a), m = { ...p, className: c }, f = {
+    Link: {
+      inline: !0
+    }
+  }, s = /* @__PURE__ */ t.createElement(u, { props: f }, /* @__PURE__ */ t.createElement(P, { if: i }, /* @__PURE__ */ t.createElement(h, null, l)));
+  if (!o.slot) {
+    const x = e;
+    return /* @__PURE__ */ t.createElement(x, { ...m, ref: r }, s);
+  }
+  return T(
+    typeof e == "string",
+    "'elementType' in Text component must be of type string"
+  ), /* @__PURE__ */ t.createElement(E, null, /* @__PURE__ */ t.createElement(d.Text, { ...m, elementType: e, ref: r }, s));
+});
+export {
+  D as T
+};

package/dist/Text.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { T as a } from "./Text--ofl9X5e.js";
+import { T as a } from "./Text-Bl9Rk0W3.js";
 export {
   a as Text,
   a as default

package/dist/TextArea.js

@@ -1,22 +1,29 @@
 "use client"
 /* */
 import e from "react";
-import * as l from "react-aria-components";
-import { T as n } from "./TextFieldBase-Dk6XBF7h.js";
-const m = "flow--text-area", x = {
-  textArea: m
-}, A = (t) => {
-  const { children: r, placeholder: a, rows: o = 5, ...s } = t, c = /* @__PURE__ */ e.createElement(
-    l.TextArea,
+import * as n from "react-aria-components";
+import { T as p } from "./TextFieldBase-C5ev2SC1.js";
+import { C as i } from "./ClearPropsContext-CUvsbMn8.js";
+import "./propsContext-DzAKlmhS.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import { f as c } from "./flowComponent-TgbbWDzO.js";
+const f = "flow--text-area", x = {
+  textArea: f
+}, P = c("TextArea", (t) => {
+  const { children: r, placeholder: o, rows: a = 5, refProp: m, ...s } = t, l = /* @__PURE__ */ e.createElement(
+    n.TextArea,
     {
-      rows: o,
-      placeholder: a,
-      className: x.textArea
+      rows: a,
+      placeholder: o,
+      className: x.textArea,
+      ref: m
     }
   );
-  return /* @__PURE__ */ e.createElement(n, { ...s, input: c }, r);
-};
+  return /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(p, { ...s, input: l }, r));
+});
 export {
-  A as TextArea,
-  A as default
+  P as TextArea,
+  P as default
 };

package/dist/TextField.js

@@ -1,15 +1,28 @@
 "use client"
 /* */
 import e from "react";
-import * as a from "react-aria-components";
-import { T as i } from "./TextFieldBase-Dk6XBF7h.js";
-const c = "flow--text-field", n = {
+import * as s from "react-aria-components";
+import { T as a } from "./TextFieldBase-C5ev2SC1.js";
+import { C as n } from "./ClearPropsContext-CUvsbMn8.js";
+import "./propsContext-DzAKlmhS.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import { f as p } from "./flowComponent-TgbbWDzO.js";
+const c = "flow--text-field", f = {
   textField: c
-}, p = (t) => {
-  const { children: l, placeholder: r, ...o } = t, s = /* @__PURE__ */ e.createElement(a.Input, { placeholder: r, className: n.textField });
-  return /* @__PURE__ */ e.createElement(i, { ...o, input: s }, l);
-};
+}, w = p("TextField", (t) => {
+  const { children: r, placeholder: o, refProp: l, ...i } = t, m = /* @__PURE__ */ e.createElement(
+    s.Input,
+    {
+      placeholder: o,
+      className: f.textField,
+      ref: l
+    }
+  );
+  return /* @__PURE__ */ e.createElement(n, null, /* @__PURE__ */ e.createElement(a, { ...i, input: m }, r));
+});
 export {
-  p as TextField,
-  p as default
+  w as TextField,
+  w as default
 };

package/dist/TextFieldBase-C5ev2SC1.js

@@ -0,0 +1,60 @@
+"use client"
+/* */
+import o, { forwardRef as F, useState as E } from "react";
+import * as N from "react-aria-components";
+import { s as t } from "./FormField.module-DHK6nIcD.js";
+import $ from "clsx";
+import { C as D } from "./ClearPropsContext-CUvsbMn8.js";
+import { P as B } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "./propsContext-DzAKlmhS.js";
+import "remeda";
+import { F as P } from "./FieldError-C3KKqMzM.js";
+import { F as R } from "./FieldDescription-Ca5OTPGv.js";
+import { useLocalizedStringFormatter as g } from "react-aria";
+const L = { "de-DE": {
+  "textFieldBase.characters": (e, r) => `${r.select({ 0: () => `${e.count}`, other: () => `${e.count}/${e.maxCount}` }, e.maxCount)} Zeichen`
+}, "en-EN": {
+  "textFieldBase.characters": (e, r) => `${r.select({ 0: () => `${e.count}`, other: () => `${e.count}/${e.maxCount}` }, e.maxCount)} characters`
+} }, j = F(
+  (e, r) => {
+    var n;
+    const { children: c, className: i, input: l, showCharacterCount: a, ...m } = e, [d, u] = E(
+      ((n = e.value) == null ? void 0 : n.length) ?? 0
+    ), h = $(t.formField, i), C = g(L), f = {
+      Label: {
+        className: t.label,
+        optional: !e.isRequired
+      },
+      FieldDescription: {
+        className: t.fieldDescription
+      },
+      FieldError: {
+        className: t.customFieldError
+      }
+    }, p = (s) => {
+      a && u(s.length), e.onChange && e.onChange(s);
+    }, x = C.format(
+      "textFieldBase.characters",
+      {
+        count: d,
+        maxCount: e.maxLength ?? 0
+      }
+    );
+    return /* @__PURE__ */ o.createElement(D, null, /* @__PURE__ */ o.createElement(
+      N.TextField,
+      {
+        ...m,
+        className: h,
+        onChange: p
+      },
+      l,
+      /* @__PURE__ */ o.createElement(B, { props: f }, c),
+      a && /* @__PURE__ */ o.createElement(R, { className: t.fieldDescription }, x),
+      /* @__PURE__ */ o.createElement(P, { className: t.fieldError })
+    ));
+  }
+);
+export {
+  j as T
+};

package/dist/Tooltip.js

@@ -1,9 +1,9 @@
 "use client"
 /* */
-import { T as r } from "./Tooltip-BqyZAZgK.js";
-import { T } from "./TooltipTrigger-7-ynWHZ9.js";
+import { T as r } from "./TooltipTrigger-TslkLN5s.js";
+import { a as p } from "./TooltipTrigger-TslkLN5s.js";
 export {
   r as Tooltip,
-  T as TooltipTrigger,
+  p as TooltipTrigger,
   r as default
 };

package/dist/TooltipTrigger-TslkLN5s.js

@@ -0,0 +1,20 @@
+"use client"
+/* */
+import * as l from "react-aria-components";
+import o from "react";
+import c from "clsx";
+const n = "flow--tooltip", m = "flow--tooltip--arrow", p = "flow--tooltip--slide", s = {
+  tooltip: n,
+  arrow: m,
+  slide: p
+}, d = (t) => {
+  const { children: e, className: r, ...a } = t, i = c(s.tooltip, r);
+  return /* @__PURE__ */ o.createElement(l.Tooltip, { ...a, className: i }, /* @__PURE__ */ o.createElement(l.OverlayArrow, { className: s.arrow }, /* @__PURE__ */ o.createElement("svg", { viewBox: "0 0 8 8" }, /* @__PURE__ */ o.createElement("path", { d: "M0 0 L4 4 L8 0" }))), e);
+}, f = (t) => {
+  const { children: e, ...r } = t;
+  return /* @__PURE__ */ o.createElement(l.TooltipTrigger, { ...r }, e);
+};
+export {
+  d as T,
+  f as a
+};

package/dist/Wrap-DGT1h1o3.js

@@ -0,0 +1,9 @@
+"use client"
+/* */
+const i = (n) => {
+  const { if: e, children: r } = n;
+  return e ? r : r.props.children;
+};
+export {
+  i as W
+};

package/dist/context-BB3_MApL.js

@@ -0,0 +1,44 @@
+"use client"
+/* */
+var r = Object.defineProperty;
+var p = (s, e, t) => e in s ? r(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var o = (s, e, t) => p(s, typeof e != "symbol" ? e + "" : e, t);
+import { makeObservable as u, observable as a, action as n } from "mobx";
+import { u as O } from "./useSelector-DpU7_HMO.js";
+import { useRef as c, createContext as l, useContext as b } from "react";
+class i {
+  constructor(e = !1) {
+    o(this, "isOpen");
+    u(this, {
+      isOpen: a,
+      open: n.bound,
+      close: n.bound,
+      toggle: n.bound,
+      setOpen: n.bound
+    }), this.isOpen = e;
+  }
+  static useNew(e) {
+    return c(new i(e)).current;
+  }
+  open() {
+    this.isOpen = !0;
+  }
+  close() {
+    this.isOpen = !1;
+  }
+  toggle() {
+    this.isOpen = !this.isOpen;
+  }
+  setOpen(e) {
+    this.isOpen = e;
+  }
+  useIsOpen() {
+    return O(() => this.isOpen);
+  }
+}
+const h = l({}), g = () => b(h);
+export {
+  i as O,
+  h as o,
+  g as u
+};

package/dist/{propsContext-Dx7WKmmM.js → context-BlNV7smK.js}

@@ -1,7 +1,8 @@
 "use client"
 /* */
 import { createContext as t } from "react";
-const e = t({});
+const o = t({}), r = o.Provider;
 export {
-  e as p
+  r as L,
+  o as l
 };

package/dist/controller.js

@@ -0,0 +1,8 @@
+"use client"
+/* */
+import { O as e } from "./context-BB3_MApL.js";
+import { u as a } from "./useOverlayController-D8N4X2rc.js";
+export {
+  e as OverlayController,
+  a as useOverlayController
+};

package/dist/deepFindOfType-6pG0fH7S.js

@@ -0,0 +1,14 @@
+"use client"
+/* */
+import { isValidElement as p } from "react";
+import { deepFind as f, deepForEach as o } from "react-children-utilities";
+const n = (e, t) => p(e) ? typeof t == "string" ? typeof e.type == "string" ? e.type === t : !1 : e.type === t : !1, u = (e, t) => f(e, (r) => n(r, t)), y = (e, t) => {
+  const r = [];
+  return o(e, (i) => {
+    n(i, t) && r.push(i);
+  }), r;
+};
+export {
+  y as a,
+  u as d
+};

package/dist/dynamic-ClpUSmEt.js

@@ -0,0 +1,8 @@
+"use client"
+/* */
+const c = (a) => ({
+  __dynamicProp: a
+});
+export {
+  c as d
+};

package/dist/flowComponent-TgbbWDzO.js

@@ -0,0 +1,123 @@
+"use client"
+/* */
+import s, { isValidElement as C, forwardRef as f, cloneElement as x } from "react";
+import { u as P } from "./propsContext-DzAKlmhS.js";
+import { mergeProps as y } from "@react-aria/utils";
+import { pickBy as h, omitBy as v } from "remeda";
+import "dot-prop";
+import { P as E } from "./PropsContextProvider-C6Z4XGp6.js";
+import { TunnelEntry as b } from "@mittwald/react-tunnel";
+import { u as S, s as g } from "./slotContext-DoCFkzCA.js";
+const k = {
+  Action: !0,
+  ActionGroup: !0,
+  Avatar: !0,
+  Button: !0,
+  Checkbox: !0,
+  CheckboxButton: !0,
+  CheckboxGroup: !0,
+  Content: !0,
+  ContextMenu: !0,
+  ContextMenuSection: !0,
+  ContextualHelp: !0,
+  CopyButton: !0,
+  CounterBadge: !0,
+  FieldDescription: !0,
+  FieldError: !0,
+  Header: !0,
+  Heading: !0,
+  Icon: !0,
+  Image: !0,
+  Initials: !0,
+  InlineAlert: !0,
+  Label: !0,
+  LayoutCard: !0,
+  Link: !0,
+  MenuItem: !0,
+  Modal: !0,
+  NumberField: !0,
+  Radio: !0,
+  Option: !0,
+  Popover: !0,
+  RadioButton: !0,
+  RadioGroup: !0,
+  Section: !0,
+  Select: !0,
+  Slider: !0,
+  StatusBadge: !0,
+  Switch: !0,
+  Tabs: !0,
+  TestComponent: !0,
+  Text: !0,
+  TextArea: !0,
+  TextField: !0
+}, l = Object.keys(
+  k
+);
+function a(t) {
+  return !!t && typeof t == "object" && "__dynamicProp" in t;
+}
+function m(t) {
+  return typeof t == "string" && l.includes(t);
+}
+function w(t) {
+  return !m(t);
+}
+const B = (t, o) => {
+  const r = {};
+  for (const e in t)
+    if (w(e)) {
+      const n = t[e];
+      a(n) && (r[e] = n.__dynamicProp(o));
+    }
+  return r;
+};
+function T(t) {
+  return !!t && typeof t == "object" && "children" in t && !!t.children;
+}
+const A = (t) => h(t, (o, r) => m(r)), I = (t, o) => {
+  if (!T(o))
+    return {};
+  const r = o.children;
+  if (!Array.isArray(r) && !C(r))
+    return {};
+  const e = A(t);
+  return Object.keys(e).length === 0 ? {} : {
+    children: /* @__PURE__ */ s.createElement(E, { props: e, mergeInParentContext: !0 }, r)
+  };
+}, F = (t, o) => {
+  const e = P()[t], n = e ? B(e, o) : void 0, u = e ? I(e, o) : void 0;
+  return y(
+    e && v(
+      e,
+      (p, c) => l.includes(
+        c
+      ) || a(p)
+    ),
+    o,
+    n,
+    u
+  );
+}, R = (t) => {
+  const { slot: o, component: r, children: e } = t, u = {
+    ...S(),
+    [r]: o
+  };
+  return /* @__PURE__ */ s.createElement(g.Provider, { value: u }, e);
+};
+function L(t, o) {
+  return f((r, e) => {
+    const { tunnelId: n, wrapWith: u, ...p } = F(
+      t,
+      r
+    ), d = {
+      refProp: e,
+      ...p
+    };
+    let i = /* @__PURE__ */ s.createElement(o, { ...d });
+    return "slot" in r && r.slot && (i = /* @__PURE__ */ s.createElement(R, { slot: r.slot, component: t }, i)), u && (i = x(u, void 0, i)), n && (i = /* @__PURE__ */ s.createElement(b, { id: n }, i)), i;
+  });
+}
+export {
+  L as f
+};

package/dist/getActionGroupSlot-BHzMGEA7.js

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

package/dist/getContainerBreakpointSizeClassName-BrcFDcCY.js

@@ -0,0 +1,6 @@
+"use client"
+/* */
+const a = (e) => `container-breakpoint-size-${e}`;
+export {
+  a as g
+};

package/dist/hooks.js

@@ -0,0 +1,15 @@
+"use client"
+/* */
+import "mobx";
+import { useRef as n, useEffect as s } from "react";
+import { u as i } from "./useOverlayController-D8N4X2rc.js";
+const m = (r, e, t = []) => {
+  const o = n(r);
+  s(() => {
+    o.current !== r && e(), o.current = r;
+  }, [r, e, ...t]);
+};
+export {
+  m as useOnChange,
+  i as useOverlayController
+};

package/dist/nextjs.js

@@ -0,0 +1,13 @@
+"use client"
+/* */
+import r, { forwardRef as m } from "react";
+import c from "next/link";
+import { L as f } from "./context-BlNV7smK.js";
+const a = m(function(t, n) {
+  const { href: o, ...i } = t;
+  return /* @__PURE__ */ r.createElement(c, { href: o ?? "#", ...i, ref: n });
+}), p = (e) => /* @__PURE__ */ r.createElement(f, { value: { linkComponent: a } }, e.children);
+export {
+  a as Link,
+  p as LinkProvider
+};

package/dist/propsContext-DzAKlmhS.js

@@ -0,0 +1,10 @@
+"use client"
+/* */
+import { createContext as o, useContext as e } from "react";
+const t = o({});
+t.Provider;
+const s = () => e(t);
+export {
+  t as p,
+  s as u
+};

package/dist/react-hook-form.js

@@ -0,0 +1,117 @@
+"use client"
+/* */
+import o, { createContext as F, useContext as v, useEffect as S, useRef as k } from "react";
+import { Controller as A, useFormState as h } from "react-hook-form";
+import "./propsContext-DzAKlmhS.js";
+import { P as b } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "remeda";
+import { d as E } from "./dynamic-ClpUSmEt.js";
+import { F as P } from "./FieldError-C3KKqMzM.js";
+import { a as g, A as y } from "./Action-DYTtbQCP.js";
+const x = F({}), V = x.Provider, f = () => v(x);
+function I(e) {
+  var n;
+  const { children: t, control: r, ...s } = e, c = (n = f().form) == null ? void 0 : n.control;
+  return /* @__PURE__ */ o.createElement(
+    A,
+    {
+      ...s,
+      control: r ?? c,
+      render: (a) => {
+        var p;
+        const {
+          field: u,
+          fieldState: { error: l, invalid: m }
+        } = a, i = {
+          ...u,
+          isRequired: !!((p = s.rules) != null && p.required),
+          isInvalid: m,
+          validationBehavior: "aria",
+          children: E((C) => /* @__PURE__ */ o.createElement(o.Fragment, null, C.children, /* @__PURE__ */ o.createElement(P, null, l == null ? void 0 : l.message))),
+          ref: void 0,
+          refProp: u.ref
+        }, d = {
+          Checkbox: i,
+          CheckboxGroup: i,
+          CheckboxButton: i,
+          NumberField: i,
+          RadioGroup: i,
+          Switch: i,
+          TextArea: i,
+          TextField: i,
+          Select: i,
+          Slider: i
+        };
+        return /* @__PURE__ */ o.createElement(
+          b,
+          {
+            props: d,
+            dependencies: [a]
+          },
+          t
+        );
+      }
+    }
+  );
+}
+const z = (e) => I, R = (e) => {
+  const { isStarted: t, hasFailedWithError: r, hasSucceeded: s, children: c } = e, n = g.useNew({});
+  return S(() => {
+    s ? n.state.onSucceeded() : r ? n.state.onFailed(r) : t && n.state.onAsyncStart();
+  }, [t, r, s]), /* @__PURE__ */ o.createElement(y, { actionModel: n }, c);
+}, D = (e) => {
+  const { children: t, isAsyncSubmit: r } = e, s = f().form, { isSubmitted: c, isSubmitting: n, isSubmitSuccessful: a, errors: u } = h(s), l = c && u && Object.entries(u).length > 0 ? u : void 0, m = c && a;
+  return /* @__PURE__ */ o.createElement(
+    R,
+    {
+      isStarted: n && r.current,
+      hasFailedWithError: l,
+      hasSucceeded: m
+    },
+    t
+  );
+}, B = (e) => {
+  const { children: t, isAsyncSubmit: r } = e, s = {
+    ActionGroup: {
+      children: E((c) => /* @__PURE__ */ o.createElement(D, { isAsyncSubmit: r }, c.children))
+    }
+  };
+  return /* @__PURE__ */ o.createElement(b, { props: s, mergeInParentContext: !0 }, t);
+}, G = () => {
+  const e = f().form, { isValid: t, isSubmitted: r } = h(e);
+  return S(() => {
+    r && t && e && e.reset(void 0, {
+      keepIsSubmitted: !1,
+      keepIsSubmitSuccessful: !1,
+      keepDefaultValues: !0,
+      keepValues: !0,
+      keepDirtyValues: !0,
+      keepIsValid: !0,
+      keepDirty: !0,
+      keepErrors: !0,
+      keepTouched: !0,
+      keepIsValidating: !0,
+      keepSubmitCount: !0
+    });
+  }, [r, t, e]), null;
+};
+function H(e) {
+  const { form: t, children: r, onSubmit: s, ...c } = e, n = k(!1), a = (u) => {
+    const { isSubmitting: l, isValidating: m } = t.control._formState;
+    if (l || m) {
+      u.preventDefault();
+      return;
+    }
+    t.handleSubmit((i) => {
+      const d = s(i);
+      return n.current = d instanceof Promise, d;
+    })(u);
+  };
+  return /* @__PURE__ */ o.createElement(V, { value: { form: t } }, /* @__PURE__ */ o.createElement(B, { isAsyncSubmit: n }, /* @__PURE__ */ o.createElement("form", { ...c, onSubmit: a }, r), /* @__PURE__ */ o.createElement(G, null)));
+}
+export {
+  I as Field,
+  H as Form,
+  z as typedField
+};