@mikael240820/modal-toast-tailwind 1.0.0

package/README.md

@@ -0,0 +1,59 @@
+# modal-toast-tailwind
+
+React component for create modal (when `children` is provided) or toast (when `open` is `true`)
+IMPORTANT: Must use **Tailwind CSS** in your **project**
+
+## Install
+
+```bash
+npm i @mikael240820/modal-toast-tailwind
+```
+
+### Tailwind CSS
+
+In your main CSS file, add the following:
+
+```css
+@source "../node_modules/@mikael240820/modal-toast-tailwind/dist/**/*.{js,jsx,mjs}";
+```
+
+## Exemples
+
+### Modal
+
+```jsx
+import { ModalToast as Modal } from "@mikael240820/modal-toast-tailwind";
+
+export default function App() {
+  return (
+    <Modal title="My modal" triggerLabel="Open">
+      <div>Modal content</div>
+    </Modal>
+  );
+}
+```
+
+### Toast
+
+```jsx
+import { useState } from "react";
+import { ModalToast as Toast } from "@mikael240820/modal-toast-tailwind";
+
+export default function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Show toast</button>
+
+      <Toast
+        title="Saved"
+        description="Your changes have been success."
+        open={open}
+        onClose={() => setOpen(false)}
+        duration={5000}
+      />
+    </>
+  );
+}
+```

package/dist/index.js

@@ -0,0 +1,150 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  ModalToast: () => ModalToast
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ModalToast.jsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ModalToast({
+  title,
+  description,
+  children,
+  triggerLabel = "Open",
+  open = false,
+  onClose,
+  duration = 5e3
+}) {
+  const isModal = Boolean(children);
+  const [modalOpen, setModalOpen] = (0, import_react.useState)(false);
+  const titleId = (0, import_react.useId)();
+  const descriptionId = (0, import_react.useId)();
+  const onCloseRef = (0, import_react.useRef)(onClose);
+  (0, import_react.useEffect)(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+  (0, import_react.useEffect)(() => {
+    if (isModal || !open) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      var _a;
+      (_a = onCloseRef.current) == null ? void 0 : _a.call(onCloseRef);
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [duration, isModal, open]);
+  (0, import_react.useEffect)(() => {
+    if (!isModal || !modalOpen) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setModalOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isModal, modalOpen]);
+  if (isModal) {
+    const triggerText = triggerLabel || title || "Open";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "inline-flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center rounded-md border border-leaf-200 bg-white px-3 py-2 text-sm font-semibold text-leaf-900 hover:bg-leaf-100",
+          onClick: () => setModalOpen(true),
+          children: triggerText
+        }
+      ),
+      modalOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "absolute inset-0 bg-leaf-900/20 backdrop-blur-sm",
+            onClick: () => setModalOpen(false),
+            "aria-label": "Close modal"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? titleId : void 0,
+            "aria-describedby": description ? descriptionId : void 0,
+            className: "relative w-full max-w-lg rounded-lg border border-leaf-200 bg-white p-5 shadow-xl",
+            children: [
+              title || description ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-4", children: [
+                title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { id: titleId, className: "text-lg font-semibold text-leaf-900", children: title }) : null,
+                description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: descriptionId, className: "mt-1 text-sm text-leaf-700", children: description }) : null
+              ] }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-leaf-700", children }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "inline-flex items-center rounded-md bg-leaf-700 px-4 py-2 text-sm font-semibold text-white",
+                  onClick: () => setModalOpen(false),
+                  children: "Close"
+                }
+              ) })
+            ]
+          }
+        )
+      ] }) : null
+    ] });
+  }
+  if (!open) {
+    return;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "fixed bottom-6 right-6 z-50 w-[calc(100%-3rem)] max-w-sm", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "rounded-lg border border-leaf-200 bg-white p-4 shadow-lg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold text-leaf-900", children: title }) : null,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-sm text-leaf-700", children: description }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "rounded-md border border-leaf-200 px-2 py-1 text-xs font-semibold text-leaf-700 hover:bg-leaf-100",
+            onClick: onClose,
+            "aria-label": "Close notification",
+            children: "Close"
+          }
+        )
+      ] })
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModalToast
+});

package/dist/index.mjs

@@ -0,0 +1,124 @@
+// src/ModalToast.jsx
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ModalToast({
+  title,
+  description,
+  children,
+  triggerLabel = "Open",
+  open = false,
+  onClose,
+  duration = 5e3
+}) {
+  const isModal = Boolean(children);
+  const [modalOpen, setModalOpen] = useState(false);
+  const titleId = useId();
+  const descriptionId = useId();
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+  useEffect(() => {
+    if (isModal || !open) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      var _a;
+      (_a = onCloseRef.current) == null ? void 0 : _a.call(onCloseRef);
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [duration, isModal, open]);
+  useEffect(() => {
+    if (!isModal || !modalOpen) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setModalOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isModal, modalOpen]);
+  if (isModal) {
+    const triggerText = triggerLabel || title || "Open";
+    return /* @__PURE__ */ jsxs("div", { className: "inline-flex", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center rounded-md border border-leaf-200 bg-white px-3 py-2 text-sm font-semibold text-leaf-900 hover:bg-leaf-100",
+          onClick: () => setModalOpen(true),
+          children: triggerText
+        }
+      ),
+      modalOpen ? /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "absolute inset-0 bg-leaf-900/20 backdrop-blur-sm",
+            onClick: () => setModalOpen(false),
+            "aria-label": "Close modal"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? titleId : void 0,
+            "aria-describedby": description ? descriptionId : void 0,
+            className: "relative w-full max-w-lg rounded-lg border border-leaf-200 bg-white p-5 shadow-xl",
+            children: [
+              title || description ? /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                title ? /* @__PURE__ */ jsx("h3", { id: titleId, className: "text-lg font-semibold text-leaf-900", children: title }) : null,
+                description ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-1 text-sm text-leaf-700", children: description }) : null
+              ] }) : null,
+              /* @__PURE__ */ jsx("div", { className: "text-sm text-leaf-700", children }),
+              /* @__PURE__ */ jsx("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "inline-flex items-center rounded-md bg-leaf-700 px-4 py-2 text-sm font-semibold text-white",
+                  onClick: () => setModalOpen(false),
+                  children: "Close"
+                }
+              ) })
+            ]
+          }
+        )
+      ] }) : null
+    ] });
+  }
+  if (!open) {
+    return;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "fixed bottom-6 right-6 z-50 w-[calc(100%-3rem)] max-w-sm", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "rounded-lg border border-leaf-200 bg-white p-4 shadow-lg",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          title ? /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-leaf-900", children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-leaf-700", children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rounded-md border border-leaf-200 px-2 py-1 text-xs font-semibold text-leaf-700 hover:bg-leaf-100",
+            onClick: onClose,
+            "aria-label": "Close notification",
+            children: "Close"
+          }
+        )
+      ] })
+    }
+  ) });
+}
+export {
+  ModalToast
+};

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@mikael240820/modal-toast-tailwind",
+  "version": "1.0.0",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=19.2",
+    "react-dom": ">=19.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}