framepexls-ui-lib 0.1.4

package/dist/Dialog.mjs

@@ -0,0 +1,368 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import ActionIconButton from "./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) {
+  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) {
+  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__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ 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 = useRef(null);
+  const closeBtnRef = useRef(null);
+  const lastFocusedRef = useRef(null);
+  useLockBodyScroll(open);
+  useEscToClose(open, onClose, disableEscClose);
+  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__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "fixed inset-0 z-[100] bg-black/45 backdrop-blur-sm",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      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__ */ 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__ */ jsx("div", { className: "absolute right-5 top-5", children: /* @__PURE__ */ jsx(
+            ActionIconButton,
+            {
+              title: "Cerrar",
+              size: "lg",
+              onClick: onClose,
+              ref: closeBtnRef,
+              className: "shadow-sm",
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) });
+}
+function DialogHeader({
+  title,
+  description,
+  onClose,
+  showClose = true,
+  actions,
+  compact = false,
+  // 👈 nuevo
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cx("px-6", compact ? "pt-5 pb-2" : "pt-6 pb-3", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx(
+        "h3",
+        {
+          id: "dialog-title",
+          className: cx("font-semibold tracking-tight", compact ? "text-lg leading-6" : "text-lg leading-6"),
+          children: title
+        }
+      ),
+      description && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: "dialog-desc",
+          className: cx(compact ? "mt-1" : "mt-2", "text-sm text-slate-600 dark:text-slate-300"),
+          children: description
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      actions,
+      showClose && onClose && /* @__PURE__ */ jsx(ActionIconButton, { title: "Cerrar", size: "lg", onClick: onClose, className: "shadow-sm", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4.5 w-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }) })
+    ] })
+  ] }) });
+}
+function DialogBody({ children, padded = true }) {
+  return /* @__PURE__ */ 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__ */ 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__ */ jsxs("label", { className: cx("grid gap-1 text-sm content-start", className), children: [
+    label && /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+      label,
+      " ",
+      required && /* @__PURE__ */ jsx("span", { className: "text-blue-600", children: "*" })
+    ] }),
+    children,
+    hint && /* @__PURE__ */ 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 = React.useId();
+  return /* @__PURE__ */ jsxs(DialogBase, { open, onClose, title, description, ...rest, children: [
+    /* @__PURE__ */ jsx(DialogHeader, { title, description, onClose }),
+    /* @__PURE__ */ jsxs(DialogBody, { children: [
+      error && /* @__PURE__ */ 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__ */ jsx("form", { id: formId, onSubmit, className: "space-y-3", children })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { align: footerAlign, children: [
+      footerExtra,
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+        /* @__PURE__ */ 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__ */ 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] = React.useState(false);
+  const pending = loading != null ? loading : internalPending;
+  const confirmBtnRef = React.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__ */ jsxs(
+    DialogBase,
+    {
+      open,
+      onClose: pending ? () => {
+      } : onClose,
+      disableEscClose: disableEscClose || pending,
+      disableBackdropClose: disableBackdropClose || pending,
+      size: "md",
+      initialFocusRef: confirmBtnRef,
+      title,
+      description: headerDescription,
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { title, onClose: pending ? void 0 : onClose, description: headerDescription }),
+        /* @__PURE__ */ jsx(DialogBody, { padded: true, children: typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-600 dark:text-slate-300", children: description }) : description != null ? description : null }),
+        /* @__PURE__ */ jsx(DialogFooter, { align: "end", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "ml-auto flex items-center gap-2", children: [
+          /* @__PURE__ */ 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__ */ 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__ */ jsxs("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+                  /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                  /* @__PURE__ */ 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;
+export {
+  ConfirmDialog,
+  Dialog,
+  DialogBody,
+  DialogField,
+  DialogFooter,
+  DialogHeader,
+  FormDialog,
+  Dialog_default as default
+};

package/dist/Dropdown.d.mts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { ReactNode, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+
+declare function Dropdown({ children, align, onOpenChange, permissions, hasPermission, permStrategy, defaultHideUnauthorized, defaultDisableUnauthorized, }: {
+    children: ReactNode;
+    align?: "start" | "end";
+    onOpenChange?: (open: boolean) => void;
+    permissions?: Iterable<string> | string[] | Set<string>;
+    hasPermission?: (perm: string) => boolean;
+    permStrategy?: "all" | "any";
+    defaultHideUnauthorized?: boolean;
+    defaultDisableUnauthorized?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function Trigger({ children, className, ...btnProps }: {
+    children: ReactNode;
+    className?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "ref" | "children">): react_jsx_runtime.JSX.Element;
+declare function Content({ children, className, maxHeight, }: {
+    children: ReactNode;
+    className?: string;
+    maxHeight?: number;
+}): React__default.ReactPortal | null;
+declare function Label({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function Separator({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function Item({ children, icon, kbd, danger, disabled, require, hideIfUnauthorized, disableIfUnauthorized, onSelect, className, ...rest }: {
+    children: ReactNode;
+    icon?: ReactNode;
+    kbd?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    /** Permiso(s) requerido(s) para ver/ejecutar este item */
+    require?: string | string[];
+    /** Si no tiene permisos, ocultar por completo (default true, o el del Dropdown) */
+    hideIfUnauthorized?: boolean;
+    /** Si no tiene permisos, deshabilitar (default true si no se oculta) */
+    disableIfUnauthorized?: boolean;
+    onSelect?: () => void;
+} & HTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element | null;
+declare const DropdownExport: typeof Dropdown & {
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+    Label: typeof Label;
+    Separator: typeof Separator;
+    Item: typeof Item;
+    MenuPuntosVerticalIcon: () => react_jsx_runtime.JSX.Element;
+};
+
+export { Content, Dropdown, Item, Label, Separator, Trigger, DropdownExport as default };

package/dist/Dropdown.d.ts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { ReactNode, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+
+declare function Dropdown({ children, align, onOpenChange, permissions, hasPermission, permStrategy, defaultHideUnauthorized, defaultDisableUnauthorized, }: {
+    children: ReactNode;
+    align?: "start" | "end";
+    onOpenChange?: (open: boolean) => void;
+    permissions?: Iterable<string> | string[] | Set<string>;
+    hasPermission?: (perm: string) => boolean;
+    permStrategy?: "all" | "any";
+    defaultHideUnauthorized?: boolean;
+    defaultDisableUnauthorized?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function Trigger({ children, className, ...btnProps }: {
+    children: ReactNode;
+    className?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "ref" | "children">): react_jsx_runtime.JSX.Element;
+declare function Content({ children, className, maxHeight, }: {
+    children: ReactNode;
+    className?: string;
+    maxHeight?: number;
+}): React__default.ReactPortal | null;
+declare function Label({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function Separator({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function Item({ children, icon, kbd, danger, disabled, require, hideIfUnauthorized, disableIfUnauthorized, onSelect, className, ...rest }: {
+    children: ReactNode;
+    icon?: ReactNode;
+    kbd?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    /** Permiso(s) requerido(s) para ver/ejecutar este item */
+    require?: string | string[];
+    /** Si no tiene permisos, ocultar por completo (default true, o el del Dropdown) */
+    hideIfUnauthorized?: boolean;
+    /** Si no tiene permisos, deshabilitar (default true si no se oculta) */
+    disableIfUnauthorized?: boolean;
+    onSelect?: () => void;
+} & HTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element | null;
+declare const DropdownExport: typeof Dropdown & {
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+    Label: typeof Label;
+    Separator: typeof Separator;
+    Item: typeof Item;
+    MenuPuntosVerticalIcon: () => react_jsx_runtime.JSX.Element;
+};
+
+export { Content, Dropdown, Item, Label, Separator, Trigger, DropdownExport as default };