@konstructio/ui 0.1.2-alpha.116 → 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

@@ -1,43 +1,44 @@
-import { t as H } from "../../Input-2M2I_H60.js";
+import { t as K } from "../../Input-2M2I_H60.js";
 import { t as g } from "../../utils-DnIJruo0.js";
-import { WarningIcon as K } from "../../assets/icons/components/Warning.js";
+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 T } from "../CopyButton/CopyButton.js";
-import { t as l } from "../../Modal-CysTe3zL.js";
-import { useEffect as V, useId as W, useState as A } from "react";
-import { Fragment as G, jsx as e, jsxs as r } from "react/jsx-runtime";
-var J = ({ cancelLabel: N = "Cancel", children: v, className: k, confirmationInputClassName: I, confirmationInputLabel: w, confirmationPrompt: B, confirmationText: a, confirmLabel: n = "Confirm", containerClassName: j, copyLabel: D = "Copy", description: i, icon: c, isOpen: o, isPending: t = !1, pendingLabel: F, theme: S, title: $, variant: f = "danger", onClose: M, onConfirm: q }) => {
-  const s = W(), p = `${s}-title`, [u, h] = A(""), x = !!a, y = !x || u === a;
-  V(() => {
+import { CopyButton as V } from "../CopyButton/CopyButton.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 }) => {
+  const s = A(), p = `${s}-title`, [u, h] = G(""), x = !!a, y = !x || u === a;
+  W(() => {
     o && h("");
   }, [o]);
   const b = () => {
-    t || M();
-  }, z = (m) => {
-    m.preventDefault(), !(t || !y) && q();
-  }, E = c === void 0 ? /* @__PURE__ */ e(K, {
+    t || q();
+  }, E = (m) => {
+    m.preventDefault(), !(t || !y) && z();
+  }, H = c === void 0 ? /* @__PURE__ */ e(T, {
     size: 24,
     "aria-hidden": "true",
     className: g("shrink-0", f === "danger" ? "text-red-600 dark:text-red-500" : "text-aurora-500")
   }) : c;
   return /* @__PURE__ */ e(l, {
     isOpen: o,
-    theme: S,
+    theme: $,
+    autoFocus: N,
     showCloseButton: !1,
     ariaLabelledBy: p,
-    containerClassName: j,
-    className: g("max-w-125 min-h-0 min-w-0 gap-0 p-6", k),
+    containerClassName: D,
+    className: g("max-w-125 min-h-0 min-w-0 gap-0 p-6", I),
     onClose: b,
     children: /* @__PURE__ */ r("form", {
       id: s,
       noValidate: !0,
       className: "flex flex-col gap-6",
-      onSubmit: z,
+      onSubmit: E,
       children: [
         /* @__PURE__ */ r(l.Header, {
           className: "flex items-start gap-4",
-          children: [E, /* @__PURE__ */ r("div", {
+          children: [H, /* @__PURE__ */ r("div", {
             className: "flex min-w-0 flex-1 flex-col gap-4",
             children: [
               /* @__PURE__ */ e(d, {
@@ -45,14 +46,14 @@ var J = ({ cancelLabel: N = "Cancel", children: v, className: k, confirmationInp
                 variant: "subtitle3",
                 component: "h2",
                 className: "text-slate-800 dark:text-slate-200",
-                children: $
+                children: M
               }),
               i ? /* @__PURE__ */ e(d, {
                 variant: "body2",
                 className: "text-slate-700 dark:text-slate-50",
                 children: i
               }) : null,
-              v
+              k
             ]
           })]
         }),
@@ -62,23 +63,23 @@ var J = ({ cancelLabel: N = "Cancel", children: v, className: k, confirmationInp
             variant: "body2",
             component: "p",
             className: "flex flex-wrap items-center gap-1 font-medium text-slate-800 dark:text-metal-50",
-            children: B ?? /* @__PURE__ */ r(G, { children: [
+            children: j ?? /* @__PURE__ */ r(J, { children: [
               "Type",
-              /* @__PURE__ */ e(T, {
+              /* @__PURE__ */ e(V, {
                 text: a,
                 label: a,
-                copyLabel: D,
+                copyLabel: F,
                 className: "rounded-xs border border-gray-200 bg-gray-50 px-1 py-0.5 font-medium hover:bg-gray-100 dark:border-metal-700 dark:bg-metal-700 dark:hover:bg-metal-600",
                 children: a
               }),
               "to confirm"
             ] })
-          }), /* @__PURE__ */ e(H, {
+          }), /* @__PURE__ */ e(K, {
             value: u,
             autoComplete: "off",
             disabled: t,
-            className: I,
-            "aria-label": w ?? `Type ${a} to confirm`,
+            className: w,
+            "aria-label": B ?? `Type ${a} to confirm`,
             onChange: (m) => {
               h(m.target.value);
             }
@@ -91,20 +92,20 @@ var J = ({ cancelLabel: N = "Cancel", children: v, className: k, confirmationInp
             variant: "secondary",
             disabled: t,
             onClick: b,
-            children: N
+            children: v
           }), /* @__PURE__ */ e(C, {
             type: "submit",
             form: s,
             variant: f,
             disabled: t || !y,
-            children: t ? F ?? n : n
+            children: t ? S ?? n : n
           })]
         })
       ]
     })
   });
 };
-J.displayName = "KonstructConfirmDialog";
+L.displayName = "KonstructConfirmDialog";
 export {
-  J as ConfirmDialog
+  L as ConfirmDialog
 };

package/dist/components/Modal/Modal.js

@@ -1,5 +1,5 @@
 "use client";
-import { t } from "../../Modal-CysTe3zL.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-CysTe3zL.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-CysTe3zL.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-CysTe3zL.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-CysTe3zL.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/ConfirmDialog/ConfirmDialog.types.d.ts

@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import { Theme } from '../../domain/theme';
 import { Props as ButtonProps } from '../Button/Button.types';
 export type Props = {
+    /** Move focus to the first focusable element when the dialog opens. Defaults to true */
+    autoFocus?: boolean;
     /** Label of the cancel button */
     cancelLabel?: ReactNode;
     /** Extra content rendered below the description, e.g. an Alert */

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

@@ -19,8 +19,12 @@ 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 */
+    autoFocus?: boolean;
     buttonCloseClassName?: string;
     /** Additional CSS classes for the modal */
     className?: string;
@@ -34,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,8 +4,10 @@ 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;
     buttonCloseClassName?: string;
     className?: string;
     containerClassName?: string;

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.115",
+  "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.116",
+  "version": "0.1.2-alpha.118",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/dist/Modal-CysTe3zL.js

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