@konstructio/ui 0.1.2-alpha.68 → 0.1.2-alpha.69

package/dist/Modal-BGcucTHv.js

@@ -0,0 +1,120 @@
+import { Body as k } from "./components/Modal/components/Body/Body.js";
+import { Footer as v } from "./components/Modal/components/Footer/Footer.js";
+import { Header as w } from "./components/Modal/components/Header/Header.js";
+import { jsx as a, jsxs as l, Fragment as A } from "react/jsx-runtime";
+import { Children as m, isValidElement as c, useRef as F, useState as N, useEffect as R } from "react";
+import { createPortal as x } from "react-dom";
+import { R as B } from "./index-BKjcReYh.js";
+import { R as C } from "./Combination-BtmnusWq.js";
+import { cn as h } from "./utils/index.js";
+import { buttonCloseVariants as E, modalVariants as H } from "./components/Modal/components/Wrapper/Wrapper.variants.js";
+import { m as V } from "./proxy-CngVm5qA.js";
+import { X as j } from "./x-Eoa9FJjA.js";
+const D = ({
+  buttonCloseClassName: f,
+  children: o,
+  className: n,
+  containerClassName: s,
+  showCloseButton: p = !0,
+  theme: i,
+  transition: u,
+  onClose: d
+}) => {
+  const r = m.toArray(o).find(
+    (e) => c(e) && e.type === t.Header
+  ), y = m.toArray(o).find(
+    (e) => c(e) && e.type === t.Body
+  ), b = m.toArray(o).find(
+    (e) => c(e) && e.type === t.Footer
+  ), g = m.toArray(o).filter(
+    (e) => !c(e) || ![t.Header, t.Body, t.Footer].includes(
+      e.type
+    )
+  );
+  return /* @__PURE__ */ a(C, { children: /* @__PURE__ */ l(
+    "div",
+    {
+      className: h(
+        "fixed inset-0 grid place-content-center",
+        s
+      ),
+      "data-theme": i,
+      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__ */ l(
+          V.div,
+          {
+            className: h(
+              H({
+                className: n
+              })
+            ),
+            role: "dialog",
+            "aria-modal": "true",
+            layout: "size",
+            transition: u ?? { duration: 0.25, ease: "easeInOut" },
+            children: [
+              r,
+              p && /* @__PURE__ */ l(
+                "button",
+                {
+                  className: h(
+                    E({
+                      className: f
+                    })
+                  ),
+                  onClick: d,
+                  children: [
+                    /* @__PURE__ */ a(j, {}),
+                    /* @__PURE__ */ a(B, { children: "Dismiss modal" })
+                  ]
+                }
+              ),
+              y ?? g,
+              b
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}, t = ({ isOpen: f, onClose: o, container: n, theme: s, ...p }) => {
+  const i = F(null), [u, d] = N(
+    null
+  );
+  return R(() => {
+    if (!i.current || s || n)
+      return;
+    const r = i.current.closest("[data-theme]");
+    r && d(r);
+  }, [s, n]), R(() => {
+    const r = new AbortController(), y = (b) => {
+      b.code === "Escape" && o?.();
+    };
+    return window.addEventListener("keydown", y, {
+      signal: r.signal
+    }), () => {
+      r.abort();
+    };
+  }, [o]), /* @__PURE__ */ l(A, { children: [
+    /* @__PURE__ */ a("span", { ref: i, "data-testid": "modal-anchor", hidden: !0 }),
+    f && x(
+      /* @__PURE__ */ a(D, { ...p, theme: s, onClose: o }),
+      n || u || document.body
+    )
+  ] });
+};
+t.Header = w;
+t.Body = k;
+t.Footer = v;
+export {
+  t as M,
+  D as W
+};

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -4,7 +4,7 @@ import { cn as n } from "../../utils/index.js";
 import { buttonGroupPillVariants as z, buttonGroupVariants as A, buttonGroupWrapperVariants as E } from "./ButtonGroup.variants.js";
 import { useButtonGroup as H } from "./hooks/useButtonGroup.js";
 import { ButtonGroupLabel as J } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
-import { m as Q } from "../../proxy-BIRlSMN_.js";
+import { m as Q } from "../../proxy-CngVm5qA.js";
 import { ButtonGroupItem as T } from "./components/ButtonGroupItem/ButtonGroupItem.js";
 import { ButtonGroupMessage as U } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
 const X = ({

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.js

@@ -2,7 +2,7 @@ import { jsx as s, jsxs as a } from "react/jsx-runtime";
 import { memo as L } from "react";
 import { cn as t } from "../../../../utils/index.js";
 import { buttonGroupLabelVariants as u, buttonGroupDescriptionVariants as V, buttonGroupItemContentVariants as g, buttonGroupItemVariants as w } from "./ButtonGroupItem.variants.js";
-import { m as j } from "../../../../proxy-BIRlSMN_.js";
+import { m as j } from "../../../../proxy-CngVm5qA.js";
 const k = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : r ? "inset(0 0 0 0)" : n === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", B = L(
   ({
     animationDirection: r,

package/dist/components/DateRangePicker/components/CalendarPanel/components/IndependentModeCalendar/IndependentModeCalendar.js

@@ -7,7 +7,7 @@ import { CalendarDivider as tt } from "../CalendarDivider/CalendarDivider.js";
 import { CalendarMonth as d } from "../CalendarMonth/CalendarMonth.js";
 import { NavigationButton as g } from "../NavigationButton/NavigationButton.js";
 import { useIndependentCarousel as nt } from "../../hooks/useIndependentCarousel.js";
-import { m as et } from "../../../../../../proxy-BIRlSMN_.js";
+import { m as et } from "../../../../../../proxy-CngVm5qA.js";
 const at = ({
   className: b,
   calendarWidth: x = 550,

package/dist/components/DateRangePicker/components/CalendarPanel/components/TogetherModeCalendar/TogetherModeCalendar.js

@@ -6,7 +6,7 @@ import { CalendarDivider as F } from "../CalendarDivider/CalendarDivider.js";
 import { CalendarMonth as G } from "../CalendarMonth/CalendarMonth.js";
 import { NavigationButton as m } from "../NavigationButton/NavigationButton.js";
 import { useTogetherCarousel as H } from "../../hooks/useTogetherCarousel.js";
-import { m as R } from "../../../../../../proxy-BIRlSMN_.js";
+import { m as R } from "../../../../../../proxy-CngVm5qA.js";
 const S = ({
   className: s,
   calendarWidth: h = 550,

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "react-dom";
-import { M as d } from "../../Modal-mwLmWbnA.js";
+import { M as d } from "../../Modal-BGcucTHv.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";

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

@@ -1,7 +1,8 @@
-import { PropsWithChildren, ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
-import { modalVariants } from './components/Wrapper/Wrapper.variants';
+import { Transition } from 'motion/react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { Theme } from '../../domain/theme';
+import { modalVariants } from './components/Wrapper/Wrapper.variants';
 /**
  * Props for the Modal component.
  *
@@ -21,6 +22,8 @@ export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     buttonCloseClassName?: string;
     /** Additional CSS classes for the modal */
     className?: string;
+    /** CSS classes for the outer container (the overlay grid wrapper) */
+    containerClassName?: string;
     /** DOM element to portal the modal into (defaults to document.body) */
     container?: Element | DocumentFragment;
     /** Whether the modal is open */
@@ -29,6 +32,8 @@ export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     showCloseButton?: boolean;
     /** Theme override for this component */
     theme?: Theme;
+    /** Motion transition config for the modal animation */
+    transition?: Transition;
     /** Callback when modal is closed (Escape key or close button) */
     onClose?: () => void;
 };

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

@@ -2,10 +2,10 @@ import "react/jsx-runtime";
 import "../../../../index-BKjcReYh.js";
 import "react";
 import "../../../../Combination-BtmnusWq.js";
-import { W as s } from "../../../../Modal-mwLmWbnA.js";
+import { W as s } from "../../../../Modal-BGcucTHv.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
-import "../../../../proxy-BIRlSMN_.js";
+import "../../../../proxy-CngVm5qA.js";
 import "../../../../x-Eoa9FJjA.js";
 export {
   s as Wrapper

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

@@ -1,11 +1,14 @@
 import { VariantProps } from 'class-variance-authority';
+import { Transition } from 'motion/react';
 import { PropsWithChildren } from 'react';
 import { Theme } from '../../../../domain/theme';
 import { modalVariants } from './Wrapper.variants';
 export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     buttonCloseClassName?: string;
     className?: string;
+    containerClassName?: string;
     showCloseButton?: boolean;
     theme?: Theme;
+    transition?: Transition;
     onClose?: () => void;
 };

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

@@ -1,7 +1,7 @@
 import { Body as e } from "./Body/Body.js";
 import { Footer as t } from "./Footer/Footer.js";
 import { Header as m } from "./Header/Header.js";
-import { W as a } from "../../../Modal-mwLmWbnA.js";
+import { W as a } from "../../../Modal-BGcucTHv.js";
 export {
   e as Body,
   t as Footer,

package/dist/components/Select/Select.js

@@ -1,23 +1,23 @@
 import { jsx as r, jsxs as v } from "react/jsx-runtime";
 import { forwardRef as N, useMemo as O } from "react";
-import { cn as l } from "../../utils/index.js";
+import { cn as a } from "../../utils/index.js";
 import { i as g } from "../../AdditionalOptions-C2FDVZhu.js";
 import { SelectProvider as j } from "./contexts/select.provider.js";
-import { Wrapper as w } from "./components/Wrapper.js";
+import { Wrapper as k } from "./components/Wrapper.js";
 const W = N(
   ({
     error: e,
     errorClassName: m,
-    helperText: a,
+    helperText: l,
     helperTextClassName: n,
     highlightSearch: o,
     mainWrapperClassName: p,
     name: s,
     value: c,
     options: t,
-    onChange: f,
+    onChange: d,
     onBlur: i,
-    ...d
+    ...f
   }, x) => {
     const u = O(() => t.length ? g(t.at(0)) ? t.flatMap((h) => h.options) : t : [], [t]);
     return /* @__PURE__ */ r(
@@ -28,30 +28,39 @@ const W = N(
         value: c,
         options: u,
         onBlur: i,
-        onChange: f,
-        children: /* @__PURE__ */ v("div", { className: l("relative w-full", p), children: [
+        onChange: d,
+        children: /* @__PURE__ */ v("div", { className: a("relative w-full", p), children: [
           /* @__PURE__ */ r(
-            w,
+            k,
             {
               error: e,
               name: s,
               ref: x,
               onBlur: i,
               groupedOptions: t,
-              ...d
+              ...f
             }
           ),
           e ? /* @__PURE__ */ r(
             "span",
             {
-              className: l(
+              className: a(
                 "text-xs text-red-700 dark:text-red-400",
                 m
               ),
               children: e
             }
           ) : null,
-          !e && a ? /* @__PURE__ */ r("span", { className: l("text-xs text-metal-600", n), children: a }) : null
+          !e && l ? /* @__PURE__ */ r(
+            "span",
+            {
+              className: a(
+                "text-xs text-slate-600 dark:text-slate-200",
+                n
+              ),
+              children: l
+            }
+          ) : null
         ] })
       }
     );

package/dist/components/Select/Select.variants.js

@@ -11,7 +11,7 @@ const a = e(
     "px-3",
     "py-1",
     "relative",
-    "rounded-md",
+    "rounded",
     "transition-all",
     "w-full",
     "outline-none",

package/dist/components/Select/components/List/List.variants.js

@@ -21,7 +21,7 @@ const r = t([
   "flex-col",
   "mt-1",
   "overflow-hidden",
-  "rounded-md",
+  "rounded",
   "shadow-2xs",
   "top-full",
   "w-full",

package/dist/components/index.js

@@ -17,7 +17,7 @@ import { Filter as k } from "./Filter/Filter.js";
 import { ImageUpload as F } from "./ImageUpload/ImageUpload.js";
 import { Input as M } from "./Input/Input.js";
 import { Loading as y } from "./Loading/Loading.js";
-import { M as U } from "../Modal-mwLmWbnA.js";
+import { M as U } from "../Modal-BGcucTHv.js";
 import { MultiSelectDropdown as j } from "./MultiSelectDropdown/MultiSelectDropdown.js";
 import { PhoneNumberInput as H } from "./PhoneNumberInput/PhoneNumberInput.js";
 import { PieChart as K } from "./PieChart/PieChart.js";

package/dist/index.js

@@ -26,7 +26,7 @@ import { Input as _ } from "./components/Input/Input.js";
 import { List as rr } from "./components/Tabs/components/List.js";
 import { Loading as er } from "./components/Loading/Loading.js";
 import { Logo as pr } from "./components/Sidebar/components/Logo/Logo.js";
-import { M as mr } from "./Modal-mwLmWbnA.js";
+import { M as mr } from "./Modal-BGcucTHv.js";
 import { MultiSelectDropdown as fr } from "./components/MultiSelectDropdown/MultiSelectDropdown.js";
 import { Navigation as ir } from "./components/Sidebar/components/Navigation/Navigation.js";
 import { NavigationGroup as dr } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";

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.67",
+  "version": "0.1.2-alpha.68",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -100,7 +100,7 @@
     "i18n-iso-countries": "^7.14.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.576.0",
-    "motion": "^12.34.3",
+    "motion": "^12.34.5",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^9.14.0",
     "react-feather": "^2.0.10",
@@ -173,7 +173,7 @@
     "jest-axe": "^10.0.0",
     "jsdom": "^28.1.0",
     "lodash": "^4.17.23",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "prettier": "^3.8.1",
     "rimraf": "^6.1.3",
     "storybook": "^10.2.14",