@mittwald/flow-react-components 0.1.0-alpha.43 → 0.1.0-alpha.430

package/dist/js/Overlay-C9X7ovU-.js

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

package/dist/js/OverlayTrigger-AlmeaOft.js

@@ -0,0 +1,38 @@
+"use client"
+/* */
+import e from "react";
+import { u as m, o as v, O as y } from "./context-JScptH87.js";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as O } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "remeda";
+const u = (r) => {
+  const { type: o, controller: t, children: n } = r, l = m();
+  return /* @__PURE__ */ e.createElement(
+    v.Provider,
+    {
+      value: {
+        ...l,
+        [o]: t
+      }
+    },
+    n
+  );
+}, E = (r) => {
+  const {
+    overlayType: o,
+    isDefaultOpen: t = !1,
+    component: n,
+    children: l,
+    controller: a
+  } = r, p = y.useNew({ isDefaultOpen: t }), s = a ?? p, c = s.useIsOpen(), i = {
+    Button: {
+      onPress: s.open
+    }
+  };
+  return /* @__PURE__ */ e.createElement(u, { type: o, controller: s }, /* @__PURE__ */ e.createElement(O, { props: i, mergeInParentContext: !0 }, /* @__PURE__ */ e.createElement(n, { isOpen: c }, l)));
+};
+export {
+  u as O,
+  E as a
+};

package/dist/js/Popover-CUcQMlfm.js

