@mittwald/flow-react-components 0.1.0-alpha.28 → 0.1.0-alpha.281

package/dist/PopoverTrigger-FxIUjWed.js

@@ -0,0 +1,58 @@
+"use client"
+/* */
+import e from "react";
+import * as o from "react-aria-components";
+import l from "clsx";
+import "mobx";
+import { u as h } from "./useOverlayController-D8pgx8nV.js";
+import { f as a } from "./flowComponent-uZXy7sF4.js";
+import { O as y, a as E } from "./OverlayTrigger-bD8_mPel.js";
+const x = "flow--popover", N = "flow--popover--content", T = "flow--popover--tip", s = {
+  popover: x,
+  content: N,
+  tip: T,
+  "popover-slide": "flow--popover--popover-slide"
+}, M = a("Popover", (r) => {
+  const {
+    children: t,
+    className: n,
+    contentClassName: c,
+    isDialogContent: i = !1,
+    controller: m,
+    withTip: v,
+    refProp: f,
+    defaultOpen: g = !1,
+    ...P
+  } = r, C = h("Popover", {
+    reuseControllerFromContext: !0,
+    isDefaultOpen: g
+  }), p = m ?? C, d = p.useIsOpen(), O = l(s.popover, n), u = i ? o.Dialog : "div";
+  return /* @__PURE__ */ e.createElement(
+    o.Popover,
+    {
+      ...P,
+      className: O,
+      containerPadding: 16,
+      ref: f,
+      isOpen: d,
+      onOpenChange: (w) => p.setOpen(w)
+    },
+    v && /* @__PURE__ */ e.createElement(o.OverlayArrow, { className: s.tip }, /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16" }, /* @__PURE__ */ e.createElement("path", { d: "M0 0 L8 8 L16 0" }))),
+    /* @__PURE__ */ e.createElement(u, { className: l(s.content, c) }, /* @__PURE__ */ e.createElement(y, { type: "Popover", controller: p }, t))
+  );
+}), R = a("PopoverTrigger", (r) => {
+  const { children: t, ...n } = r;
+  return /* @__PURE__ */ e.createElement(
+    E,
+    {
+      overlayType: "Popover",
+      ...n,
+      component: o.DialogTrigger
+    },
+    t
+  );
+});
+export {
+  M as P,
+  R as a
+};

package/dist/ProgressBar.js

@@ -0,0 +1,46 @@
+"use client"
+/* */
+import * as u from "react-aria-components";
+import s from "react";
+import w from "clsx";
+import { useNumberFormatter as d } from "react-aria";
+import "./propsContext-DzAKlmhS.js";
+import { P as x } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "remeda";
+const N = "flow--progress-bar", v = "flow--progress-bar--label", B = "flow--progress-bar--value", E = "flow--progress-bar--bar", P = "flow--progress-bar--fill", z = "flow--progress-bar--info", V = "flow--progress-bar--success", h = "flow--progress-bar--danger", y = "flow--progress-bar--warning", r = {
+  progressBar: N,
+  label: v,
+  value: B,
+  bar: E,
+  fill: P,
+  "size-s": "flow--progress-bar--size-s",
+  info: z,
+  success: V,
+  danger: h,
+  warning: y
+}, R = (e) => {
+  const {
+    children: t,
+    className: l,
+    status: n = "info",
+    showMaxValue: c,
+    size: m = "m",
+    ...i
+  } = e, f = w(
+    l,
+    r.progressBar,
+    r[`size-${m}`],
+    r[n]
+  ), p = d(e.formatOptions), a = c && e.maxValue ? p.format(e.maxValue) : void 0, g = {
+    Label: {
+      className: r.label,
+      unstyled: !0
+    }
+  };
+  return /* @__PURE__ */ s.createElement(u.ProgressBar, { className: f, ...i }, ({ percentage: b, valueText: o }) => /* @__PURE__ */ s.createElement(x, { props: g }, t, /* @__PURE__ */ s.createElement("span", { className: r.value }, a ? `${o} of ${a}` : o), /* @__PURE__ */ s.createElement("div", { className: r.bar }, /* @__PURE__ */ s.createElement("div", { className: r.fill, style: { width: b + "%" } }))));
+};
+export {
+  R as ProgressBar,
+  R as default
+};

package/dist/PropsContextProvider-C6Z4XGp6.js

@@ -0,0 +1,64 @@
+"use client"
+/* */
+import u, { useMemo as m, isValidElement as f, cloneElement as C } from "react";
+import { u as v, p as E } from "./propsContext-DzAKlmhS.js";
+import { mergeProps as h } from "@react-aria/utils";
+import { isObjectType as c } from "remeda";
+import { setProperty as x } from "dot-prop";
+const N = (t = {}) => (...r) => {
+  const { mergeClassNames: n = !0, mergeEventHandler: s = !0 } = t, e = h(...r);
+  if (c(e)) {
+    if (!n)
+      for (const o of r)
+        c(o) && "className" in e && "className" in o && (e.className = o.className);
+    if (!s) {
+      for (const o of r)
+        if (c(o))
+          for (const [p, a] of Object.entries(o))
+            /^on[A-Z]/.test(p) && x(e, p, a);
+    }
+  }
+  return e;
+}, b = N({
+  mergeClassNames: !1,
+  mergeEventHandler: !1
+}), j = (t = {}, r = {}) => {
+  const n = Object.keys({
+    ...t,
+    ...r
+  });
+  return Object.fromEntries(
+    n.map((s) => [
+      s,
+      b(
+        t[s],
+        r[s]
+      )
+    ])
+  );
+}, V = (t) => {
+  const {
+    props: r,
+    dependencies: n = [],
+    mergeInParentContext: s = !1,
+    children: e,
+    ...o
+  } = t, p = v(), a = m(() => r, n), i = m(
+    () => s ? j(p, r) : r,
+    [a, p, s]
+  ), l = f(e) ? {
+    ...o,
+    ...e.props
+  } : o, d = [
+    e,
+    ...Object.entries(l).flatMap((g) => g)
+  ], P = m(
+    () => f(e) ? C(e, l) : e,
+    d
+  );
+  return /* @__PURE__ */ u.createElement(E.Provider, { value: i }, P);
+};
+export {
+  V as P,
+  j as m
+};

package/dist/PropsContextProvider.js

@@ -0,0 +1,9 @@
+"use client"
+/* */
+import "react";
+import "./propsContext-DzAKlmhS.js";
+import { P as p, P } from "./PropsContextProvider-C6Z4XGp6.js";
+export {
+  p as PropsContextProvider,
+  P as default
+};

package/dist/RadioGroup.js

@@ -1,57 +1,128 @@
 "use client"
 /* */
-import o from "react";
-import * as n from "react-aria-components";
-import { c as d } from "./clsx-DB4S2d7J.js";
-import "./propsContext-Dx7WKmmM.js";
-import { P as m } from "./PropsContextProvider-CEoxD8yK.js";
+import e from "react";
+import * as k from "react-aria-components";
+import E from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { P as C, m as z } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
-import { F as p } from "./FieldError-BAnloBK7.js";
+import "remeda";
+import { d as h } from "./dynamic-ClpUSmEt.js";
+import { F as B } from "./FieldError-DeuLuagS.js";
+import { C as F } from "./ColumnLayout-Bvw578tz.js";
+import { TunnelProvider as I, TunnelExit as m } from "@mittwald/react-tunnel";
+import { f as c } from "./FormField.module-CqWpTQKP.js";
+import { d as P } from "./deepFindOfType-6pG0fH7S.js";
+import { C as b } from "./ClearPropsContext-CUvsbMn8.js";
 import "@tabler/icons-react";
-import "./Icon-C8UD3vMe.js";
-import "html-react-parser";
-import { I as f } from "./IconCheck-QwbBte1y.js";
-const u = "flow--radio-group", E = "flow--radio-group--label", N = "flow--radio-group--field-error", g = "flow--radio-group--custom-field-error", w = "flow--radio-group--field-description", r = {
-  radioGroup: u,
-  label: E,
-  fieldError: N,
-  customFieldError: g,
-  fieldDescription: w
-}, L = (a) => {
-  const { children: t, className: s, ...c } = a, i = d(r.radioGroup, s), l = {
+import "./Icon-COqUQ8Af.js";
+import { I as y, a as v } from "./IconRadioOn-BSlpvXXO.js";
+import { f as N } from "./flowComponent-uZXy7sF4.js";
+import "dot-prop";
+import { I as D } from "./IconCheck-D-UNQ-2Z.js";
+import { g as T } from "./getContainerBreakpointSizeClassName-BrcFDcCY.js";
+const O = "flow--radio-group", S = "flow--radio-group--segmented-group", L = "flow--radio-group--segments", $ = "flow--radio-group--segment", A = "flow--radio-group--checkmark", j = "flow--radio-group--radio-group-container", r = {
+  radioGroup: O,
+  segmentedGroup: S,
+  segments: L,
+  segment: $,
+  checkmark: A,
+  radioGroupContainer: j,
+  "container-breakpoint-size-xs": "flow--radio-group--container-breakpoint-size-xs",
+  "container-breakpoint-size-s": "flow--radio-group--container-breakpoint-size-s",
+  "container-breakpoint-size-m": "flow--radio-group--container-breakpoint-size-m",
+  "container-breakpoint-size-l": "flow--radio-group--container-breakpoint-size-l",
+  "container-breakpoint-size-xl": "flow--radio-group--container-breakpoint-size-xl"
+}, q = "flow--radio-group--radio-button", H = "flow--radio-group--radio-button--content", J = "flow--radio-group--radio-button--label", f = {
+  radioButton: q,
+  content: H,
+  label: J
+}, K = N("RadioButton", (n) => {
+  const { children: t, className: a, refProp: o, ...i } = n, s = E(f.radioButton, a), l = {
+    Text: {
+      className: f.label
+    },
+    Content: {
+      className: f.content
+    }
+  };
+  return /* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement(U, { ...i, className: s, ref: o }, /* @__PURE__ */ e.createElement(C, { props: l }, t)));
+}), fe = N("RadioGroup", (n) => {
+  const {
+    children: t,
+    className: a,
+    variant: o = "default",
+    s: i,
+    m: s,
+    l,
+    containerBreakpointSize: d = "m",
+    refProp: w,
+    ...R
+  } = n, x = E(
+    c.formField,
+    r.radioGroupContainer,
+    a,
+    r[T(d)]
+  );
+  let p = {
     Label: {
-      className: r.label
+      className: c.label
     },
     FieldDescription: {
-      className: r.fieldDescription
+      className: c.fieldDescription,
+      tunnelId: "fieldDescription"
     },
     FieldError: {
-      className: r.customFieldError
-    }
-  };
-  return /* @__PURE__ */ o.createElement(n.RadioGroup, { ...c, className: i }, /* @__PURE__ */ o.createElement(m, { props: l }, t), /* @__PURE__ */ o.createElement(p, { className: r.fieldError }));
-}, b = "flow--radio-group--radio", k = "flow--radio-group--radio--content", h = "flow--radio-group--radio--icon", C = "flow--radio-group--radio--checkmark", F = "flow--radio-group--radio--label", e = {
-  radio: b,
-  content: k,
-  icon: h,
-  checkmark: C,
-  label: F
-}, T = (a) => {
-  const { children: t, className: s, ...c } = a, i = d(e.radio, s), l = {
-    Icon: {
-      className: e.icon
+      className: c.customFieldError,
+      tunnelId: "fieldError"
     },
-    Text: {
-      className: e.label
+    RadioButton: {
+      tunnelId: "radios"
     },
-    Content: {
-      className: e.content
+    Radio: {
+      tunnelId: "radios"
     }
   };
-  return /* @__PURE__ */ o.createElement(n.Radio, { ...c, className: i }, /* @__PURE__ */ o.createElement(m, { props: l }, t), /* @__PURE__ */ o.createElement(f, { className: e.checkmark }));
-};
+  o === "segmented" && (p = z(p, {
+    Radio: {
+      className: r.segment,
+      unstyled: !0,
+      children: h((G) => /* @__PURE__ */ e.createElement(e.Fragment, null, G.children, /* @__PURE__ */ e.createElement(D, { className: r.checkmark })))
+    }
+  }));
+  const u = !!P(t, K);
+  return o === "segmented" && u && console.warn(
+    "<RadioButton/> is not supported in 'segmented' variant of <RadioGroup />"
+  ), /* @__PURE__ */ e.createElement(k.RadioGroup, { ...R, className: x, ref: w }, /* @__PURE__ */ e.createElement(I, null, /* @__PURE__ */ e.createElement(
+    C,
+    {
+      props: p,
+      dependencies: [o],
+      mergeInParentContext: !0
+    },
+    t,
+    o === "segmented" && /* @__PURE__ */ e.createElement("div", { className: r.segmentedGroup }, /* @__PURE__ */ e.createElement("div", { className: r.segments }, /* @__PURE__ */ e.createElement(m, { id: "radios" }))),
+    o === "default" && u && /* @__PURE__ */ e.createElement(F, { s: i, m: s, l, className: r.radioGroup }, /* @__PURE__ */ e.createElement(m, { id: "radios" })),
+    o === "default" && !u && /* @__PURE__ */ e.createElement("div", { className: r.radioGroup }, /* @__PURE__ */ e.createElement(m, { id: "radios" })),
+    /* @__PURE__ */ e.createElement(m, { id: "fieldDescription" }),
+    /* @__PURE__ */ e.createElement(m, { id: "fieldError" })
+  )), /* @__PURE__ */ e.createElement(B, { className: c.fieldError }));
+}), M = "flow--radio-group--radio", Q = "flow--radio-group--radio--icon", g = {
+  radio: M,
+  icon: Q
+}, U = N("Radio", (n) => {
+  const {
+    children: t,
+    className: a,
+    unstyled: o = !1,
+    refProp: i,
+    ...s
+  } = n, l = o ? a : E(g.radio, a);
+  return /* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement(k.Radio, { ...s, className: l, ref: i }, ({ isSelected: d }) => /* @__PURE__ */ e.createElement(e.Fragment, null, d ? !o && /* @__PURE__ */ e.createElement(y, { className: g.icon }) : !o && /* @__PURE__ */ e.createElement(v, { className: g.icon }), t)));
+});
 export {
-  T as Radio,
-  L as RadioGroup,
-  L as default
+  U as Radio,
+  K as RadioButton,
+  fe as RadioGroup,
+  fe as default
 };

