next-recomponents 2.0.10 → 2.0.12

package/package.json

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

package/src/container/index.tsx

@@ -42,7 +42,7 @@ export default function Container({
   return (
     <div className="flex flex-col h-screen">
       {/* Header */}
-      <header className="z-40">
+      <header className="">
         <div className="bg-blue-600 text-white p-4 flex justify-between items-center shadow-md">
           <button
             onClick={() => {

package/src/modal/index copy.tsx

@@ -0,0 +1,59 @@
+import React, { useRef, useState } from "react";
+import CloseIcon from "./close";
+import { Dialog } from "@mui/material";
+
+interface Props extends React.DetailedHTMLProps<
+  React.DialogHTMLAttributes<HTMLDialogElement>,
+  HTMLDialogElement
+> {
+  button: React.ReactElement<{ onClick: (e: React.MouseEvent) => void }>;
+  children: React.ReactElement<{ hide: () => void }>;
+}
+export default function Modal({ button, children, ref, title = "" }: Props) {
+  const [open, setOpen] = useState(false);
+  function show() {
+    setOpen(true);
+  }
+  function hide() {
+    setOpen(false);
+  }
+
+  return (
+    <>
+      {React.Children.map(button, (child) => {
+        if (React.isValidElement(child)) {
+          const { type, props } = child;
+          return React.createElement(type, {
+            ...props,
+            onClick: (e: any) => {
+              show();
+              child.props?.onClick?.(e);
+            },
+          });
+        }
+        return child;
+      })}
+      <Dialog open={open} onClose={hide} fullWidth maxWidth="xl">
+        <div className="m-auto p-5">
+          {/* Botón de cerrar en la esquina superior derecha */}
+          <button
+            onClick={hide}
+            className="absolute top-0 right-0 text-red-500  "
+          >
+            <CloseIcon />
+          </button>
+          <div className="font-bold text-xl">{title}</div>
+          <div className="flex flex-col gap-3 pt-6">
+            {React.Children.map(children, (child) => {
+              if (React.isValidElement(child)) {
+                const { type, props } = child;
+                return React.createElement(type, { ...props, hide });
+              }
+              return child;
+            })}
+          </div>
+        </div>
+      </Dialog>
+    </>
+  );
+}

package/src/modal/index.tsx

@@ -1,59 +1,40 @@
-import React, { useRef, useState } from "react";
-import CloseIcon from "./close";
-import { Dialog } from "@mui/material";
-
-interface Props extends React.DetailedHTMLProps<
-  React.DialogHTMLAttributes<HTMLDialogElement>,
-  HTMLDialogElement
-> {
-  button: React.ReactElement<{ onClick: (e: React.MouseEvent) => void }>;
-  children: React.ReactElement<{ hide: () => void }>;
-}
-export default function Modal({ button, children, ref, title = "" }: Props) {
-  const [open, setOpen] = useState(false);
-  function show() {
-    setOpen(true);
-  }
-  function hide() {
-    setOpen(false);
-  }
+import React, { ReactElement, ReactNode, cloneElement } from "react";
+import usePopup from "../pop";
+export type PopupColor =
+  | "white"
+  | "primary"
+  | "secondary"
+  | "info"
+  | "danger"
+  | "warning"
+  | "success";
+export default function Modal({
+  button,
+  children,
+  color = "primary",
+}: {
+  button: ReactElement<React.ComponentPropsWithRef<"button">>;
+  children: ReactElement<
+    React.ComponentPropsWithRef<"div"> & { hide: () => void }
+  >;
+  color?: PopupColor;
+}) {
+  const pop = usePopup();
 
   return (
     <>
-      {React.Children.map(button, (child) => {
-        if (React.isValidElement(child)) {
-          const { type, props } = child;
-          return React.createElement(type, {
-            ...props,
-            onClick: (e: any) => {
-              show();
-              child.props?.onClick?.(e);
-            },
-          });
-        }
-        return child;
+      {cloneElement(button, {
+        onClick: async (e: React.MouseEvent<HTMLButtonElement>) => {
+          await pop.modal(
+            React.cloneElement(children, { hide: () => pop.close(false) }),
+            color,
+            false,
+            true,
+          );
+        },
       })}
-      <Dialog open={open} onClose={hide} fullWidth maxWidth="xl">
-        <div className="m-auto p-5">
-          {/* Botón de cerrar en la esquina superior derecha */}
-          <button
-            onClick={hide}
-            className="absolute top-0 right-0 text-red-500  "
-          >
-            <CloseIcon />
-          </button>
-          <div className="font-bold text-xl">{title}</div>
-          <div className="flex flex-col gap-3 pt-6">
-            {React.Children.map(children, (child) => {
-              if (React.isValidElement(child)) {
-                const { type, props } = child;
-                return React.createElement(type, { ...props, hide });
-              }
-              return child;
-            })}
-          </div>
-        </div>
-      </Dialog>
+
+      {pop.PopupComponent}
     </>
   );
 }

package/src/pop/actions.tsx

@@ -0,0 +1,30 @@
+import { PopupActionsProps } from "./types";
+
+export function PopupActions({
+  type,
+  confirm,
+  focusRing,
+  onConfirm,
+  onCancel,
+}: PopupActionsProps) {
+  const showCancel = type === "confirm" || type === "prompt";
+
+  return (
+    <div className="flex gap-2 px-6 py-4 justify-end">
+      {showCancel && (
+        <button
+          onClick={onCancel}
+          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={onConfirm}
+        className={`px-5 py-2 rounded-lg text-sm font-semibold text-white ${confirm} transition focus:outline-none focus:ring-2 ${focusRing}`}
+      >
+        Aceptar
+      </button>
+    </div>
+  );
+}

package/src/pop/color.tsx

@@ -0,0 +1,69 @@
+// ─── Color tokens ─────────────────────────────────────────────────────────────
+
+import { ColorTokens, PopupColor } from "./types";
+
+export const COLOR_CONFIG: Record<PopupColor, ColorTokens> = {
+  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",
+    focusRing: "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",
+    focusRing: "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",
+    focusRing: "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",
+    focusRing: "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",
+    focusRing: "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",
+    focusRing: "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",
+    focusRing: "focus:ring-gray-300",
+    label: "◎",
+  },
+};

package/src/pop/icon.tsx

@@ -0,0 +1,15 @@
+export interface PopupIconProps {
+  label: string;
+  iconBg: string;
+  iconText: string;
+}
+
+export function PopupIcon({ label, iconBg, iconText }: PopupIconProps) {
+  return (
+    <div
+      className={`w-12 h-12 rounded-full ${iconBg} flex items-center justify-center`}
+    >
+      <span className={`text-xl font-bold ${iconText}`}>{label}</span>
+    </div>
+  );
+}

package/src/pop/index.tsx

@@ -1,272 +1,107 @@
 "use client";
-import { React } from "next/dist/server/route-modules/app-page/vendored/rsc/entrypoints";
-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: "◎",
-  },
+import { useState, useCallback, type ReactNode } from "react";
+import { PopupColor, PopupState } from "./types";
+import { PopupOverlay } from "./overlay";
+
+const INITIAL_STATE: PopupState = {
+  type: "alert",
+  message: "",
+  visible: false,
+  inputValue: "",
+  color: "primary",
+  icons: true,
+  full: false,
 };
 
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-interface PopupState {
-  type: "alert" | "modal" | "confirm" | "prompt";
-  message: string | React.ReactNode;
-  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 modal(
-    message: React.ReactNode,
-    color: Color = "primary",
-  ): Promise<void> {
-    return new Promise((resolve) => {
-      setPopup({
-        type: "modal",
-        message,
-        visible: true,
-        inputValue: "",
-        onConfirm: () => resolve(),
-        color,
-      });
-    });
-  }
+  const [popup, setPopup] = useState<PopupState>(INITIAL_STATE);
 
-  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,
-      });
-    });
-  }
+  const open = useCallback(
+    (partial: Omit<PopupState, "visible" | "inputValue">) => {
+      setPopup({ ...partial, visible: true, inputValue: "" });
+    },
+    [],
+  );
 
-  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) {
+  const close = useCallback((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 alert = useCallback(
+    (message: string, color: PopupColor = "primary"): Promise<void> =>
+      new Promise((resolve) =>
+        open({
+          type: "alert",
+          message,
+          color,
+          onConfirm: () => resolve(),
+          onCancel: () => resolve(),
+        }),
+      ),
+    [open],
+  );
+
+  const modal = useCallback(
+    (
+      message: ReactNode,
+      color: PopupColor = "primary",
+      icons: boolean = true,
+      full: boolean = false,
+    ): Promise<void> =>
+      new Promise((resolve) =>
+        open({
+          type: "modal",
+          message,
+          color,
+          onConfirm: () => resolve(),
+          onCancel: () => resolve(),
+          icons,
+          full,
+        }),
+      ),
+    [open],
+  );
+
+  const confirm = useCallback(
+    (message: string, color: PopupColor = "primary"): Promise<boolean> =>
+      new Promise((resolve) =>
+        open({
+          type: "confirm",
+          message,
+          color,
+          onConfirm: () => resolve(true),
+          onCancel: () => resolve(false),
+        }),
+      ),
+    [open],
+  );
+
+  const prompt = useCallback(
+    (message: string, color: PopupColor = "primary"): Promise<string | null> =>
+      new Promise((resolve) =>
+        open({
+          type: "prompt",
+          message,
+          color,
+          onConfirm: (value) => resolve(value ?? ""),
+          onCancel: () => resolve(null),
+        }),
+      ),
+    [open],
+  );
 
   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 */}
-        {popup.type != "modal" && (
-          <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>
+    <PopupOverlay
+      popup={popup}
+      onClose={close}
+      onInputChange={(v) => setPopup((prev) => ({ ...prev, inputValue: v }))}
+    />
   ) : null;
 
-  return { alert, confirm, prompt, PopupComponent, modal };
+  return { alert, confirm, prompt, modal, PopupComponent, close };
 }

package/src/pop/input.tsx

@@ -0,0 +1,27 @@
+import { PromptInputProps } from "./types";
+
+export function PromptInput({
+  value,
+  border,
+  focusRing,
+  onChange,
+  onEnter,
+}: PromptInputProps) {
+  return (
+    <div className="px-8 pb-2">
+      <input
+        autoFocus
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => e.key === "Enter" && onEnter()}
+        className={`
+          w-full px-3 py-2 rounded-lg border ${border} bg-white
+          text-sm text-gray-800 outline-none
+          focus:ring-2 ${focusRing} transition
+        `}
+        placeholder="Escribe aquí..."
+      />
+    </div>
+  );
+}