@konstructio/ui 0.1.2-alpha.117 → 0.1.2-alpha.118

package/dist/Modal-0Wp5szX4.js

@@ -0,0 +1,84 @@
+import { t as A } from "./x-Vur_9PXW.js";
+import { t as H } from "./dist-C_jtUTU9.js";
+import { t as h } from "./utils-DnIJruo0.js";
+import { t as x } from "./Combination-CnMM05mt.js";
+import { Body as B } from "./components/Modal/components/Body/Body.js";
+import { Footer as C } from "./components/Modal/components/Footer/Footer.js";
+import { Header as E } from "./components/Modal/components/Header/Header.js";
+import { t as R } from "./es2015-B_07N-UL.js";
+import { buttonCloseVariants as V, modalVariants as j } from "./components/Modal/components/Wrapper/Wrapper.variants.js";
+import { Children as d, isValidElement as l, useEffect as g, useRef as D, useState as S } from "react";
+import { createPortal as z } from "react-dom";
+import { Fragment as I, jsx as a, jsxs as m } from "react/jsx-runtime";
+import { motion as K } from "motion/react";
+var L = ({ animateResize: c = !1, ariaLabel: n, ariaLabelledBy: s, autoFocus: i = !0, buttonCloseClassName: f, children: r, className: u, containerClassName: p, showCloseButton: o = !0, theme: y, transition: b, onClose: v }) => {
+  const F = d.toArray(r).find((e) => l(e) && e.type === t.Header), N = d.toArray(r).find((e) => l(e) && e.type === t.Body), k = d.toArray(r).find((e) => l(e) && e.type === t.Footer), w = d.toArray(r).filter((e) => !l(e) || ![
+    t.Header,
+    t.Body,
+    t.Footer
+  ].includes(e.type));
+  return /* @__PURE__ */ a(x, { children: /* @__PURE__ */ m("div", {
+    className: h("fixed inset-0 grid place-content-center", p),
+    "data-theme": y,
+    children: [/* @__PURE__ */ a("div", {
+      className: "absolute inset-0 bg-black opacity-70 dark:opacity-85 animate-in fade-in-0",
+      onClick: v,
+      role: "presentation"
+    }), /* @__PURE__ */ a(R, {
+      returnFocus: !0,
+      autoFocus: i,
+      className: "contents",
+      children: /* @__PURE__ */ m(K.div, {
+        className: h(j({ className: u })),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": n,
+        "aria-labelledby": s,
+        layout: c ? "size" : void 0,
+        transition: b ?? {
+          duration: 0.25,
+          ease: "easeInOut"
+        },
+        children: [
+          F,
+          o && /* @__PURE__ */ m("button", {
+            className: h(V({ className: f })),
+            onClick: v,
+            children: [/* @__PURE__ */ a(A, {}), /* @__PURE__ */ a(H, { children: "Dismiss modal" })]
+          }),
+          N ?? w,
+          k
+        ]
+      })
+    })]
+  }) });
+}, t = ({ isOpen: c, onClose: n, container: s, theme: i, ...f }) => {
+  const r = D(null), [u, p] = S(null);
+  return g(() => {
+    if (!r.current || i || s) return;
+    const o = r.current.closest("[data-theme]");
+    o && p(o);
+  }, [i, s]), g(() => {
+    const o = new AbortController(), y = (b) => {
+      b.code === "Escape" && n?.();
+    };
+    return window.addEventListener("keydown", y, { signal: o.signal }), () => {
+      o.abort();
+    };
+  }, [n]), /* @__PURE__ */ m(I, { children: [/* @__PURE__ */ a("span", {
+    ref: r,
+    "data-testid": "modal-anchor",
+    hidden: !0
+  }), c && z(/* @__PURE__ */ a(L, {
+    ...f,
+    theme: i,
+    onClose: n
+  }), s || u || document.body)] });
+};
+t.Header = E;
+t.Body = B;
+t.Footer = C;
+export {
+  L as n,
+  t
+};

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -4,7 +4,7 @@ import { WarningIcon as T } from "../../assets/icons/components/Warning.js";
 import { Button as C } from "../Button/Button.js";
 import { Typography as d } from "../Typography/Typography.js";
 import { CopyButton as V } from "../CopyButton/CopyButton.js";
