next-recomponents 2.0.10 → 2.0.12

package/src/pop/overlay.tsx

@@ -0,0 +1,88 @@
+import Button from "../button";
+import { PopupActions } from "./actions";
+import { COLOR_CONFIG } from "./color";
+import { PopupIcon } from "./icon";
+import { PromptInput } from "./input";
+import { PopupOverlayProps } from "./types";
+
+export function PopupOverlay({
+  popup,
+  onClose,
+  onInputChange,
+}: PopupOverlayProps) {
+  const c = COLOR_CONFIG[popup.color];
+  const resolvedMessage =
+    typeof popup.message === "function" ? popup.message() : popup.message;
+  return (
+    <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) => {
+        if (e.target === e.currentTarget) {
+          onClose(false);
+          popup.onCancel?.();
+        }
+      }}
+    >
+      <style>{`
+        @keyframes fadeInScale {
+          from { opacity: 0; transform: scale(0.93) translateY(8px); }
+          to   { opacity: 1; transform: scale(1)    translateY(0);   }
+        }
+      `}</style>
+
+      <div
+        className={`bg-gradient-to-br ${c.bg} border ${c.border} ${popup.full == true ? " w-full h-screen m-20 " : " max-w-sm "} rounded-2xl shadow-2xl  mx-4`}
+        style={{ animation: "fadeInScale 0.18s ease-out", overflow: "auto" }}
+      >
+        {/* Header */}
+        <div className="flex flex-col items-center gap-3 px-8 pt-8 pb-5 text-center ">
+          {popup?.icons == true && (
+            <PopupIcon
+              label={c.label}
+              iconBg={c.iconBg}
+              iconText={c.iconText}
+            />
+          )}
+          {
+            <div className="w-full flex justify-end">
+              <Button color="danger" onClick={(e) => onClose(false)}>
+                X
+              </Button>
+            </div>
+          }
+          <div
+            className={"text-gray-800 text-[15px] font-medium leading-snug "}
+          >
+            {resolvedMessage}
+          </div>
+        </div>
+
+        {/* Prompt input */}
+        {popup.type === "prompt" && (
+          <PromptInput
+            value={popup.inputValue}
+            border={c.border}
+            focusRing={c.focusRing}
+            onChange={onInputChange}
+            onEnter={() => onClose(true, popup.inputValue)}
+          />
+        )}
+
+        {/* Divider */}
+        <div className={`border-t ${c.border} mt-4`} />
+
+        {/* Actions */}
+        {popup.type !== "modal" && (
+          <PopupActions
+            type={popup.type}
+            confirm={c.confirm}
+            focusRing={c.focusRing}
+            onConfirm={() => onClose(true, popup.inputValue)}
+            onCancel={() => onClose(false)}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/pop/types.ts

@@ -0,0 +1,56 @@
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+import { ReactNode } from "react";
+export interface PopupOverlayProps {
+  popup: PopupState;
+  onClose: (confirmed: boolean, value?: string) => void;
+  onInputChange: (value: string) => void;
+}
+
+export interface PromptInputProps {
+  value: string;
+  border: string;
+  focusRing: string;
+  onChange: (value: string) => void;
+  onEnter: () => void;
+}
+
+export interface PopupActionsProps {
+  type: PopupType;
+  confirm: string;
+  focusRing: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+export type PopupColor =
+  | "white"
+  | "primary"
+  | "secondary"
+  | "info"
+  | "danger"
+  | "warning"
+  | "success";
+
+export type PopupType = "alert" | "modal" | "confirm" | "prompt";
+
+export interface PopupState {
+  type: PopupType;
+  message: string | ReactNode | (() => string | ReactNode);
+  visible: boolean;
+  inputValue: string;
+  color: PopupColor;
+  onConfirm?: (value?: string) => void;
+  onCancel?: () => void;
+  icons?: boolean;
+  full?: boolean;
+}
+
+export interface ColorTokens {
+  bg: string;
+  iconBg: string;
+  iconText: string;
+  border: string;
+  confirm: string;
+  focusRing: string;
+  label: string;
+}