@bonprix-ds/react-modal 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -1,17 +1,2 @@
-import { default as default_2 } from 'react';
-
-declare const Modal: ({ children, isOpen, onClose, zIndex }: ModalProps) => default_2.JSX.Element | null;
-export default Modal;
-
-export declare interface ModalProps {
-    /** Toggles the visibility of the modal. Should be used in conjunction with the `onClose` property. */
-    isOpen: boolean;
-    /** The content to be displayed inside the modal. */
-    children?: default_2.ReactNode;
-    /** Callback function to be called when the modal is closed. Should be used in conjunction with the `isOpen` property. */
-    onClose?: () => void;
-    /** The z-index of the modal. */
-    zIndex?: number;
-}
-
-export { }
+export { default } from "./src/Modal";
+export type { Props as ModalProps } from "./src/Modal";

package/dist/src/Modal.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface Props {
+    /** Toggles the visibility of the modal. Should be used in conjunction with the `onClose` property. */
+    isOpen: boolean;
+    /** The content to be displayed inside the modal. */
+    children?: React.ReactNode;
+    /** Callback function to be called when the modal is closed. Should be used in conjunction with the `isOpen` property. */
+    onClose?: () => void;
+    /** The z-index of the modal. */
+    zIndex?: number;
+}
+declare const Modal: ({ children, isOpen, onClose, zIndex }: Props) => React.JSX.Element | null;
+export default Modal;

package/dist/src/Modal.js

@@ -1,25 +1,25 @@
 "use client";
 import e from "./useAnimation.js";
-import { backdrop as t, fadeAnimation as n } from "@bonprix-ds/internal-components";
-import { useIsClient as r, usePrefersReducedMotion as i } from "@bonprix-ds/utils";
 import "react";
-import { createPortal as a } from "react-dom";
-import { tv as o } from "tailwind-variants";
+import { createPortal as t } from "react-dom";
+import { tv as n } from "tailwind-variants";
+import { backdrop as r, fadeAnimation as i } from "@bonprix-ds/internal-components";
+import { useIsClient as a, usePrefersReducedMotion as o } from "@bonprix-ds/utils";
 import { Fragment as s, jsx as c } from "react/jsx-runtime";
 //#region src/Modal.tsx
