next-recomponents 2.0.4 → 2.0.6

package/package.json

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

package/src/pop/index.tsx

@@ -1,17 +1,110 @@
 "use client";
 import { useState } from "react";
 
+type Color =
+  | "white"
+  | "primary"
+  | "secondary"
+  | "info"
+  | "danger"
+  | "warning"
+  | "success";
+
+// ─── Color tokens ─────────────────────────────────────────────────────────────
+
+const COLOR_CONFIG: Record<
+  Color,
+  {
+    bg: string;
+    iconBg: string;
+    iconText: string;
+    border: string;
+    confirm: string;
+    label: string;
+  }
+> = {
+  primary: {
+    bg: "from-blue-50 to-indigo-50",
+    iconBg: "bg-blue-100",
+    iconText: "text-blue-600",
+    border: "border-blue-200",
+    confirm: "bg-blue-600 hover:bg-blue-700 focus:ring-blue-300",
+    label: "ℹ",
+  },
+  info: {
+    bg: "from-sky-50 to-cyan-50",
+    iconBg: "bg-sky-100",
+    iconText: "text-sky-600",
+    border: "border-sky-200",
+    confirm: "bg-sky-600 hover:bg-sky-700 focus:ring-sky-300",
+    label: "ℹ",
+  },
+  success: {
+    bg: "from-emerald-50 to-green-50",
+    iconBg: "bg-emerald-100",
+    iconText: "text-emerald-600",
+    border: "border-emerald-200",
+    confirm: "bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-300",
+    label: "✓",
+  },
+  warning: {
+    bg: "from-amber-50 to-yellow-50",
+    iconBg: "bg-amber-100",
+    iconText: "text-amber-600",
+    border: "border-amber-200",
+    confirm: "bg-amber-500 hover:bg-amber-600 focus:ring-amber-300",
+    label: "⚠",
+  },
+  danger: {
+    bg: "from-red-50 to-rose-50",
+    iconBg: "bg-red-100",
+    iconText: "text-red-600",
+    border: "border-red-200",
+    confirm: "bg-red-600 hover:bg-red-700 focus:ring-red-300",
+    label: "✕",
+  },
+  secondary: {
+    bg: "from-slate-50 to-gray-50",
+    iconBg: "bg-slate-100",
+    iconText: "text-slate-600",
+    border: "border-slate-200",
+    confirm: "bg-slate-700 hover:bg-slate-800 focus:ring-slate-300",
+    label: "◎",
+  },
+  white: {
+    bg: "from-gray-50 to-white",
+    iconBg: "bg-gray-100",
+    iconText: "text-gray-500",
+    border: "border-gray-200",
+    confirm: "bg-gray-700 hover:bg-gray-800 focus:ring-gray-300",
+    label: "◎",
+  },
+};
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+interface PopupState {
+  type: "alert" | "confirm" | "prompt";
+  message: string;
+  visible: boolean;
+  inputValue: string;
+  onConfirm?: (value?: string) => void;
+  onCancel?: () => void;
+  color: Color;
+}
+
+// ─── Hook ─────────────────────────────────────────────────────────────────────
+
 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> {
+  const [popup, setPopup] = useState<PopupState>({
+    type: "alert",
+    message: "",
+    visible: false,
+    inputValue: "",
+    color: "primary",
+  });
+
+  function alert(message: string, color: Color = "primary"): Promise<void> {
     return new Promise((resolve) => {
       setPopup({
         type: "alert",
@@ -19,11 +112,15 @@ export default function usePopup() {
         visible: true,
         inputValue: "",
         onConfirm: () => resolve(),
+        color,
       });
     });
   }
 
-  function confirm(message: string): Promise<boolean> {
+  function confirm(
+    message: string,
+    color: Color = "primary",
+  ): Promise<boolean> {
     return new Promise((resolve) => {
       setPopup({
         type: "confirm",
@@ -32,11 +129,15 @@ export default function usePopup() {
         inputValue: "",
         onConfirm: () => resolve(true),
         onCancel: () => resolve(false),
+        color,
       });
     });
   }
 
-  function prompt(message: string): Promise<string | null> {
+  function prompt(
+    message: string,
+    color: Color = "primary",
+  ): Promise<string | null> {
     return new Promise((resolve) => {
       setPopup({
         type: "prompt",
@@ -45,6 +146,7 @@ export default function usePopup() {
         inputValue: "",
         onConfirm: (value) => resolve(value ?? ""),
         onCancel: () => resolve(null),
+        color,
       });
     });
   }
@@ -57,86 +159,90 @@ export default function usePopup() {
     });
   }
 
+  const c = COLOR_CONFIG[popup.color];
+
   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,
-      }}
+      className="fixed inset-0 flex items-center justify-center z-[1000]"
+      style={{ background: "rgba(15,23,42,0.45)", backdropFilter: "blur(2px)" }}
+      onClick={(e) => e.target === e.currentTarget && close(false)}
     >
       <div
-        style={{
-          background: "#fff",
-          padding: "24px 32px",
-          borderRadius: "8px",
-          minWidth: "300px",
-          textAlign: "center",
-          boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
-        }}
+        className={`
+          bg-gradient-to-br ${c.bg} border ${c.border}
+          rounded-2xl shadow-2xl w-full max-w-sm mx-4
+          animate-[fadeInScale_0.18s_ease-out]
+        `}
+        style={{ animation: "fadeInScale 0.18s ease-out" }}
       >
-        <p style={{ margin: "0 0 16px", fontSize: "16px" }}>{popup.message}</p>
+        <style>{`
+          @keyframes fadeInScale {
+            from { opacity: 0; transform: scale(0.93) translateY(8px); }
+            to   { opacity: 1; transform: scale(1)    translateY(0);   }
+          }
+        `}</style>
 
+        {/* Icon + Message */}
+        <div className="flex flex-col items-center gap-3 px-8 pt-8 pb-5 text-center">
+          <div
+            className={`w-12 h-12 rounded-full ${c.iconBg} flex items-center justify-center`}
+          >
+            <span className={`text-xl font-bold ${c.iconText}`}>{c.label}</span>
+          </div>
+          <p className="text-gray-800 text-[15px] font-medium leading-snug">
+            {popup.message}
+          </p>
+        </div>
+
+        {/* Prompt input */}
         {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 className="px-8 pb-2">
+            <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)
+              }
+              className={`
+                w-full px-3 py-2 rounded-lg border ${c.border} bg-white
+                text-sm text-gray-800 outline-none
+                focus:ring-2 ${c.confirm.includes("blue") ? "focus:ring-blue-200" : "focus:ring-gray-200"}
+                transition
+              `}
+              placeholder="Escribe aquí..."
+            />
+          </div>
         )}
 
-        <div style={{ display: "flex", gap: "8px", justifyContent: "center" }}>
+        {/* Divider */}
+        <div className={`border-t ${c.border} mx-0 mt-4`} />
+
+        {/* Actions */}
+        <div className="flex gap-2 px-6 py-4 justify-end">
           {(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",
-              }}
+              className="
+                px-4 py-2 rounded-lg text-sm font-medium
+                bg-white border border-gray-200 text-gray-600
+                hover:bg-gray-50 transition
+              "
             >
               Cancelar
             </button>
           )}
           <button
             onClick={() => close(true, popup.inputValue)}
-            style={{
-              padding: "8px 24px",
-              background: "#3b82f6",
-              color: "#fff",
-              border: "none",
-              borderRadius: "6px",
-              cursor: "pointer",
-              fontSize: "14px",
-            }}
+            className={`
+              px-5 py-2 rounded-lg text-sm font-semibold text-white
+              ${c.confirm} transition focus:outline-none focus:ring-2
+            `}
           >
-            OK
+            Aceptar
           </button>
         </div>
       </div>