next-recomponents 2.0.2 → 2.0.4

package/dist/index.d.mts

@@ -215,4 +215,11 @@ interface Table3Props<T extends Record<string, any>> extends DetailedHTMLProps<T
 }
 declare function Table3<T extends Record<string, any>>({ data, selectItems, maxItems, onSave, exportName, colSizes, modal, header, footer, onChange, symbols, sortBy, ...props }: Table3Props<T>): react_jsx_runtime.JSX.Element | null;
 
-export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, Table, Table3, type TableButtonProps, type TableButtonProps as TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, useResources };
+declare function usePopup(): {
+    alert: (message: string) => Promise<void>;
+    confirm: (message: string) => Promise<boolean>;
+    prompt: (message: string) => Promise<string | null>;
+    PopupComponent: react_jsx_runtime.JSX.Element | null;
+};
+
+export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, Table, Table3, type TableButtonProps, type TableButtonProps as TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, usePopup, useResources };

package/dist/index.d.ts

@@ -215,4 +215,11 @@ interface Table3Props<T extends Record<string, any>> extends DetailedHTMLProps<T
 }
 declare function Table3<T extends Record<string, any>>({ data, selectItems, maxItems, onSave, exportName, colSizes, modal, header, footer, onChange, symbols, sortBy, ...props }: Table3Props<T>): react_jsx_runtime.JSX.Element | null;
 
-export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, Table, Table3, type TableButtonProps, type TableButtonProps as TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, useResources };
+declare function usePopup(): {
+    alert: (message: string) => Promise<void>;
+    confirm: (message: string) => Promise<boolean>;
+    prompt: (message: string) => Promise<string | null>;
+    PopupComponent: react_jsx_runtime.JSX.Element | null;
+};
+
+export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, Table, Table3, type TableButtonProps, type TableButtonProps as TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, usePopup, useResources };

package/dist/index.js

@@ -3505,6 +3505,7 @@ __export(index_exports, {
   useDates: () => useDates,
   useExcel: () => useExcel,
   useFormValues: () => useFormValues,
+  usePopup: () => usePopup,
   useResources: () => useResources
 });
 module.exports = __toCommonJS(index_exports);
@@ -37957,6 +37958,143 @@ function Table3({
     ] })
   ] });
 }