-var l = o({
-	slots: { backdrop: t() },
-	variants: { prefersReducedMotion: { false: { backdrop: n() } } }
-}), u = ({ children: t, isOpen: n, onClose: o = () => null, zIndex: u = 1 }) => {
-	let { backdrop: d } = l({ prefersReducedMotion: i() }), { shouldRender: f, handleAnimationEnd: p } = e(n);
-	return r() ? /* @__PURE__ */ c(s, { children: a(f ? /* @__PURE__ */ c("div", {
+var l = n({
+	slots: { backdrop: r() },
+	variants: { prefersReducedMotion: { false: { backdrop: i() } } }
+}), u = ({ children: n, isOpen: r, onClose: i = () => null, zIndex: u = 1 }) => {
+	let { backdrop: d } = l({ prefersReducedMotion: o() }), { shouldRender: f, handleAnimationEnd: p } = e(r);
+	return a() ? /* @__PURE__ */ c(s, { children: t(f ? /* @__PURE__ */ c("div", {
 		className: d(),
-		onClick: o,
-		"data-state": n ? "open" : "closed",
+		onClick: i,
+		"data-state": r ? "open" : "closed",
 		onAnimationEnd: p,
 		style: { zIndex: u },
 		"data-bpds": "modal",
-		children: t
+		children: n
 	}) : null, document.body) }) : null;
 };
 //#endregion

package/dist/src/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":[],"sources":["../../src/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { backdrop, fadeAnimation } from \"@bonprix-ds/internal-components\";\nimport { useIsClient, usePrefersReducedMotion } from \"@bonprix-ds/utils\";\nimport React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { tv } from \"tailwind-variants\";\n\nimport useAnimation from \"./useAnimation\";\n\nconst generateClasses = tv({\n  slots: {\n    backdrop: backdrop(),\n  },\n  variants: {\n    prefersReducedMotion: {\n      false: {\n        backdrop: fadeAnimation(),\n      },\n    },\n  },\n});\n\nexport interface Props {\n  /** Toggles the visibility of the modal. Should be used in conjunction with the `onClose` property. */\n  isOpen: boolean;\n  /** The content to be displayed inside the modal. */\n  children?: React.ReactNode;\n  /** Callback function to be called when the modal is closed. Should be used in conjunction with the `isOpen` property. */\n  onClose?: () => void;\n  /** The z-index of the modal. */\n  zIndex?: number;\n}\n\nconst Modal = ({ children, isOpen, onClose = () => null, zIndex = 1 }: Props) => {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { backdrop } = generateClasses({ prefersReducedMotion });\n  const { shouldRender, handleAnimationEnd } = useAnimation(isOpen);\n\n  const isClient = useIsClient();\n  if (!isClient) return null;\n\n  return (\n    <>\n      {createPortal(\n        shouldRender ? (\n          <div\n            className={backdrop()}\n            onClick={onClose}\n            data-state={isOpen ? \"open\" : \"closed\"}\n            onAnimationEnd={handleAnimationEnd}\n            style={{ zIndex }}\n            data-bpds=\"modal\"\n          >\n            {children}\n          </div>\n        ) : null,\n        document.body,\n      )}\n    </>\n  );\n};\n\nexport default Modal;\n"],"mappings":";;;;;;;;;AAUA,IAAM,IAAkB,EAAG;CACzB,OAAO,EACL,UAAU,EAAS,EACrB;CACA,UAAU,EACR,sBAAsB,EACpB,OAAO,EACL,UAAU,EAAc,EAC1B,EACF,EACF;AACF,CAAC,GAaK,KAAS,EAAE,aAAU,WAAQ,mBAAgB,MAAM,YAAS,QAAe;CAE/E,IAAM,EAAE,gBAAa,EAAgB,EAAE,sBADV,EACU,EAAqB,CAAC,GACvD,EAAE,iBAAc,0BAAuB,EAAa,CAAM;CAKhE,OAHiB,EACZ,IAGH,kBAAA,GAAA,EAAA,UACG,EACC,IACE,kBAAC,OAAD;EACE,WAAW,EAAS;EACpB,SAAS;EACT,cAAY,IAAS,SAAS;EAC9B,gBAAgB;EAChB,OAAO,EAAE,UAAO;EAChB,aAAU;EAET;CACE,CAAA,IACH,MACJ,SAAS,IACX,EACA,CAAA,IAnBkB;AAqBxB"}
+{"version":3,"file":"Modal.js","names":[],"sources":["../../src/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { tv } from \"tailwind-variants\";\n\nimport { backdrop, fadeAnimation } from \"@bonprix-ds/internal-components\";\nimport { useIsClient, usePrefersReducedMotion } from \"@bonprix-ds/utils\";\n\nimport useAnimation from \"./useAnimation\";\n\nconst generateClasses = tv({\n  slots: {\n    backdrop: backdrop(),\n  },\n  variants: {\n    prefersReducedMotion: {\n      false: {\n        backdrop: fadeAnimation(),\n      },\n    },\n  },\n});\n\nexport interface Props {\n  /** Toggles the visibility of the modal. Should be used in conjunction with the `onClose` property. */\n  isOpen: boolean;\n  /** The content to be displayed inside the modal. */\n  children?: React.ReactNode;\n  /** Callback function to be called when the modal is closed. Should be used in conjunction with the `isOpen` property. */\n  onClose?: () => void;\n  /** The z-index of the modal. */\n  zIndex?: number;\n}\n\nconst Modal = ({ children, isOpen, onClose = () => null, zIndex = 1 }: Props) => {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { backdrop } = generateClasses({ prefersReducedMotion });\n  const { shouldRender, handleAnimationEnd } = useAnimation(isOpen);\n\n  const isClient = useIsClient();\n  if (!isClient) return null;\n\n  return (\n    <>\n      {createPortal(\n        shouldRender ? (\n          <div\n            className={backdrop()}\n            onClick={onClose}\n            data-state={isOpen ? \"open\" : \"closed\"}\n            onAnimationEnd={handleAnimationEnd}\n            style={{ zIndex }}\n            data-bpds=\"modal\"\n          >\n            {children}\n          </div>\n        ) : null,\n        document.body,\n      )}\n    </>\n  );\n};\n\nexport default Modal;\n"],"mappings":";;;;;;;;;AAWA,IAAM,IAAkB,EAAG;CACzB,OAAO,EACL,UAAU,EAAS,EACrB;CACA,UAAU,EACR,sBAAsB,EACpB,OAAO,EACL,UAAU,EAAc,EAC1B,EACF,EACF;AACF,CAAC,GAaK,KAAS,EAAE,aAAU,WAAQ,mBAAgB,MAAM,YAAS,QAAe;CAE/E,IAAM,EAAE,gBAAa,EAAgB,EAAE,sBADV,EACU,EAAqB,CAAC,GACvD,EAAE,iBAAc,0BAAuB,EAAa,CAAM;CAKhE,OAHiB,EACZ,IAGH,kBAAA,GAAA,EAAA,UACG,EACC,IACE,kBAAC,OAAD;EACE,WAAW,EAAS;EACpB,SAAS;EACT,cAAY,IAAS,SAAS;EAC9B,gBAAgB;EAChB,OAAO,EAAE,UAAO;EAChB,aAAU;EAET;CACE,CAAA,IACH,MACJ,SAAS,IACX,EACA,CAAA,IAnBkB;AAqBxB"}

package/dist/src/useAnimation.d.ts

@@ -0,0 +1,5 @@
+declare const useAnimation: (prop: boolean) => {
+    shouldRender: boolean;
+    handleAnimationEnd: () => void;
+};
+export default useAnimation;

package/dist/src/useAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimation.js","names":[],"sources":["../../src/useAnimation.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nconst useAnimation = (prop: boolean) => {\n  const [shouldRender, setShouldRender] = useState(prop);\n\n  useEffect(() => {\n    if (prop) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setShouldRender(true);\n    }\n  }, [prop]);\n\n  const handleAnimationEnd = () => {\n    if (!prop) {\n      setShouldRender(false);\n    }\n  };\n\n  return { shouldRender, handleAnimationEnd };\n};\n\nexport default useAnimation;\n"],"mappings":";;AAEA,IAAM,KAAgB,MAAkB;CACtC,IAAM,CAAC,GAAc,KAAmB,EAAS,CAAI;CAerD,OAbA,QAAgB;EACd,AAAI,KAEF,EAAgB,EAAI;CAExB,GAAG,CAAC,CAAI,CAAC,GAQF;EAAE;EAAc,0BANU;GAC/B,AAAK,KACH,EAAgB,EAAK;EAEzB;CAE0C;AAC5C"}
+{"version":3,"file":"useAnimation.js","names":[],"sources":["../../src/useAnimation.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nconst useAnimation = (prop: boolean) => {\n  const [shouldRender, setShouldRender] = useState(prop);\n\n  useEffect(() => {\n    if (prop) {\n      // oxlint-disable-next-line react-hooks/set-state-in-effect\n      setShouldRender(true);\n    }\n  }, [prop]);\n\n  const handleAnimationEnd = () => {\n    if (!prop) {\n      setShouldRender(false);\n    }\n  };\n\n  return { shouldRender, handleAnimationEnd };\n};\n\nexport default useAnimation;\n"],"mappings":";;AAEA,IAAM,KAAgB,MAAkB;CACtC,IAAM,CAAC,GAAc,KAAmB,EAAS,CAAI;CAerD,OAbA,QAAgB;EACd,AAAI,KAEF,EAAgB,EAAI;CAExB,GAAG,CAAC,CAAI,CAAC,GAQF;EAAE;EAAc,0BANU;GAC/B,AAAK,KACH,EAAgB,EAAK;EAEzB;CAE0C;AAC5C"}

package/package.json

@@ -1,14 +1,25 @@
 {
   "name": "@bonprix-ds/react-modal",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Modal component, implemented in React, for the Bonprix Design System.",
-  "type": "module",
-  "publishConfig": {
-    "access": "public",
-    "provenance": true
+  "keywords": [],
+  "license": "UNLICENSED",
+  "author": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bonprix/design-system.git",
+    "directory": "packages/react/modal"
   },
-  "module": "./dist/index.js",
+  "files": [
+    "dist",
+    "!dist/tsconfig.tsbuildinfo",
+    "!dist/vite.config.d.ts",
+    "!dist/**/*.test.d.ts"
+  ],
+  "type": "module",
   "sideEffects": false,
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -16,38 +27,28 @@
       "default": "./dist/index.js"
     }
   },
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "keywords": [],
-  "author": "",
-  "license": "UNLICENSED",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bonprix/design-system.git",
-    "directory": "packages/react/modal"
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   },
   "dependencies": {
-    "@bonprix-ds/internal-components": "0.1.5",
-    "@bonprix-ds/utils": "0.2.1"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwind-variants": "0.3.1"
+    "@bonprix-ds/internal-components": "0.2.1",
+    "@bonprix-ds/utils": "0.2.2"
   },
   "devDependencies": {
-    "vite": "8.2.2",
-    "vitest": "4.1.11",
-    "@testing-library/dom": "10.4.1",
+    "@testing-library/dom": "10.4.2",
     "@testing-library/react": "16.3.3",
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
     "@vitejs/plugin-react": "6.1.1",
     "rollup-preserve-directives": "1.1.3",
-    "unplugin-dts": "1.0.3",
-    "@microsoft/api-extractor": "7.59.0"
+    "vite": "8.3.0",
+    "vitest": "4.1.11"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tailwind-variants": "0.3.1"
   },
   "scripts": {
     "build": "vite build"