@definable/ui 0.1.10 → 0.1.13

package/dist/components/modal.esm.js

@@ -1,10 +1,11 @@
 import { j as e } from "../jsx-runtime-DGlMoOmv.js";
-import { createPortal as w } from "react-dom";
-import { AnimatePresence as g, motion as m } from "framer-motion";
-import { X as N } from "lucide-react";
-import { c as s } from "../utils-qaFjX9_3.js";
-import { useCallback as k, useEffect as W } from "react";
-const E = (t) => {
+import { createPortal as E } from "react-dom";
+import { AnimatePresence as z, motion as h } from "framer-motion";
+import { X as F } from "lucide-react";
+import { c as n } from "../utils-qaFjX9_3.js";
+import { useCallback as H, useEffect as L } from "react";
+import { Sheet as P } from "./sheet.esm.js";
+const A = (t) => {
   switch (t) {
     case "sm":
       return { width: "100%", maxWidth: "384px" };
@@ -24,80 +25,112 @@ const E = (t) => {
       return { width: "100%", maxWidth: "448px" };
   }
 };
-function D({
+function B({
   isOpen: t,
-  onClose: r,
-  title: d,
-  description: i,
-  icon: a,
-  children: o,
-  footer: l,
-  size: x = "md",
-  showClose: u = !0,
-  className: h,
-  isContentScrollable: f = !0,
-  mainClassName: p,
+  onClose: i,
+  title: s,
+  description: r,
+  icon: d,
+  children: u,
+  footer: a,
+  size: j = "md",
+  showClose: p = !0,
+  className: f,
+  isContentScrollable: g = !0,
+  mainClassName: w,
   contentClassName: b,
-  header: n,
-  zIndexClassName: j = "z-[50]"
+  header: l,
+  headerClassName: v,
+  zIndexClassName: y = "z-[50]",
+  mobileSheet: c
 }) {
-  const c = k((v) => {
-    v.key === "Escape" && t && r();
-  }, [t, r]);
-  W(() => (document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c)), [c]);
-  const y = /* @__PURE__ */ e.jsx(g, { children: t && /* @__PURE__ */ e.jsx("div", { className: s("fixed inset-0 z-50 overflow-hidden", j), children: /* @__PURE__ */ e.jsxs("div", { className: s("min-h-full flex items-center justify-center p-4", p), children: [
+  if (c != null && c.enable && t && window.innerWidth < 768) {
+    const { position: o } = c, k = l || (s || r || d ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3", children: [
+      d && /* @__PURE__ */ e.jsx("div", { className: "h-8 w-8 rounded-lg flex items-center justify-center", children: d }),
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        s && /* @__PURE__ */ e.jsx("h2", { className: "text-sm font-medium", children: s }),
+        r && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: r })
+      ] })
+    ] }) : void 0), W = /* @__PURE__ */ e.jsx("div", { className: "flex gap-2 justify-end", children: a });
+    return /* @__PURE__ */ e.jsx(
+      P,
+      {
+        isOpen: t,
+        onClose: i,
+        header: k,
+        footer: W,
+        className: n(f, "w-full max-w-full"),
+        position: o || "bottom",
+        headerClassName: n(v, "w-full max-w-full"),
+        enableFullscreen: !1,
+        children: u
+      }
+    );
+  }
+  const x = H((o) => {
+    o.key === "Escape" && t && i();
+  }, [t, i]);
+  L(() => (document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x)), [x]);
+  const m = s || r || d || l, N = /* @__PURE__ */ e.jsx(z, { children: t && /* @__PURE__ */ e.jsx("div", { className: n("fixed inset-0 z-50 overflow-hidden", y), children: /* @__PURE__ */ e.jsxs("div", { className: n("min-h-full flex items-center justify-center p-4", w), children: [
     /* @__PURE__ */ e.jsx(
-      m.div,
+      h.div,
       {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         className: "fixed inset-0 bg-background/80 backdrop-blur-sm",
-        onClick: r
+        onClick: i
       }
     ),
     /* @__PURE__ */ e.jsxs(
-      m.div,
+      h.div,
       {
         initial: { opacity: 0, scale: 0.95 },
         animate: { opacity: 1, scale: 1 },
         exit: { opacity: 0, scale: 0.95 },
         transition: { duration: 0.1, ease: "easeOut" },
-        className: s(
-          "relative transform rounded-lg bg-background shadow-xl border border-border flex flex-col max-h-[85vh]",
-          h
+        className: n(
+          "relative transform rounded-lg bg-background shadow-xl border border-border/50 flex flex-col max-h-[85vh] overflow-hidden",
+          f
         ),
-        style: E(x),
+        style: A(j),
         children: [
-          (d || i || a || n) && /* @__PURE__ */ e.jsxs("div", { className: "flex-shrink-0 flex items-center justify-between p-2 border-b border-border", children: [
-            n || /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3", children: [
-              a && /* @__PURE__ */ e.jsx("div", { className: "h-8 w-8 rounded-lg flex items-center justify-center", children: a }),
+          m && /* @__PURE__ */ e.jsxs("div", { className: "flex-shrink-0 rounded-t-lg bg-card flex items-center justify-between p-2 border-b border-border/50", children: [
+            l || /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3", children: [
+              d && /* @__PURE__ */ e.jsx("div", { className: "h-8 w-8 rounded-lg flex items-center justify-center", children: d }),
               /* @__PURE__ */ e.jsxs("div", { children: [
-                d && /* @__PURE__ */ e.jsx("h2", { className: "text-sm font-small", children: d }),
-                i && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: i })
+                s && /* @__PURE__ */ e.jsx("h2", { className: "text-sm font-small", children: s }),
+                r && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: r })
               ] })
             ] }),
-            u && /* @__PURE__ */ e.jsx(
+            p && /* @__PURE__ */ e.jsx(
               "button",
               {
-                onClick: r,
+                onClick: i,
                 className: "p-1.5 rounded-md hover:bg-muted text-muted-foreground",
                 children: /* @__PURE__ */ e.jsxs("div", { className: "flex justify-center items-center", children: [
-                  /* @__PURE__ */ e.jsx(N, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ e.jsx(F, { className: "h-4 w-4" }),
                   /* @__PURE__ */ e.jsx("kbd", { className: "ml-2 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: "ESC" })
                 ] })
               }
             )
           ] }),
-          /* @__PURE__ */ e.jsx("div", { className: s("flex-1 min-h-0", f ? "overflow-y-auto" : "", b), children: o }),
-          l && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border bg-muted/50", children: l })
+          /* @__PURE__ */ e.jsx("div", { className: n(
+            "flex-1 min-h-0",
+            g ? "overflow-y-auto" : "",
+            !a && !m ? "rounded-lg" : "",
+            !a && m ? "rounded-b-lg" : "",
+            a && !m ? "rounded-t-lg" : "",
+            b
+          ), children: u }),
+          a && /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border/50 bg-card rounded-b-lg", children: a })
         ]
       }
     )
   ] }) }) });
-  return w(y, document.body);
+  return E(N, document.body);
 }
 export {
-  D as Modal
+  B as Modal
 };
 //# sourceMappingURL=modal.esm.js.map

package/dist/components/modal.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.esm.js","sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { useEffect, useCallback } from 'react';\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title?: string;\n  description?: string | React.ReactNode;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '3xl';\n  showClose?: boolean;\n  className?: string;\n  mainClassName?: string;\n  isContentScrollable?: boolean;\n  header?: React.ReactNode;\n  headerClassName?: string;\n  contentClassName?: string;\n  zIndexClassName?: string;\n}\n\nconst getSizeStyles = (size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '3xl') => {\n  switch (size) {\n    case 'sm':\n      return { width: '100%', maxWidth: '384px' }; // max-w-sm equivalent\n    case 'md':\n      return { width: '100%', maxWidth: '448px' }; // max-w-md equivalent\n    case 'lg':\n      return { width: '100%', maxWidth: '512px' }; // max-w-lg equivalent\n    case 'xl':\n      return { width: '100%', maxWidth: '70%' };\n    case '2xl':\n      return { width: '80%', maxWidth: '1200px' };\n    case '3xl':\n      return { width: '90%', maxWidth: '1600px' };\n    case 'full':\n      return { width: '100%' };\n    default:\n      return { width: '100%', maxWidth: '448px' };\n  }\n};\n\nexport function Modal({\n  isOpen,\n  onClose,\n  title,\n  description,\n  icon,\n  children,\n  footer,\n  size = 'md',\n  showClose = true,\n  className,\n  isContentScrollable = true,\n  mainClassName,\n  contentClassName,\n  header,\n  zIndexClassName = 'z-[50]'\n}: ModalProps) {\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Escape' && isOpen) {\n      onClose();\n    }\n  }, [isOpen, onClose]);\n\n  useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown]);\n\n  const content = (\n    <AnimatePresence>\n      {isOpen && (\n        <div className={cn(\"fixed inset-0 z-50 overflow-hidden\", zIndexClassName)}>\n          <div className={cn(\"min-h-full flex items-center justify-center p-4\", mainClassName)}>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              className=\"fixed inset-0 bg-background/80 backdrop-blur-sm\"\n              onClick={onClose}\n            />\n            \n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ duration: 0.1, ease: \"easeOut\" }}\n              className={cn(\n                \"relative transform rounded-lg bg-background shadow-xl border border-border flex flex-col max-h-[85vh]\",\n                className\n              )}\n              style={getSizeStyles(size)}\n            >\n              {/* Header - Fixed */}\n              {(title || description || icon || header) && (\n                <div className=\"flex-shrink-0 flex items-center justify-between p-2 border-b border-border\">\n                  \n                  {header ? header: (\n                    <div className=\"flex items-center gap-3\">\n                      {icon && (\n                        <div className=\"h-8 w-8 rounded-lg flex items-center justify-center\">\n                          {icon}\n                        </div>\n                      )}\n                      <div>\n                        {title && <h2 className=\"text-sm font-small\">{title}</h2>}\n                        {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n                      </div>\n                    </div>\n                  )}\n                  {showClose && (\n                    <button\n                      onClick={onClose}\n                      className=\"p-1.5 rounded-md hover:bg-muted text-muted-foreground\"\n                    >\n                      <div className=\"flex justify-center items-center\">\n                        <X className=\"h-4 w-4\" />\n                        <kbd className=\"ml-2 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded\">\n                          ESC\n                        </kbd>\n                      </div>\n                    </button>\n                  )}\n                </div>\n              )}\n\n              {/* Content - Scrollable */}\n              <div className={cn(\"flex-1 min-h-0\", isContentScrollable ? 'overflow-y-auto' : '', contentClassName )}>\n                {children}\n              </div>\n\n              {/* Footer - Fixed */}\n              {footer && (\n                <div className=\"flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border bg-muted/50\">\n                  {footer}\n                </div>\n              )}\n            </motion.div>\n          </div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  return createPortal(content, document.body);\n}"],"names":["getSizeStyles","size","Modal","isOpen","onClose","title","description","icon","children","footer","showClose","className","isContentScrollable","mainClassName","contentClassName","header","zIndexClassName","handleKeyDown","useCallback","e","useEffect","content","jsx","AnimatePresence","cn","jsxs","motion","X","createPortal"],"mappings":"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"}
+{"version":3,"file":"modal.esm.js","sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { useEffect, useCallback } from 'react';\nimport { Sheet } from './sheet';\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title?: string;\n  description?: string | React.ReactNode;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '3xl';\n  showClose?: boolean;\n  className?: string;\n  mainClassName?: string;\n  isContentScrollable?: boolean;\n  header?: React.ReactNode;\n  headerClassName?: string;\n  contentClassName?: string;\n  zIndexClassName?: string;\n  mobileSheet?: {\n    enable: boolean;\n    position?: 'left' | 'right' | 'bottom';\n  };\n}\n\nconst getSizeStyles = (size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '3xl') => {\n  switch (size) {\n    case 'sm':\n      return { width: '100%', maxWidth: '384px' }; // max-w-sm equivalent\n    case 'md':\n      return { width: '100%', maxWidth: '448px' }; // max-w-md equivalent\n    case 'lg':\n      return { width: '100%', maxWidth: '512px' }; // max-w-lg equivalent\n    case 'xl':\n      return { width: '100%', maxWidth: '70%' };\n    case '2xl':\n      return { width: '80%', maxWidth: '1200px' };\n    case '3xl':\n      return { width: '90%', maxWidth: '1600px' };\n    case 'full':\n      return { width: '100%' };\n    default:\n      return { width: '100%', maxWidth: '448px' };\n  }\n};\n\nexport function Modal({\n  isOpen,\n  onClose,\n  title,\n  description,\n  icon,\n  children,\n  footer,\n  size = 'md',\n  showClose = true,\n  className,\n  isContentScrollable = true,\n  mainClassName,\n  contentClassName,\n  header,\n  headerClassName,\n  zIndexClassName = 'z-[50]',\n  mobileSheet,\n}: ModalProps) {\n\n  // If mobileSheet is true, render Sheet instead\n  if (mobileSheet?.enable && isOpen && window.innerWidth < 768) {\n    const { position } = mobileSheet;\n\n    // Create header content for sheet if we have title, description, or icon\n    const sheetHeader = header || (title || description || icon ? (\n      <div className=\"flex items-center gap-3\">\n        {icon && (\n          <div className=\"h-8 w-8 rounded-lg flex items-center justify-center\">\n            {icon}\n          </div>\n        )}\n        <div>\n          {title && <h2 className=\"text-sm font-medium\">{title}</h2>}\n          {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n        </div>\n      </div>\n    ) : undefined);\n\n    const sheetFooter = (\n      <div className=\"flex gap-2 justify-end\">\n        {footer}\n      </div>\n    );\n\n    return (\n      <Sheet\n        isOpen={isOpen}\n        onClose={onClose}\n        header={sheetHeader}\n        footer={sheetFooter}\n        className={cn(className, 'w-full max-w-full')}\n        position={position || 'bottom'}\n        headerClassName={cn(headerClassName, 'w-full max-w-full')}\n        enableFullscreen={false}\n      >\n        {children}\n      </Sheet>\n    );\n  }\n\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Escape' && isOpen) {\n      onClose();\n    }\n  }, [isOpen, onClose]);\n\n  useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown]);\n  \n  const isHeader = title || description || icon || header;\n  const content = (\n    <AnimatePresence>\n      {isOpen && (\n        <div className={cn(\"fixed inset-0 z-50 overflow-hidden\", zIndexClassName)}>\n          <div className={cn(\"min-h-full flex items-center justify-center p-4\", mainClassName)}>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              className=\"fixed inset-0 bg-background/80 backdrop-blur-sm\"\n              onClick={onClose}\n            />\n            \n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ duration: 0.1, ease: \"easeOut\" }}\n              className={cn(\n                \"relative transform rounded-lg bg-background shadow-xl border border-border/50 flex flex-col max-h-[85vh] overflow-hidden\",\n                className\n              )}\n              style={getSizeStyles(size)}\n            >\n              {/* Header - Fixed */}\n              {isHeader && (\n                <div className=\"flex-shrink-0 rounded-t-lg bg-card flex items-center justify-between p-2 border-b border-border/50\">\n                  \n                  {header ? header: (\n                    <div className=\"flex items-center gap-3\">\n                      {icon && (\n                        <div className=\"h-8 w-8 rounded-lg flex items-center justify-center\">\n                          {icon}\n                        </div>\n                      )}\n                      <div>\n                        {title && <h2 className=\"text-sm font-small\">{title}</h2>}\n                        {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n                      </div>\n                    </div>\n                  )}\n                  {showClose && (\n                    <button\n                      onClick={onClose}\n                      className=\"p-1.5 rounded-md hover:bg-muted text-muted-foreground\"\n                    >\n                      <div className=\"flex justify-center items-center\">\n                        <X className=\"h-4 w-4\" />\n                        <kbd className=\"ml-2 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded\">\n                          ESC\n                        </kbd>\n                      </div>\n                    </button>\n                  )}\n                </div>\n              )}\n\n              {/* Content - Scrollable */}\n              <div className={cn(\n                \"flex-1 min-h-0\", \n                isContentScrollable ? 'overflow-y-auto' : '', \n                !footer && !isHeader ? 'rounded-lg' : '',\n                !footer && isHeader ? 'rounded-b-lg' : '', \n                footer && !isHeader ? 'rounded-t-lg' : '',\n                contentClassName \n              )}>\n                {children}\n              </div>\n\n              {/* Footer - Fixed */}\n              {footer && (\n                <div className=\"flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border/50 bg-card rounded-b-lg\">\n                  {footer}\n                </div>\n              )}\n            </motion.div>\n          </div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  return createPortal(content, document.body);\n}"],"names":["getSizeStyles","size","Modal","isOpen","onClose","title","description","icon","children","footer","showClose","className","isContentScrollable","mainClassName","contentClassName","header","headerClassName","zIndexClassName","mobileSheet","position","sheetHeader","jsxs","jsx","sheetFooter","Sheet","cn","handleKeyDown","useCallback","e","useEffect","isHeader","content","AnimatePresence","motion","X","createPortal"],"mappings":";;;;;;;AA8BA,MAAMA,IAAgB,CAACC,MAA6D;AAClF,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,aAAO,EAAE,OAAO,QAAQ,UAAU,QAAA;AAAA,IACpC,KAAK;AACH,aAAO,EAAE,OAAO,QAAQ,UAAU,QAAA;AAAA,IACpC,KAAK;AACH,aAAO,EAAE,OAAO,QAAQ,UAAU,QAAA;AAAA,IACpC,KAAK;AACH,aAAO,EAAE,OAAO,QAAQ,UAAU,MAAA;AAAA,IACpC,KAAK;AACH,aAAO,EAAE,OAAO,OAAO,UAAU,SAAA;AAAA,IACnC,KAAK;AACH,aAAO,EAAE,OAAO,OAAO,UAAU,SAAA;AAAA,IACnC,KAAK;AACH,aAAO,EAAE,OAAO,OAAA;AAAA,IAClB;AACE,aAAO,EAAE,OAAO,QAAQ,UAAU,QAAA;AAAA,EAAQ;AAEhD;AAEO,SAASC,EAAM;AAAA,EACpB,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAR,IAAO;AAAA,EACP,WAAAS,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,eAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,aAAAC;AACF,GAAe;AAGb,MAAIA,KAAA,QAAAA,EAAa,UAAUf,KAAU,OAAO,aAAa,KAAK;AAC5D,UAAM,EAAE,UAAAgB,MAAaD,GAGfE,IAAcL,MAAWV,KAASC,KAAeC,IACrDc,gBAAAA,EAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,MAAAd,KACCe,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,uDACZ,UAAAf,GACH;AAAA,6BAED,OAAA,EACE,UAAA;AAAA,QAAAF,KAASiB,gBAAAA,EAAAA,IAAC,MAAA,EAAG,WAAU,uBAAuB,UAAAjB,GAAM;AAAA,QACpDC,KAAegB,gBAAAA,EAAAA,IAAC,KAAA,EAAE,WAAU,iCAAiC,UAAAhB,EAAA,CAAY;AAAA,MAAA,EAAA,CAC5E;AAAA,IAAA,EAAA,CACF,IACE,SAEEiB,IACJD,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,0BACZ,UAAAb,GACH;AAGF,WACEa,gBAAAA,EAAAA;AAAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAArB;AAAA,QACA,SAAAC;AAAA,QACA,QAAQgB;AAAA,QACR,QAAQG;AAAA,QACR,WAAWE,EAAGd,GAAW,mBAAmB;AAAA,QAC5C,UAAUQ,KAAY;AAAA,QACtB,iBAAiBM,EAAGT,GAAiB,mBAAmB;AAAA,QACxD,kBAAkB;AAAA,QAEjB,UAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AAEA,QAAMkB,IAAgBC,EAAY,CAACC,MAAqB;AACtD,IAAIA,EAAE,QAAQ,YAAYzB,KACxBC,EAAA;AAAA,EAEJ,GAAG,CAACD,GAAQC,CAAO,CAAC;AAEpB,EAAAyB,EAAU,OACR,SAAS,iBAAiB,WAAWH,CAAa,GAC3C,MAAM,SAAS,oBAAoB,WAAWA,CAAa,IACjE,CAACA,CAAa,CAAC;AAElB,QAAMI,IAAWzB,KAASC,KAAeC,KAAQQ,GAC3CgB,IACJT,gBAAAA,MAACU,GAAA,EACE,UAAA7B,KACCmB,gBAAAA,MAAC,SAAI,WAAWG,EAAG,sCAAsCR,CAAe,GACtE,UAAAI,gBAAAA,EAAAA,KAAC,OAAA,EAAI,WAAWI,EAAG,mDAAmDZ,CAAa,GACjF,UAAA;AAAA,IAAAS,gBAAAA,EAAAA;AAAAA,MAACW,EAAO;AAAA,MAAP;AAAA,QACC,SAAS,EAAE,SAAS,EAAA;AAAA,QACpB,SAAS,EAAE,SAAS,EAAA;AAAA,QACpB,MAAM,EAAE,SAAS,EAAA;AAAA,QACjB,WAAU;AAAA,QACV,SAAS7B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGXiB,gBAAAA,EAAAA;AAAAA,MAACY,EAAO;AAAA,MAAP;AAAA,QACC,SAAS,EAAE,SAAS,GAAG,OAAO,KAAA;AAAA,QAC9B,SAAS,EAAE,SAAS,GAAG,OAAO,EAAA;AAAA,QAC9B,MAAM,EAAE,SAAS,GAAG,OAAO,KAAA;AAAA,QAC3B,YAAY,EAAE,UAAU,KAAK,MAAM,UAAA;AAAA,QACnC,WAAWR;AAAA,UACT;AAAA,UACAd;AAAA,QAAA;AAAA,QAEF,OAAOX,EAAcC,CAAI;AAAA,QAGxB,UAAA;AAAA,UAAA6B,KACCT,gBAAAA,EAAAA,KAAC,OAAA,EAAI,WAAU,sGAEZ,UAAA;AAAA,YAAAN,KACCM,gBAAAA,OAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,cAAAd,KACCe,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,uDACZ,UAAAf,GACH;AAAA,qCAED,OAAA,EACE,UAAA;AAAA,gBAAAF,KAASiB,gBAAAA,EAAAA,IAAC,MAAA,EAAG,WAAU,sBAAsB,UAAAjB,GAAM;AAAA,gBACnDC,KAAegB,gBAAAA,EAAAA,IAAC,KAAA,EAAE,WAAU,iCAAiC,UAAAhB,EAAA,CAAY;AAAA,cAAA,EAAA,CAC5E;AAAA,YAAA,GACF;AAAA,YAEDI,KACCY,gBAAAA,EAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAASlB;AAAA,gBACT,WAAU;AAAA,gBAEV,UAAAiB,gBAAAA,EAAAA,KAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,kBAAAC,gBAAAA,EAAAA,IAACY,GAAA,EAAE,WAAU,UAAA,CAAU;AAAA,kBACvBZ,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,yEAAwE,UAAA,MAAA,CAEvF;AAAA,gBAAA,EAAA,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,GAEJ;AAAA,UAIFA,gBAAAA,MAAC,SAAI,WAAWG;AAAA,YACd;AAAA,YACAb,IAAsB,oBAAoB;AAAA,YAC1C,CAACH,KAAU,CAACqB,IAAW,eAAe;AAAA,YACtC,CAACrB,KAAUqB,IAAW,iBAAiB;AAAA,YACvCrB,KAAU,CAACqB,IAAW,iBAAiB;AAAA,YACvChB;AAAA,UAAA,GAEC,UAAAN,EAAA,CACH;AAAA,UAGCC,KACCa,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,8GACZ,UAAAb,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CACF,GACF,GAEJ;AAGF,SAAO0B,EAAaJ,GAAS,SAAS,IAAI;AAC5C;"}

package/dist/components/modal.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BYECrxsp.cjs"),R=require("react-dom"),c=require("framer-motion"),g=require("lucide-react"),r=require("../utils-DSKoFOjv.cjs"),m=require("react"),w=t=>{switch(t){case"sm":return{width:"100%",maxWidth:"384px"};case"md":return{width:"100%",maxWidth:"448px"};case"lg":return{width:"100%",maxWidth:"512px"};case"xl":return{width:"100%",maxWidth:"70%"};case"2xl":return{width:"80%",maxWidth:"1200px"};case"3xl":return{width:"90%",maxWidth:"1600px"};case"full":return{width:"100%"};default:return{width:"100%",maxWidth:"448px"}}};function N({isOpen:t,onClose:s,title:i,description:n,icon:x,children:l,footer:o,size:u="md",showClose:h=!0,className:j,isContentScrollable:p=!0,mainClassName:f,contentClassName:b,header:d,zIndexClassName:y="z-[50]"}){const a=m.useCallback(v=>{v.key==="Escape"&&t&&s()},[t,s]);m.useEffect(()=>(document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)),[a]);const E=e.jsxRuntimeExports.jsx(c.AnimatePresence,{children:t&&e.jsxRuntimeExports.jsx("div",{className:r.cn("fixed inset-0 z-50 overflow-hidden",y),children:e.jsxRuntimeExports.jsxs("div",{className:r.cn("min-h-full flex items-center justify-center p-4",f),children:[e.jsxRuntimeExports.jsx(c.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},className:"fixed inset-0 bg-background/80 backdrop-blur-sm",onClick:s}),e.jsxRuntimeExports.jsxs(c.motion.div,{initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.1,ease:"easeOut"},className:r.cn("relative transform rounded-lg bg-background shadow-xl border border-border flex flex-col max-h-[85vh]",j),style:w(u),children:[(i||n||x||d)&&e.jsxRuntimeExports.jsxs("div",{className:"flex-shrink-0 flex items-center justify-between p-2 border-b border-border",children:[d||e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-3",children:[x&&e.jsxRuntimeExports.jsx("div",{className:"h-8 w-8 rounded-lg flex items-center justify-center",children:x}),e.jsxRuntimeExports.jsxs("div",{children:[i&&e.jsxRuntimeExports.jsx("h2",{className:"text-sm font-small",children:i}),n&&e.jsxRuntimeExports.jsx("p",{className:"text-sm text-muted-foreground",children:n})]})]}),h&&e.jsxRuntimeExports.jsx("button",{onClick:s,className:"p-1.5 rounded-md hover:bg-muted text-muted-foreground",children:e.jsxRuntimeExports.jsxs("div",{className:"flex justify-center items-center",children:[e.jsxRuntimeExports.jsx(g.X,{className:"h-4 w-4"}),e.jsxRuntimeExports.jsx("kbd",{className:"ml-2 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded",children:"ESC"})]})})]}),e.jsxRuntimeExports.jsx("div",{className:r.cn("flex-1 min-h-0",p?"overflow-y-auto":"",b),children:l}),o&&e.jsxRuntimeExports.jsx("div",{className:"flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border bg-muted/50",children:o})]})]})})});return R.createPortal(E,document.body)}exports.Modal=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BYECrxsp.cjs"),W=require("react-dom"),m=require("framer-motion"),q=require("lucide-react"),x=require("../utils-DSKoFOjv.cjs"),p=require("react"),M=require("./sheet.js"),z=t=>{switch(t){case"sm":return{width:"100%",maxWidth:"384px"};case"md":return{width:"100%",maxWidth:"448px"};case"lg":return{width:"100%",maxWidth:"512px"};case"xl":return{width:"100%",maxWidth:"70%"};case"2xl":return{width:"80%",maxWidth:"1200px"};case"3xl":return{width:"90%",maxWidth:"1600px"};case"full":return{width:"100%"};default:return{width:"100%",maxWidth:"448px"}}};function P({isOpen:t,onClose:d,title:s,description:r,icon:n,children:j,footer:i,size:f="md",showClose:E=!0,className:h,isContentScrollable:b=!0,mainClassName:g,contentClassName:R,header:a,headerClassName:v,zIndexClassName:w="z-[50]",mobileSheet:c}){if(c!=null&&c.enable&&t&&window.innerWidth<768){const{position:o}=c,N=a||(s||r||n?e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-3",children:[n&&e.jsxRuntimeExports.jsx("div",{className:"h-8 w-8 rounded-lg flex items-center justify-center",children:n}),e.jsxRuntimeExports.jsxs("div",{children:[s&&e.jsxRuntimeExports.jsx("h2",{className:"text-sm font-medium",children:s}),r&&e.jsxRuntimeExports.jsx("p",{className:"text-sm text-muted-foreground",children:r})]})]}):void 0),k=e.jsxRuntimeExports.jsx("div",{className:"flex gap-2 justify-end",children:i});return e.jsxRuntimeExports.jsx(M.Sheet,{isOpen:t,onClose:d,header:N,footer:k,className:x.cn(h,"w-full max-w-full"),position:o||"bottom",headerClassName:x.cn(v,"w-full max-w-full"),enableFullscreen:!1,children:j})}const u=p.useCallback(o=>{o.key==="Escape"&&t&&d()},[t,d]);p.useEffect(()=>(document.addEventListener("keydown",u),()=>document.removeEventListener("keydown",u)),[u]);const l=s||r||n||a,y=e.jsxRuntimeExports.jsx(m.AnimatePresence,{children:t&&e.jsxRuntimeExports.jsx("div",{className:x.cn("fixed inset-0 z-50 overflow-hidden",w),children:e.jsxRuntimeExports.jsxs("div",{className:x.cn("min-h-full flex items-center justify-center p-4",g),children:[e.jsxRuntimeExports.jsx(m.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},className:"fixed inset-0 bg-background/80 backdrop-blur-sm",onClick:d}),e.jsxRuntimeExports.jsxs(m.motion.div,{initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.1,ease:"easeOut"},className:x.cn("relative transform rounded-lg bg-background shadow-xl border border-border/50 flex flex-col max-h-[85vh] overflow-hidden",h),style:z(f),children:[l&&e.jsxRuntimeExports.jsxs("div",{className:"flex-shrink-0 rounded-t-lg bg-card flex items-center justify-between p-2 border-b border-border/50",children:[a||e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-3",children:[n&&e.jsxRuntimeExports.jsx("div",{className:"h-8 w-8 rounded-lg flex items-center justify-center",children:n}),e.jsxRuntimeExports.jsxs("div",{children:[s&&e.jsxRuntimeExports.jsx("h2",{className:"text-sm font-small",children:s}),r&&e.jsxRuntimeExports.jsx("p",{className:"text-sm text-muted-foreground",children:r})]})]}),E&&e.jsxRuntimeExports.jsx("button",{onClick:d,className:"p-1.5 rounded-md hover:bg-muted text-muted-foreground",children:e.jsxRuntimeExports.jsxs("div",{className:"flex justify-center items-center",children:[e.jsxRuntimeExports.jsx(q.X,{className:"h-4 w-4"}),e.jsxRuntimeExports.jsx("kbd",{className:"ml-2 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded",children:"ESC"})]})})]}),e.jsxRuntimeExports.jsx("div",{className:x.cn("flex-1 min-h-0",b?"overflow-y-auto":"",!i&&!l?"rounded-lg":"",!i&&l?"rounded-b-lg":"",i&&!l?"rounded-t-lg":"",R),children:j}),i&&e.jsxRuntimeExports.jsx("div",{className:"flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border/50 bg-card rounded-b-lg",children:i})]})]})})});return W.createPortal(y,document.body)}exports.Modal=P;
 //# sourceMappingURL=modal.js.map

package/dist/components/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { useEffect, useCallback } from 'react';\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title?: string;\n  description?: string | React.ReactNode;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '3xl';\n  showClose?: boolean;\n  className?: string;\n  mainClassName?: string;\n  isContentScrollable?: boolean;\n  header?: React.ReactNode;\n  headerClassName?: string;\n  contentClassName?: string;\n  zIndexClassName?: string;\n}\n\nconst getSizeStyles = (size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '3xl') => {\n  switch (size) {\n    case 'sm':\n      return { width: '100%', maxWidth: '384px' }; // max-w-sm equivalent\n    case 'md':\n      return { width: '100%', maxWidth: '448px' }; // max-w-md equivalent\n    case 'lg':\n      return { width: '100%', maxWidth: '512px' }; // max-w-lg equivalent\n    case 'xl':\n      return { width: '100%', maxWidth: '70%' };\n    case '2xl':\n      return { width: '80%', maxWidth: '1200px' };\n    case '3xl':\n      return { width: '90%', maxWidth: '1600px' };\n    case 'full':\n      return { width: '100%' };\n    default:\n      return { width: '100%', maxWidth: '448px' };\n  }\n};\n\nexport function Modal({\n  isOpen,\n  onClose,\n  title,\n  description,\n  icon,\n  children,\n  footer,\n  size = 'md',\n  showClose = true,\n  className,\n  isContentScrollable = true,\n  mainClassName,\n  contentClassName,\n  header,\n  zIndexClassName = 'z-[50]'\n}: ModalProps) {\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Escape' && isOpen) {\n      onClose();\n    }\n  }, [isOpen, onClose]);\n\n  useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown]);\n\n  const content = (\n    <AnimatePresence>\n      {isOpen && (\n        <div className={cn(\"fixed inset-0 z-50 overflow-hidden\", zIndexClassName)}>\n          <div className={cn(\"min-h-full flex items-center justify-center p-4\", mainClassName)}>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              className=\"fixed inset-0 bg-background/80 backdrop-blur-sm\"\n              onClick={onClose}\n            />\n            \n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ duration: 0.1, ease: \"easeOut\" }}\n              className={cn(\n                \"relative transform rounded-lg bg-background shadow-xl border border-border flex flex-col max-h-[85vh]\",\n                className\n              )}\n              style={getSizeStyles(size)}\n            >\n              {/* Header - Fixed */}\n              {(title || description || icon || header) && (\n                <div className=\"flex-shrink-0 flex items-center justify-between p-2 border-b border-border\">\n                  \n                  {header ? header: (\n                    <div className=\"flex items-center gap-3\">\n                      {icon && (\n                        <div className=\"h-8 w-8 rounded-lg flex items-center justify-center\">\n                          {icon}\n                        </div>\n                      )}\n                      <div>\n                        {title && <h2 className=\"text-sm font-small\">{title}</h2>}\n                        {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n                      </div>\n                    </div>\n                  )}\n                  {showClose && (\n                    <button\n                      onClick={onClose}\n                      className=\"p-1.5 rounded-md hover:bg-muted text-muted-foreground\"\n                    >\n                      <div className=\"flex justify-center items-center\">\n                        <X className=\"h-4 w-4\" />\n                        <kbd className=\"ml-2 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded\">\n                          ESC\n                        </kbd>\n                      </div>\n                    </button>\n                  )}\n                </div>\n              )}\n\n              {/* Content - Scrollable */}\n              <div className={cn(\"flex-1 min-h-0\", isContentScrollable ? 'overflow-y-auto' : '', contentClassName )}>\n                {children}\n              </div>\n\n              {/* Footer - Fixed */}\n              {footer && (\n                <div className=\"flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border bg-muted/50\">\n                  {footer}\n                </div>\n              )}\n            </motion.div>\n          </div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  return createPortal(content, document.body);\n}"],"names":["getSizeStyles","size","Modal","isOpen","onClose","title","description","icon","children","footer","showClose","className","isContentScrollable","mainClassName","contentClassName","header","zIndexClassName","handleKeyDown","useCallback","e","useEffect","content","jsx","AnimatePresence","cn","jsxs","motion","X","createPortal"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { useEffect, useCallback } from 'react';\nimport { Sheet } from './sheet';\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title?: string;\n  description?: string | React.ReactNode;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '3xl';\n  showClose?: boolean;\n  className?: string;\n  mainClassName?: string;\n  isContentScrollable?: boolean;\n  header?: React.ReactNode;\n  headerClassName?: string;\n  contentClassName?: string;\n  zIndexClassName?: string;\n  mobileSheet?: {\n    enable: boolean;\n    position?: 'left' | 'right' | 'bottom';\n  };\n}\n\nconst getSizeStyles = (size: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | '3xl') => {\n  switch (size) {\n    case 'sm':\n      return { width: '100%', maxWidth: '384px' }; // max-w-sm equivalent\n    case 'md':\n      return { width: '100%', maxWidth: '448px' }; // max-w-md equivalent\n    case 'lg':\n      return { width: '100%', maxWidth: '512px' }; // max-w-lg equivalent\n    case 'xl':\n      return { width: '100%', maxWidth: '70%' };\n    case '2xl':\n      return { width: '80%', maxWidth: '1200px' };\n    case '3xl':\n      return { width: '90%', maxWidth: '1600px' };\n    case 'full':\n      return { width: '100%' };\n    default:\n      return { width: '100%', maxWidth: '448px' };\n  }\n};\n\nexport function Modal({\n  isOpen,\n  onClose,\n  title,\n  description,\n  icon,\n  children,\n  footer,\n  size = 'md',\n  showClose = true,\n  className,\n  isContentScrollable = true,\n  mainClassName,\n  contentClassName,\n  header,\n  headerClassName,\n  zIndexClassName = 'z-[50]',\n  mobileSheet,\n}: ModalProps) {\n\n  // If mobileSheet is true, render Sheet instead\n  if (mobileSheet?.enable && isOpen && window.innerWidth < 768) {\n    const { position } = mobileSheet;\n\n    // Create header content for sheet if we have title, description, or icon\n    const sheetHeader = header || (title || description || icon ? (\n      <div className=\"flex items-center gap-3\">\n        {icon && (\n          <div className=\"h-8 w-8 rounded-lg flex items-center justify-center\">\n            {icon}\n          </div>\n        )}\n        <div>\n          {title && <h2 className=\"text-sm font-medium\">{title}</h2>}\n          {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n        </div>\n      </div>\n    ) : undefined);\n\n    const sheetFooter = (\n      <div className=\"flex gap-2 justify-end\">\n        {footer}\n      </div>\n    );\n\n    return (\n      <Sheet\n        isOpen={isOpen}\n        onClose={onClose}\n        header={sheetHeader}\n        footer={sheetFooter}\n        className={cn(className, 'w-full max-w-full')}\n        position={position || 'bottom'}\n        headerClassName={cn(headerClassName, 'w-full max-w-full')}\n        enableFullscreen={false}\n      >\n        {children}\n      </Sheet>\n    );\n  }\n\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (e.key === 'Escape' && isOpen) {\n      onClose();\n    }\n  }, [isOpen, onClose]);\n\n  useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [handleKeyDown]);\n  \n  const isHeader = title || description || icon || header;\n  const content = (\n    <AnimatePresence>\n      {isOpen && (\n        <div className={cn(\"fixed inset-0 z-50 overflow-hidden\", zIndexClassName)}>\n          <div className={cn(\"min-h-full flex items-center justify-center p-4\", mainClassName)}>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              className=\"fixed inset-0 bg-background/80 backdrop-blur-sm\"\n              onClick={onClose}\n            />\n            \n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ duration: 0.1, ease: \"easeOut\" }}\n              className={cn(\n                \"relative transform rounded-lg bg-background shadow-xl border border-border/50 flex flex-col max-h-[85vh] overflow-hidden\",\n                className\n              )}\n              style={getSizeStyles(size)}\n            >\n              {/* Header - Fixed */}\n              {isHeader && (\n                <div className=\"flex-shrink-0 rounded-t-lg bg-card flex items-center justify-between p-2 border-b border-border/50\">\n                  \n                  {header ? header: (\n                    <div className=\"flex items-center gap-3\">\n                      {icon && (\n                        <div className=\"h-8 w-8 rounded-lg flex items-center justify-center\">\n                          {icon}\n                        </div>\n                      )}\n                      <div>\n                        {title && <h2 className=\"text-sm font-small\">{title}</h2>}\n                        {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n                      </div>\n                    </div>\n                  )}\n                  {showClose && (\n                    <button\n                      onClick={onClose}\n                      className=\"p-1.5 rounded-md hover:bg-muted text-muted-foreground\"\n                    >\n                      <div className=\"flex justify-center items-center\">\n                        <X className=\"h-4 w-4\" />\n                        <kbd className=\"ml-2 text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded\">\n                          ESC\n                        </kbd>\n                      </div>\n                    </button>\n                  )}\n                </div>\n              )}\n\n              {/* Content - Scrollable */}\n              <div className={cn(\n                \"flex-1 min-h-0\", \n                isContentScrollable ? 'overflow-y-auto' : '', \n                !footer && !isHeader ? 'rounded-lg' : '',\n                !footer && isHeader ? 'rounded-b-lg' : '', \n                footer && !isHeader ? 'rounded-t-lg' : '',\n                contentClassName \n              )}>\n                {children}\n              </div>\n\n              {/* Footer - Fixed */}\n              {footer && (\n                <div className=\"flex-shrink-0 flex items-center justify-end gap-2 px-4 py-3 border-t border-border/50 bg-card rounded-b-lg\">\n                  {footer}\n                </div>\n              )}\n            </motion.div>\n          </div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n\n  return createPortal(content, document.body);\n}"],"names":["getSizeStyles","size","Modal","isOpen","onClose","title","description","icon","children","footer","showClose","className","isContentScrollable","mainClassName","contentClassName","header","headerClassName","zIndexClassName","mobileSheet","position","sheetHeader","jsxs","jsx","sheetFooter","Sheet","cn","handleKeyDown","useCallback","e","useEffect","isHeader","content","AnimatePresence","motion","X","createPortal"],"mappings":"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"}

package/dist/components/sheet.esm.js

@@ -10,30 +10,30 @@ function T({
   isOpen: i,
   onClose: n,
   children: y,
-  header: g,
+  header: b,
   footer: u,
-  className: j,
-  enableFullscreen: b = !0,
+  className: g,
+  enableFullscreen: j = !0,
   position: c = "right",
   headerClassName: v = ""
 }) {
-  const [o, N] = B(!1), a = I(null);
+  const [r, N] = B(!1), a = I(null);
   if (d(() => (i ? s.push(a) : s = s.filter((t) => t !== a), () => {
     s = s.filter((t) => t !== a);
   }), [i]), d(() => {
-    const t = (r) => {
+    const t = (o) => {
       var x;
       const L = s.some(
-        (f) => f.current && f.current.contains(r.target)
-      ), R = (x = r.target) == null ? void 0 : x.closest("[data-sheet-close]");
-      !L && !R && a.current && !a.current.contains(r.target) && n();
+        (f) => f.current && f.current.contains(o.target)
+      ), R = (x = o.target) == null ? void 0 : x.closest("[data-sheet-close]");
+      !L && !R && a.current && !a.current.contains(o.target) && n();
     };
-    return i && !o && document.addEventListener("mousedown", t), () => {
+    return i && !r && document.addEventListener("mousedown", t), () => {
       document.removeEventListener("mousedown", t);
     };
-  }, [i, o, n]), d(() => {
-    const t = (r) => {
-      r.key === "Escape" && i && s[s.length - 1] === a && n();
+  }, [i, r, n]), d(() => {
+    const t = (o) => {
+      o.key === "Escape" && i && s[s.length - 1] === a && n();
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
   }, [i, n]), !i) return null;
@@ -41,21 +41,21 @@ function T({
     t.stopPropagation(), n();
   }, w = /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ e.jsxs("div", { className: m(
-      "flex items-center justify-between py-4 px-4 h-header border-b",
+      "flex items-center justify-between py-4 px-4 h-header border-b border-border/50",
       v
     ), children: [
-      /* @__PURE__ */ e.jsx("div", { className: "text-sm font-medium", children: g }),
+      /* @__PURE__ */ e.jsx("div", { className: "text-sm font-medium", children: b }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
-        b && /* @__PURE__ */ e.jsx(
+        j && /* @__PURE__ */ e.jsx(
           h,
           {
             variant: "ghost",
             size: "icon",
             className: "h-7 w-7",
             onClick: (t) => {
-              t.stopPropagation(), N(!o);
+              t.stopPropagation(), N(!r);
             },
-            children: o ? /* @__PURE__ */ e.jsx(S, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ e.jsx(A, { className: "h-3.5 w-3.5" })
+            children: r ? /* @__PURE__ */ e.jsx(S, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ e.jsx(A, { className: "h-3.5 w-3.5" })
           }
         ),
         /* @__PURE__ */ e.jsx(
@@ -72,7 +72,7 @@ function T({
       ] })
     ] }),
     /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-auto", children: y }),
-    u && /* @__PURE__ */ e.jsx("div", { className: "border-t py-2 px-3", children: /* @__PURE__ */ e.jsx("div", { className: "text-sm", children: u }) })
+    u && /* @__PURE__ */ e.jsx("div", { className: "border-t border-border/50 py-2 px-3", children: /* @__PURE__ */ e.jsx("div", { className: "text-sm", children: u }) })
   ] }), E = () => c === "left" ? {
     initial: { x: -100, opacity: 0 },
     animate: { x: 0, opacity: 1 },
@@ -85,7 +85,7 @@ function T({
     initial: { x: 100, opacity: 0 },
     animate: { x: 0, opacity: 1 },
     exit: { x: 100, opacity: 0 }
-  }, P = () => o ? "inset-4 rounded-lg" : c === "left" ? "inset-y-0 left-0 border-r" : c === "bottom" ? "inset-x-0 bottom-0 border-t" : "inset-y-0 right-0 border-l", l = E(), z = P(), C = /* @__PURE__ */ e.jsx(M, { children: i && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  }, P = () => r ? "inset-4 rounded-lg" : c === "left" ? "inset-y-0 left-0 border-r" : c === "bottom" ? "inset-x-0 bottom-0 border-t" : "inset-y-0 right-0 border-l", l = E(), z = P(), C = /* @__PURE__ */ e.jsx(M, { children: i && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx(
       p.div,
       {
@@ -97,7 +97,7 @@ function T({
         },
         className: m(
           "fixed inset-0 z-[100] bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-          o ? "block" : "hidden"
+          r ? "block" : "hidden"
         )
       }
     ),
@@ -113,9 +113,9 @@ function T({
           ease: [0.32, 0.72, 0, 1]
         },
         className: m(
-          "fixed z-[100] bg-background shadow-lg flex flex-col",
+          "fixed z-[100] bg-background shadow-lg flex flex-col border-border/50",
           z,
-          j
+          g
         ),
         children: w
       }

package/dist/components/sheet.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.esm.js","sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { X, Maximize2, Minimize2 } from \"lucide-react\"\nimport { Button } from \"./button\"\nimport { useState, useRef, useEffect } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { motion, AnimatePresence } from \"framer-motion\"\nimport { createPortal } from \"react-dom\"\n\ninterface SheetProps {\n  isOpen: boolean\n  onClose: () => void\n  children: React.ReactNode\n  header?: React.ReactNode\n  footer?: React.ReactNode\n  className?: string\n  enableFullscreen?: boolean\n  position?: 'left' | 'right' | 'bottom'\n  headerClassName?: string\n}\n\n// Create a global registry of open sheets to prevent closing multiple sheets\nlet openSheetRefs: React.RefObject<HTMLDivElement>[] = [];\n\nexport function Sheet({ \n  isOpen, \n  onClose, \n  children, \n  header, \n  footer, \n  className, \n  enableFullscreen = true,\n  position = 'right',\n  headerClassName = ''\n}: SheetProps) {\n  const [isFullscreen, setIsFullscreen] = useState(false)\n  const sheetRef = useRef<HTMLDivElement>(null)\n\n  // When the sheet opens, add its ref to the registry\n  useEffect(() => {\n    if (isOpen) {\n      openSheetRefs.push(sheetRef);\n    } else {\n      // Remove the ref when sheet closes\n      openSheetRefs = openSheetRefs.filter(ref => ref !== sheetRef);\n    }\n    \n    return () => {\n      // Cleanup when component unmounts\n      openSheetRefs = openSheetRefs.filter(ref => ref !== sheetRef);\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      // If we clicked inside any open sheet, don't close any sheets\n      const clickedInsideAnySheet = openSheetRefs.some(ref => \n        ref.current && ref.current.contains(event.target as Node)\n      );\n\n      // Check if clicked on the close button\n      const isCloseButton = (event.target as Element)?.closest('[data-sheet-close]');\n      \n      // Only close if not clicked inside any sheet and not clicking a close button\n      if (!clickedInsideAnySheet && !isCloseButton && sheetRef.current && !sheetRef.current.contains(event.target as Node)) {\n        onClose();\n      }\n    }\n\n    if (isOpen && !isFullscreen) {\n      document.addEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isOpen, isFullscreen, onClose])\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen) {\n        // Only close the topmost sheet (last one in the registry)\n        if (openSheetRefs[openSheetRefs.length - 1] === sheetRef) {\n          onClose();\n        }\n      }\n    }\n\n    document.addEventListener('keydown', handleEscape)\n    return () => document.removeEventListener('keydown', handleEscape)\n  }, [isOpen, onClose])\n\n  if (!isOpen) return null\n\n  const handleCloseClick = (e: React.MouseEvent) => {\n    e.stopPropagation(); // Prevent event from bubbling to parent sheets\n    onClose();\n  };\n\n  const content = (\n    <div className=\"flex flex-col h-full\">\n      <div className={cn(\n        \"flex items-center justify-between py-4 px-4 h-header border-b\",\n        headerClassName\n      )}>\n        <div className=\"text-sm font-medium\">{header}</div>\n        <div className=\"flex items-center gap-1 ml-auto\">\n          {enableFullscreen && (\n            <Button \n              variant=\"ghost\" \n              size=\"icon\" \n              className=\"h-7 w-7\"\n              onClick={(e) => {\n                e.stopPropagation();\n                setIsFullscreen(!isFullscreen);\n              }}\n            >\n              {isFullscreen ? (\n                <Minimize2 className=\"h-3.5 w-3.5\" />\n              ) : (\n                <Maximize2 className=\"h-3.5 w-3.5\" />\n              )}\n            </Button>\n          )}\n          <Button \n            variant=\"ghost\" \n            size=\"icon\" \n            className=\"h-7 w-7\"\n            onClick={handleCloseClick}\n            data-sheet-close=\"true\"\n          >\n            <X className=\"h-3.5 w-3.5\" />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"flex-1 overflow-auto\">\n        {children}\n      </div>\n\n      {footer && (\n        <div className=\"border-t py-2 px-3\">\n          <div className=\"text-sm\">{footer}</div>\n        </div>\n      )}\n    </div>\n  )\n\n  // Determine animation properties based on position\n  const getAnimationProps = () => {\n    if (position === 'left') {\n      return {\n        initial: { x: -100, opacity: 0 },\n        animate: { x: 0, opacity: 1 },\n        exit: { x: -100, opacity: 0 },\n      }\n    } else if (position === 'bottom') {\n      return {\n        initial: { y: 100, opacity: 0 },\n        animate: { y: 0, opacity: 1 },\n        exit: { y: 100, opacity: 0 },\n      }\n    } else { // right (default)\n      return {\n        initial: { x: 100, opacity: 0 },\n        animate: { x: 0, opacity: 1 },\n        exit: { x: 100, opacity: 0 },\n      }\n    }\n  }\n\n  // Determine position classes based on position\n  const getPositionClasses = () => {\n    if (isFullscreen) {\n      return \"inset-4 rounded-lg\"\n    } else if (position === 'left') {\n      return \"inset-y-0 left-0 border-r\"\n    } else if (position === 'bottom') {\n      return \"inset-x-0 bottom-0 border-t\"\n    } else { // right (default)\n      return \"inset-y-0 right-0 border-l\"\n    }\n  }\n\n  const animationProps = getAnimationProps()\n  const positionClasses = getPositionClasses()\n\n  const sheetContent = (\n    <AnimatePresence>\n      {isOpen && (\n        <>\n          {/* Backdrop */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={(e) => {\n              e.stopPropagation();\n              onClose();\n            }}\n            className={cn(\n              \"fixed inset-0 z-[100] bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n              isFullscreen ? \"block\" : \"hidden\"\n            )}\n          />\n\n          {/* Sheet/Modal */}\n          <motion.div\n            ref={sheetRef}\n            initial={animationProps.initial}\n            animate={animationProps.animate}\n            exit={animationProps.exit}\n            transition={{ \n              duration: 0.3,\n              ease: [0.32, 0.72, 0, 1]\n            }}\n            className={cn(\n              \"fixed z-[100] bg-background shadow-lg flex flex-col\",\n              positionClasses,\n              className\n            )}\n          >\n            {content}\n          </motion.div>\n        </>\n      )}\n    </AnimatePresence>\n  )\n\n  return createPortal(sheetContent, document.body)\n} "],"names":["openSheetRefs","Sheet","isOpen","onClose","children","header","footer","className","enableFullscreen","position","headerClassName","isFullscreen","setIsFullscreen","useState","sheetRef","useRef","useEffect","ref","handleClickOutside","event","clickedInsideAnySheet","isCloseButton","_a","handleEscape","handleCloseClick","e","content","jsxs","cn","jsx","Button","Minimize2","Maximize2","X","getAnimationProps","getPositionClasses","animationProps","positionClasses","sheetContent","AnimatePresence","Fragment","motion","createPortal"],"mappings":"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"}
+{"version":3,"file":"sheet.esm.js","sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { X, Maximize2, Minimize2 } from \"lucide-react\"\nimport { Button } from \"./button\"\nimport { useState, useRef, useEffect } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { motion, AnimatePresence } from \"framer-motion\"\nimport { createPortal } from \"react-dom\"\n\ninterface SheetProps {\n  isOpen: boolean\n  onClose: () => void\n  children: React.ReactNode\n  header?: React.ReactNode\n  footer?: React.ReactNode\n  className?: string\n  enableFullscreen?: boolean\n  position?: 'left' | 'right' | 'bottom'\n  headerClassName?: string\n}\n\n// Create a global registry of open sheets to prevent closing multiple sheets\nlet openSheetRefs: React.RefObject<HTMLDivElement>[] = [];\n\nexport function Sheet({ \n  isOpen, \n  onClose, \n  children, \n  header, \n  footer, \n  className, \n  enableFullscreen = true,\n  position = 'right',\n  headerClassName = ''\n}: SheetProps) {\n  const [isFullscreen, setIsFullscreen] = useState(false)\n  const sheetRef = useRef<HTMLDivElement>(null)\n\n  // When the sheet opens, add its ref to the registry\n  useEffect(() => {\n    if (isOpen) {\n      openSheetRefs.push(sheetRef);\n    } else {\n      // Remove the ref when sheet closes\n      openSheetRefs = openSheetRefs.filter(ref => ref !== sheetRef);\n    }\n    \n    return () => {\n      // Cleanup when component unmounts\n      openSheetRefs = openSheetRefs.filter(ref => ref !== sheetRef);\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      // If we clicked inside any open sheet, don't close any sheets\n      const clickedInsideAnySheet = openSheetRefs.some(ref => \n        ref.current && ref.current.contains(event.target as Node)\n      );\n\n      // Check if clicked on the close button\n      const isCloseButton = (event.target as Element)?.closest('[data-sheet-close]');\n      \n      // Only close if not clicked inside any sheet and not clicking a close button\n      if (!clickedInsideAnySheet && !isCloseButton && sheetRef.current && !sheetRef.current.contains(event.target as Node)) {\n        onClose();\n      }\n    }\n\n    if (isOpen && !isFullscreen) {\n      document.addEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isOpen, isFullscreen, onClose])\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen) {\n        // Only close the topmost sheet (last one in the registry)\n        if (openSheetRefs[openSheetRefs.length - 1] === sheetRef) {\n          onClose();\n        }\n      }\n    }\n\n    document.addEventListener('keydown', handleEscape)\n    return () => document.removeEventListener('keydown', handleEscape)\n  }, [isOpen, onClose])\n\n  if (!isOpen) return null\n\n  const handleCloseClick = (e: React.MouseEvent) => {\n    e.stopPropagation(); // Prevent event from bubbling to parent sheets\n    onClose();\n  };\n\n  const content = (\n    <div className=\"flex flex-col h-full\">\n      <div className={cn(\n        \"flex items-center justify-between py-4 px-4 h-header border-b border-border/50\",\n        headerClassName\n      )}>\n        <div className=\"text-sm font-medium\">{header}</div>\n        <div className=\"flex items-center gap-1 ml-auto\">\n          {enableFullscreen && (\n            <Button \n              variant=\"ghost\" \n              size=\"icon\" \n              className=\"h-7 w-7\"\n              onClick={(e) => {\n                e.stopPropagation();\n                setIsFullscreen(!isFullscreen);\n              }}\n            >\n              {isFullscreen ? (\n                <Minimize2 className=\"h-3.5 w-3.5\" />\n              ) : (\n                <Maximize2 className=\"h-3.5 w-3.5\" />\n              )}\n            </Button>\n          )}\n          <Button \n            variant=\"ghost\" \n            size=\"icon\" \n            className=\"h-7 w-7\"\n            onClick={handleCloseClick}\n            data-sheet-close=\"true\"\n          >\n            <X className=\"h-3.5 w-3.5\" />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"flex-1 overflow-auto\">\n        {children}\n      </div>\n\n      {footer && (\n        <div className=\"border-t border-border/50 py-2 px-3\">\n          <div className=\"text-sm\">{footer}</div>\n        </div>\n      )}\n    </div>\n  )\n\n  // Determine animation properties based on position\n  const getAnimationProps = () => {\n    if (position === 'left') {\n      return {\n        initial: { x: -100, opacity: 0 },\n        animate: { x: 0, opacity: 1 },\n        exit: { x: -100, opacity: 0 },\n      }\n    } else if (position === 'bottom') {\n      return {\n        initial: { y: 100, opacity: 0 },\n        animate: { y: 0, opacity: 1 },\n        exit: { y: 100, opacity: 0 },\n      }\n    } else { // right (default)\n      return {\n        initial: { x: 100, opacity: 0 },\n        animate: { x: 0, opacity: 1 },\n        exit: { x: 100, opacity: 0 },\n      }\n    }\n  }\n\n  // Determine position classes based on position\n  const getPositionClasses = () => {\n    if (isFullscreen) {\n      return \"inset-4 rounded-lg\"\n    } else if (position === 'left') {\n      return \"inset-y-0 left-0 border-r\"\n    } else if (position === 'bottom') {\n      return \"inset-x-0 bottom-0 border-t\"\n    } else { // right (default)\n      return \"inset-y-0 right-0 border-l\"\n    }\n  }\n\n  const animationProps = getAnimationProps()\n  const positionClasses = getPositionClasses()\n\n  const sheetContent = (\n    <AnimatePresence>\n      {isOpen && (\n        <>\n          {/* Backdrop */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={(e) => {\n              e.stopPropagation();\n              onClose();\n            }}\n            className={cn(\n              \"fixed inset-0 z-[100] bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n              isFullscreen ? \"block\" : \"hidden\"\n            )}\n          />\n\n          {/* Sheet/Modal */}\n          <motion.div\n            ref={sheetRef}\n            initial={animationProps.initial}\n            animate={animationProps.animate}\n            exit={animationProps.exit}\n            transition={{ \n              duration: 0.3,\n              ease: [0.32, 0.72, 0, 1]\n            }}\n            className={cn(\n              \"fixed z-[100] bg-background shadow-lg flex flex-col border-border/50\",\n              positionClasses,\n              className\n            )}\n          >\n            {content}\n          </motion.div>\n        </>\n      )}\n    </AnimatePresence>\n  )\n\n  return createPortal(sheetContent, document.body)\n} "],"names":["openSheetRefs","Sheet","isOpen","onClose","children","header","footer","className","enableFullscreen","position","headerClassName","isFullscreen","setIsFullscreen","useState","sheetRef","useRef","useEffect","ref","handleClickOutside","event","clickedInsideAnySheet","isCloseButton","_a","handleEscape","handleCloseClick","e","content","jsxs","cn","jsx","Button","Minimize2","Maximize2","X","getAnimationProps","getPositionClasses","animationProps","positionClasses","sheetContent","AnimatePresence","Fragment","motion","createPortal"],"mappings":"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"}

package/dist/components/sheet.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BYECrxsp.cjs"),x=require("lucide-react"),j=require("./button.js"),c=require("react"),m=require("../utils-DSKoFOjv.cjs"),d=require("framer-motion"),L=require("react-dom");let i=[];function M({isOpen:s,onClose:a,children:y,header:E,footer:f,className:g,enableFullscreen:R=!0,position:l="right",headerClassName:b=""}){const[o,v]=c.useState(!1),n=c.useRef(null);if(c.useEffect(()=>(s?i.push(n):i=i.filter(t=>t!==n),()=>{i=i.filter(t=>t!==n)}),[s]),c.useEffect(()=>{const t=r=>{var p;const z=i.some(h=>h.current&&h.current.contains(r.target)),C=(p=r.target)==null?void 0:p.closest("[data-sheet-close]");!z&&!C&&n.current&&!n.current.contains(r.target)&&a()};return s&&!o&&document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[s,o,a]),c.useEffect(()=>{const t=r=>{r.key==="Escape"&&s&&i[i.length-1]===n&&a()};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[s,a]),!s)return null;const N=t=>{t.stopPropagation(),a()},k=e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col h-full",children:[e.jsxRuntimeExports.jsxs("div",{className:m.cn("flex items-center justify-between py-4 px-4 h-header border-b",b),children:[e.jsxRuntimeExports.jsx("div",{className:"text-sm font-medium",children:E}),e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-1 ml-auto",children:[R&&e.jsxRuntimeExports.jsx(j.Button,{variant:"ghost",size:"icon",className:"h-7 w-7",onClick:t=>{t.stopPropagation(),v(!o)},children:o?e.jsxRuntimeExports.jsx(x.Minimize2,{className:"h-3.5 w-3.5"}):e.jsxRuntimeExports.jsx(x.Maximize2,{className:"h-3.5 w-3.5"})}),e.jsxRuntimeExports.jsx(j.Button,{variant:"ghost",size:"icon",className:"h-7 w-7",onClick:N,"data-sheet-close":"true",children:e.jsxRuntimeExports.jsx(x.X,{className:"h-3.5 w-3.5"})})]})]}),e.jsxRuntimeExports.jsx("div",{className:"flex-1 overflow-auto",children:y}),f&&e.jsxRuntimeExports.jsx("div",{className:"border-t py-2 px-3",children:e.jsxRuntimeExports.jsx("div",{className:"text-sm",children:f})})]}),w=()=>l==="left"?{initial:{x:-100,opacity:0},animate:{x:0,opacity:1},exit:{x:-100,opacity:0}}:l==="bottom"?{initial:{y:100,opacity:0},animate:{y:0,opacity:1},exit:{y:100,opacity:0}}:{initial:{x:100,opacity:0},animate:{x:0,opacity:1},exit:{x:100,opacity:0}},P=()=>o?"inset-4 rounded-lg":l==="left"?"inset-y-0 left-0 border-r":l==="bottom"?"inset-x-0 bottom-0 border-t":"inset-y-0 right-0 border-l",u=w(),q=P(),S=e.jsxRuntimeExports.jsx(d.AnimatePresence,{children:s&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(d.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},onClick:t=>{t.stopPropagation(),a()},className:m.cn("fixed inset-0 z-[100] bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",o?"block":"hidden")}),e.jsxRuntimeExports.jsx(d.motion.div,{ref:n,initial:u.initial,animate:u.animate,exit:u.exit,transition:{duration:.3,ease:[.32,.72,0,1]},className:m.cn("fixed z-[100] bg-background shadow-lg flex flex-col",q,g),children:k})]})});return L.createPortal(S,document.body)}exports.Sheet=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BYECrxsp.cjs"),x=require("lucide-react"),j=require("./button.js"),c=require("react"),d=require("../utils-DSKoFOjv.cjs"),m=require("framer-motion"),L=require("react-dom");let i=[];function M({isOpen:s,onClose:r,children:b,header:y,footer:f,className:E,enableFullscreen:g=!0,position:l="right",headerClassName:R=""}){const[o,v]=c.useState(!1),n=c.useRef(null);if(c.useEffect(()=>(s?i.push(n):i=i.filter(t=>t!==n),()=>{i=i.filter(t=>t!==n)}),[s]),c.useEffect(()=>{const t=a=>{var p;const z=i.some(h=>h.current&&h.current.contains(a.target)),C=(p=a.target)==null?void 0:p.closest("[data-sheet-close]");!z&&!C&&n.current&&!n.current.contains(a.target)&&r()};return s&&!o&&document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[s,o,r]),c.useEffect(()=>{const t=a=>{a.key==="Escape"&&s&&i[i.length-1]===n&&r()};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[s,r]),!s)return null;const N=t=>{t.stopPropagation(),r()},k=e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col h-full",children:[e.jsxRuntimeExports.jsxs("div",{className:d.cn("flex items-center justify-between py-4 px-4 h-header border-b border-border/50",R),children:[e.jsxRuntimeExports.jsx("div",{className:"text-sm font-medium",children:y}),e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-1 ml-auto",children:[g&&e.jsxRuntimeExports.jsx(j.Button,{variant:"ghost",size:"icon",className:"h-7 w-7",onClick:t=>{t.stopPropagation(),v(!o)},children:o?e.jsxRuntimeExports.jsx(x.Minimize2,{className:"h-3.5 w-3.5"}):e.jsxRuntimeExports.jsx(x.Maximize2,{className:"h-3.5 w-3.5"})}),e.jsxRuntimeExports.jsx(j.Button,{variant:"ghost",size:"icon",className:"h-7 w-7",onClick:N,"data-sheet-close":"true",children:e.jsxRuntimeExports.jsx(x.X,{className:"h-3.5 w-3.5"})})]})]}),e.jsxRuntimeExports.jsx("div",{className:"flex-1 overflow-auto",children:b}),f&&e.jsxRuntimeExports.jsx("div",{className:"border-t border-border/50 py-2 px-3",children:e.jsxRuntimeExports.jsx("div",{className:"text-sm",children:f})})]}),w=()=>l==="left"?{initial:{x:-100,opacity:0},animate:{x:0,opacity:1},exit:{x:-100,opacity:0}}:l==="bottom"?{initial:{y:100,opacity:0},animate:{y:0,opacity:1},exit:{y:100,opacity:0}}:{initial:{x:100,opacity:0},animate:{x:0,opacity:1},exit:{x:100,opacity:0}},P=()=>o?"inset-4 rounded-lg":l==="left"?"inset-y-0 left-0 border-r":l==="bottom"?"inset-x-0 bottom-0 border-t":"inset-y-0 right-0 border-l",u=w(),q=P(),S=e.jsxRuntimeExports.jsx(m.AnimatePresence,{children:s&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(m.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},onClick:t=>{t.stopPropagation(),r()},className:d.cn("fixed inset-0 z-[100] bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",o?"block":"hidden")}),e.jsxRuntimeExports.jsx(m.motion.div,{ref:n,initial:u.initial,animate:u.animate,exit:u.exit,transition:{duration:.3,ease:[.32,.72,0,1]},className:d.cn("fixed z-[100] bg-background shadow-lg flex flex-col border-border/50",q,E),children:k})]})});return L.createPortal(S,document.body)}exports.Sheet=M;
 //# sourceMappingURL=sheet.js.map

package/dist/components/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { X, Maximize2, Minimize2 } from \"lucide-react\"\nimport { Button } from \"./button\"\nimport { useState, useRef, useEffect } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { motion, AnimatePresence } from \"framer-motion\"\nimport { createPortal } from \"react-dom\"\n\ninterface SheetProps {\n  isOpen: boolean\n  onClose: () => void\n  children: React.ReactNode\n  header?: React.ReactNode\n  footer?: React.ReactNode\n  className?: string\n  enableFullscreen?: boolean\n  position?: 'left' | 'right' | 'bottom'\n  headerClassName?: string\n}\n\n// Create a global registry of open sheets to prevent closing multiple sheets\nlet openSheetRefs: React.RefObject<HTMLDivElement>[] = [];\n\nexport function Sheet({ \n  isOpen, \n  onClose, \n  children, \n  header, \n  footer, \n  className, \n  enableFullscreen = true,\n  position = 'right',\n  headerClassName = ''\n}: SheetProps) {\n  const [isFullscreen, setIsFullscreen] = useState(false)\n  const sheetRef = useRef<HTMLDivElement>(null)\n\n  // When the sheet opens, add its ref to the registry\n  useEffect(() => {\n    if (isOpen) {\n      openSheetRefs.push(sheetRef);\n    } else {\n      // Remove the ref when sheet closes\n      openSheetRefs = openSheetRefs.filter(ref => ref !== sheetRef);\n    }\n    \n    return () => {\n      // Cleanup when component unmounts\n      openSheetRefs = openSheetRefs.filter(ref => ref !== sheetRef);\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      // If we clicked inside any open sheet, don't close any sheets\n      const clickedInsideAnySheet = openSheetRefs.some(ref => \n        ref.current && ref.current.contains(event.target as Node)\n      );\n\n      // Check if clicked on the close button\n      const isCloseButton = (event.target as Element)?.closest('[data-sheet-close]');\n      \n      // Only close if not clicked inside any sheet and not clicking a close button\n      if (!clickedInsideAnySheet && !isCloseButton && sheetRef.current && !sheetRef.current.contains(event.target as Node)) {\n        onClose();\n      }\n    }\n\n    if (isOpen && !isFullscreen) {\n      document.addEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isOpen, isFullscreen, onClose])\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen) {\n        // Only close the topmost sheet (last one in the registry)\n        if (openSheetRefs[openSheetRefs.length - 1] === sheetRef) {\n          onClose();\n        }\n      }\n    }\n\n    document.addEventListener('keydown', handleEscape)\n    return () => document.removeEventListener('keydown', handleEscape)\n  }, [isOpen, onClose])\n\n  if (!isOpen) return null\n\n  const handleCloseClick = (e: React.MouseEvent) => {\n    e.stopPropagation(); // Prevent event from bubbling to parent sheets\n    onClose();\n  };\n\n  const content = (\n    <div className=\"flex flex-col h-full\">\n      <div className={cn(\n        \"flex items-center justify-between py-4 px-4 h-header border-b\",\n        headerClassName\n      )}>\n        <div className=\"text-sm font-medium\">{header}</div>\n        <div className=\"flex items-center gap-1 ml-auto\">\n          {enableFullscreen && (\n            <Button \n              variant=\"ghost\" \n              size=\"icon\" \n              className=\"h-7 w-7\"\n              onClick={(e) => {\n                e.stopPropagation();\n                setIsFullscreen(!isFullscreen);\n              }}\n            >\n              {isFullscreen ? (\n                <Minimize2 className=\"h-3.5 w-3.5\" />\n              ) : (\n                <Maximize2 className=\"h-3.5 w-3.5\" />\n              )}\n            </Button>\n          )}\n          <Button \n            variant=\"ghost\" \n            size=\"icon\" \n            className=\"h-7 w-7\"\n            onClick={handleCloseClick}\n            data-sheet-close=\"true\"\n          >\n            <X className=\"h-3.5 w-3.5\" />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"flex-1 overflow-auto\">\n        {children}\n      </div>\n\n      {footer && (\n        <div className=\"border-t py-2 px-3\">\n          <div className=\"text-sm\">{footer}</div>\n        </div>\n      )}\n    </div>\n  )\n\n  // Determine animation properties based on position\n  const getAnimationProps = () => {\n    if (position === 'left') {\n      return {\n        initial: { x: -100, opacity: 0 },\n        animate: { x: 0, opacity: 1 },\n        exit: { x: -100, opacity: 0 },\n      }\n    } else if (position === 'bottom') {\n      return {\n        initial: { y: 100, opacity: 0 },\n        animate: { y: 0, opacity: 1 },\n        exit: { y: 100, opacity: 0 },\n      }\n    } else { // right (default)\n      return {\n        initial: { x: 100, opacity: 0 },\n        animate: { x: 0, opacity: 1 },\n        exit: { x: 100, opacity: 0 },\n      }\n    }\n  }\n\n  // Determine position classes based on position\n  const getPositionClasses = () => {\n    if (isFullscreen) {\n      return \"inset-4 rounded-lg\"\n    } else if (position === 'left') {\n      return \"inset-y-0 left-0 border-r\"\n    } else if (position === 'bottom') {\n      return \"inset-x-0 bottom-0 border-t\"\n    } else { // right (default)\n      return \"inset-y-0 right-0 border-l\"\n    }\n  }\n\n  const animationProps = getAnimationProps()\n  const positionClasses = getPositionClasses()\n\n  const sheetContent = (\n    <AnimatePresence>\n      {isOpen && (\n        <>\n          {/* Backdrop */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={(e) => {\n              e.stopPropagation();\n              onClose();\n            }}\n            className={cn(\n              \"fixed inset-0 z-[100] bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n              isFullscreen ? \"block\" : \"hidden\"\n            )}\n          />\n\n          {/* Sheet/Modal */}\n          <motion.div\n            ref={sheetRef}\n            initial={animationProps.initial}\n            animate={animationProps.animate}\n            exit={animationProps.exit}\n            transition={{ \n              duration: 0.3,\n              ease: [0.32, 0.72, 0, 1]\n            }}\n            className={cn(\n              \"fixed z-[100] bg-background shadow-lg flex flex-col\",\n              positionClasses,\n              className\n            )}\n          >\n            {content}\n          </motion.div>\n        </>\n      )}\n    </AnimatePresence>\n  )\n\n  return createPortal(sheetContent, document.body)\n} "],"names":["openSheetRefs","Sheet","isOpen","onClose","children","header","footer","className","enableFullscreen","position","headerClassName","isFullscreen","setIsFullscreen","useState","sheetRef","useRef","useEffect","ref","handleClickOutside","event","clickedInsideAnySheet","isCloseButton","_a","handleEscape","handleCloseClick","e","content","jsxs","cn","jsx","Button","Minimize2","Maximize2","X","getAnimationProps","getPositionClasses","animationProps","positionClasses","sheetContent","AnimatePresence","Fragment","motion","createPortal"],"mappings":"0RAoBA,IAAIA,EAAmD,CAAA,EAEhD,SAASC,EAAM,CACpB,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,OAAAC,EACA,OAAAC,EACA,UAAAC,EACA,iBAAAC,EAAmB,GACnB,SAAAC,EAAW,QACX,gBAAAC,EAAkB,EACpB,EAAe,CACb,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAAA,SAAS,EAAK,EAChDC,EAAWC,EAAAA,OAAuB,IAAI,EAwD5C,GArDAC,EAAAA,UAAU,KACJd,EACFF,EAAc,KAAKc,CAAQ,EAG3Bd,EAAgBA,EAAc,OAAOiB,GAAOA,IAAQH,CAAQ,EAGvD,IAAM,CAEXd,EAAgBA,EAAc,OAAOiB,GAAOA,IAAQH,CAAQ,CAC9D,GACC,CAACZ,CAAM,CAAC,EAEXc,EAAAA,UAAU,IAAM,CACd,MAAME,EAAsBC,GAAsB,OAEhD,MAAMC,EAAwBpB,EAAc,QAC1CiB,EAAI,SAAWA,EAAI,QAAQ,SAASE,EAAM,MAAc,CAAA,EAIpDE,GAAiBC,EAAAH,EAAM,SAAN,YAAAG,EAA0B,QAAQ,sBAGrD,CAACF,GAAyB,CAACC,GAAiBP,EAAS,SAAW,CAACA,EAAS,QAAQ,SAASK,EAAM,MAAc,GACjHhB,EAAA,CAEJ,EAEA,OAAID,GAAU,CAACS,GACb,SAAS,iBAAiB,YAAaO,CAAkB,EAGpD,IAAM,CACX,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAAChB,EAAQS,EAAcR,CAAO,CAAC,EAElCa,EAAAA,UAAU,IAAM,CACd,MAAMO,EAAgBJ,GAAyB,CACzCA,EAAM,MAAQ,UAAYjB,GAExBF,EAAcA,EAAc,OAAS,CAAC,IAAMc,GAC9CX,EAAA,CAGN,EAEA,gBAAS,iBAAiB,UAAWoB,CAAY,EAC1C,IAAM,SAAS,oBAAoB,UAAWA,CAAY,CACnE,EAAG,CAACrB,EAAQC,CAAO,CAAC,EAEhB,CAACD,EAAQ,OAAO,KAEpB,MAAMsB,EAAoBC,GAAwB,CAChDA,EAAE,gBAAA,EACFtB,EAAA,CACF,EAEMuB,EACJC,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,uBACb,SAAA,CAAAA,yBAAC,OAAI,UAAWC,EAAAA,GACd,gEACAlB,CAAA,EAEA,SAAA,CAAAmB,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,sBAAuB,SAAAxB,EAAO,EAC7CsB,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,kCACZ,SAAA,CAAAnB,GACCqB,EAAAA,kBAAAA,IAACC,EAAAA,OAAA,CACC,QAAQ,QACR,KAAK,OACL,UAAU,UACV,QAAUL,GAAM,CACdA,EAAE,gBAAA,EACFb,EAAgB,CAACD,CAAY,CAC/B,EAEC,SAAAA,0BACEoB,EAAAA,UAAA,CAAU,UAAU,cAAc,EAEnCF,EAAAA,kBAAAA,IAACG,EAAAA,UAAA,CAAU,UAAU,aAAA,CAAc,CAAA,CAAA,EAIzCH,EAAAA,kBAAAA,IAACC,EAAAA,OAAA,CACC,QAAQ,QACR,KAAK,OACL,UAAU,UACV,QAASN,EACT,mBAAiB,OAEjB,SAAAK,EAAAA,kBAAAA,IAACI,EAAAA,EAAA,CAAE,UAAU,aAAA,CAAc,CAAA,CAAA,CAC7B,CAAA,CACF,CAAA,EACF,EAEAJ,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,uBACZ,SAAAzB,CAAA,CACH,EAECE,GACCuB,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,qBACb,iCAAC,MAAA,CAAI,UAAU,UAAW,SAAAvB,CAAA,CAAO,CAAA,CACnC,CAAA,EAEJ,EAII4B,EAAoB,IACpBzB,IAAa,OACR,CACL,QAAS,CAAE,EAAG,KAAM,QAAS,CAAA,EAC7B,QAAS,CAAE,EAAG,EAAG,QAAS,CAAA,EAC1B,KAAM,CAAE,EAAG,KAAM,QAAS,CAAA,CAAE,EAErBA,IAAa,SACf,CACL,QAAS,CAAE,EAAG,IAAK,QAAS,CAAA,EAC5B,QAAS,CAAE,EAAG,EAAG,QAAS,CAAA,EAC1B,KAAM,CAAE,EAAG,IAAK,QAAS,CAAA,CAAE,EAGtB,CACL,QAAS,CAAE,EAAG,IAAK,QAAS,CAAA,EAC5B,QAAS,CAAE,EAAG,EAAG,QAAS,CAAA,EAC1B,KAAM,CAAE,EAAG,IAAK,QAAS,CAAA,CAAE,EAM3B0B,EAAqB,IACrBxB,EACK,qBACEF,IAAa,OACf,4BACEA,IAAa,SACf,8BAEA,6BAIL2B,EAAiBF,EAAA,EACjBG,EAAkBF,EAAA,EAElBG,EACJT,wBAACU,EAAAA,gBAAA,CACE,SAAArC,GACCyB,EAAAA,kBAAAA,KAAAa,6BAAA,CAEE,SAAA,CAAAX,EAAAA,kBAAAA,IAACY,EAAAA,OAAO,IAAP,CACC,QAAS,CAAE,QAAS,CAAA,EACpB,QAAS,CAAE,QAAS,CAAA,EACpB,KAAM,CAAE,QAAS,CAAA,EACjB,QAAUhB,GAAM,CACdA,EAAE,gBAAA,EACFtB,EAAA,CACF,EACA,UAAWyB,EAAAA,GACT,kLACAjB,EAAe,QAAU,QAAA,CAC3B,CAAA,EAIFkB,EAAAA,kBAAAA,IAACY,EAAAA,OAAO,IAAP,CACC,IAAK3B,EACL,QAASsB,EAAe,QACxB,QAASA,EAAe,QACxB,KAAMA,EAAe,KACrB,WAAY,CACV,SAAU,GACV,KAAM,CAAC,IAAM,IAAM,EAAG,CAAC,CAAA,EAEzB,UAAWR,EAAAA,GACT,sDACAS,EACA9B,CAAA,EAGD,SAAAmB,CAAA,CAAA,CACH,CAAA,CACF,CAAA,CAEJ,EAGF,OAAOgB,eAAaJ,EAAc,SAAS,IAAI,CACjD"}
+{"version":3,"file":"sheet.js","sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { X, Maximize2, Minimize2 } from \"lucide-react\"\nimport { Button } from \"./button\"\nimport { useState, useRef, useEffect } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { motion, AnimatePresence } from \"framer-motion\"\nimport { createPortal } from \"react-dom\"\n\ninterface SheetProps {\n  isOpen: boolean\n  onClose: () => void\n  children: React.ReactNode\n  header?: React.ReactNode\n  footer?: React.ReactNode\n  className?: string\n  enableFullscreen?: boolean\n  position?: 'left' | 'right' | 'bottom'\n  headerClassName?: string\n}\n\n// Create a global registry of open sheets to prevent closing multiple sheets\nlet openSheetRefs: React.RefObject<HTMLDivElement>[] = [];\n\nexport function Sheet({ \n  isOpen, \n  onClose, \n  children, \n  header, \n  footer, \n  className, \n  enableFullscreen = true,\n  position = 'right',\n  headerClassName = ''\n}: SheetProps) {\n  const [isFullscreen, setIsFullscreen] = useState(false)\n  const sheetRef = useRef<HTMLDivElement>(null)\n\n  // When the sheet opens, add its ref to the registry\n  useEffect(() => {\n    if (isOpen) {\n      openSheetRefs.push(sheetRef);\n    } else {\n      // Remove the ref when sheet closes\n      openSheetRefs = openSheetRefs.filter(ref => ref !== sheetRef);\n    }\n    \n    return () => {\n      // Cleanup when component unmounts\n      openSheetRefs = openSheetRefs.filter(ref => ref !== sheetRef);\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      // If we clicked inside any open sheet, don't close any sheets\n      const clickedInsideAnySheet = openSheetRefs.some(ref => \n        ref.current && ref.current.contains(event.target as Node)\n      );\n\n      // Check if clicked on the close button\n      const isCloseButton = (event.target as Element)?.closest('[data-sheet-close]');\n      \n      // Only close if not clicked inside any sheet and not clicking a close button\n      if (!clickedInsideAnySheet && !isCloseButton && sheetRef.current && !sheetRef.current.contains(event.target as Node)) {\n        onClose();\n      }\n    }\n\n    if (isOpen && !isFullscreen) {\n      document.addEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isOpen, isFullscreen, onClose])\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen) {\n        // Only close the topmost sheet (last one in the registry)\n        if (openSheetRefs[openSheetRefs.length - 1] === sheetRef) {\n          onClose();\n        }\n      }\n    }\n\n    document.addEventListener('keydown', handleEscape)\n    return () => document.removeEventListener('keydown', handleEscape)\n  }, [isOpen, onClose])\n\n  if (!isOpen) return null\n\n  const handleCloseClick = (e: React.MouseEvent) => {\n    e.stopPropagation(); // Prevent event from bubbling to parent sheets\n    onClose();\n  };\n\n  const content = (\n    <div className=\"flex flex-col h-full\">\n      <div className={cn(\n        \"flex items-center justify-between py-4 px-4 h-header border-b border-border/50\",\n        headerClassName\n      )}>\n        <div className=\"text-sm font-medium\">{header}</div>\n        <div className=\"flex items-center gap-1 ml-auto\">\n          {enableFullscreen && (\n            <Button \n              variant=\"ghost\" \n              size=\"icon\" \n              className=\"h-7 w-7\"\n              onClick={(e) => {\n                e.stopPropagation();\n                setIsFullscreen(!isFullscreen);\n              }}\n            >\n              {isFullscreen ? (\n                <Minimize2 className=\"h-3.5 w-3.5\" />\n              ) : (\n                <Maximize2 className=\"h-3.5 w-3.5\" />\n              )}\n            </Button>\n          )}\n          <Button \n            variant=\"ghost\" \n            size=\"icon\" \n            className=\"h-7 w-7\"\n            onClick={handleCloseClick}\n            data-sheet-close=\"true\"\n          >\n            <X className=\"h-3.5 w-3.5\" />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"flex-1 overflow-auto\">\n        {children}\n      </div>\n\n      {footer && (\n        <div className=\"border-t border-border/50 py-2 px-3\">\n          <div className=\"text-sm\">{footer}</div>\n        </div>\n      )}\n    </div>\n  )\n\n  // Determine animation properties based on position\n  const getAnimationProps = () => {\n    if (position === 'left') {\n      return {\n        initial: { x: -100, opacity: 0 },\n        animate: { x: 0, opacity: 1 },\n        exit: { x: -100, opacity: 0 },\n      }\n    } else if (position === 'bottom') {\n      return {\n        initial: { y: 100, opacity: 0 },\n        animate: { y: 0, opacity: 1 },\n        exit: { y: 100, opacity: 0 },\n      }\n    } else { // right (default)\n      return {\n        initial: { x: 100, opacity: 0 },\n        animate: { x: 0, opacity: 1 },\n        exit: { x: 100, opacity: 0 },\n      }\n    }\n  }\n\n  // Determine position classes based on position\n  const getPositionClasses = () => {\n    if (isFullscreen) {\n      return \"inset-4 rounded-lg\"\n    } else if (position === 'left') {\n      return \"inset-y-0 left-0 border-r\"\n    } else if (position === 'bottom') {\n      return \"inset-x-0 bottom-0 border-t\"\n    } else { // right (default)\n      return \"inset-y-0 right-0 border-l\"\n    }\n  }\n\n  const animationProps = getAnimationProps()\n  const positionClasses = getPositionClasses()\n\n  const sheetContent = (\n    <AnimatePresence>\n      {isOpen && (\n        <>\n          {/* Backdrop */}\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={(e) => {\n              e.stopPropagation();\n              onClose();\n            }}\n            className={cn(\n              \"fixed inset-0 z-[100] bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n              isFullscreen ? \"block\" : \"hidden\"\n            )}\n          />\n\n          {/* Sheet/Modal */}\n          <motion.div\n            ref={sheetRef}\n            initial={animationProps.initial}\n            animate={animationProps.animate}\n            exit={animationProps.exit}\n            transition={{ \n              duration: 0.3,\n              ease: [0.32, 0.72, 0, 1]\n            }}\n            className={cn(\n              \"fixed z-[100] bg-background shadow-lg flex flex-col border-border/50\",\n              positionClasses,\n              className\n            )}\n          >\n            {content}\n          </motion.div>\n        </>\n      )}\n    </AnimatePresence>\n  )\n\n  return createPortal(sheetContent, document.body)\n} "],"names":["openSheetRefs","Sheet","isOpen","onClose","children","header","footer","className","enableFullscreen","position","headerClassName","isFullscreen","setIsFullscreen","useState","sheetRef","useRef","useEffect","ref","handleClickOutside","event","clickedInsideAnySheet","isCloseButton","_a","handleEscape","handleCloseClick","e","content","jsxs","cn","jsx","Button","Minimize2","Maximize2","X","getAnimationProps","getPositionClasses","animationProps","positionClasses","sheetContent","AnimatePresence","Fragment","motion","createPortal"],"mappings":"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"}

package/dist/components/table.d.ts

@@ -24,8 +24,8 @@ export interface TableProps<T> {
     };
     isLoading?: boolean;
     loadingRows?: number;
-    tableHeight?: string;
+    tableHeightOffset?: string;
 }
 export declare function Table<T extends {
     id: string;
-}>({ data, columns, showCheckbox, onRowClick, className, selectedItems, onSelect, emptyState, isLoading, loadingRows, tableHeight }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ data, columns, showCheckbox, onRowClick, className, selectedItems, onSelect, emptyState, isLoading, loadingRows, tableHeightOffset }: TableProps<T>): import("react/jsx-runtime").JSX.Element;