package/dist/Render-BdlTa7Qb.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import e from "react";
+const n = (r) => /* @__PURE__ */ e.createElement(e.Fragment, null, r.children());
+export {
+  n as R
+};

package/dist/Render.js

@@ -0,0 +1,6 @@
+"use client"
+/* */
+import { R as o } from "./Render-BdlTa7Qb.js";
+export {
+  o as Render
+};

package/dist/SearchField-D_McGKsS.js

@@ -0,0 +1,76 @@
+"use client"
+/* */
+import e from "react";
+import * as s from "react-aria-components";
+import { f as r } from "./FormField.module-CqWpTQKP.js";
+import f from "clsx";
+import { C as d } from "./ClearPropsContext-CUvsbMn8.js";
+import { P as h } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "./propsContext-DzAKlmhS.js";
+import "remeda";
+import { F as u } from "./FieldError-DeuLuagS.js";
+import { f as F } from "./flowComponent-uZXy7sF4.js";
+import { B as E } from "./Button-Da1fC2tj.js";
+import "@tabler/icons-react";
+import "./Icon-COqUQ8Af.js";
+import { I as N } from "./IconClose-DJWkLbQs.js";
+import { I as C } from "./IconSearch-Bufq0n5e.js";
+import { useLocalizedStringFormatter as S } from "react-aria";
+const I = "flow--search-field", w = "flow--search-field--clear-button", x = "flow--search-field--search-icon", B = "flow--search-field--input-container", P = "flow--search-field--input", t = {
+  searchField: I,
+  clearButton: w,
+  searchIcon: x,
+  inputContainer: B,
+  input: P
+}, b = { "de-DE": {
+  "searchField.search": "Suche"
+}, "en-EN": {
+  "searchField.search": "Search"
+} }, O = F("SearchField", (o) => {
+  const { children: c, className: l, refProp: i, ...n } = o, m = f(
+    r.formField,
+    t.searchField,
+    l
+  ), a = S(b).format("searchField.search"), p = {
+    Label: {
+      className: r.label,
+      optional: !o.isRequired
+    },
+    FieldDescription: {
+      className: r.fieldDescription
+    },
+    FieldError: {
+      className: r.customFieldError
+    }
+  };
+  return /* @__PURE__ */ e.createElement(d, null, /* @__PURE__ */ e.createElement(
+    s.SearchField,
+    {
+      "aria-label": a,
+      ...n,
+      className: m
+    },
+    /* @__PURE__ */ e.createElement(h, { props: p }, c),
+    /* @__PURE__ */ e.createElement("div", { className: t.inputContainer }, /* @__PURE__ */ e.createElement(C, { className: t.searchIcon }), /* @__PURE__ */ e.createElement(
+      s.Input,
+      {
+        placeholder: a,
+        className: t.input,
+        ref: i
+      }
+    ), /* @__PURE__ */ e.createElement(
+      E,
+      {
+        className: t.clearButton,
+        variant: "plain",
+        color: "secondary"
+      },
+      /* @__PURE__ */ e.createElement(N, null)
+    )),
+    /* @__PURE__ */ e.createElement(u, { className: r.fieldError })
+  ));
+});
+export {
+  O as S
+};

