aark-react-modalify 1.0.0

package/README.md

@@ -0,0 +1,224 @@
+# AARK React Modalify 🚀
+
+A lightweight, customizable, and easy-to-use modal library for React applications with TypeScript support and full CSS customization.
+
+## ✨ Features
+
+- **Zero Dependencies**: Pure React implementation
+- **TypeScript Support**: Full type safety out of the box
+- **Class-based Architecture**: Clean, singleton-based API
+- **Fully Customizable**: CSS variables for complete theme control
+- **Portal Rendering**: Modals render outside your component tree
+- **Accessibility**: Built-in keyboard navigation and focus management
+- **Multiple Positions**: Center, top, bottom, left, right positioning
+- **Animation Support**: Smooth fade and slide animations
+- **Hook Integration**: useModal hook for advanced use cases
+- **No Provider Required**: Just import and use anywhere
+
+## 📦 Installation
+
+```bash
+npm install aark-react-modalify
+```
+
+## 🚀 Quick Start
+
+```jsx
+import { aark } from "aark-react-modalify";
+
+function App() {
+	const openModal = () => {
+		aark.fire(
+			<div>
+				<h2>Hello World!</h2>
+				<p>This is a simple modal.</p>
+				<button onClick={() => aark.close()}>Close</button>
+			</div>,
+			{
+				mode: "modal",
+				position: "center",
+				showCloseIcon: true,
+			}
+		);
+	};
+
+	return (
+		<div>
+			<button onClick={openModal}>Open Modal</button>
+		</div>
+	);
+}
+```
+
+## 🎨 Theme Customization
+
+AARK React Modalify supports full theme customization through CSS variables:
+
+```jsx
+import { aark } from "aark-react-modalify";
+
+// Set custom theme
+aark.setTheme({
+	modalBackground: "#1a1a1a",
+	overlayBackground: "rgba(0, 0, 0, 0.8)",
+	closeButtonColor: "#ffffff",
+	closeButtonHoverBackground: "rgba(255, 255, 255, 0.1)",
+	modalBorderRadius: "12px",
+	animationDuration: "0.3s",
+});
+
+// Fire modal with custom theme
+aark.fire(<div>Themed Modal</div>);
+
+// Reset to default theme
+aark.resetTheme();
+
+// Get current theme
+const currentTheme = aark.getTheme();
+```
+
+## 📚 API Reference
+
+### `aark.fire(component, options)`
+
+Display a modal with the given component and options.
+
+**Parameters:**
+
+- `component` (ReactNode): The React component or element to render
+- `options` (ModalOptions): Configuration options
+
+**Returns:** `void`
+
+### `aark.close()`
+
+Close the currently open modal.
+
+### `aark.isOpen()`
+
+Check if a modal is currently open.
+
+**Returns:** `boolean`
+
+### `aark.closeAll()`
+
+Close all open modals.
+
+### `aark.setTheme(theme)`
+
+Set custom theme for AARK modals.
+
+**Parameters:**
+
+- `theme` (AarkModalTheme): Theme configuration object
+
+### `aark.resetTheme()`
+
+Reset theme to default values.
+
+### `aark.getTheme()`
+
+Get current theme values.
+
+**Returns:** `AarkModalTheme`
+
+## ⚙️ Modal Options
+
+```typescript
+interface ModalOptions {
+	mode?: "modal" | "drawer" | "popup";
+	position?: "center" | "top" | "bottom" | "left" | "right";
+	showCloseIcon?: boolean;
+	closeOnOverlayClick?: boolean;
+	closeOnEscapeKey?: boolean;
+	customClass?: string;
+}
+```
+
+## 🎨 Theme Properties
+
+```typescript
+interface AarkModalTheme {
+	// Overlay
+	overlayBackground?: string;
+	overlayBlur?: string;
+
+	// Modal
+	modalBackground?: string;
+	modalBorderRadius?: string;
+	modalShadow?: string;
+	modalPadding?: string;
+	modalZIndex?: number;
+	modalContentZIndex?: number;
+
+	// Close button
+	closeButtonColor?: string;
+	closeButtonHoverBackground?: string;
+	closeButtonHoverColor?: string;
+	closeButtonFocusOutline?: string;
+
+	// Animation
+	animationDuration?: string;
+	fadeDuration?: string;
+
+	// Custom styles
+	customOverlayBackground?: string;
+	customOverlayBlur?: string;
+	customModalGradientStart?: string;
+	customModalGradientEnd?: string;
+	customModalTextColor?: string;
+	customModalShadow?: string;
+	customModalCloseColor?: string;
+	customModalCloseHoverBackground?: string;
+	customModalCloseHoverColor?: string;
+}
+```
+
+## 🔗 React Hook Integration
+
+For advanced use cases, you can use the `useModal` hook:
+
+```jsx
+import { useModal } from "aark-react-modalify";
+
+function MyComponent() {
+	const { modals, close } = useModal();
+
+	return (
+		<div>
+			{modals.length > 0 && <p>Currently {modals.length} modal(s) open</p>}
+		</div>
+	);
+}
+```
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Type checking
+npm run type-check
+
+# Linting
+npm run lint
+```
+
+## 📄 License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📞 Support
+
+If you have any questions or need help, please open an issue on GitHub.

package/dist/ModalProvider-ComHxfXZ.js

@@ -0,0 +1,9 @@
+import { u as s, j as n, M as t } from "./index-DIT0k89J.js";
+import "react";
+const i = () => {
+  const { isOpen: e, config: o, close: r } = s();
+  return !e || !o ? null : /* @__PURE__ */ n.jsx(t, { config: o, onClose: r });
+};
+export {
+  i as default
+};

package/dist/ModalProvider-zcVXiybl.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CvIFkjib.cjs");require("react");const t=()=>{const{isOpen:o,config:r,close:n}=e.useModal();return!o||!r?null:e.jsxRuntimeExports.jsx(e.ModalRenderer,{config:r,onClose:n})};exports.default=t;

package/dist/aark-react-modalify.css

@@ -0,0 +1 @@
+:root{--aark-modal-overlay-bg: rgba(0, 0, 0, .5);--aark-modal-overlay-blur: 2px;--aark-modal-bg: #ffffff;--aark-modal-border-radius: 8px;--aark-modal-shadow: 0 10px 25px rgba(0, 0, 0, .15);--aark-modal-padding: 16px;--aark-modal-z-index: 9999;--aark-modal-content-z-index: 10000;--aark-modal-close-color: #666666;--aark-modal-close-hover-bg: #f5f5f5;--aark-modal-close-hover-color: #333333;--aark-modal-close-focus-outline: #007bff;--aark-modal-animation-duration: .2s;--aark-modal-fade-duration: .15s;--aark-custom-overlay-bg: rgba(0, 0, 0, .8);--aark-custom-overlay-blur: 5px;--aark-custom-modal-gradient-start: #667eea;--aark-custom-modal-gradient-end: #764ba2;--aark-custom-modal-text-color: #ffffff;--aark-custom-modal-shadow: 0 20px 40px rgba(0, 0, 0, .3);--aark-custom-modal-close-color: rgba(255, 255, 255, .8);--aark-custom-modal-close-hover-bg: rgba(255, 255, 255, .2);--aark-custom-modal-close-hover-color: #ffffff}.aark-modal-container{position:fixed;inset:0;z-index:var(--aark-modal-z-index)}.aark-modal-container.notification{pointer-events:none}.aark-modal-overlay{position:absolute;inset:0;background-color:var(--aark-modal-overlay-bg);-webkit-backdrop-filter:blur(var(--aark-modal-overlay-blur));backdrop-filter:blur(var(--aark-modal-overlay-blur))}.custom-overlay{background-color:var(--aark-custom-overlay-bg)!important;-webkit-backdrop-filter:blur(var(--aark-custom-overlay-blur))!important;backdrop-filter:blur(var(--aark-custom-overlay-blur))!important}.aark-modal-content{position:fixed;background-color:var(--aark-modal-bg);border-radius:var(--aark-modal-border-radius);box-shadow:var(--aark-modal-shadow);padding:var(--aark-modal-padding);z-index:var(--aark-modal-content-z-index);max-width:90vw;max-height:90vh;overflow:auto}.aark-modal-content.notification{pointer-events:auto}.aark-modal-content.custom-modal{background:linear-gradient(135deg,var(--aark-custom-modal-gradient-start) 0%,var(--aark-custom-modal-gradient-end) 100%)!important;color:var(--aark-custom-modal-text-color)!important;border:none!important;box-shadow:var(--aark-custom-modal-shadow)!important}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center{top:20px;left:50%;transform:translate(-50%)}.aark-modal-content.top-right{top:20px;right:20px}.aark-modal-content.bottom-right{bottom:20px;right:20px}.aark-modal-content.bottom-center{bottom:20px;left:50%;transform:translate(-50%)}.aark-modal-close{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--aark-modal-close-color);cursor:pointer;border-radius:50%;font-size:14px;line-height:1;transition:all var(--aark-modal-animation-duration) ease}.aark-modal-close:hover{background-color:var(--aark-modal-close-hover-bg);color:var(--aark-modal-close-hover-color)}.aark-modal-close:focus{outline:2px solid var(--aark-modal-close-focus-outline);outline-offset:2px}.aark-modal-content.custom-modal .aark-modal-close{color:var(--aark-custom-modal-close-color)}.aark-modal-content.custom-modal .aark-modal-close:hover{background-color:var(--aark-custom-modal-close-hover-bg);color:var(--aark-custom-modal-close-hover-color)}.aark-modal-body{padding-top:8px}.aark-modal-container{animation:aark-modal-fade-in var(--aark-modal-fade-duration) ease-out}.aark-modal-content{animation:aark-modal-slide-in var(--aark-modal-animation-duration) ease-out}@keyframes aark-modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes aark-modal-slide-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.aark-modal-content.top-center{animation:aark-modal-slide-down var(--aark-modal-animation-duration) ease-out}.aark-modal-content.top-right,.aark-modal-content.bottom-right{animation:aark-modal-slide-left var(--aark-modal-animation-duration) ease-out}.aark-modal-content.bottom-center{animation:aark-modal-slide-up var(--aark-modal-animation-duration) ease-out}@keyframes aark-modal-slide-down{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes aark-modal-slide-left{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}@keyframes aark-modal-slide-up{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media (max-width: 768px){.aark-modal-content{margin:10px;max-width:calc(100vw - 20px)}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center,.aark-modal-content.bottom-center{left:50%;transform:translate(-50%)}.aark-modal-content.top-right{right:10px;left:auto;transform:none}.aark-modal-content.bottom-right{right:10px;bottom:10px;left:auto;transform:none}}