@mittwald/flow-react-components 0.1.0-alpha.98 → 0.2.0-alpha.10

package/dist/js/NumberField.js

@@ -0,0 +1,80 @@
+"use client"
+/* */
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import "react";
+import * as n from "react-aria-components";
+import { f as e } from "./FormField.module-CqWpTQKP.js";
+import d from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { C as f } from "./ClearPropsContext-CIgOlDjP.js";
+import { PropsContextProvider as N } from "./PropsContextProvider.js";
+import { F as b } from "./FieldError-Dvter_gI.js";
+import { B as i } from "./Button-WawPguWq.js";
+import "@tabler/icons-react";
+import { f as I } from "./flowComponent-B8dC8eRj.js";
+import "./viewComponentContext-HXEKmx_D.js";
+import { I as F } from "./IconChevronDown-DbVQ4UKe.js";
+import { I as C } from "./IconChevronUp-C7IqV12r.js";
+import { I as h, a as B } from "./IconPlus-B4GbH9Av.js";
+const P = "flow--number-field--group", w = "flow--number-field--input", x = "flow--number-field--decrement-button", v = "flow--number-field--increment-button", g = "flow--number-field--coarse-pointer-icon", r = {
+  group: P,
+  input: w,
+  decrementButton: x,
+  incrementButton: v,
+  coarsePointerIcon: g
+}, J = I(
+  "NumberField",
+  (s) => {
+    const { children: m, className: a, ref: c, ...l } = s, p = d(e.formField, a), u = {
+      Label: {
+        className: e.label,
+        optional: !s.isRequired
+      },
+      FieldDescription: {
+        className: e.fieldDescription
+      },
+      FieldError: {
+        className: e.customFieldError
+      }
+    };
+    return /* @__PURE__ */ o(f, { children: /* @__PURE__ */ t(n.NumberField, { ...l, className: p, children: [
+      /* @__PURE__ */ t(n.Group, { className: r.group, children: [
+        /* @__PURE__ */ t(
+          i,
+          {
+            ariaSlot: "decrement",
+            className: r.decrementButton,
+            size: "s",
+            variant: "plain",
+            color: "secondary",
+            children: [
+              /* @__PURE__ */ o(F, {}),
+              /* @__PURE__ */ o(h, { className: r.coarsePointerIcon })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(n.Input, { className: r.input, ref: c }),
+        /* @__PURE__ */ t(
+          i,
+          {
+            ariaSlot: "increment",
+            className: r.incrementButton,
+            size: "s",
+            variant: "plain",
+            color: "secondary",
+            children: [
+              /* @__PURE__ */ o(C, {}),
+              /* @__PURE__ */ o(B, { className: r.coarsePointerIcon })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(N, { props: u, children: m }),
+      /* @__PURE__ */ o(b, { className: e.fieldError })
+    ] }) });
+  }
+);
+export {
+  J as NumberField,
+  J as default
+};

package/dist/js/Overlay-B5crcN0U.js

@@ -0,0 +1,38 @@
+"use client"
+/* */
+import { jsx as o } from "react/jsx-runtime";
+import * as e from "react-aria-components";
+import "react";
+import d from "clsx";
+import "mobx";
+import { u as f } from "./useOverlayController-BwSJj4Ly.js";
+import { O } from "./OverlayContextProvider-B7EDTT1X.js";
+const u = "flow--overlay", C = {
+  overlay: u,
+  "overlay-fade": "flow--overlay--overlay-fade"
+}, w = (l) => {
+  const {
+    controller: t,
+    children: s,
+    isDismissable: a = !0,
+    className: n,
+    overlayType: c = "Modal",
+    ref: m
+  } = l, i = f(c, {
+    reuseControllerFromContext: !0
+  }), r = t ?? i, p = r.useIsOpen(), y = d(C.overlay, n);
+  return /* @__PURE__ */ o(
+    e.ModalOverlay,
+    {
+      className: y,
+      isDismissable: a,
+      isOpen: p,
+      onOpenChange: (v) => r.setOpen(v),
+      ref: m,
+      children: /* @__PURE__ */ o(e.Modal, { children: /* @__PURE__ */ o(e.Dialog, { children: /* @__PURE__ */ o(O, { type: "Modal", controller: r, children: s }) }) })
+    }
+  );
+};
+export {
+  w as O
+};

package/dist/js/OverlayContextProvider-B7EDTT1X.js

@@ -0,0 +1,21 @@
+"use client"
+/* */
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+import { u as s, o as l } from "./context-BaYmTa0I.js";
+const x = (o) => {
+  const { type: r, controller: t, children: e } = o, n = s();
+  return /* @__PURE__ */ a(
+    l.Provider,
+    {
+      value: {
+        ...n,
+        [r]: t
+      },
+      children: e
+    }
+  );
+};
+export {
+  x as O
+};

package/dist/js/OverlayTrigger-lqEEBZnu.js

@@ -0,0 +1,25 @@
+"use client"
+/* */
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { O as m } from "./context-BaYmTa0I.js";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as O } from "./PropsContextProvider.js";
+import { O as v } from "./OverlayContextProvider-B7EDTT1X.js";
+const d = (e) => {
+  const {
+    overlayType: t,
+    isDefaultOpen: n = !1,
+    component: l,
+    children: s,
+    controller: p
+  } = e, i = m.useNew({ isDefaultOpen: n }), r = p ?? i, a = r.useIsOpen(), c = {
+    Button: {
+      onPress: r.open
+    }
+  };
+  return /* @__PURE__ */ o(v, { type: t, controller: r, children: /* @__PURE__ */ o(O, { props: c, mergeInParentContext: !0, children: /* @__PURE__ */ o(l, { isOpen: a, children: s }) }) });
+};
+export {
+  d as O
+};

package/dist/js/Popover-C8jwukE3.js

@@ -0,0 +1,61 @@
+"use client"
+/* */
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import "react";
+import * as t from "react-aria-components";
+import p from "clsx";
+import "mobx";
+import { u as x } from "./useOverlayController-BwSJj4Ly.js";
+import { f as y } from "./flowComponent-B8dC8eRj.js";
+import { O as N } from "./OverlayContextProvider-B7EDTT1X.js";
+const D = "flow--popover", F = "flow--popover--content", j = "flow--popover--tip", e = {
+  popover: D,
+  content: F,
+  "padding-s": "flow--popover--padding-s",
+  tip: j,
+  "popover-slide": "flow--popover--popover-slide"
+}, b = y("Popover", (s) => {
+  const {
+    children: l,
+    className: i,
+    isDialogContent: a = !1,
+    controller: c,
+    withTip: m,
+    ref: d,
+    defaultOpen: v = !1,
+    width: f,
+    padding: n = "m",
+    ...h
+  } = s, w = x("Popover", {
+    reuseControllerFromContext: !0,
+    isDefaultOpen: v
+  }), r = c ?? w, C = r.useIsOpen(), g = p(e.popover, i), O = a ? t.Dialog : "div";
+  return /* @__PURE__ */ u(
+    t.Popover,
+    {
+      ...h,
+      className: g,
+      containerPadding: 16,
+      ref: d,
+      isOpen: C,
+      onOpenChange: (P) => r.setOpen(P),
+      style: { width: f },
+      children: [
+        m && /* @__PURE__ */ o(t.OverlayArrow, { className: e.tip, children: /* @__PURE__ */ o("svg", { width: 16, height: 16, viewBox: "0 0 16 16", children: /* @__PURE__ */ o("path", { d: "M0 0 L8 8 L16 0" }) }) }),
+        /* @__PURE__ */ o(
+          O,
+          {
+            className: p(
+              e.content,
+              n && e[`padding-${n}`]
+            ),
+            children: /* @__PURE__ */ o(N, { type: "Popover", controller: r, children: l })
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  b as P
+};

package/dist/js/Popover.js

@@ -0,0 +1,25 @@
+"use client"
+/* */
+import { jsx as p } from "react/jsx-runtime";
+import * as i from "react-aria-components";
+import "react";
+import { O as t } from "./OverlayTrigger-lqEEBZnu.js";
+import { f as m } from "./flowComponent-B8dC8eRj.js";
+import { P as l } from "./Popover-C8jwukE3.js";
+const v = m("PopoverTrigger", (r) => {
+  const { children: o, ...e } = r;
+  return /* @__PURE__ */ p(
+    t,
+    {
+      overlayType: "Popover",
+      ...e,
+      component: i.DialogTrigger,
+      children: o
+    }
+  );
+});
+export {
+  l as Popover,
+  v as PopoverTrigger,
+  l as default
+};

package/dist/js/ProgressBar.js

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

package/dist/js/PropsContextProvider.js

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

package/dist/js/RadioGroup.js

@@ -0,0 +1,102 @@
+"use client"
+/* */
+import { jsx as o, jsxs as u, Fragment as G } from "react/jsx-runtime";
+import "react";
+import * as h from "react-aria-components";
+import f from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as R } from "./PropsContextProvider.js";
+import { F as I } from "./FieldError-Dvter_gI.js";
+import { C as w } from "./ColumnLayout-Cv_F_U5q.js";
+import { TunnelProvider as B, TunnelExit as l } from "@mittwald/react-tunnel";
+import { f as d } from "./FormField.module-CqWpTQKP.js";
+import { C as x } from "./ClearPropsContext-CIgOlDjP.js";
+import "@tabler/icons-react";
+import { f as N } from "./flowComponent-B8dC8eRj.js";
+import "./viewComponentContext-HXEKmx_D.js";
+import "react-children-utilities";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import { I as E, a as y } from "./IconRadioOn-CbW3RjJ2.js";
+import { d as P } from "./deepHas-KHS5X1F_.js";
+const D = "flow--radio-group", c = {
+  radioGroup: D
+}, v = "flow--radio-group--radio-button", T = "flow--radio-group--radio-button--content", j = "flow--radio-group--radio-button--label", m = {
+  radioButton: v,
+  content: T,
+  label: j
+}, L = N(
+  "RadioButton",
+  (t) => {
+    const { children: r, className: i, ref: a, ...s } = t, e = f(m.radioButton, i), n = {
+      Text: {
+        className: m.label
+      },
+      Content: {
+        className: m.content
+      }
+    };
+    return /* @__PURE__ */ o(x, { children: /* @__PURE__ */ o(A, { ...s, className: e, ref: a, children: /* @__PURE__ */ o(R, { props: n, children: r }) }) });
+  }
+), io = N("RadioGroup", (t) => {
+  const { children: r, className: i, s: a, m: s, l: e, ref: n, ...b } = t, g = f(
+    d.formField,
+    c.radioGroupContainer,
+    i
+  ), F = {
+    Label: {
+      className: d.label
+    },
+    FieldDescription: {
+      className: d.fieldDescription,
+      tunnelId: "fieldDescription"
+    },
+    FieldError: {
+      className: d.customFieldError,
+      tunnelId: "fieldError"
+    },
+    RadioButton: {
+      tunnelId: "radios"
+    },
+    Radio: {
+      tunnelId: "radios"
+    }
+  }, C = P(r, L);
+  return /* @__PURE__ */ u(h.RadioGroup, { ...b, className: g, ref: n, children: [
+    /* @__PURE__ */ o(B, { children: /* @__PURE__ */ u(
+      R,
+      {
+        dependencies: ["radio"],
+        props: F,
+        mergeInParentContext: !0,
+        children: [
+          r,
+          C && /* @__PURE__ */ o(w, { s: a, m: s, l: e, className: c.radioGroup, children: /* @__PURE__ */ o(l, { id: "radios" }) }),
+          !C && /* @__PURE__ */ o("div", { className: c.radioGroup, children: /* @__PURE__ */ o(l, { id: "radios" }) }),
+          /* @__PURE__ */ o(l, { id: "fieldDescription" }),
+          /* @__PURE__ */ o(l, { id: "fieldError" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ o(I, { className: d.fieldError })
+  ] });
+}), O = "flow--radio-group--radio", $ = "flow--radio-group--radio--icon", p = {
+  radio: O,
+  icon: $
+}, A = N(
+  "Radio",
+  (t) => {
+    const { children: r, className: i, ref: a, ...s } = t, e = f(p.radio, i);
+    return /* @__PURE__ */ o(x, { children: /* @__PURE__ */ o(h.Radio, { ...s, className: e, ref: a, children: ({ isSelected: n }) => /* @__PURE__ */ u(G, { children: [
+      n ? /* @__PURE__ */ o(E, { className: p.icon }) : /* @__PURE__ */ o(y, { className: p.icon }),
+      r
+    ] }) }) });
+  }
+);
+export {
+  A as Radio,
+  L as RadioButton,
+  io as RadioGroup,
+  io as default
+};

package/dist/js/Render-CP9hqaf1.js

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

package/dist/js/Render.js

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

package/dist/js/SearchField-ONmuF9P1.js

@@ -0,0 +1,84 @@
+"use client"
+/* */
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import "react";
+import * as c from "react-aria-components";
+import { f as e } from "./FormField.module-CqWpTQKP.js";
+import f from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { C as h } from "./ClearPropsContext-CIgOlDjP.js";
+import { PropsContextProvider as u } from "./PropsContextProvider.js";
+import { F } from "./FieldError-Dvter_gI.js";
+import { f as N } from "./flowComponent-B8dC8eRj.js";
+import { B as C } from "./Button-WawPguWq.js";
+import "@tabler/icons-react";
+import "./viewComponentContext-HXEKmx_D.js";
+import { I as S } from "./IconClose-B4zJVugN.js";
+import { I as x } from "./IconSearch-DEZjce1A.js";
+import { useLocalizedStringFormatter as I } from "react-aria";
+const w = "flow--search-field", E = "flow--search-field--clear-button", B = "flow--search-field--search-icon", b = "flow--search-field--input-container", g = "flow--search-field--input", o = {
+  searchField: w,
+  clearButton: E,
+  searchIcon: B,
+  inputContainer: b,
+  input: g
+}, v = { "de-DE": {
+  "searchField.search": "Suche"
+}, "en-EN": {
+  "searchField.search": "Search"
+} }, O = N(
+  "SearchField",
+  (s) => {
+    const { children: i, className: l, ref: n, ...m } = s, p = f(
+      e.formField,
+      o.searchField,
+      l
+    ), a = I(v).format("searchField.search"), d = {
+      Label: {
+        className: e.label,
+        optional: !s.isRequired
+      },
+      FieldDescription: {
+        className: e.fieldDescription
+      },
+      FieldError: {
+        className: e.customFieldError
+      }
+    };
+    return /* @__PURE__ */ r(h, { children: /* @__PURE__ */ t(
+      c.SearchField,
+      {
+        "aria-label": a,
+        ...m,
+        className: p,
+        children: [
+          /* @__PURE__ */ r(u, { props: d, children: i }),
+          /* @__PURE__ */ t("div", { className: o.inputContainer, children: [
+            /* @__PURE__ */ r(x, { className: o.searchIcon }),
+            /* @__PURE__ */ r(
+              c.Input,
+              {
+                placeholder: a,
+                className: o.input,
+                ref: n
+              }
+            ),
+            /* @__PURE__ */ r(
+              C,
+              {
+                className: o.clearButton,
+                variant: "plain",
+                color: "secondary",
+                children: /* @__PURE__ */ r(S, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r(F, { className: e.fieldError })
+        ]
+      }
+    ) });
+  }
+);
+export {
+  O as S
+};

package/dist/js/SearchField.js

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

package/dist/js/Section-CWfvE5ls.js

@@ -0,0 +1,51 @@
+"use client"
+/* */
+import { jsx as o } from "react/jsx-runtime";
+import { useId as p } from "react";
+import f from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as h } from "./PropsContextProvider.js";
+import { f as S } from "./flowComponent-B8dC8eRj.js";
+import { C as u } from "./ContextMenuSection-C4JcZt6N.js";
+const x = "flow--section", C = "flow--section--hide-separator", g = "flow--section--heading", t = {
+  section: x,
+  hideSeparator: C,
+  heading: g
+}, y = S(
+  "Section",
+  (n) => {
+    const {
+      children: e,
+      className: i,
+      ref: s,
+      renderContextMenuSection: a,
+      hideSeparator: c,
+      ...d
+    } = n;
+    if (!e)
+      return null;
+    if (a)
+      return /* @__PURE__ */ o(u, { children: e });
+    const l = f(
+      t.section,
+      i,
+      c && t.hideSeparator
+    ), r = p(), m = {
+      Heading: {
+        level: 2,
+        id: r,
+        className: t.heading
+      },
+      Header: {
+        renderSectionHeader: !0
+      },
+      List: {
+        "aria-labelledby": r
+      }
+    };
+    return /* @__PURE__ */ o("section", { ...d, className: l, ref: s, children: /* @__PURE__ */ o(h, { props: m, mergeInParentContext: !0, children: e }) });
+  }
+);
+export {
+  y as S
+};

package/dist/js/Section.js

@@ -0,0 +1,7 @@
+"use client"
+/* */
+import { S as t } from "./Section-CWfvE5ls.js";
+export {
+  t as Section,
+  t as default
+};