framepexls-ui-lib 0.1.13 → 0.1.15

package/dist/DateTimeField.mjs

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import Input from "./Input";
+import Button from "./Button";
 import CalendarPanel from "./CalendarPanel";
 import TimePopover from "./TimePopover";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
@@ -236,8 +237,9 @@ function DateTimeField({
         (type === "time" || type === "datetime-local") && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-3 py-2 text-sm dark:border-white/10", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                unstyled: true,
                 ref: timeBtnRef,
                 type: "button",
                 className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
@@ -249,8 +251,9 @@ function DateTimeField({
               }
             ),
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                unstyled: true,
                 type: "button",
                 className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
                 onClick: () => {
@@ -266,8 +269,9 @@ function DateTimeField({
             )
           ] }),
           /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              unstyled: true,
               type: "button",
               className: "rounded-xl bg-slate-900 px-3 py-1.5 text-white hover:opacity-95 active:scale-[0.98] dark:bg-white dark:text-slate-900",
               onClick: () => setOpen(false),
@@ -278,8 +282,9 @@ function DateTimeField({
         type !== "time" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-3 py-2 text-sm dark:border-white/10", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                unstyled: true,
                 className: "rounded-lg px-2 py-1 hover:bg-slate-100 dark:hover:bg-white/10",
                 onClick: () => {
                   const t = /* @__PURE__ */ new Date();
@@ -291,8 +296,9 @@ function DateTimeField({
               }
             ),
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                unstyled: true,
                 className: "rounded-lg px-2 py-1 hover:bg-slate-100 dark:hover:bg-white/10",
                 onClick: () => {
                   const t = /* @__PURE__ */ new Date();
@@ -305,8 +311,9 @@ function DateTimeField({
               }
             ),
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                unstyled: true,
                 className: "rounded-lg px-2 py-1 hover:bg-slate-100 dark:hover:bg-white/10",
                 onClick: () => {
                   const t = /* @__PURE__ */ new Date();
@@ -320,8 +327,9 @@ function DateTimeField({
             )
           ] }),
           value && /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              unstyled: true,
               className: "rounded-lg px-2 py-1 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-500/10",
               onClick: () => {
                 emit(null);
@@ -341,8 +349,9 @@ function DateTimeField({
       {
         leftSlot: /* @__PURE__ */ jsx(CalendarIcon, {}),
         rightSlot: /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5",
             onClick: (e) => {

package/dist/Dialog.d.mts

@@ -16,8 +16,7 @@ type DialogProps = {
     disableBackdropClose?: boolean;
     children?: React__default.ReactNode;
 };
-declare function DialogHeader({ title, description, onClose, showClose, actions, compact, // 👈 nuevo
-className, }: {
+declare function DialogHeader({ title, description, onClose, showClose, actions, compact, className, }: {
     title?: React__default.ReactNode;
     description?: React__default.ReactNode;
     onClose?: () => void;
@@ -67,9 +66,7 @@ type ConfirmDialogProps = {
     disableEscClose?: boolean;
     disableBackdropClose?: boolean;
 };
-declare function ConfirmDialog({ open, onClose, title, headerDescription, // <— nuevo
-description, // body
-confirmLabel, cancelLabel, danger, loading, onConfirm, autoCloseOnConfirm, disableEscClose, disableBackdropClose, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+declare function ConfirmDialog({ open, onClose, title, headerDescription, description, confirmLabel, cancelLabel, danger, loading, onConfirm, autoCloseOnConfirm, disableEscClose, disableBackdropClose, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
 type DialogCompound = React__default.FC<DialogProps> & {
     Header: typeof DialogHeader;
     Body: typeof DialogBody;

package/dist/Dialog.d.ts

@@ -16,8 +16,7 @@ type DialogProps = {
     disableBackdropClose?: boolean;
     children?: React__default.ReactNode;
 };
-declare function DialogHeader({ title, description, onClose, showClose, actions, compact, // 👈 nuevo
-className, }: {
+declare function DialogHeader({ title, description, onClose, showClose, actions, compact, className, }: {
     title?: React__default.ReactNode;
     description?: React__default.ReactNode;
     onClose?: () => void;
@@ -67,9 +66,7 @@ type ConfirmDialogProps = {
     disableEscClose?: boolean;
     disableBackdropClose?: boolean;
 };
-declare function ConfirmDialog({ open, onClose, title, headerDescription, // <— nuevo
-description, // body
-confirmLabel, cancelLabel, danger, loading, onConfirm, autoCloseOnConfirm, disableEscClose, disableBackdropClose, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+declare function ConfirmDialog({ open, onClose, title, headerDescription, description, confirmLabel, cancelLabel, danger, loading, onConfirm, autoCloseOnConfirm, disableEscClose, disableBackdropClose, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
 type DialogCompound = React__default.FC<DialogProps> & {
     Header: typeof DialogHeader;
     Body: typeof DialogBody;

package/dist/Dialog.js

@@ -43,6 +43,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_react2 = require("motion/react");
 var import_ActionIconButton = __toESM(require("./ActionIconButton"));
+var import_Button = __toESM(require("./Button"));
 const sizeToMaxW = {
   sm: "max-w-sm",
   md: "max-w-md",
@@ -184,7 +185,6 @@ function DialogHeader({
   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: [
@@ -283,21 +283,26 @@ function FormDialog({
       footerExtra,
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ml-auto flex items-center gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
             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",
+            variant: "secondary",
+            size: "md",
+            className: "shadow-sm",
             children: cancelLabel
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
             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",
+            loading: submitting,
+            variant: "primary",
+            size: "md",
+            className: "shadow-sm",
             children: submitting ? "Guardando\u2026" : submitLabel
           }
         )
@@ -310,9 +315,7 @@ function ConfirmDialog({
   onClose,
   title,
   headerDescription,
-  // <— nuevo
   description,
-  // body
   confirmLabel = "Confirmar",
   cancelLabel = "Cancelar",
   danger,
@@ -355,32 +358,28 @@ function ConfirmDialog({
         /* @__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",
+            import_Button.default,
             {
               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",
+              variant: "secondary",
+              size: "md",
+              className: "shadow-sm",
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "button",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Button.default,
             {
               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
-              ]
+              loading: pending,
+              variant: danger ? "danger" : "primary",
+              size: "md",
+              className: "shadow-sm",
+              children: confirmLabel
             }
           )
         ] }) })

package/dist/Dialog.mjs

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
 import { motion, AnimatePresence } from "motion/react";
 import ActionIconButton from "./ActionIconButton";
+import Button from "./Button";
 const sizeToMaxW = {
   sm: "max-w-sm",
   md: "max-w-md",
@@ -144,7 +145,6 @@ function DialogHeader({
   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: [
@@ -243,21 +243,26 @@ function FormDialog({
       footerExtra,
       /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
-          "button",
+          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",
+            variant: "secondary",
+            size: "md",
+            className: "shadow-sm",
             children: cancelLabel
           }
         ),
         /* @__PURE__ */ jsx(
-          "button",
+          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",
+            loading: submitting,
+            variant: "primary",
+            size: "md",
+            className: "shadow-sm",
             children: submitting ? "Guardando\u2026" : submitLabel
           }
         )
@@ -270,9 +275,7 @@ function ConfirmDialog({
   onClose,
   title,
   headerDescription,
-  // <— nuevo
   description,
-  // body
   confirmLabel = "Confirmar",
   cancelLabel = "Cancelar",
   danger,
@@ -315,32 +318,28 @@ function ConfirmDialog({
         /* @__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",
+            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",
+              variant: "secondary",
+              size: "md",
+              className: "shadow-sm",
               children: cancelLabel
             }
           ),
-          /* @__PURE__ */ jsxs(
-            "button",
+          /* @__PURE__ */ jsx(
+            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
-              ]
+              loading: pending,
+              variant: danger ? "danger" : "primary",
+              size: "md",
+              className: "shadow-sm",
+              children: confirmLabel
             }
           )
         ] }) })

package/dist/Drawer.d.mts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type RootProps = {
+    open: boolean;
+    onClose: () => void;
+    widthClass?: string;
+    children: React__default.ReactNode;
+    className?: string;
+};
+declare function Root({ open, onClose, widthClass, children, className, }: RootProps): react_jsx_runtime.JSX.Element;
+type HeaderProps = {
+    title?: string;
+    right?: React__default.ReactNode;
+    className?: string;
+    hideClose?: boolean;
+    children?: React__default.ReactNode;
+};
+declare function Header({ title, right, className, hideClose, children }: HeaderProps): react_jsx_runtime.JSX.Element;
+type BodyProps = {
+    className?: string;
+    children: React__default.ReactNode;
+};
+declare function Body({ className, children }: BodyProps): react_jsx_runtime.JSX.Element;
+type FooterProps = {
+    className?: string;
+    children: React__default.ReactNode;
+    sticky?: boolean;
+};
+declare function Footer({ className, children, sticky }: FooterProps): react_jsx_runtime.JSX.Element;
+declare const Drawer: {
+    Root: typeof Root;
+    Header: typeof Header;
+    Body: typeof Body;
+    Footer: typeof Footer;
+};
+
+export { Body as DrawerBody, Footer as DrawerFooter, Header as DrawerHeader, Root as DrawerRoot, Drawer as default };

package/dist/Drawer.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type RootProps = {
+    open: boolean;
+    onClose: () => void;
+    widthClass?: string;
+    children: React__default.ReactNode;
+    className?: string;
+};
+declare function Root({ open, onClose, widthClass, children, className, }: RootProps): react_jsx_runtime.JSX.Element;
+type HeaderProps = {
+    title?: string;
+    right?: React__default.ReactNode;
+    className?: string;
+    hideClose?: boolean;
+    children?: React__default.ReactNode;
+};
+declare function Header({ title, right, className, hideClose, children }: HeaderProps): react_jsx_runtime.JSX.Element;
+type BodyProps = {
+    className?: string;
+    children: React__default.ReactNode;
+};
+declare function Body({ className, children }: BodyProps): react_jsx_runtime.JSX.Element;
+type FooterProps = {
+    className?: string;
+    children: React__default.ReactNode;
+    sticky?: boolean;
+};
+declare function Footer({ className, children, sticky }: FooterProps): react_jsx_runtime.JSX.Element;
+declare const Drawer: {
+    Root: typeof Root;
+    Header: typeof Header;
+    Body: typeof Body;
+    Footer: typeof Footer;
+};
+
+export { Body as DrawerBody, Footer as DrawerFooter, Header as DrawerHeader, Root as DrawerRoot, Drawer as default };

package/dist/Drawer.js

@@ -0,0 +1,139 @@
+"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 Drawer_exports = {};
+__export(Drawer_exports, {
+  DrawerBody: () => Body,
+  DrawerFooter: () => Footer,
+  DrawerHeader: () => Header,
+  DrawerRoot: () => Root,
+  default: () => Drawer_default
+});
+module.exports = __toCommonJS(Drawer_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 DrawerCtx = import_react.default.createContext(null);
+const useDrawerCtx = () => {
+  const ctx = import_react.default.useContext(DrawerCtx);
+  if (!ctx) throw new Error("Drawer.* debe usarse dentro de <Drawer.Root />");
+  return ctx;
+};
+function Root({
+  open,
+  onClose,
+  widthClass = "w-[680px] max-w-[92vw]",
+  children,
+  className
+}) {
+  import_react.default.useEffect(() => {
+    if (open) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  import_react.default.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  const labelId = import_react.default.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_framer_motion.motion.div,
+    {
+      className: "fixed inset-0 z-[100]",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/40", onClick: onClose, "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawerCtx.Provider, { value: { onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_framer_motion.motion.aside,
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": labelId,
+            className: [
+              "absolute right-0 top-0 h-full bg-white shadow-2xl dark:bg-[#0b0a0a]",
+              widthClass,
+              "flex flex-col",
+              className != null ? className : ""
+            ].join(" "),
+            initial: { x: "100%" },
+            animate: { x: 0 },
+            exit: { x: "100%" },
+            transition: { type: "spring", stiffness: 260, damping: 26 },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: labelId, className: "sr-only" }),
+              children
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function Header({ title, right, className, hideClose, children }) {
+  const { onClose } = useDrawerCtx();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["flex items-center justify-between border-b border-black/10 px-5 py-4 dark:border-white/10", className != null ? className : ""].join(" "), children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-lg font-semibold", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      right,
+      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionIconButton.default, { title: "Cerrar", size: "md", onClick: onClose, 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 Body({ className, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["flex-1 overflow-auto", className != null ? className : ""].join(" "), children });
+}
+function Footer({ className, children, sticky }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: [
+        "border-t border-slate-200/70 px-5 py-4 dark:border-white/10",
+        sticky ? "backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-[#0b0a0a]/60" : "",
+        className != null ? className : ""
+      ].join(" "),
+      children
+    }
+  );
+}
+const Drawer = { Root, Header, Body, Footer };
+var Drawer_default = Drawer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerRoot
+});

package/dist/Drawer.mjs

@@ -0,0 +1,102 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import ActionIconButton from "./ActionIconButton";
+const DrawerCtx = React.createContext(null);
+const useDrawerCtx = () => {
+  const ctx = React.useContext(DrawerCtx);
+  if (!ctx) throw new Error("Drawer.* debe usarse dentro de <Drawer.Root />");
+  return ctx;
+};
+function Root({
+  open,
+  onClose,
+  widthClass = "w-[680px] max-w-[92vw]",
+  children,
+  className
+}) {
+  React.useEffect(() => {
+    if (open) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  React.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  const labelId = React.useId();
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: "fixed inset-0 z-[100]",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40", onClick: onClose, "aria-hidden": true }),
+        /* @__PURE__ */ jsx(DrawerCtx.Provider, { value: { onClose }, children: /* @__PURE__ */ jsxs(
+          motion.aside,
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": labelId,
+            className: [
+              "absolute right-0 top-0 h-full bg-white shadow-2xl dark:bg-[#0b0a0a]",
+              widthClass,
+              "flex flex-col",
+              className != null ? className : ""
+            ].join(" "),
+            initial: { x: "100%" },
+            animate: { x: 0 },
+            exit: { x: "100%" },
+            transition: { type: "spring", stiffness: 260, damping: 26 },
+            children: [
+              /* @__PURE__ */ jsx("div", { id: labelId, className: "sr-only" }),
+              children
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function Header({ title, right, className, hideClose, children }) {
+  const { onClose } = useDrawerCtx();
+  return /* @__PURE__ */ jsx("div", { className: ["flex items-center justify-between border-b border-black/10 px-5 py-4 dark:border-white/10", className != null ? className : ""].join(" "), children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      right,
+      !hideClose && /* @__PURE__ */ jsx(ActionIconButton, { title: "Cerrar", size: "md", onClick: onClose, 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 Body({ className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: ["flex-1 overflow-auto", className != null ? className : ""].join(" "), children });
+}
+function Footer({ className, children, sticky }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [
+        "border-t border-slate-200/70 px-5 py-4 dark:border-white/10",
+        sticky ? "backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-[#0b0a0a]/60" : "",
+        className != null ? className : ""
+      ].join(" "),
+      children
+    }
+  );
+}
+const Drawer = { Root, Header, Body, Footer };
+var Drawer_default = Drawer;
+export {
+  Body as DrawerBody,
+  Footer as DrawerFooter,
+  Header as DrawerHeader,
+  Root as DrawerRoot,
+  Drawer_default as default
+};