next-recomponents 2.0.3 → 2.0.5

package/package.json

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

package/src/alert/index.tsx

@@ -1,149 +1,27 @@
-"use client";
-import { useState } from "react";
-
-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 ? (
+import { catColor } from "../button/colors";
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  color?:
+    | "white"
+    | "primary"
+    | "secondary"
+    | "info"
+    | "danger"
+    | "warning"
+    | "success";
+  children: React.ReactNode;
+}
+export default function Alert({
+  color = "primary",
+  children,
+  ...props
+}: Props) {
+  return (
     <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={[catColor[color], "p-2 rounded shadow border"].join(" ")}
+      {...props}
     >
-      <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>
+      {children}
     </div>
-  ) : null;
-
-  return { alert, confirm, prompt, PopupComponent };
+  );
 }
-
-export default usePopup;

package/src/index.tsx

@@ -1,3 +1,4 @@
+export { default as Alert } from "./alert";
 export { default as Button } from "./button";
 export { default as Container } from "./container";
 export { default as Form } from "./form";
@@ -17,4 +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 "./alert";
+export { default as usePopup } from "./pop";

package/src/pop/index.tsx

@@ -0,0 +1,253 @@
+"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<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",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: () => resolve(),
+        color,
+      });
+    });
+  }
+
+  function confirm(
+    message: string,
+    color: Color = "primary",
+  ): Promise<boolean> {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "confirm",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: () => resolve(true),
+        onCancel: () => resolve(false),
+        color,
+      });
+    });
+  }
+
+  function prompt(
+    message: string,
+    color: Color = "primary",
+  ): Promise<string | null> {
+    return new Promise((resolve) => {
+      setPopup({
+        type: "prompt",
+        message,
+        visible: true,
+        inputValue: "",
+        onConfirm: (value) => resolve(value ?? ""),
+        onCancel: () => resolve(null),
+        color,
+      });
+    });
+  }
+
+  function close(confirmed: boolean, value?: string) {
+    setPopup((prev) => {
+      if (confirmed) prev.onConfirm?.(value);
+      else prev.onCancel?.();
+      return { ...prev, visible: false, inputValue: "" };
+    });
+  }
+
+  const c = COLOR_CONFIG[popup.color];
+
+  const PopupComponent = popup.visible ? (
+    <div
+      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
+        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" }}
+      >
+        <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" && (
+          <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>
+        )}
+
+        {/* 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)}
+              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)}
+            className={`
+              px-5 py-2 rounded-lg text-sm font-semibold text-white
+              ${c.confirm} transition focus:outline-none focus:ring-2
+            `}
+          >
+            Aceptar
+          </button>
+        </div>
+      </div>
+    </div>
+  ) : null;
+
+  return { alert, confirm, prompt, PopupComponent };
+}