package/dist/SearchField.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { S as e } from "./SearchField-D_McGKsS.js";
+export {
+  e as SearchField,
+  e as default
+};

package/dist/Section-BXIIRoBN.js

@@ -0,0 +1,53 @@
+"use client"
+/* */
+import e, { useId as u } from "react";
+import f from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { P as c } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "remeda";
+import { f as i } from "./flowComponent-uZXy7sF4.js";
+import * as s from "react-aria-components";
+import { s as x } from "./ContextMenu.module-BZingr2B.js";
+const C = "flow--section", S = {
+  section: C
+}, E = i(
+  "ContextMenuSection",
+  (r) => {
+    const { children: t } = r, n = {
+      Heading: {
+        level: 5,
+        wrapWith: /* @__PURE__ */ e.createElement(s.Header, null)
+      }
+    };
+    return /* @__PURE__ */ e.createElement(s.Section, { className: x.section }, /* @__PURE__ */ e.createElement(c, { props: n, mergeInParentContext: !0 }, t));
+  }
+), y = i("Section", (r) => {
+  const {
+    children: t,
+    className: n,
+    refProp: a,
+    renderContextMenuSection: l,
+    ...m
+  } = r;
+  if (!t)
+    return null;
+  if (l)
+    return /* @__PURE__ */ e.createElement(E, null, t);
+  const p = f(S.section, n), o = u(), d = {
+    Heading: {
+      level: 2,
+      id: o
+    },
+    Header: {
+      renderSectionHeader: !0
+    },
+    List: {
+      "aria-labelledby": o
+    }
+  };
+  return /* @__PURE__ */ e.createElement("section", { ...m, className: p, ref: a }, /* @__PURE__ */ e.createElement(c, { props: d, mergeInParentContext: !0 }, t));
+});
+export {
+  y as S
+};

