react-confirm-animated-dialog-dk 1.0.0

package/README.md

@@ -0,0 +1 @@
+"# confirm-modal" 

package/dist/index.css

@@ -0,0 +1,54 @@
+/* src/styles.css */
+.cm-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+.cm-modal {
+  background: white;
+  max-width: 420px;
+  width: 100%;
+  padding: 24px;
+  border-radius: 12px;
+}
+.cm-footer {
+  display: flex;
+  gap: 12px;
+  margin-top: 20px;
+}
+.cm-button {
+  flex: 1;
+  height: 40px;
+  border: none;
+  background: #111;
+  color: white;
+  cursor: pointer;
+  border-radius: 8px;
+  position: relative;
+}
+.cm-outline {
+  background: white;
+  border: 1px solid #ccc;
+  color: #333;
+}
+.cm-delete {
+  background: #e53935;
+}
+.cm-spinner {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 2px solid white;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin .7s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/index.js

@@ -0,0 +1,124 @@
+"use strict";
+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.ts
+var index_exports = {};
+__export(index_exports, {
+  ConfirmModal: () => ConfirmModal
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ConfirmModal.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function AnimatedButton({
+  label,
+  isLoading,
+  onClick,
+  variant
+}) {
+  const letters = label.split("");
+  const [isDropping, setIsDropping] = (0, import_react.useState)(false);
+  const [droppedCount, setDroppedCount] = (0, import_react.useState)(0);
+  const reset = (0, import_react.useCallback)(() => {
+    setIsDropping(false);
+    setDroppedCount(0);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (isLoading && !isDropping) setIsDropping(true);
+    if (!isLoading && isDropping) reset();
+  }, [isLoading, isDropping, reset]);
+  (0, import_react.useEffect)(() => {
+    if (!isDropping) return;
+    if (droppedCount < letters.length) {
+      const t = setTimeout(() => setDroppedCount((c) => c + 1), 100);
+      return () => clearTimeout(t);
+    }
+  }, [isDropping, droppedCount, letters.length]);
+  const allDropped = isDropping && droppedCount >= letters.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      className: `cm-button ${variant === "delete" ? "cm-delete" : ""}`,
+      onClick,
+      disabled: isLoading,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cm-button-content", children: letters.map((letter, i) => {
+          const gone = isDropping && i < droppedCount;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              style: {
+                transform: gone ? "translateY(20px) rotate(10deg) scale(0.3)" : "none",
+                opacity: gone ? 0 : 1,
+                transition: "all 0.2s ease"
+              },
+              children: letter
+            },
+            i
+          );
+        }) }),
+        allDropped && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cm-spinner" })
+      ]
+    }
+  );
+}
+function ConfirmModal({
+  open,
+  title = "Are you sure?",
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  isLoading = false,
+  type = "default"
+}) {
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cm-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cm-modal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cm-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cm-footer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: "cm-button cm-outline",
+          onClick: onCancel,
+          disabled: isLoading,
+          children: cancelLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        AnimatedButton,
+        {
+          label: confirmLabel,
+          isLoading,
+          onClick: onConfirm,
+          variant: type === "delete" ? "delete" : "default"
+        }
+      )
+    ] })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConfirmModal
+});

package/dist/index.mjs

@@ -0,0 +1,97 @@
+// src/ConfirmModal.tsx
+import { useEffect, useState, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AnimatedButton({
+  label,
+  isLoading,
+  onClick,
+  variant
+}) {
+  const letters = label.split("");
+  const [isDropping, setIsDropping] = useState(false);
+  const [droppedCount, setDroppedCount] = useState(0);
+  const reset = useCallback(() => {
+    setIsDropping(false);
+    setDroppedCount(0);
+  }, []);
+  useEffect(() => {
+    if (isLoading && !isDropping) setIsDropping(true);
+    if (!isLoading && isDropping) reset();
+  }, [isLoading, isDropping, reset]);
+  useEffect(() => {
+    if (!isDropping) return;
+    if (droppedCount < letters.length) {
+      const t = setTimeout(() => setDroppedCount((c) => c + 1), 100);
+      return () => clearTimeout(t);
+    }
+  }, [isDropping, droppedCount, letters.length]);
+  const allDropped = isDropping && droppedCount >= letters.length;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: `cm-button ${variant === "delete" ? "cm-delete" : ""}`,
+      onClick,
+      disabled: isLoading,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "cm-button-content", children: letters.map((letter, i) => {
+          const gone = isDropping && i < droppedCount;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                transform: gone ? "translateY(20px) rotate(10deg) scale(0.3)" : "none",
+                opacity: gone ? 0 : 1,
+                transition: "all 0.2s ease"
+              },
+              children: letter
+            },
+            i
+          );
+        }) }),
+        allDropped && /* @__PURE__ */ jsx("div", { className: "cm-spinner" })
+      ]
+    }
+  );
+}
+function ConfirmModal({
+  open,
+  title = "Are you sure?",
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  isLoading = false,
+  type = "default"
+}) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsx("div", { className: "cm-overlay", children: /* @__PURE__ */ jsxs("div", { className: "cm-modal", children: [
+    /* @__PURE__ */ jsxs("div", { className: "cm-header", children: [
+      /* @__PURE__ */ jsx("h3", { children: title }),
+      description && /* @__PURE__ */ jsx("p", { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "cm-footer", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "cm-button cm-outline",
+          onClick: onCancel,
+          disabled: isLoading,
+          children: cancelLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AnimatedButton,
+        {
+          label: confirmLabel,
+          isLoading,
+          onClick: onConfirm,
+          variant: type === "delete" ? "delete" : "default"
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  ConfirmModal
+};

package/package.json

@@ -0,0 +1,22 @@
+{
+ "name": "react-confirm-animated-dialog-dk",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}