framepexls-ui-lib 0.1.4

package/dist/Dialog.js

@@ -0,0 +1,408 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Dialog_exports = {};
+__export(Dialog_exports, {
+  ConfirmDialog: () => ConfirmDialog,
+  Dialog: () => Dialog,
+  DialogBody: () => DialogBody,
+  DialogField: () => DialogField,
+  DialogFooter: () => DialogFooter,
+  DialogHeader: () => DialogHeader,
+  FormDialog: () => FormDialog,
+  default: () => Dialog_default
+});
+module.exports = __toCommonJS(Dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_framer_motion = require("framer-motion");
+var import_ActionIconButton = __toESM(require("./ActionIconButton"));
+const sizeToMaxW = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  full: "max-w-[min(96vw,1200px)]"
+};
+function useLockBodyScroll(open) {
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const root = document.documentElement;
+    const body = document.body;
+    const prevOverflowRoot = root.style.overflow;
+    const prevOverflowBody = body.style.overflow;
+    const prevPadRightRoot = root.style.paddingRight;
+    const prevPadRightBody = body.style.paddingRight;
+    const scrollbarW = window.innerWidth - root.clientWidth;
+    root.style.overflow = "hidden";
+    body.style.overflow = body.style.overflow || "";
+    if (scrollbarW > 0) {
+      root.style.paddingRight = `${scrollbarW}px`;
+      body.style.paddingRight = `${scrollbarW}px`;
+    }
+    return () => {
+      root.style.overflow = prevOverflowRoot;
+      body.style.overflow = prevOverflowBody;
+      root.style.paddingRight = prevPadRightRoot;
+      body.style.paddingRight = prevPadRightBody;
+    };
+  }, [open]);
+}
+function useEscToClose(open, onClose, disabled) {
+  (0, import_react.useEffect)(() => {
+    if (!open || disabled) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose, disabled]);
+}
+function cx(...a) {
+  return a.filter(Boolean).join(" ");
+}
+const CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) });
+function DialogBase({
+  open,
+  onClose,
+  title,
+  description,
+  dismissibleBackdrop = true,
+  showClose = true,
+  size = "xl",
+  initialFocusRef,
+  className,
+  disableEscClose = false,
+  disableBackdropClose = false,
+  children
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  const closeBtnRef = (0, import_react.useRef)(null);
+  const lastFocusedRef = (0, import_react.useRef)(null);
+  useLockBodyScroll(open);
+  useEscToClose(open, onClose, disableEscClose);
+  (0, import_react.useEffect)(() => {
+    var _a, _b, _c;
+    if (open) {
+      lastFocusedRef.current = document.activeElement;
+      const target = (_a = initialFocusRef == null ? void 0 : initialFocusRef.current) != null ? _a : closeBtnRef.current;
+      setTimeout(() => target == null ? void 0 : target.focus(), 0);
+    } else {
+      (_c = (_b = lastFocusedRef.current) == null ? void 0 : _b.focus) == null ? void 0 : _c.call(_b);
+    }
+  }, [open, initialFocusRef]);
+  const handleBackdropMouseDown = (e) => {
+    if (disableBackdropClose) return;
+    if (!dismissibleBackdrop) return;
+    if (e.target === e.currentTarget) onClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        className: "fixed inset-0 z-[100] bg-black/45 backdrop-blur-sm",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_framer_motion.motion.div,
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title ? "dialog-title" : void 0,
+        "aria-describedby": description ? "dialog-desc" : void 0,
+        className: "fixed inset-0 z-[101] grid place-items-center p-4",
+        initial: { opacity: 0, scale: 0.98, y: 8 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.98, y: 8 },
+        onMouseDown: handleBackdropMouseDown,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: containerRef,
+              className: cx(
+                "w-full overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl",
+                "dark:border-white/10 dark:bg-[#0e0d0e]",
+                "flex max-h-[88vh] flex-col",
+                sizeToMaxW[size],
+                className
+              ),
+              onMouseDown: (e) => e.stopPropagation(),
+              children: children != null ? children : null
+            }
+          ),
+          showClose && !children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute right-5 top-5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ActionIconButton.default,
+            {
+              title: "Cerrar",
+              size: "lg",
+              onClick: onClose,
+              ref: closeBtnRef,
+              className: "shadow-sm",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) });
+}
+function DialogHeader({
+  title,
+  description,
+  onClose,
+  showClose = true,
+  actions,
+  compact = false,
+  // 👈 nuevo
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("px-6", compact ? "pt-5 pb-2" : "pt-6 pb-3", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "h3",
+        {
+          id: "dialog-title",
+          className: cx("font-semibold tracking-tight", compact ? "text-lg leading-6" : "text-lg leading-6"),
+          children: title
+        }
+      ),
+      description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "p",
+        {
+          id: "dialog-desc",
+          className: cx(compact ? "mt-1" : "mt-2", "text-sm text-slate-600 dark:text-slate-300"),
+          children: description
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      actions,
+      showClose && onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionIconButton.default, { title: "Cerrar", size: "lg", onClick: onClose, className: "shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) }) })
+    ] })
+  ] }) });
+}
+function DialogBody({ children, padded = true }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("min-h-[60px] flex-1 overflow-auto", padded && "px-6 pb-6 pt-2"), children });
+}
+function DialogFooter({
+  children,
+  align = "end"
+}) {
+  const map = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: cx(
+        "sticky bottom-0 z-10 flex items-center gap-2 rounded-b-3xl border-t border-slate-200",
+        "bg-white px-6 py-4 text-sm",
+        "[box-shadow:inset_0_8px_10px_-8px_rgba(2,6,23,0.10)]",
+        "dark:border-white/10 dark:bg-[#0e0d0e] dark:[box-shadow:inset_0_8px_10px_-8px_rgba(255,255,255,0.08)]",
+        map[align]
+      ),
+      children
+    }
+  );
+}
+function DialogField({
+  label,
+  hint,
+  required,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: cx("grid gap-1 text-sm content-start", className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-medium", children: [
+      label,
+      " ",
+      required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-blue-600", children: "*" })
+    ] }),
+    children,
+    hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-slate-500 dark:text-slate-400", children: hint })
+  ] });
+}
+function FormDialog({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  onSubmit,
+  submitLabel = "Aceptar",
+  cancelLabel = "Cerrar",
+  submitting = false,
+  submitDisabled = false,
+  error,
+  footerExtra,
+  footerAlign = "end",
+  ...rest
+}) {
+  const formId = import_react.default.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogBase, { open, onClose, title, description, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogHeader, { title, description, onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogBody, { children: [
+      error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-3 rounded-xl border border-blue-200/70 bg-blue-50 px-3 py-2 text-sm text-blue-700 dark:border-blue-500/30 dark:bg-blue-900/20 dark:text-blue-200", children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", { id: formId, onSubmit, className: "space-y-3", children })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogFooter, { align: footerAlign, children: [
+      footerExtra,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ml-auto flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "inline-flex h-10 items-center gap-2 rounded-xl border border-slate-300/80 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "submit",
+            form: formId,
+            disabled: submitting || submitDisabled,
+            className: "inline-flex h-10 items-center gap-2 rounded-xl bg-slate-900 px-4 text-sm font-medium text-white shadow-sm hover:opacity-90 active:scale-95 disabled:opacity-60 dark:bg-white dark:text-slate-900",
+            children: submitting ? "Guardando\u2026" : submitLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ConfirmDialog({
+  open,
+  onClose,
+  title,
+  headerDescription,
+  // <— nuevo
+  description,
+  // body
+  confirmLabel = "Confirmar",
+  cancelLabel = "Cancelar",
+  danger,
+  loading,
+  onConfirm,
+  autoCloseOnConfirm = true,
+  disableEscClose,
+  disableBackdropClose
+}) {
+  const [internalPending, setInternalPending] = import_react.default.useState(false);
+  const pending = loading != null ? loading : internalPending;
+  const confirmBtnRef = import_react.default.useRef(null);
+  const handleSubmit = async (e) => {
+    e == null ? void 0 : e.preventDefault();
+    try {
+      const result = onConfirm == null ? void 0 : onConfirm();
+      if (result && typeof result.then === "function") {
+        setInternalPending(true);
+        await result;
+      }
+      if (autoCloseOnConfirm) onClose();
+    } finally {
+      setInternalPending(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    DialogBase,
+    {
+      open,
+      onClose: pending ? () => {
+      } : onClose,
+      disableEscClose: disableEscClose || pending,
+      disableBackdropClose: disableBackdropClose || pending,
+      size: "md",
+      initialFocusRef: confirmBtnRef,
+      title,
+      description: headerDescription,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogHeader, { title, onClose: pending ? void 0 : onClose, description: headerDescription }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogBody, { padded: true, children: typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-slate-600 dark:text-slate-300", children: description }) : description != null ? description : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogFooter, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { onSubmit: handleSubmit, className: "ml-auto flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              disabled: pending,
+              className: "inline-flex h-10 items-center gap-2 rounded-xl border border-slate-300/80 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 active:scale-95 disabled:opacity-60 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+              children: cancelLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              ref: confirmBtnRef,
+              type: "submit",
+              disabled: pending,
+              className: [
+                "inline-flex h-10 items-center gap-2 rounded-xl px-4 text-sm font-semibold text-white shadow-sm active:scale-95 disabled:opacity-60",
+                danger ? "bg-blue-600 hover:bg-blue-700 focus-visible:ring-2 focus-visible:ring-blue-300" : "bg-slate-900 hover:opacity-90 focus-visible:ring-2 focus-visible:ring-slate-300 dark:bg-white dark:text-slate-900"
+              ].join(" "),
+              children: [
+                pending && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", d: "M4 12a8 8 0 018-8", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round" })
+                ] }),
+                confirmLabel
+              ]
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+const Dialog = Object.assign(DialogBase, {
+  Header: DialogHeader,
+  Body: DialogBody,
+  Footer: DialogFooter,
+  Field: DialogField,
+  Confirm: ConfirmDialog
+});
+var Dialog_default = Dialog;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConfirmDialog,
+  Dialog,
+  DialogBody,
+  DialogField,
+  DialogFooter,
+  DialogHeader,
+  FormDialog
+});