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

package/dist/Tabs.js

@@ -0,0 +1,157 @@
+"use client"
+/* */
+import e, { useRef as h, useState as v, useEffect as M, useId as g, createContext as I, useContext as P } from "react";
+import * as E from "react-aria-components";
+import u from "clsx";
+import { TunnelExit as C, TunnelProvider as y, TunnelEntry as f } from "@mittwald/react-tunnel";
+import { f as S } from "./flowComponent-CpHt0lsO.js";
+import { useCallbackRef as O } from "use-callback-ref";
+import { a as B, C as K } from "./ContextMenuTrigger-AyIRlUZ8.js";
+import { M as A } from "./MenuItem-DL25To7v.js";
+import { B as L } from "./Button-DAoWF37n.js";
+import "@tabler/icons-react";
+import "./Icon-DdmDlHdu.js";
+import { I as F } from "./IconContextMenu-Cbh6mtE6.js";
+import { T as R } from "./Text-CZrXXfX3.js";
+import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import { P as W } from "./PropsContextProvider-B7e3QrmR.js";
+import "@react-aria/utils";
+import "remeda";
+const $ = "flow--tabs", k = "flow--tabs--list", j = {
+  tabs: $,
+  list: k
+}, q = "flow--tabs--tab-list", z = "flow--tabs--tab-list--context-menu-button", D = "flow--tabs--tab-list--titles", G = "flow--tabs--tab-list--collapsed", b = {
+  tabList: q,
+  contextMenuButton: z,
+  titles: D,
+  collapsed: G
+}, H = () => {
+  const s = h(), [n, r] = v(!1), o = O(null, (t) => {
+    l(), c(t);
+  }), a = ([
+    t
+  ]) => {
+    t && r(!t.isIntersecting);
+  }, c = (t = o.current) => {
+    if (t && t instanceof Element) {
+      const i = new IntersectionObserver(a, {
+        root: t.parentElement,
+        // 1 = invoke callback when the element is 100% visible within the parent element
+        threshold: 1
+      });
+      s.current = i, i.observe(t);
+    }
+  }, l = () => {
+    var t;
+    (t = s.current) == null || t.disconnect();
+  };
+  return M(() => (c(), l), [s.current]), {
+    ref: o,
+    isOverflowing: n
+  };
+}, J = "flow--tabs--tab-title", Q = "flow--tabs--tab-title--text", U = "flow--tabs--tab-title--menu-item", p = {
+  tabTitle: J,
+  text: Q,
+  menuItem: U
+}, V = (s) => {
+  const { className: n, ...r } = s, o = u(n, p.tabTitle);
+  return /* @__PURE__ */ e.createElement("div", { ...r, className: o, "data-selected": !0 }, /* @__PURE__ */ e.createElement(C, { id: "ActiveTitle" }));
+}, X = (s) => {
+  const { selection: n, disabledKeys: r, onContextMenuSelectionChange: o } = s, a = g(), c = H(), l = c.isOverflowing, t = u(b.tabList, l && b.collapsed), i = (N) => {
+    const [x] = N;
+    x && o(x);
+  }, m = /* @__PURE__ */ e.createElement(E.TabList, { className: b.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(C, { id: "Titles" })), d = l && /* @__PURE__ */ e.createElement(V, { id: a }), T = l && /* @__PURE__ */ e.createElement(B, null, /* @__PURE__ */ e.createElement(
+    L,
+    {
+      variant: "soft",
+      className: b.contextMenuButton,
+      color: "secondary",
+      "aria-labelledby": a
+    },
+    /* @__PURE__ */ e.createElement(F, null)
+  ), /* @__PURE__ */ e.createElement(
+    K,
+    {
+      disabledKeys: r,
+      selectedKeys: n ? [n] : void 0,
+      selectionMode: "navigation",
+      onSelectionChange: i
+    },
+    /* @__PURE__ */ e.createElement(C, { id: "ContextMenuItems" })
+  ));
+  return /* @__PURE__ */ e.createElement("div", { className: t }, m, d, T);
+}, Ee = S("Tabs", (s) => {
+  const {
+    children: n,
+    className: r,
+    defaultSelectedKey: o,
+    disabledKeys: a,
+    refProp: c,
+    ...l
+  } = s, t = u(j.tabs, r), [i, m] = v(
+    o
+  );
+  return /* @__PURE__ */ e.createElement(y, null, n, /* @__PURE__ */ e.createElement(
+    E.Tabs,
+    {
+      slot: null,
+      className: t,
+      ...l,
+      selectedKey: i,
+      onSelectionChange: m,
+      disabledKeys: a,
+      ref: c
+    },
+    /* @__PURE__ */ e.createElement(
+      X,
+      {
+        selection: i,
+        onContextMenuSelectionChange: m,
+        disabledKeys: a
+      }
+    ),
+    /* @__PURE__ */ e.createElement(C, { id: "Panels" })
+  ));
+}), w = I({
+  id: "undefined"
+}), Y = () => P(w), Z = w.Provider, Te = (s) => {
+  const { children: n, className: r, ...o } = s, { id: a } = Y(), c = u(p.tabTitle, r);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(f, { id: "Titles" }, /* @__PURE__ */ e.createElement(E.Tab, { ...o, id: a, className: c }, (l) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(R, { emulateBoldWidth: !0 }, /* @__PURE__ */ e.createElement("span", { className: p.text }, n)), /* @__PURE__ */ e.createElement(f, { id: "ActiveTitle" }, l.isSelected && n)))), /* @__PURE__ */ e.createElement(f, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(A, { className: p.menuItem, id: a }, n)));
+}, _ = "flow--tabs--tab--tab-panel", ee = {
+  tabPanel: _
+}, xe = (s) => {
+  const { children: n, className: r, id: o, ...a } = s, c = u(ee.tabPanel, r), l = g(), t = o ?? l, i = (m) => {
+    const d = m.state.selectedKey === t, T = {
+      Content: {
+        isActive: d
+      },
+      Section: {
+        isActive: d
+      }
+    };
+    return /* @__PURE__ */ e.createElement(
+      W,
+      {
+        props: T,
+        dependencies: [d, n]
+      },
+      n
+    );
+  };
+  return /* @__PURE__ */ e.createElement(f, { id: "Panels" }, /* @__PURE__ */ e.createElement(Z, { value: { id: t } }, /* @__PURE__ */ e.createElement(
+    E.TabPanel,
+    {
+      className: c,
+      shouldForceMount: !0,
+      id: t,
+      ...a
+    },
+    i
+  )));
+};
+export {
+  xe as Tab,
+  Te as TabTitle,
+  Ee as Tabs,
+  Ee as default
+};