+
+// src/pop/index.tsx
+var import_react16 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function usePopup() {
+  const [popup, setPopup] = (0, import_react16.useState)({ type: "alert", message: "", visible: false, inputValue: "" });
+  function alert2(message) {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "alert",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: () => resolve()
+      });
+    });
+  }
+  function confirm(message) {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "confirm",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: () => resolve(true),
+        onCancel: () => resolve(false)
+      });
+    });
+  }
+  function prompt(message) {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "prompt",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: (value) => resolve(value != null ? value : ""),
+        onCancel: () => resolve(null)
+      });
+    });
+  }
+  function close(confirmed, value) {
+    setPopup((prev) => {
+      var _a, _b;
+      if (confirmed) (_a = prev.onConfirm) == null ? void 0 : _a.call(prev, value);
+      else (_b = prev.onCancel) == null ? void 0 : _b.call(prev);
+      return { ...prev, visible: false, inputValue: "" };
+    });
+  }
+  const PopupComponent = popup.visible ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        background: "rgba(0,0,0,0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        "div",
+        {
+          style: {
+            background: "#fff",
+            padding: "24px 32px",
+            borderRadius: "8px",
+            minWidth: "300px",
+            textAlign: "center",
+            boxShadow: "0 4px 20px rgba(0,0,0,0.2)"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { style: { margin: "0 0 16px", fontSize: "16px" }, children: popup.message }),
+            popup.type === "prompt" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              "input",
+              {
+                autoFocus: true,
+                type: "text",
+                value: popup.inputValue,
+                onChange: (e) => setPopup((prev) => ({ ...prev, inputValue: e.target.value })),
+                onKeyDown: (e) => e.key === "Enter" && close(true, popup.inputValue),
+                style: {
+                  width: "100%",
+                  padding: "8px 12px",
+                  marginBottom: "16px",
+                  border: "1px solid #d1d5db",
+                  borderRadius: "6px",
+                  fontSize: "14px",
+                  boxSizing: "border-box"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { display: "flex", gap: "8px", justifyContent: "center" }, children: [
+              (popup.type === "confirm" || popup.type === "prompt") && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                "button",
+                {
+                  onClick: () => close(false),
+                  style: {
+                    padding: "8px 24px",
+                    background: "#e5e7eb",
+                    color: "#374151",
+                    border: "none",
+                    borderRadius: "6px",
+                    cursor: "pointer",
+                    fontSize: "14px"
+                  },
+                  children: "Cancelar"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                "button",
+                {
+                  onClick: () => close(true, popup.inputValue),
+                  style: {
+                    padding: "8px 24px",
+                    background: "#3b82f6",
+                    color: "#fff",
+                    border: "none",
+                    borderRadius: "6px",
+                    cursor: "pointer",
+                    fontSize: "14px"
+                  },
+                  children: "OK"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  ) : null;
+  return { alert: alert2, confirm, prompt, PopupComponent };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -37976,6 +38114,7 @@ function Table3({
   useDates,
   useExcel,
   useFormValues,
+  usePopup,
   useResources
 });
 /*! Bundled license information:

package/dist/index.mjs

@@ -37952,6 +37952,143 @@ function Table3({
     ] })
   ] });
 }
+
+// src/pop/index.tsx
+import { useState as useState13 } from "react";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
+function usePopup() {
+  const [popup, setPopup] = useState13({ type: "alert", message: "", visible: false, inputValue: "" });
+  function alert2(message) {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "alert",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: () => resolve()
+      });
+    });
+  }
+  function confirm(message) {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "confirm",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: () => resolve(true),
+        onCancel: () => resolve(false)
+      });
+    });
+  }
+  function prompt(message) {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "prompt",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: (value) => resolve(value != null ? value : ""),
+        onCancel: () => resolve(null)
+      });
+    });
+  }
+  function close(confirmed, value) {
+    setPopup((prev) => {
+      var _a, _b;
+      if (confirmed) (_a = prev.onConfirm) == null ? void 0 : _a.call(prev, value);
+      else (_b = prev.onCancel) == null ? void 0 : _b.call(prev);
+      return { ...prev, visible: false, inputValue: "" };
+    });
+  }
+  const PopupComponent = popup.visible ? /* @__PURE__ */ jsx27(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        background: "rgba(0,0,0,0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3
+      },
+      children: /* @__PURE__ */ jsxs19(
+        "div",
+        {
+          style: {
+            background: "#fff",
+            padding: "24px 32px",
+            borderRadius: "8px",
+            minWidth: "300px",
+            textAlign: "center",
+            boxShadow: "0 4px 20px rgba(0,0,0,0.2)"
+          },
+          children: [
+            /* @__PURE__ */ jsx27("p", { style: { margin: "0 0 16px", fontSize: "16px" }, children: popup.message }),
+            popup.type === "prompt" && /* @__PURE__ */ jsx27(
+              "input",
+              {
+                autoFocus: true,
+                type: "text",
+                value: popup.inputValue,
+                onChange: (e) => setPopup((prev) => ({ ...prev, inputValue: e.target.value })),
+                onKeyDown: (e) => e.key === "Enter" && close(true, popup.inputValue),
+                style: {
+                  width: "100%",
+                  padding: "8px 12px",
+                  marginBottom: "16px",
+                  border: "1px solid #d1d5db",
+                  borderRadius: "6px",
+                  fontSize: "14px",
+                  boxSizing: "border-box"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs19("div", { style: { display: "flex", gap: "8px", justifyContent: "center" }, children: [
+              (popup.type === "confirm" || popup.type === "prompt") && /* @__PURE__ */ jsx27(
+                "button",
+                {
+                  onClick: () => close(false),
+                  style: {
+                    padding: "8px 24px",
+                    background: "#e5e7eb",
+                    color: "#374151",
+                    border: "none",
+                    borderRadius: "6px",
+                    cursor: "pointer",
+                    fontSize: "14px"
+                  },
+                  children: "Cancelar"
+                }
+              ),
+              /* @__PURE__ */ jsx27(
+                "button",
+                {
+                  onClick: () => close(true, popup.inputValue),
+                  style: {
+                    padding: "8px 24px",
+                    background: "#3b82f6",
+                    color: "#fff",
+                    border: "none",
+                    borderRadius: "6px",
+                    cursor: "pointer",
+                    fontSize: "14px"
+                  },
+                  children: "OK"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  ) : null;
+  return { alert: alert2, confirm, prompt, PopupComponent };
+}
 export {
   Alert,
   Button,
@@ -37970,6 +38107,7 @@ export {
   useDates,
   useExcel,
   useFormValues,
+  usePopup,
   useResources
 };
 /*! Bundled license information:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/index.tsx

@@ -18,3 +18,4 @@ export { default as MyCalendar } from "./calendar";
 export { useFormValues } from "./form";
 export { default as DocumentViewer } from "./doc-viewer";
 export { default as Table3 } from "./table3";
+export { default as usePopup } from "./pop";

package/src/pop/index.tsx

@@ -0,0 +1,147 @@
+"use client";
+import { useState } from "react";
+
+export default function usePopup() {
+  const [popup, setPopup] = useState<{
+    type: "alert" | "confirm" | "prompt";
+    message: string;
+    visible: boolean;
+    inputValue: string;
+    onConfirm?: (value?: string) => void;
+    onCancel?: () => void;
+  }>({ type: "alert", message: "", visible: false, inputValue: "" });
+
+  function alert(message: string): Promise<void> {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "alert",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: () => resolve(),
+      });
+    });
+  }
+
+  function confirm(message: string): Promise<boolean> {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "confirm",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: () => resolve(true),
+        onCancel: () => resolve(false),
+      });
+    });
+  }
+
+  function prompt(message: string): Promise<string | null> {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "prompt",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: (value) => resolve(value ?? ""),
+        onCancel: () => resolve(null),
+      });
+    });
+  }
+
+  function close(confirmed: boolean, value?: string) {
+    setPopup((prev) => {
+      if (confirmed) prev.onConfirm?.(value);
+      else prev.onCancel?.();
+      return { ...prev, visible: false, inputValue: "" };
+    });
+  }
+
+  const PopupComponent = popup.visible ? (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        background: "rgba(0,0,0,0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1000,
+      }}
+    >
+      <div
+        style={{
+          background: "#fff",
+          padding: "24px 32px",
+          borderRadius: "8px",
+          minWidth: "300px",
+          textAlign: "center",
+          boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
+        }}
+      >
+        <p style={{ margin: "0 0 16px", fontSize: "16px" }}>{popup.message}</p>
+
+        {popup.type === "prompt" && (
+          <input
+            autoFocus
+            type="text"
+            value={popup.inputValue}
+            onChange={(e) =>
+              setPopup((prev) => ({ ...prev, inputValue: e.target.value }))
+            }
+            onKeyDown={(e) =>
+              e.key === "Enter" && close(true, popup.inputValue)
+            }
+            style={{
+              width: "100%",
+              padding: "8px 12px",
+              marginBottom: "16px",
+              border: "1px solid #d1d5db",
+              borderRadius: "6px",
+              fontSize: "14px",
+              boxSizing: "border-box",
+            }}
+          />
+        )}
+
+        <div style={{ display: "flex", gap: "8px", justifyContent: "center" }}>
+          {(popup.type === "confirm" || popup.type === "prompt") && (
+            <button
+              onClick={() => close(false)}
+              style={{
+                padding: "8px 24px",
+                background: "#e5e7eb",
+                color: "#374151",
+                border: "none",
+                borderRadius: "6px",
+                cursor: "pointer",
+                fontSize: "14px",
+              }}
+            >
+              Cancelar
+            </button>
+          )}
+          <button
+            onClick={() => close(true, popup.inputValue)}
+            style={{
+              padding: "8px 24px",
+              background: "#3b82f6",
+              color: "#fff",
+              border: "none",
+              borderRadius: "6px",
+              cursor: "pointer",
+              fontSize: "14px",
+            }}
+          >
+            OK
+          </button>
+        </div>
+      </div>
+    </div>
+  ) : null;
+
+  return { alert, confirm, prompt, PopupComponent };
+}