@@ -0,0 +1,70 @@
+"use client"
+/* */
+import * as r from "react-aria-components";
+import e from "react";
+import { a as y, O as E } from "./OverlayTrigger-AlmeaOft.js";
+import { f as i } from "./flowComponent-B1r5sCmz.js";
+import a from "clsx";
+import "mobx";
+import { u as x } from "./useOverlayController-ZXQCcFC-.js";
+const R = i("PopoverTrigger", (t) => {
+  const { children: n, ...p } = t;
+  return /* @__PURE__ */ e.createElement(
+    y,
+    {
+      overlayType: "Popover",
+      ...p,
+      component: r.DialogTrigger
+    },
+    n
+  );
+}), T = "flow--popover", N = "flow--popover--content", D = "flow--popover--tip", o = {
+  popover: T,
+  content: N,
+  "padding-s": "flow--popover--padding-s",
+  tip: D,
+  "popover-slide": "flow--popover--popover-slide"
+}, $ = i("Popover", (t) => {
+  const {
+    children: n,
+    className: p,
+    isDialogContent: c = !1,
+    controller: m,
+    withTip: v,
+    refProp: g,
+    defaultOpen: d = !1,
+    width: f,
+    padding: l = "m",
+    ...P
+  } = t, w = x("Popover", {
+    reuseControllerFromContext: !0,
+    isDefaultOpen: d
+  }), s = m ?? w, C = s.useIsOpen(), O = a(o.popover, p), h = c ? r.Dialog : "div";
+  return /* @__PURE__ */ e.createElement(
+    r.Popover,
+    {
+      ...P,
+      className: O,
+      containerPadding: 16,
+      ref: g,
+      isOpen: C,
+      onOpenChange: (u) => s.setOpen(u),
+      style: { width: f }
+    },
+    v && /* @__PURE__ */ e.createElement(r.OverlayArrow, { className: o.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(
+      h,
+      {
+        className: a(
+          o.content,
+          l && o[`padding-${l}`]
+        )
+      },
+      /* @__PURE__ */ e.createElement(E, { type: "Popover", controller: s }, n)
+    )
+  );
+});
+export {
+  $ as P,
+  R as a
+};

package/dist/js/Popover.js

@@ -0,0 +1,9 @@
+"use client"
+/* */
+import { P as r } from "./Popover-CUcQMlfm.js";
+import { a as p } from "./Popover-CUcQMlfm.js";
+export {
+  r as Popover,
+  p as PopoverTrigger,
+  r as default
+};

package/dist/js/ProgressBar.js

@@ -0,0 +1,50 @@
+"use client"
+/* */
+import * as w from "react-aria-components";
+import s from "react";
+import d from "clsx";
+import { useLocalizedStringFormatter as N, useNumberFormatter as v } from "react-aria";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as x } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "remeda";
+const B = "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: B,
+  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"
+} }, j = (e) => {
+  const {
+    children: t,
+    className: l,
+    status: n = "info",
+    showMaxValue: c,
+    size: m = "m",
+    ...i
+  } = e, f = d(
+    l,
+    r.progressBar,
+    r[`size-${m}`],
+    r[n]
+  ), g = N(F), p = v(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: f, ...i }, ({ percentage: u, valueText: a }) => /* @__PURE__ */ s.createElement(x, { 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 {
+  j as ProgressBar,
+  j 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,85 @@
+"use client"
+/* */
+import o from "react";
+import * as E from "react-aria-components";
+import u from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { PropsContextProvider as N } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "remeda";
+import { F as g } from "./FieldError-C-_2QNam.js";
+import { C as B } from "./ColumnLayout-BhsG7J-Z.js";
+import { TunnelProvider as F, TunnelExit as c } from "@mittwald/react-tunnel";
+import { f as l } from "./FormField.module-CqWpTQKP.js";
+import { f } from "./flowComponent-B1r5sCmz.js";
+import "@tabler/icons-react";
+import "./Icon-mUEZToWz.js";
+import { I as G, a as I } from "./IconRadioOn-BNHyvV5K.js";
+import { C } from "./ClearPropsContext-CUvsbMn8.js";
+import "dot-prop";
+const P = "flow--radio-group", m = {
+  radioGroup: P
+}, W = f("RadioGroup", (e) => {
+  const { children: r, className: t, s: a, m: n, l: i, refProp: s, ...R } = e, b = u(
+    l.formField,
+    m.radioGroupContainer,
+    t
+  ), x = {
+    Label: {
+      className: l.label
+    },
+    FieldDescription: {
+      className: l.fieldDescription,
+      tunnelId: "fieldDescription"
+    },
+    FieldError: {
+      className: l.customFieldError,
+      tunnelId: "fieldError"
+    },
+    RadioButton: {
+      tunnelId: "radioButtons"
+    },
+    Radio: {
+      tunnelId: "radios"
+    }
+  };
+  return /* @__PURE__ */ o.createElement(E.RadioGroup, { ...R, className: b, ref: s }, /* @__PURE__ */ o.createElement(F, null, /* @__PURE__ */ o.createElement(
+    N,
+    {
+      dependencies: ["radio"],
+      props: x,
+      mergeInParentContext: !0
+    },
+    r,
+    /* @__PURE__ */ o.createElement(B, { s: a, m: n, l: i, className: m.radioGroup }, /* @__PURE__ */ o.createElement(c, { id: "radioButtons" })),
+    /* @__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(g, { className: l.fieldError }));
+}), w = "flow--radio-group--radio", y = "flow--radio-group--radio--icon", d = {
+  radio: w,
+  icon: y
+}, D = f("Radio", (e) => {
+  const { children: r, className: t, refProp: a, ...n } = e, i = u(d.radio, t);
+  return /* @__PURE__ */ o.createElement(C, null, /* @__PURE__ */ o.createElement(E.Radio, { ...n, className: i, ref: a }, ({ isSelected: s }) => /* @__PURE__ */ o.createElement(o.Fragment, null, s ? /* @__PURE__ */ o.createElement(G, { className: d.icon }) : /* @__PURE__ */ o.createElement(I, { className: d.icon }), r)));
+}), h = "flow--radio-group--radio-button", v = "flow--radio-group--radio-button--content", T = "flow--radio-group--radio-button--label", p = {
+  radioButton: h,
+  content: v,
+  label: T
+}, X = f("RadioButton", (e) => {
+  const { children: r, className: t, refProp: a, ...n } = e, i = u(p.radioButton, t), s = {
+    Text: {
+      className: p.label
+    },
+    Content: {
+      className: p.content
+    }
+  };
+  return /* @__PURE__ */ o.createElement(C, null, /* @__PURE__ */ o.createElement(D, { ...n, className: i, ref: a }, /* @__PURE__ */ o.createElement(N, { props: s }, r)));
+});
+export {
+  D as Radio,
+  X as RadioButton,
+  W as RadioGroup,
+  W 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-DudIf4KT.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 { PropsContextProvider as h } from "./PropsContextProvider.js";
+import "@react-aria/utils";
+import "./propsContext-DzAKlmhS.js";
+import "remeda";
+import { F as u } from "./FieldError-C-_2QNam.js";
+import { f as F } from "./flowComponent-B1r5sCmz.js";
+import { B as E } from "./Button-E4IPlAeV.js";
+import "@tabler/icons-react";
+import "./Icon-mUEZToWz.js";
+import { I as N } from "./IconClose-njz0vW4D.js";
+import { I as C } from "./IconSearch-DMgHpqPU.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
+}, P = { "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(P).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/js/SearchField.js

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

package/dist/js/Section-D_VzVuOz.js

@@ -0,0 +1,49 @@
+"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 "@react-aria/utils";
+import "remeda";
+import { f as u } from "./flowComponent-B1r5sCmz.js";
+import { C as S } from "./ContextMenuSection-D1i0qzNl.js";
+const C = "flow--section", g = "flow--section--hide-separator", x = "flow--section--heading", o = {
+  section: C,
+  hideSeparator: g,
+  heading: x
+}, y = u("Section", (n) => {
+  const {
+    children: e,
+    className: i,
+    refProp: a,
+    renderContextMenuSection: s,
+    hideSeparator: c,
+    ...l
+  } = n;
+  if (!e)
+    return null;
+  if (s)
+    return /* @__PURE__ */ t.createElement(S, null, e);
+  const m = f(
+    o.section,
+    i,
+    c && o.hideSeparator
+  ), r = p(), d = {
+    Heading: {
+      level: 2,
+      id: r,
+      className: o.heading
+    },
+    Header: {
+      renderSectionHeader: !0
+    },
+    List: {
+      "aria-labelledby": r
+    }
+  };
+  return /* @__PURE__ */ t.createElement("section", { ...l, className: m, ref: a }, /* @__PURE__ */ t.createElement(h, { props: d, mergeInParentContext: !0 }, e));
+});
+export {
+  y as S
+};

package/dist/js/Section.js

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

package/dist/js/SegmentedControl.js

@@ -0,0 +1,81 @@
+"use client"
+/* */
+import { f as d } from "./flowComponent-B1r5sCmz.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 "@react-aria/utils";
+import "remeda";
+import { TunnelProvider as E, TunnelExit as a } from "@mittwald/react-tunnel";
+import { F as N } from "./FieldError-C-_2QNam.js";
+import g from "clsx";
+import "@tabler/icons-react";
+import "./Icon-mUEZToWz.js";
+import { I as b } from "./IconCheck-y0I90xlL.js";
+import { C as u } from "./ClearPropsContext-CUvsbMn8.js";
+import "dot-prop";
+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}`, K = d("SegmentedControl", (t) => {
+  const {
+    children: r,
+    className: s,
+    containerBreakpointSize: m = "m",
+    refProp: 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", P = "flow--segmented-control--segment--checkmark", c = {
+  segment: F,
+  checkmark: P
+}, M = d("Segment", (t) => {
+  const { children: r, className: s, refProp: m, ...l } = t, i = g(c.segment, s);
+  return /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement(p.Radio, { ...l, className: i, ref: m }, r, /* @__PURE__ */ e.createElement(b, { className: c.checkmark })));
+});
+export {
+  M as Segment,
+  K as SegmentedControl,
+  K as default
+};