package/dist/Text-CZrXXfX3.js

@@ -0,0 +1,38 @@
+"use client"
+/* */
+import e from "react";
+import * as f from "react-aria-components";
+import { C as x } from "./ClearPropsContext-mes1t7Bj.js";
+import { P as E } from "./PropsContextProvider-B7e3QrmR.js";
+import "@react-aria/utils";
+import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import "remeda";
+import u from "invariant";
+import { f as T } from "./flowComponent-CpHt0lsO.js";
+import { E as d } from "./EmulatedBoldText-Dtox8Wd1.js";
+import { W as C } from "./Wrap-DGT1h1o3.js";
+const A = T("Text", (r) => {
+  const {
+    children: i,
+    className: p,
+    elementType: t = "span",
+    emulateBoldWidth: l,
+    refProp: o,
+    ...s
+  } = r, n = { ...s, className: p }, a = {
+    Link: {
+      inline: !0
+    }
+  }, m = /* @__PURE__ */ e.createElement(E, { props: a }, /* @__PURE__ */ e.createElement(C, { if: l }, /* @__PURE__ */ e.createElement(d, null, i)));
+  if (!r.slot) {
+    const c = t;
+    return /* @__PURE__ */ e.createElement(c, { ...n, ref: o }, m);
+  }
+  return u(
+    typeof t == "string",
+    "'elementType' in Text component must be of type string"
+  ), /* @__PURE__ */ e.createElement(x, null, /* @__PURE__ */ e.createElement(f.Text, { ...n, elementType: t, ref: o }, m));
+});
+export {
+  A as T
+};