-import { t as l } from "../../Modal-prJwxFba.js";
+import { t as l } from "../../Modal-0Wp5szX4.js";
 import { useEffect as W, useId as A, useState as G } from "react";
 import { Fragment as J, jsx as e, jsxs as r } from "react/jsx-runtime";
 var L = ({ autoFocus: N, cancelLabel: v = "Cancel", children: k, className: I, confirmationInputClassName: w, confirmationInputLabel: B, confirmationPrompt: j, confirmationText: a, confirmLabel: n = "Confirm", containerClassName: D, copyLabel: F = "Copy", description: i, icon: c, isOpen: o, isPending: t = !1, pendingLabel: S, theme: $, title: M, variant: f = "danger", onClose: q, onConfirm: z }) => {

package/dist/components/Modal/Modal.js

@@ -1,5 +1,5 @@
 "use client";
-import { t } from "../../Modal-prJwxFba.js";
+import { t } from "../../Modal-0Wp5szX4.js";
 export {
   t as Modal
 };

package/dist/components/Modal/components/Wrapper/Wrapper.js

@@ -1,4 +1,4 @@
-import { n as p } from "../../../../Modal-prJwxFba.js";
+import { n as p } from "../../../../Modal-0Wp5szX4.js";
 export {
   p as Wrapper
 };

package/dist/components/Modal/components/index.js

@@ -1,7 +1,7 @@
 import { Body as o } from "./Body/Body.js";
 import { Footer as p } from "./Footer/Footer.js";
 import { Header as e } from "./Header/Header.js";
-import { n as i } from "../../../Modal-prJwxFba.js";
+import { n as i } from "../../../Modal-0Wp5szX4.js";
 export {
   o as Body,
   p as Footer,

package/dist/components/index.js

@@ -19,7 +19,7 @@ import { Card as _ } from "./Card/Card.js";
 import { CheckboxCard as y } from "./CheckboxCard/CheckboxCard.js";
 import { Collapse as M } from "./Collapse/Collapse.js";
 import { CopyButton as z } from "./CopyButton/CopyButton.js";
-import { t as W } from "../Modal-prJwxFba.js";
+import { t as W } from "../Modal-0Wp5szX4.js";
 import { ConfirmDialog as j } from "./ConfirmDialog/ConfirmDialog.js";
 import { DatePicker as H } from "./Datepicker/DatePicker.js";
 import { Radio as K } from "./Radio/Radio.js";

package/dist/index.js

@@ -24,7 +24,7 @@ import { Card as X } from "./components/Card/Card.js";
 import { CheckboxCard as q } from "./components/CheckboxCard/CheckboxCard.js";
 import { Collapse as K } from "./components/Collapse/Collapse.js";
 import { CopyButton as Z } from "./components/CopyButton/CopyButton.js";
-import { t as rr } from "./Modal-prJwxFba.js";
+import { t as rr } from "./Modal-0Wp5szX4.js";
 import { ConfirmDialog as tr } from "./components/ConfirmDialog/ConfirmDialog.js";
 import { DatePicker as ir } from "./components/Datepicker/DatePicker.js";
 import { Radio as er } from "./components/Radio/Radio.js";

package/dist/lib/components/Modal/Modal.types.d.ts

@@ -19,6 +19,8 @@ import { modalVariants } from './components/Wrapper/Wrapper.variants';
  */
 export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     /** CSS classes for the close button */
+    /** Animate height changes of the content, e.g. when a step is swapped. Defaults to false */
+    animateResize?: boolean;
     ariaLabel?: string;
     ariaLabelledBy?: string;
     /** Move focus to the first focusable element when the modal opens. Defaults to true */
@@ -36,7 +38,7 @@ export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     showCloseButton?: boolean;
     /** Theme override for this component */
     theme?: Theme;
-    /** Motion transition config for the modal animation */
+    /** Motion transition used when `animateResize` is enabled */
     transition?: Transition;
     /** Callback when modal is closed (Escape key or close button) */
     onClose?: () => void;

package/dist/lib/components/Modal/components/Wrapper/Wrapper.types.d.ts

@@ -4,6 +4,7 @@ import { PropsWithChildren } from 'react';
 import { Theme } from '../../../../domain/theme';
 import { modalVariants } from './Wrapper.variants';
 export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
+    animateResize?: boolean;
     ariaLabel?: string;
     ariaLabelledBy?: string;
     autoFocus?: boolean;

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.116",
+  "version": "0.1.2-alpha.117",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.117",
+  "version": "0.1.2-alpha.118",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/dist/Modal-prJwxFba.js

@@ -1,84 +0,0 @@
-import { t as w } from "./x-Vur_9PXW.js";
-import { t as A } from "./dist-C_jtUTU9.js";
-import { t as h } from "./utils-DnIJruo0.js";
-import { t as H } from "./Combination-CnMM05mt.js";
-import { Body as x } from "./components/Modal/components/Body/Body.js";
-import { Footer as B } from "./components/Modal/components/Footer/Footer.js";
-import { Header as C } from "./components/Modal/components/Header/Header.js";
-import { t as E } from "./es2015-B_07N-UL.js";
-import { buttonCloseVariants as R, modalVariants as V } from "./components/Modal/components/Wrapper/Wrapper.variants.js";
-import { Children as m, isValidElement as c, useEffect as g, useRef as j, useState as D } from "react";
-import { createPortal as S } from "react-dom";
-import { Fragment as z, jsx as o, jsxs as f } from "react/jsx-runtime";
-import { motion as I } from "motion/react";
-var K = ({ ariaLabel: u, ariaLabelledBy: n, autoFocus: s = !0, buttonCloseClassName: i, children: a, className: d, containerClassName: p, showCloseButton: y = !0, theme: r, transition: b, onClose: l }) => {
-  const v = m.toArray(a).find((e) => c(e) && e.type === t.Header), F = m.toArray(a).find((e) => c(e) && e.type === t.Body), N = m.toArray(a).find((e) => c(e) && e.type === t.Footer), k = m.toArray(a).filter((e) => !c(e) || ![
-    t.Header,
-    t.Body,
-    t.Footer
-  ].includes(e.type));
-  return /* @__PURE__ */ o(H, { children: /* @__PURE__ */ f("div", {
-    className: h("fixed inset-0 grid place-content-center", p),
-    "data-theme": r,
-    children: [/* @__PURE__ */ o("div", {
-      className: "absolute inset-0 bg-black opacity-70 dark:opacity-85 animate-in fade-in-0",
-      onClick: l,
-      role: "presentation"
-    }), /* @__PURE__ */ o(E, {
-      returnFocus: !0,
-      autoFocus: s,
-      className: "contents",
-      children: /* @__PURE__ */ f(I.div, {
-        className: h(V({ className: d })),
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": u,
-        "aria-labelledby": n,
-        layout: "size",
-        transition: b ?? {
-          duration: 0.25,
-          ease: "easeInOut"
-        },
-        children: [
-          v,
-          y && /* @__PURE__ */ f("button", {
-            className: h(R({ className: i })),
-            onClick: l,
-            children: [/* @__PURE__ */ o(w, {}), /* @__PURE__ */ o(A, { children: "Dismiss modal" })]
-          }),
-          F ?? k,
-          N
-        ]
-      })
-    })]
-  }) });
-}, t = ({ isOpen: u, onClose: n, container: s, theme: i, ...a }) => {
-  const d = j(null), [p, y] = D(null);
-  return g(() => {
-    if (!d.current || i || s) return;
-    const r = d.current.closest("[data-theme]");
-    r && y(r);
-  }, [i, s]), g(() => {
-    const r = new AbortController(), b = (l) => {
-      l.code === "Escape" && n?.();
-    };
-    return window.addEventListener("keydown", b, { signal: r.signal }), () => {
-      r.abort();
-    };
-  }, [n]), /* @__PURE__ */ f(z, { children: [/* @__PURE__ */ o("span", {
-    ref: d,
-    "data-testid": "modal-anchor",
-    hidden: !0
-  }), u && S(/* @__PURE__ */ o(K, {
-    ...a,
-    theme: i,
-    onClose: n
-  }), s || p || document.body)] });
-};
-t.Header = C;
-t.Body = x;
-t.Footer = B;
-export {
-  K as n,
-  t
-};