@konstructio/ui 0.1.2-alpha.59 → 0.1.2-alpha.60

package/dist/Modal--z642-Wv.js

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

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { ModalChildProps, ModalProps } from './Modal.types';
+import { ChildProps, Props } from './Modal.types';
 /**
  * A modal dialog component with Header, Body, and Footer sub-components.
  * Supports keyboard navigation (Escape to close) and portals to document.body.
@@ -26,9 +26,9 @@ import { ModalChildProps, ModalProps } from './Modal.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-modal--docs Storybook}
  */
-declare const Modal: FC<ModalProps> & {
-    Header: FC<ModalChildProps>;
-    Body: FC<ModalChildProps>;
-    Footer: FC<ModalChildProps>;
+declare const Modal: FC<Props> & {
+    Header: FC<ChildProps>;
+    Body: FC<ChildProps>;
+    Footer: FC<ChildProps>;
 };
 export { Modal };

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-CjC-CIJ8.js";
+import { M as d } from "../../Modal--z642-Wv.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";

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

@@ -16,7 +16,7 @@ import { Theme } from '../../domain/theme';
  * </Modal>
  * ```
  */
-export interface ModalProps extends PropsWithChildren, VariantProps<typeof modalVariants> {
+export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     /** CSS classes for the close button */
     buttonCloseClassName?: string;
     /** Additional CSS classes for the modal */
@@ -31,11 +31,11 @@ export interface ModalProps extends PropsWithChildren, VariantProps<typeof modal
     theme?: Theme;
     /** Callback when modal is closed (Escape key or close button) */
     onClose?: () => void;
-}
+};
 /**
  * Props for Modal sub-components (Header, Body, Footer).
  */
-export type ModalChildProps = {
+export type ChildProps = {
     /** Content of the modal section */
     children: ReactNode;
     /** Additional CSS classes */

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

@@ -1,3 +1,3 @@
 import { FC } from 'react';
-import { BodyProps } from './Body.types';
-export declare const Body: FC<BodyProps>;
+import { Props } from './Body.types';
+export declare const Body: FC<Props>;

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

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-export type BodyProps = PropsWithChildren & {
+export type Props = PropsWithChildren & {
     asChild?: boolean;
     className?: string;
 };

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

@@ -1,3 +1,3 @@
 import { FC } from 'react';
-import { FooterProps } from './Footer.types';
-export declare const Footer: FC<FooterProps>;
+import { Props } from './Footer.types';
+export declare const Footer: FC<Props>;

package/dist/components/Modal/components/Footer/Footer.js

@@ -1,7 +1,13 @@
 import { jsx as m } from "react/jsx-runtime";
-import { S as n } from "../../../../index-BvoZGpli.js";
-import { cn as e } from "../../../../utils/index.js";
-const a = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ m(r ? n : "div", { className: e("border-zinc-200", t), children: o });
+import { S as e } from "../../../../index-BvoZGpli.js";
+import { cn as n } from "../../../../utils/index.js";
+const i = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ m(
+  r ? e : "div",
+  {
+    className: n("border-zinc-200 dark:border-metal-700", t),
+    children: o
+  }
+);
 export {
-  a as Footer
+  i as Footer
 };

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

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-export type FooterProps = PropsWithChildren & {
+export type Props = PropsWithChildren & {
     asChild?: boolean;
     className?: string;
 };

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

@@ -1,3 +1,3 @@
 import { FC } from 'react';
-import { HeaderProps } from './Header.types';
-export declare const Header: FC<HeaderProps>;
+import { Props } from './Header.types';
+export declare const Header: FC<Props>;

package/dist/components/Modal/components/Header/Header.js

@@ -1,7 +1,13 @@
-import { jsx as m } from "react/jsx-runtime";
-import { S as n } from "../../../../index-BvoZGpli.js";
-import { cn as e } from "../../../../utils/index.js";
-const a = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ m(r ? n : "div", { className: e("border-zinc-200", t), children: o });
+import { jsx as e } from "react/jsx-runtime";
+import { S as m } from "../../../../index-BvoZGpli.js";
+import { cn as n } from "../../../../utils/index.js";
+const d = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ e(
+  r ? m : "div",
+  {
+    className: n("border-zinc-200 dark:border-metal-700", t),
+    children: o
+  }
+);
 export {
-  a as Header
+  d as Header
 };

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

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-export type HeaderProps = PropsWithChildren & {
+export type Props = PropsWithChildren & {
     asChild?: boolean;
     className?: string;
 };

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

@@ -1,3 +1,3 @@
 import { FC } from 'react';
-import { WrapperProps } from './Wrapper.types';
-export declare const Wrapper: FC<WrapperProps>;
+import { Props } from './Wrapper.types';
+export declare const Wrapper: FC<Props>;

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

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "../../../../index-BKjcReYh.js";
 import "react";
 import "../../../../Combination-BtmnusWq.js";
-import { W as f } from "../../../../Modal-CjC-CIJ8.js";
+import { W as f } from "../../../../Modal--z642-Wv.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
 import "../../../../x-Eoa9FJjA.js";

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

@@ -2,10 +2,10 @@ import { VariantProps } from 'class-variance-authority';
 import { PropsWithChildren } from 'react';
 import { Theme } from '../../../../domain/theme';
 import { modalVariants } from './Wrapper.variants';
-export interface WrapperProps extends PropsWithChildren, VariantProps<typeof modalVariants> {
+export type Props = PropsWithChildren & VariantProps<typeof modalVariants> & {
     buttonCloseClassName?: string;
     className?: string;
     showCloseButton?: boolean;
     theme?: Theme;
     onClose?: () => void;
-}
+};

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

@@ -1,8 +1,10 @@
 import { c as t } from "../../../../index-D29mdTf5.js";
-const i = t([
-  "bg-metal-1000",
+const a = t([
   "bg-white",
-  "border-none",
+  "border",
+  "border-transparent",
+  "dark:bg-metal-800",
+  "dark:border-slate-700",
   "flex",
   "flex-col",
   "justify-between",
@@ -14,17 +16,18 @@ const i = t([
   "animate-in",
   "fade-in-0",
   "zoom-in-95",
-  "duration-150",
-  "shadow-kubefirst-primary"
-]), o = t([
+  "duration-150"
+]), r = t([
   "absolute",
   "right-1.5",
   "top-1.5",
-  "text-inherit",
   "cursor-pointer",
-  "text-kubefirst-primary"
+  "text-slate-500",
+  "dark:text-slate-300",
+  "hover:text-slate-700",
+  "dark:hover:text-slate-100"
 ]);
 export {
-  o as buttonCloseVariants,
-  i as modalVariants
+  r as buttonCloseVariants,
+  a as modalVariants
 };

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-CjC-CIJ8.js";
+import { W as a } from "../../../Modal--z642-Wv.js";
 export {
   e as Body,
   t as Footer,

package/dist/components/index.js

@@ -17,7 +17,7 @@ import { Filter as A } from "./Filter/Filter.js";
 import { ImageUpload as G } from "./ImageUpload/ImageUpload.js";
 import { Input as y } from "./Input/Input.js";
 import { Loading as O } from "./Loading/Loading.js";
-import { M as W } from "../Modal-CjC-CIJ8.js";
+import { M as W } from "../Modal--z642-Wv.js";
 import { MultiSelectDropdown as q } from "./MultiSelectDropdown/MultiSelectDropdown.js";
 import { PhoneNumberInput as H } from "./PhoneNumberInput/PhoneNumberInput.js";
 import { PieChart as K } from "./PieChart/PieChart.js";

package/dist/index.js

@@ -23,7 +23,7 @@ import { DateRangeFilterDropdown as or } from "./components/Filter/components/Da
 import { ImageUpload as tr } from "./components/ImageUpload/ImageUpload.js";
 import { Input as ar } from "./components/Input/Input.js";
 import { Loading as xr } from "./components/Loading/Loading.js";
-import { M as ir } from "./Modal-CjC-CIJ8.js";
+import { M as ir } from "./Modal--z642-Wv.js";
 import { MultiSelectDropdown as sr } from "./components/MultiSelectDropdown/MultiSelectDropdown.js";
 import { PhoneNumberInput as lr } from "./components/PhoneNumberInput/PhoneNumberInput.js";
 import { PieChart as gr } from "./components/PieChart/PieChart.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.58",
+  "version": "0.1.2-alpha.59",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -99,14 +99,14 @@
     "google-libphonenumber": "^3.2.44",
     "i18n-iso-countries": "^7.14.0",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^0.564.0",
     "motion": "^12.34.0",
     "react-chartjs-2": "^5.3.1",
     "react-day-picker": "^9.13.2",
     "react-feather": "^2.0.10",
     "react-focus-lock": "^2.13.7",
     "react-remove-scroll": "^2.7.2",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.4.1"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.90",
@@ -171,11 +171,11 @@
     "glob": "^13.0.3",
     "husky": "^9.1.7",
     "jest-axe": "^10.0.0",
-    "jsdom": "^28.0.0",
+    "jsdom": "^28.1.0",
     "lodash": "^4.17.23",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
-    "rimraf": "^6.1.2",
+    "rimraf": "^6.1.3",
     "storybook": "^10.2.8",
     "tailwindcss": "^4.1.18",
     "ts-node": "^10.9.2",