package/dist/Text.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { T as a } from "./Text-D-bYVFks.js";
+import { T as a } from "./Text-CZrXXfX3.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-BItZ1rm6.js";
+import { C as i } from "./ClearPropsContext-mes1t7Bj.js";
+import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import { f as c } from "./flowComponent-CpHt0lsO.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-BItZ1rm6.js";
+import { C as n } from "./ClearPropsContext-mes1t7Bj.js";
+import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import { f as p } from "./flowComponent-CpHt0lsO.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-BItZ1rm6.js

@@ -0,0 +1,32 @@
+"use client"
+/* */
+import r, { forwardRef as c } from "react";
+import * as n from "react-aria-components";
+import { s as e } from "./FormField.module-DHK6nIcD.js";
+import p from "clsx";
+import { C as d } from "./ClearPropsContext-mes1t7Bj.js";
+import { P as f } from "./PropsContextProvider-B7e3QrmR.js";
+import "@react-aria/utils";
+import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import "remeda";
+import { F as E } from "./FieldError-BKoqRvQY.js";
+const g = c(
+  (o, F) => {
+    const { children: t, className: s, input: a, ...i } = o, l = p(e.formField, s), m = {
+      Label: {
+        className: e.label,
+        optional: !o.isRequired
+      },
+      FieldDescription: {
+        className: e.fieldDescription
+      },
+      FieldError: {
+        className: e.customFieldError
+      }
+    };
+    return /* @__PURE__ */ r.createElement(d, null, /* @__PURE__ */ r.createElement(n.TextField, { ...i, className: l }, a, /* @__PURE__ */ r.createElement(f, { props: m }, t), /* @__PURE__ */ r.createElement(E, { className: e.fieldError })));
+  }
+);
+export {
+  g 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/{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/context-D_-mRqs8.js

@@ -0,0 +1,8 @@
+"use client"
+/* */
+import { createContext as o } from "react";
+const t = o(void 0), r = t.Provider;
+export {
+  r as A,
+  t as a
+};

package/dist/controller.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { O as l, u as o } from "./useOverlayController-CGKumeGL.js";
+export {
+  l as OverlayController,
+  o 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-CpHt0lsO.js

@@ -0,0 +1,124 @@
+"use client"
+/* */
+import s, { isValidElement as P, forwardRef as y, useCallback as h } from "react";
+import { u as F, a as R, C as b } from "./ComponentRenderContextProvider-C-1_ziLI.js";
+import { mergeProps as v } from "@react-aria/utils";
+import { pickBy as k, omit as E, clone as w } from "remeda";
+import "dot-prop";
+import { P as g } from "./PropsContextProvider-B7e3QrmR.js";
+import { TunnelEntry as A } from "@mittwald/react-tunnel";
+const B = {
+  Action: !0,
+  Avatar: !0,
+  Button: !0,
+  ActionGroup: !0,
+  Checkbox: !0,
+  CheckboxButton: !0,
+  CheckboxGroup: !0,
+  Content: !0,
+  ContextMenu: !0,
+  CopyButton: !0,
+  CounterLabel: !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,
+  RadioButton: !0,
+  RadioGroup: !0,
+  Section: !0,
+  Select: !0,
+  StatusBadge: !0,
+  Switch: !0,
+  Tabs: !0,
+  TestComponent: !0,
+  Text: !0,
+  TextArea: !0,
+  TextField: !0
+}, c = Object.keys(
+  B
+);
+function S(e) {
+  return !!e && typeof e == "object" && "__dynamicProp" in e;
+}
+function C(e) {
+  return typeof e == "string" && c.includes(e);
+}
+function T(e) {
+  return !C(e);
+}
+const I = (e, t) => {
+  const r = {};
+  for (const n in e)
+    if (T(n)) {
+      const o = e[n];
+      S(o) && (r[n] = o.__dynamicProp(t));
+    }
+  return r;
+};
+function _(e) {
+  return !!e && typeof e == "object" && "children" in e && !!e.children;
+}
+const j = (e) => k(e, (t, r) => C(r)), D = (e, t) => {
+  if (!_(t))
+    return {};
+  const r = t.children;
+  if (!Array.isArray(r) && !P(r))
+    return {};
+  const n = j(e);
+  return Object.keys(n).length === 0 ? {} : {
+    children: /* @__PURE__ */ s.createElement(g, { props: n, mergeInParentContext: !0 }, r)
+  };
+}, L = (e, t) => {
+  const n = F()[e], o = n ? I(n, t) : void 0, u = n ? D(n, t) : void 0;
+  return v(
+    n && E(n, c),
+    t,
+    o,
+    u
+  );
+}, l = (e, t) => {
+  if (t)
+    return typeof t.render[e] == "function" ? t.render[e] : l(e, t.parentContext);
+}, a = (e, t, r) => {
+  if (r)
+    return r.render[e] === t && delete r.render[e], a(e, t, r.parentContext);
+}, M = (e) => {
+  const t = R(), r = l(e, t);
+  if (r && t) {
+    const n = w(t);
+    return a(e, r, n), [r, n];
+  }
+  return [void 0, void 0];
+};
+function W(e, t) {
+  return y((r, n) => {
+    const {
+      render: o,
+      tunnelId: u,
+      ...f
+    } = L(e, r), [p, x] = M(e), m = h(
+      W(e, t),
+      [e, t]
+    ), d = {
+      refProp: n,
+      ...f
+    };
+    let i = /* @__PURE__ */ s.createElement(t, { ...d });
+    return p && (i = /* @__PURE__ */ s.createElement(b, { value: x }, p(m, d))), u && (i = /* @__PURE__ */ s.createElement(A, { id: u }, i)), i;
+  });
+}
+export {
+  W as f
+};

package/dist/getActionGroupSlot-B4Vu4Kix.js

@@ -0,0 +1,9 @@
+"use client"
+/* */
+const c = (r) => {
+  const { slot: t, ...o } = r, s = o.color === "primary" || o.color === "danger" || o.color === "accent" ? "primary" : "abort";
+  return t ?? s;
+};
+export {
+  c 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-CGKumeGL.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,12 @@
+"use client"
+/* */
+import n, { forwardRef as o } from "react";
+import i from "next/link";
+import { L as m } from "./context-BlNV7smK.js";
+const f = o(function(r, t) {
+  return /* @__PURE__ */ n.createElement(i, { href: r.href ?? "#", ...r, ref: t });
+}), L = (e) => /* @__PURE__ */ n.createElement(m, { value: { linkComponent: f } }, e.children);
+export {
+  f as Link,
+  L as LinkProvider
+};

package/dist/react-hook-form.js

@@ -0,0 +1,63 @@
+"use client"
+/* */
+import r, { createContext as x, useContext as F } from "react";
+import { Controller as h } from "react-hook-form";
+import "./ComponentRenderContextProvider-C-1_ziLI.js";
+import { P as v } from "./PropsContextProvider-B7e3QrmR.js";
+import "@react-aria/utils";
+import "remeda";
+import { d as E } from "./dynamic-ClpUSmEt.js";
+import { F as P } from "./FieldError-BKoqRvQY.js";
+const d = x({}), b = d.Provider, g = () => F(d);
+function k(o) {
+  var l;
+  const { children: n, control: i, ...t } = o, p = (l = g().form) == null ? void 0 : l.control;
+  return /* @__PURE__ */ r.createElement(
+    h,
+    {
+      ...t,
+      control: i ?? p,
+      render: (c) => {
+        var s;
+        const { field: u, fieldState: m } = c, e = {
+          ...u,
+          isRequired: !!((s = t.rules) != null && s.required),
+          isInvalid: m.invalid,
+          validationBehavior: "aria",
+          children: E((f) => {
+            var a;
+            return /* @__PURE__ */ r.createElement(r.Fragment, null, f.children, /* @__PURE__ */ r.createElement(P, null, (a = m.error) == null ? void 0 : a.message));
+          })
+        }, C = {
+          Checkbox: e,
+          CheckboxGroup: e,
+          CheckboxButton: e,
+          NumberField: e,
+          RadioGroup: e,
+          Switch: e,
+          TextArea: e,
+          TextField: e,
+          Select: e
+        };
+        return /* @__PURE__ */ r.createElement(
+          v,
+          {
+            props: C,
+            dependencies: [c]
+          },
+          n
+        );
+      }
+    }
+  );
+}
+const A = (o) => k;
+function I(o) {
+  const { form: n, children: i, ...t } = o;
+  return /* @__PURE__ */ r.createElement(b, { value: { form: n } }, /* @__PURE__ */ r.createElement("form", { ...t }, i));
+}
+export {
+  k as Controller,
+  I as Form,
+  A as typedController
+};