@maelstrom-futurism/modal 0.7.4-beta.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright 2025 OSMstudios
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Modal.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+interface ModalProps {
+    title?: string;
+    children?: ReactNode;
+    isShowing?: boolean | (() => void);
+    hide: () => void;
+}
+declare const Modal: ({ title, children, isShowing, hide }: ModalProps) => ReactNode | null;
+export default Modal;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAczC,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;IACnC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,QAAA,MAAM,KAAK,GAAI,sCAEZ,UAAU,KAAI,SAAS,GAAG,IAqC5B,CAAA;AAED,eAAe,KAAK,CAAC"}

package/dist/Modal.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import ReactDOM from "react-dom";
+import { useTheme } from "@maelstrom-futurism/core";
+import { modalOverlay, modalWrapper, modal, modalHeader, modalCloseButton, } from "./Modal.styles";
+import { css } from "@emotion/react";
+const Modal = ({ title, children, isShowing, hide }) => {
+    const theme = useTheme();
+    const modalModStyle = css `
+    color: black;
+    border-radius: ${theme.borderRadius};
+  `;
+    return isShowing ? ReactDOM.createPortal(_jsxs(_Fragment, { children: [_jsx("div", { css: modalOverlay, onClick: () => hide() }), _jsx("div", { css: modalWrapper, "aria-modal": true, "aria-hidden": true, tabIndex: -1, role: "dialog", children: _jsxs("div", { css: [modal, modalModStyle], children: [_jsxs("div", { css: modalHeader, children: [_jsx("div", { className: "title", children: title }), _jsx("button", { type: "button", css: modalCloseButton, "data-dismiss": "modal", "aria-label": "Close", onClick: hide, children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })] }), children] }) })] }), document.body) : null;
+};
+export default Modal;
+//# sourceMappingURL=Modal.js.map

package/dist/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":";AACA,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,gBAAgB,GACjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAWrC,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EACrB,EAAqB,EAAE;IAClC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,GAAG,CAAA;;qBAEN,KAAK,CAAC,YAAY;GACpC,CAAC;IAEF,OAAO,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,YAAY,CACtC,8BACE,cAAK,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,GAAI,EACjD,cACE,GAAG,EAAE,YAAY,2CAGjB,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,YAEb,eAAK,GAAG,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,aAC9B,eAAK,GAAG,EAAE,WAAW,aACnB,cAAK,SAAS,EAAC,OAAO,YAAE,KAAK,GAAO,EACpC,iBACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,gBAAgB,kBACR,OAAO,gBACT,OAAO,EAClB,OAAO,EAAE,IAAI,YAEb,8BAAkB,MAAM,uBAAe,GAChC,IACL,EAEL,QAAQ,IACL,GACF,IACL,EACH,QAAQ,CAAC,IAAI,CACd,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAA;AAED,eAAe,KAAK,CAAC"}

package/dist/Modal.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const modalOverlay: import("@emotion/react").SerializedStyles;
+export declare const modalWrapper: import("@emotion/react").SerializedStyles;
+export declare const modal: import("@emotion/react").SerializedStyles;
+export declare const modalHeader: import("@emotion/react").SerializedStyles;
+export declare const modalCloseButton: import("@emotion/react").SerializedStyles;
+//# sourceMappingURL=Modal.styles.d.ts.map

package/dist/Modal.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../src/Modal.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,2CASxB,CAAC;AAEF,eAAO,MAAM,YAAY,2CAKxB,CAAC;AAEF,eAAO,MAAM,KAAK,2CAajB,CAAC;AAEF,eAAO,MAAM,WAAW,2CAUvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,2CAa5B,CAAC"}

package/dist/Modal.styles.js

@@ -0,0 +1,57 @@
+import { css } from "@emotion/react";
+export const modalOverlay = css `
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1040;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+  opacity: 0.5;
+`;
+export const modalWrapper = css `
+  z-index: 1050;
+  overflow-x: hidden;
+  overflow-y: auto;
+  outline: 0;
+`;
+export const modal = css `
+  z-index: 1060;
+  background: white;
+  color: black;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 1.75rem auto;
+  max-width: 500px;
+  min-width: 300px;
+  min-height: 200px;
+  padding: 1rem 0.75rem;
+`;
+export const modalHeader = css `
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.15rem 0 0.5rem 0;
+
+  .title {
+    font-weight: bold;
+    text-transform: uppercase;
+    flex-grow: 1;
+  }
+`;
+export const modalCloseButton = css `
+  font-size: 1.4rem;
+  font-weight: 700;
+  line-height: 1;
+  background-color: transparent;
+  color: #000;
+  opacity: 0.3;
+  cursor: pointer;
+  border: none;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+//# sourceMappingURL=Modal.styles.js.map

package/dist/Modal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styles.js","sourceRoot":"","sources":["../src/Modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAErC,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;CAS9B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;CAK9B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAavB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;CAU7B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAalC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Modal } from './Modal';
+export { useModal } from './useModal';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as Modal } from './Modal';
+export { useModal } from './useModal';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/useModal.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from "react";
+interface RenderModalProps {
+    title?: string;
+    children: ReactNode;
+}
+export declare const useModal: () => [(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void, (props: RenderModalProps) => ReactNode, boolean];
+export {};
+//# sourceMappingURL=useModal.d.ts.map

package/dist/useModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../src/useModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAGnD,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,QAAO,CAC1B,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,EAChE,CAAC,KAAK,EAAE,gBAAgB,KAAK,SAAS,EACtC,OAAO,CAmBR,CAAC"}

package/dist/useModal.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { useState } from "react";
+import Modal from "./Modal";
+export const useModal = () => {
+    const [isVisible, setIsVisible] = useState(false);
+    function toggle() {
+        setIsVisible(!isVisible);
+    }
+    const RenderModal = ({ title, children }) => (_jsx(_Fragment, { children: isVisible && (_jsx(Modal, { title: title, hide: toggle, isShowing: isVisible, children: children })) }));
+    return [toggle, RenderModal, isVisible];
+};
+//# sourceMappingURL=useModal.js.map

package/dist/useModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.js","sourceRoot":"","sources":["../src/useModal.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,MAAM,SAAS,CAAC;AAO5B,MAAM,CAAC,MAAM,QAAQ,GAAG,GAItB,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,SAAS,MAAM;QACb,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM,WAAW,GAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAoB,EAAa,EAAE,CAAC,CACvE,4BACG,SAAS,IAAI,CACZ,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,YACpD,QAAQ,GACH,CACT,GACA,CACJ,CAAC;IAEF,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;AAC1C,CAAC,CAAC"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@maelstrom-futurism/modal",
+  "version": "0.7.4-beta.2",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run --coverage",
+    "test:dev": "vitest",
+    "prepublishOnly": "npm run build"
+  },
+  "author": "Dawson Goodell <dawsong@osmstudios.com>",
+  "homepage": "https://osmstudios.com",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DawsonG/maelstrom-futurism.git",
+    "directory": "packages/modal"
+  },
+  "dependencies": {
+    "@maelstrom-futurism/core": "^0.7.4-beta.2"
+  },
+  "peerDependences": {
+    "react": ">= 18.0.0",
+    "react-dom": ">= 18.0.0"
+  },
+  "gitHead": "09d05a402ed22c9cec10177af4d8dcdc17ea864c"
+}