@mittwald/flow-react-components 0.1.0-alpha.99 → 0.2.0-alpha.5

package/dist/js/Overlay-DwzbTVgq.js

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

package/dist/js/OverlayContextProvider-C0QWZnxI.js

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

package/dist/js/OverlayTrigger-BZlDcOaA.js

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

package/dist/js/Popover-DBfkeZvV.js

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

package/dist/js/Popover.js

@@ -0,0 +1,24 @@
+"use client"
+/* */
+import * as t from "react-aria-components";
+import p from "react";
+import { O as i } from "./OverlayTrigger-BZlDcOaA.js";
+import { f as m } from "./flowComponent-C9QB9J-7.js";
+import { P as s } from "./Popover-DBfkeZvV.js";
+const l = m("PopoverTrigger", (r) => {
+  const { children: o, ...e } = r;
+  return /* @__PURE__ */ p.createElement(
+    i,
+    {
+      overlayType: "Popover",
+      ...e,
+      component: t.DialogTrigger
+    },
+    o
+  );
+});
+export {
+  s as Popover,
+  l as PopoverTrigger,
+  s as default
+};

package/dist/js/ProgressBar.js

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

package/dist/js/PropsContextProvider.js

@@ -0,0 +1,54 @@
+"use client"
+/* */
+import i, { useMemo as c } from "react";
+import { u as f, p as l } from "./propsContext-DzAKlmhS.js";
+import { mergeProps as P } from "@react-aria/utils";
+import { isObjectType as m } 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 (m(s)) {
+    if (!n)
+      for (const r of e)
+        m(r) && "className" in s && "className" in r && (s.className = r.className);
+    if (!o) {
+      for (const r of e)
+        if (m(r))
+          for (const [p, a] of Object.entries(r))
+            /^on[A-Z]/.test(p) && d(s, p, a);
+    }
+  }
+  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]
+      )
+    ])
+  );
+}, H = (t) => {
+  const {
+    props: e,
+    dependencies: n = [],
+    mergeInParentContext: o = !1,
+    children: s
+  } = t, r = f(), p = c(() => e, n), a = c(
+    () => o ? v(r, e) : e,
+    [p, r, o]
+  );
+  return /* @__PURE__ */ i.createElement(l.Provider, { value: a }, s);
+};
+export {
+  H as PropsContextProvider,
+  H as default
+};

package/dist/js/RadioGroup.js

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

package/dist/js/Render-BOMk4emj.js

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

package/dist/js/Render.js

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

package/dist/js/SearchField-6FORWdLV.js

@@ -0,0 +1,75 @@
+"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 { PropsContextProvider as h } from "./PropsContextProvider.js";
+import "./propsContext-DzAKlmhS.js";
+import { F as u } from "./FieldError-DtGe3KyW.js";
+import { f as F } from "./flowComponent-C9QB9J-7.js";
+import { B as E } from "./Button-BVX7ZUc-.js";
+import "@tabler/icons-react";
+import "html-react-parser";
+import "react-children-utilities";
+import { I as N } from "./IconClose-DN0Ute9B.js";
+import { I as C } from "./IconSearch-ChfYI7ql.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", b = "flow--search-field--input", t = {
+  searchField: I,
+  clearButton: w,
+  searchIcon: x,
+  inputContainer: B,
+  input: b
+}, g = { "de-DE": {
+  "searchField.search": "Suche"
+}, "en-EN": {
+  "searchField.search": "Search"
+} }, M = F("SearchField", (o) => {
+  const { children: c, className: l, ref: i, ...n } = o, m = f(
+    r.formField,
+    t.searchField,
+    l
+  ), a = S(g).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 {
+  M as S
+};

package/dist/js/SearchField.js

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

package/dist/js/Section-BMXmmtYP.js

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

package/dist/js/Section.js

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

package/dist/js/SegmentedControl.js

@@ -0,0 +1,82 @@
+"use client"
+/* */
+import { f as d } from "./flowComponent-C9QB9J-7.js";
+import e from "react";
+import * as p from "react-aria-components";
+import { f as n } from "./FormField.module-CqWpTQKP.js";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as k } from "./PropsContextProvider.js";
+import { TunnelProvider as E, TunnelExit as a } from "@mittwald/react-tunnel";
+import { F as N } from "./FieldError-DtGe3KyW.js";
+import g from "clsx";
+import "@tabler/icons-react";
+import "html-react-parser";
+import { C as b } from "./ClearPropsContext-CUvsbMn8.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import "react-children-utilities";
+import { I as u } from "./IconCheck-ClZdn5Cn.js";
+const z = "flow--segmented-control", w = "flow--segmented-control--segments", x = "flow--segmented-control--segmented-control-container", S = "flow--segmented-control--segment", o = {
+  segmentedControl: z,
+  segments: w,
+  segmentedControlContainer: x,
+  "container-breakpoint-size-xs": "flow--segmented-control--container-breakpoint-size-xs",
+  segment: S,
+  "container-breakpoint-size-s": "flow--segmented-control--container-breakpoint-size-s",
+  "container-breakpoint-size-m": "flow--segmented-control--container-breakpoint-size-m",
+  "container-breakpoint-size-l": "flow--segmented-control--container-breakpoint-size-l",
+  "container-breakpoint-size-xl": "flow--segmented-control--container-breakpoint-size-xl"
+}, h = (t) => `container-breakpoint-size-${t}`, M = d("SegmentedControl", (t) => {
+  const {
+    children: r,
+    className: s,
+    containerBreakpointSize: m = "m",
+    ref: l,
+    ...i
+  } = t, f = g(
+    n.formField,
+    o.segmentedControlContainer,
+    s,
+    o[h(m)]
+  ), C = {
+    Label: {
+      className: n.label
+    },
+    FieldDescription: {
+      className: n.fieldDescription,
+      tunnelId: "fieldDescription"
+    },
+    FieldError: {
+      className: n.customFieldError,
+      tunnelId: "fieldError"
+    },
+    Segment: {
+      tunnelId: "segments",
+      className: o.segment
+    }
+  };
+  return /* @__PURE__ */ e.createElement(p.RadioGroup, { ...i, className: f, ref: l }, /* @__PURE__ */ e.createElement(E, null, /* @__PURE__ */ e.createElement(
+    k,
+    {
+      dependencies: ["segment"],
+      props: C,
+      mergeInParentContext: !0
+    },
+    r,
+    /* @__PURE__ */ e.createElement("div", { className: o.segmentedControl }, /* @__PURE__ */ e.createElement("div", { className: o.segments }, /* @__PURE__ */ e.createElement(a, { id: "segments" }))),
+    /* @__PURE__ */ e.createElement(a, { id: "fieldDescription" }),
+    /* @__PURE__ */ e.createElement(a, { id: "fieldError" })
+  )), /* @__PURE__ */ e.createElement(N, { className: n.fieldError }));
+}), F = "flow--segmented-control--segment", I = "flow--segmented-control--segment--checkmark", c = {
+  segment: F,
+  checkmark: I
+}, O = d("Segment", (t) => {
+  const { children: r, className: s, ref: m, ...l } = t, i = g(c.segment, s);
+  return /* @__PURE__ */ e.createElement(b, null, /* @__PURE__ */ e.createElement(p.Radio, { ...l, className: i, ref: m }, r, /* @__PURE__ */ e.createElement(u, { className: c.checkmark })));
+});
+export {
+  O as Segment,
+  M as SegmentedControl,
+  M as default
+};