package/dist/Section.js

@@ -1,17 +1,7 @@
 "use client"
 /* */
-import n from "react";
-import { c as r } from "./clsx-DB4S2d7J.js";
-const a = "flow--section", l = {
-  section: a
-}, f = (s) => {
-  const { children: t, className: e, ...o } = s;
-  if (!t)
-    return null;
-  const c = r(l.section, e);
-  return /* @__PURE__ */ n.createElement("section", { ...o, className: c }, t);
-};
+import { S as t } from "./Section-BXIIRoBN.js";
 export {
-  f as Section,
-  f as default
+  t as Section,
+  t as default
 };

package/dist/Select.js

@@ -0,0 +1,89 @@
+"use client"
+/* */
+import e from "react";
+import * as i from "react-aria-components";
+import "./propsContext-DzAKlmhS.js";
+import { P as h } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "remeda";
+import { f as c } from "./FormField.module-CqWpTQKP.js";
+import { F as w } from "./FieldError-DeuLuagS.js";
+import f from "clsx";
+import "@tabler/icons-react";
+import "./Icon-COqUQ8Af.js";
+import { I as F } from "./IconChevronDown-Cs4gzBPk.js";
+import { f as E } from "./flowComponent-uZXy7sF4.js";
+import { P } from "./PopoverTrigger-FxIUjWed.js";
+import "mobx";
+import { u as C } from "./useOverlayController-D8pgx8nV.js";
+import { TunnelProvider as y, TunnelExit as I } from "@mittwald/react-tunnel";
+import { O as B } from "./OverlayTrigger-bD8_mPel.js";
+const D = "flow--select", L = "flow--select--toggle", u = {
+  select: D,
+  toggle: L
+}, b = "flow--select--options--popover", R = "flow--select--options", d = {
+  popover: b,
+  options: R
+}, T = (o) => {
+  const { className: t, children: r, ...n } = o, l = f(d.options, t), s = C("Select");
+  return /* @__PURE__ */ e.createElement(P, { className: d.popover, controller: s }, /* @__PURE__ */ e.createElement(i.ListBox, { className: l, ...n }, r));
+}, re = E("Select", (o) => {
+  const {
+    children: t,
+    className: r,
+    onChange: n = () => {
+    },
+    onSelectionChange: l = () => {
+    },
+    controller: s,
+    refProp: m,
+    ...N
+  } = o, g = f(
+    u.select,
+    c.formField,
+    r
+  ), x = {
+    Label: {
+      className: c.label,
+      optional: !o.isRequired
+    },
+    FieldDescription: {
+      className: c.fieldDescription
+    },
+    FieldError: {
+      className: c.customFieldError
+    },
+    Option: {
+      tunnelId: "options"
+    }
+  }, v = (a) => {
+    n(String(a)), l(a);
+  }, O = C("Select", {
+    reuseControllerFromContext: !0
+  }), p = s ?? O, S = p.useIsOpen();
+  return /* @__PURE__ */ e.createElement(
+    i.Select,
+    {
+      ...N,
+      className: g,
+      ref: m,
+      onSelectionChange: v,
+      onOpenChange: (a) => p.setOpen(a),
+      isOpen: S
+    },
+    /* @__PURE__ */ e.createElement(B, { type: "Select", controller: p }, /* @__PURE__ */ e.createElement(h, { props: x }, /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(i.Button, { className: u.toggle }, /* @__PURE__ */ e.createElement(i.SelectValue, null), /* @__PURE__ */ e.createElement(F, null)), t, /* @__PURE__ */ e.createElement(T, null, /* @__PURE__ */ e.createElement(I, { id: "options" })), /* @__PURE__ */ e.createElement(w, { className: c.fieldError }))))
+  );
+}), $ = "flow--select--option", q = "flow--select--option--icon", A = "flow--select--option--text", V = "flow--select--option--control-icon", j = {
+  option: $,
+  icon: q,
+  text: A,
+  controlIcon: V
+}, ne = E("Option", (o) => {
+  const { className: t, children: r, value: n, refProp: l, ...s } = o, m = f(j.option, t);
+  return /* @__PURE__ */ e.createElement(i.ListBoxItem, { className: m, ref: l, ...s, id: n }, r);
+});
+export {
+  ne as Option,
+  re as Select,
+  re as default
+};

package/dist/Separator.js

@@ -0,0 +1,15 @@
+"use client"
+/* */
+import o from "react";
+import s from "clsx";
+import * as m from "react-aria-components";
+const p = "flow--separator", c = {
+  separator: p
+}, f = (r) => {
+  const { className: a, ...t } = r, e = s(c.separator, a);
+  return /* @__PURE__ */ o.createElement(m.Separator, { elementType: "hr", className: e, ...t });
+};
+export {
+  f as Separator,
+  f as default
+};