@definable/ui 0.1.12 → 0.1.14

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 N, motion as o } from "framer-motion";
-import { X as k } from "lucide-react";
-import { c as i } from "../utils-qaFjX9_3.js";
-import { useCallback as W, useEffect as E } from "react";
-const z = (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,87 +25,112 @@ const z = (t) => {
       return { width: "100%", maxWidth: "448px" };
   }
 };
-function H({
+function B({
   isOpen: t,
-  onClose: d,
-  title: a,
-  description: n,
-  icon: c,
-  children: x,
-  footer: r,
-  size: u = "md",
-  showClose: h = !0,
+  onClose: i,
+  title: s,
+  description: r,
+  icon: d,
+  children: u,
+  footer: a,
+  size: j = "md",
+  showClose: p = !0,
   className: f,
-  isContentScrollable: p = !0,
-  mainClassName: b,
-  contentClassName: j,
+  isContentScrollable: g = !0,
+  mainClassName: w,
+  contentClassName: b,
   header: l,
-  zIndexClassName: g = "z-[50]"
+  headerClassName: v,
+  zIndexClassName: y = "z-[50]",
+  mobileSheet: c
 }) {
-  const m = W((v) => {
-    v.key === "Escape" && t && d();
-  }, [t, d]);
-  E(() => (document.addEventListener("keydown", m), () => document.removeEventListener("keydown", m)), [m]);
-  const s = a || n || c || l, y = /* @__PURE__ */ e.jsx(N, { children: t && /* @__PURE__ */ e.jsx("div", { className: i("fixed inset-0 z-50 overflow-hidden", g), children: /* @__PURE__ */ e.jsxs("div", { className: i("min-h-full flex items-center justify-center p-4", b), 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(
-      o.div,
+      h.div,
       {
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         className: "fixed inset-0 bg-background/80 backdrop-blur-sm",
-        onClick: d
+        onClick: i
       }
     ),
     /* @__PURE__ */ e.jsxs(
-      o.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: i(
+        className: n(
           "relative transform rounded-lg bg-background shadow-xl border border-border/50 flex flex-col max-h-[85vh] overflow-hidden",
           f
         ),
-        style: z(u),
+        style: A(j),
         children: [
-          s && /* @__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: [
+          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: [
-              c && /* @__PURE__ */ e.jsx("div", { className: "h-8 w-8 rounded-lg flex items-center justify-center", children: c }),
+              d && /* @__PURE__ */ e.jsx("div", { className: "h-8 w-8 rounded-lg flex items-center justify-center", children: d }),
               /* @__PURE__ */ e.jsxs("div", { children: [
-                a && /* @__PURE__ */ e.jsx("h2", { className: "text-sm font-small", children: a }),
-                n && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-muted-foreground", children: n })
+                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 })
               ] })
             ] }),
-            h && /* @__PURE__ */ e.jsx(
+            p && /* @__PURE__ */ e.jsx(
               "button",
               {
-                onClick: d,
+                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(k, { 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: i(
+          /* @__PURE__ */ e.jsx("div", { className: n(
             "flex-1 min-h-0",
-            p ? "overflow-y-auto" : "",
-            !r && !s ? "rounded-lg" : "",
-            !r && s ? "rounded-b-lg" : "",
-            r && !s ? "rounded-t-lg" : "",
-            j
-          ), children: x }),
-          r && /* @__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: r })
+            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 {
-  H 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 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","zIndexClassName","handleKeyDown","useCallback","e","useEffect","isHeader","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"),l=require("framer-motion"),w=require("lucide-react"),n=require("../utils-DSKoFOjv.cjs"),u=require("react"),N=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 k({isOpen:t,onClose:r,title:d,description:x,icon:a,children:m,footer:s,size:h="md",showClose:j=!0,className:p,isContentScrollable:f=!0,mainClassName:b,contentClassName:g,header:c,zIndexClassName:y="z-[50]"}){const o=u.useCallback(v=>{v.key==="Escape"&&t&&r()},[t,r]);u.useEffect(()=>(document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)),[o]);const i=d||x||a||c,E=e.jsxRuntimeExports.jsx(l.AnimatePresence,{children:t&&e.jsxRuntimeExports.jsx("div",{className:n.cn("fixed inset-0 z-50 overflow-hidden",y),children:e.jsxRuntimeExports.jsxs("div",{className:n.cn("min-h-full flex items-center justify-center p-4",b),children:[e.jsxRuntimeExports.jsx(l.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},className:"fixed inset-0 bg-background/80 backdrop-blur-sm",onClick:r}),e.jsxRuntimeExports.jsxs(l.motion.div,{initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.1,ease:"easeOut"},className:n.cn("relative transform rounded-lg bg-background shadow-xl border border-border/50 flex flex-col max-h-[85vh] overflow-hidden",p),style:N(h),children:[i&&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:[c||e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-3",children:[a&&e.jsxRuntimeExports.jsx("div",{className:"h-8 w-8 rounded-lg flex items-center justify-center",children:a}),e.jsxRuntimeExports.jsxs("div",{children:[d&&e.jsxRuntimeExports.jsx("h2",{className:"text-sm font-small",children:d}),x&&e.jsxRuntimeExports.jsx("p",{className:"text-sm text-muted-foreground",children:x})]})]}),j&&e.jsxRuntimeExports.jsx("button",{onClick:r,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(w.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:n.cn("flex-1 min-h-0",f?"overflow-y-auto":"",!s&&!i?"rounded-lg":"",!s&&i?"rounded-b-lg":"",s&&!i?"rounded-t-lg":"",g),children:m}),s&&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:s})]})]})})});return R.createPortal(E,document.body)}exports.Modal=k;
+"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 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","zIndexClassName","handleKeyDown","useCallback","e","useEffect","isHeader","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":"yRA8BMA,EAAiBC,GAA6D,CAClF,OAAQA,EAAA,CACN,IAAK,KACH,MAAO,CAAE,MAAO,OAAQ,SAAU,OAAA,EACpC,IAAK,KACH,MAAO,CAAE,MAAO,OAAQ,SAAU,OAAA,EACpC,IAAK,KACH,MAAO,CAAE,MAAO,OAAQ,SAAU,OAAA,EACpC,IAAK,KACH,MAAO,CAAE,MAAO,OAAQ,SAAU,KAAA,EACpC,IAAK,MACH,MAAO,CAAE,MAAO,MAAO,SAAU,QAAA,EACnC,IAAK,MACH,MAAO,CAAE,MAAO,MAAO,SAAU,QAAA,EACnC,IAAK,OACH,MAAO,CAAE,MAAO,MAAA,EAClB,QACE,MAAO,CAAE,MAAO,OAAQ,SAAU,OAAA,CAAQ,CAEhD,EAEO,SAASC,EAAM,CACpB,OAAAC,EACA,QAAAC,EACA,MAAAC,EACA,YAAAC,EACA,KAAAC,EACA,SAAAC,EACA,OAAAC,EACA,KAAAR,EAAO,KACP,UAAAS,EAAY,GACZ,UAAAC,EACA,oBAAAC,EAAsB,GACtB,cAAAC,EACA,iBAAAC,EACA,OAAAC,EACA,gBAAAC,EACA,gBAAAC,EAAkB,SAClB,YAAAC,CACF,EAAe,CAGb,GAAIA,GAAA,MAAAA,EAAa,QAAUf,GAAU,OAAO,WAAa,IAAK,CAC5D,KAAM,CAAE,SAAAgB,GAAaD,EAGfE,EAAcL,IAAWV,GAASC,GAAeC,EACrDc,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,0BACZ,SAAA,CAAAd,GACCe,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,sDACZ,SAAAf,EACH,2BAED,MAAA,CACE,SAAA,CAAAF,GAASiB,EAAAA,kBAAAA,IAAC,KAAA,CAAG,UAAU,sBAAuB,SAAAjB,EAAM,EACpDC,GAAegB,EAAAA,kBAAAA,IAAC,IAAA,CAAE,UAAU,gCAAiC,SAAAhB,CAAA,CAAY,CAAA,CAAA,CAC5E,CAAA,CAAA,CACF,EACE,QAEEiB,EACJD,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,yBACZ,SAAAb,EACH,EAGF,OACEa,EAAAA,kBAAAA,IAACE,EAAAA,MAAA,CACC,OAAArB,EACA,QAAAC,EACA,OAAQgB,EACR,OAAQG,EACR,UAAWE,EAAAA,GAAGd,EAAW,mBAAmB,EAC5C,SAAUQ,GAAY,SACtB,gBAAiBM,EAAAA,GAAGT,EAAiB,mBAAmB,EACxD,iBAAkB,GAEjB,SAAAR,CAAA,CAAA,CAGP,CAEA,MAAMkB,EAAgBC,cAAaC,GAAqB,CAClDA,EAAE,MAAQ,UAAYzB,GACxBC,EAAA,CAEJ,EAAG,CAACD,EAAQC,CAAO,CAAC,EAEpByB,EAAAA,UAAU,KACR,SAAS,iBAAiB,UAAWH,CAAa,EAC3C,IAAM,SAAS,oBAAoB,UAAWA,CAAa,GACjE,CAACA,CAAa,CAAC,EAElB,MAAMI,EAAWzB,GAASC,GAAeC,GAAQQ,EAC3CgB,EACJT,wBAACU,EAAAA,gBAAA,CACE,SAAA7B,GACCmB,wBAAC,OAAI,UAAWG,EAAAA,GAAG,qCAAsCR,CAAe,EACtE,SAAAI,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAWI,EAAAA,GAAG,kDAAmDZ,CAAa,EACjF,SAAA,CAAAS,EAAAA,kBAAAA,IAACW,EAAAA,OAAO,IAAP,CACC,QAAS,CAAE,QAAS,CAAA,EACpB,QAAS,CAAE,QAAS,CAAA,EACpB,KAAM,CAAE,QAAS,CAAA,EACjB,UAAU,kDACV,QAAS7B,CAAA,CAAA,EAGXiB,EAAAA,kBAAAA,KAACY,EAAAA,OAAO,IAAP,CACC,QAAS,CAAE,QAAS,EAAG,MAAO,GAAA,EAC9B,QAAS,CAAE,QAAS,EAAG,MAAO,CAAA,EAC9B,KAAM,CAAE,QAAS,EAAG,MAAO,GAAA,EAC3B,WAAY,CAAE,SAAU,GAAK,KAAM,SAAA,EACnC,UAAWR,EAAAA,GACT,2HACAd,CAAA,EAEF,MAAOX,EAAcC,CAAI,EAGxB,SAAA,CAAA6B,GACCT,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,qGAEZ,SAAA,CAAAN,GACCM,yBAAC,MAAA,CAAI,UAAU,0BACZ,SAAA,CAAAd,GACCe,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,sDACZ,SAAAf,EACH,2BAED,MAAA,CACE,SAAA,CAAAF,GAASiB,EAAAA,kBAAAA,IAAC,KAAA,CAAG,UAAU,qBAAsB,SAAAjB,EAAM,EACnDC,GAAegB,EAAAA,kBAAAA,IAAC,IAAA,CAAE,UAAU,gCAAiC,SAAAhB,CAAA,CAAY,CAAA,CAAA,CAC5E,CAAA,EACF,EAEDI,GACCY,EAAAA,kBAAAA,IAAC,SAAA,CACC,QAASlB,EACT,UAAU,wDAEV,SAAAiB,EAAAA,kBAAAA,KAAC,MAAA,CAAI,UAAU,mCACb,SAAA,CAAAC,EAAAA,kBAAAA,IAACY,EAAAA,EAAA,CAAE,UAAU,SAAA,CAAU,EACvBZ,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,wEAAwE,SAAA,KAAA,CAEvF,CAAA,CAAA,CACF,CAAA,CAAA,CACF,EAEJ,EAIFA,wBAAC,OAAI,UAAWG,EAAAA,GACd,iBACAb,EAAsB,kBAAoB,GAC1C,CAACH,GAAU,CAACqB,EAAW,aAAe,GACtC,CAACrB,GAAUqB,EAAW,eAAiB,GACvCrB,GAAU,CAACqB,EAAW,eAAiB,GACvChB,CAAA,EAEC,SAAAN,CAAA,CACH,EAGCC,GACCa,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,6GACZ,SAAAb,CAAA,CACH,CAAA,CAAA,CAAA,CAEJ,CAAA,CACF,EACF,EAEJ,EAGF,OAAO0B,eAAaJ,EAAS,SAAS,IAAI,CAC5C"}

package/dist/components/table-mobile.esm.js

@@ -18,7 +18,7 @@ function T({
   return p ? /* @__PURE__ */ r.jsx("div", { className: "space-y-4", children: Array(c).fill(0).map((s, i) => /* @__PURE__ */ r.jsxs(
     "div",
     {
-      className: "border border-border/40 rounded-xl p-4 space-y-4 shadow-sm bg-card/30 animate-pulse",
+      className: "border border-border/50 rounded-xl p-4 space-y-4 shadow-sm bg-card/30 animate-pulse",
       children: [
         /* @__PURE__ */ r.jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ r.jsx("div", { className: "h-5 bg-muted/70 rounded-md w-2/5" }),

package/dist/components/table-mobile.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-mobile.esm.js","sources":["../../src/components/table-mobile.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\"\nimport { Checkbox } from \"./checkbox\"\nimport { Tooltip } from \"./tooltip\"\nimport { useState } from \"react\"\nimport { Column, TableProps } from \"./table\"\nimport { ChevronRight } from \"lucide-react\"\n\nexport function TableMobile<T extends { id: string }>({\n  data,\n  columns,\n  showCheckbox = true,\n  onRowClick,\n  selectedItems,\n  onSelect,\n  isLoading = false,\n  loadingRows = 3\n}: TableProps<T>) {\n  const [hoveredText, setHoveredText] = useState<string | null>(null);\n\n  // Loading skeleton component for mobile\n  if (isLoading) {\n    return (\n      <div className=\"space-y-4\">\n        {Array(loadingRows).fill(0).map((_, index) => (\n          <div \n            key={`skeleton-${index}`} \n            className=\"border border-border/40 rounded-xl p-4 space-y-4 shadow-sm bg-card/30 animate-pulse\"\n          >\n            <div className=\"flex items-center justify-between\">\n              <div className=\"h-5 bg-muted/70 rounded-md w-2/5\" />\n              {showCheckbox && (\n                <div className=\"h-4 w-4 rounded-md bg-muted/50\" />\n              )}\n            </div>\n            <div className=\"space-y-3 pt-2\">\n              {columns.slice(0, 4).map((column, colIndex) => (\n                <div key={`skeleton-col-${column.id}`} className=\"flex items-start gap-3\">\n                  <div className=\"h-4 bg-muted/40 rounded-md w-1/4\" />\n                  <div className=\"h-4 bg-muted/60 rounded-md\" style={{ width: Math.random() * 50 + 30 + '%' }} />\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  if (data.length === 0) {\n    return null; // Empty state is handled by the main Table component\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      {data.map((item, index) => (\n        <div\n          key={item.id}\n          className={cn(\n            \"border border-border/40 rounded-xl overflow-hidden bg-card/30 shadow-sm transition-all duration-200\",\n            onRowClick && \"cursor-pointer hover:border-primary/30 hover:shadow-md hover:bg-card/50\"\n          )}\n          onClick={() => onRowClick?.(item)}\n        >\n          <div className=\"flex items-center justify-between p-4 border-b border-border/30 bg-muted/5\">\n            <div className=\"font-medium\">\n              {/* Display a primary identifier */}\n              {columns[0].cell(item) || `Item ${index + 1}`}\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {showCheckbox && (\n                <Checkbox\n                  checked={selectedItems?.has(item.id)}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onSelect?.(item.id, !selectedItems?.has(item.id));\n                  }}\n                  className=\"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\"\n                />\n              )}\n              {onRowClick && (\n                <ChevronRight className=\"h-4 w-4 text-muted-foreground/50\" />\n              )}\n            </div>\n          </div>\n          \n          <div className=\"px-4 py-3 space-y-3\">\n            {columns.slice(1).map((column) => (\n              <div\n                key={column.id}\n                className=\"flex items-start gap-3 text-sm group\"\n                onMouseEnter={() => column.tooltipValue && setHoveredText(`${index}-${column.id}`)}\n                onMouseLeave={() => setHoveredText(null)}\n              >\n                <div className=\"font-medium text-muted-foreground w-1/3 min-w-[80px] text-xs uppercase tracking-wide pt-0.5\">\n                  {column.header}\n                </div>\n                <div className={cn(\n                  \"flex-1 min-w-0 text-foreground/90 group-hover:text-foreground transition-colors\",\n                  column.truncate && \"truncate\"\n                )}>\n                  {column.cell(item)}\n                </div>\n                {column.tooltipValue && hoveredText === `${index}-${column.id}` && (\n                  <Tooltip\n                    content={column.tooltipValue(item)}\n                    side=\"bottom\"\n                    align=\"start\"\n                    isVisible={true}\n                  />\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n} "],"names":["TableMobile","data","columns","showCheckbox","onRowClick","selectedItems","onSelect","isLoading","loadingRows","hoveredText","setHoveredText","useState","jsx","_","index","jsxs","column","colIndex","item","cn","Checkbox","ChevronRight","Tooltip"],"mappings":"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"}
+{"version":3,"file":"table-mobile.esm.js","sources":["../../src/components/table-mobile.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\"\nimport { Checkbox } from \"./checkbox\"\nimport { Tooltip } from \"./tooltip\"\nimport { useState } from \"react\"\nimport { Column, TableProps } from \"./table\"\nimport { ChevronRight } from \"lucide-react\"\n\nexport function TableMobile<T extends { id: string }>({\n  data,\n  columns,\n  showCheckbox = true,\n  onRowClick,\n  selectedItems,\n  onSelect,\n  isLoading = false,\n  loadingRows = 3\n}: TableProps<T>) {\n  const [hoveredText, setHoveredText] = useState<string | null>(null);\n\n  // Loading skeleton component for mobile\n  if (isLoading) {\n    return (\n      <div className=\"space-y-4\">\n        {Array(loadingRows).fill(0).map((_, index) => (\n          <div \n            key={`skeleton-${index}`} \n            className=\"border border-border/50 rounded-xl p-4 space-y-4 shadow-sm bg-card/30 animate-pulse\"\n          >\n            <div className=\"flex items-center justify-between\">\n              <div className=\"h-5 bg-muted/70 rounded-md w-2/5\" />\n              {showCheckbox && (\n                <div className=\"h-4 w-4 rounded-md bg-muted/50\" />\n              )}\n            </div>\n            <div className=\"space-y-3 pt-2\">\n              {columns.slice(0, 4).map((column, colIndex) => (\n                <div key={`skeleton-col-${column.id}`} className=\"flex items-start gap-3\">\n                  <div className=\"h-4 bg-muted/40 rounded-md w-1/4\" />\n                  <div className=\"h-4 bg-muted/60 rounded-md\" style={{ width: Math.random() * 50 + 30 + '%' }} />\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  if (data.length === 0) {\n    return null; // Empty state is handled by the main Table component\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      {data.map((item, index) => (\n        <div\n          key={item.id}\n          className={cn(\n            \"border border-border/40 rounded-xl overflow-hidden bg-card/30 shadow-sm transition-all duration-200\",\n            onRowClick && \"cursor-pointer hover:border-primary/30 hover:shadow-md hover:bg-card/50\"\n          )}\n          onClick={() => onRowClick?.(item)}\n        >\n          <div className=\"flex items-center justify-between p-4 border-b border-border/30 bg-muted/5\">\n            <div className=\"font-medium\">\n              {/* Display a primary identifier */}\n              {columns[0].cell(item) || `Item ${index + 1}`}\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {showCheckbox && (\n                <Checkbox\n                  checked={selectedItems?.has(item.id)}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onSelect?.(item.id, !selectedItems?.has(item.id));\n                  }}\n                  className=\"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\"\n                />\n              )}\n              {onRowClick && (\n                <ChevronRight className=\"h-4 w-4 text-muted-foreground/50\" />\n              )}\n            </div>\n          </div>\n          \n          <div className=\"px-4 py-3 space-y-3\">\n            {columns.slice(1).map((column) => (\n              <div\n                key={column.id}\n                className=\"flex items-start gap-3 text-sm group\"\n                onMouseEnter={() => column.tooltipValue && setHoveredText(`${index}-${column.id}`)}\n                onMouseLeave={() => setHoveredText(null)}\n              >\n                <div className=\"font-medium text-muted-foreground w-1/3 min-w-[80px] text-xs uppercase tracking-wide pt-0.5\">\n                  {column.header}\n                </div>\n                <div className={cn(\n                  \"flex-1 min-w-0 text-foreground/90 group-hover:text-foreground transition-colors\",\n                  column.truncate && \"truncate\"\n                )}>\n                  {column.cell(item)}\n                </div>\n                {column.tooltipValue && hoveredText === `${index}-${column.id}` && (\n                  <Tooltip\n                    content={column.tooltipValue(item)}\n                    side=\"bottom\"\n                    align=\"start\"\n                    isVisible={true}\n                  />\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n} "],"names":["TableMobile","data","columns","showCheckbox","onRowClick","selectedItems","onSelect","isLoading","loadingRows","hoveredText","setHoveredText","useState","jsx","_","index","jsxs","column","colIndex","item","cn","Checkbox","ChevronRight","Tooltip"],"mappings":"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"}

package/dist/components/table-mobile.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BYECrxsp.cjs"),l=require("../utils-DSKoFOjv.cjs"),j=require("./checkbox.js"),h=require("./tooltip.js"),b=require("react"),v=require("lucide-react");function g({data:x,columns:d,showCheckbox:n=!0,onRowClick:i,selectedItems:t,onSelect:o,isLoading:p=!1,loadingRows:c=3}){const[m,u]=b.useState(null);return p?e.jsxRuntimeExports.jsx("div",{className:"space-y-4",children:Array(c).fill(0).map((r,a)=>e.jsxRuntimeExports.jsxs("div",{className:"border border-border/40 rounded-xl p-4 space-y-4 shadow-sm bg-card/30 animate-pulse",children:[e.jsxRuntimeExports.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxRuntimeExports.jsx("div",{className:"h-5 bg-muted/70 rounded-md w-2/5"}),n&&e.jsxRuntimeExports.jsx("div",{className:"h-4 w-4 rounded-md bg-muted/50"})]}),e.jsxRuntimeExports.jsx("div",{className:"space-y-3 pt-2",children:d.slice(0,4).map((s,f)=>e.jsxRuntimeExports.jsxs("div",{className:"flex items-start gap-3",children:[e.jsxRuntimeExports.jsx("div",{className:"h-4 bg-muted/40 rounded-md w-1/4"}),e.jsxRuntimeExports.jsx("div",{className:"h-4 bg-muted/60 rounded-md",style:{width:Math.random()*50+30+"%"}})]},`skeleton-col-${s.id}`))})]},`skeleton-${a}`))}):x.length===0?null:e.jsxRuntimeExports.jsx("div",{className:"space-y-4",children:x.map((r,a)=>e.jsxRuntimeExports.jsxs("div",{className:l.cn("border border-border/40 rounded-xl overflow-hidden bg-card/30 shadow-sm transition-all duration-200",i&&"cursor-pointer hover:border-primary/30 hover:shadow-md hover:bg-card/50"),onClick:()=>i==null?void 0:i(r),children:[e.jsxRuntimeExports.jsxs("div",{className:"flex items-center justify-between p-4 border-b border-border/30 bg-muted/5",children:[e.jsxRuntimeExports.jsx("div",{className:"font-medium",children:d[0].cell(r)||`Item ${a+1}`}),e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-2",children:[n&&e.jsxRuntimeExports.jsx(j.Checkbox,{checked:t==null?void 0:t.has(r.id),onClick:s=>{s.stopPropagation(),o==null||o(r.id,!(t!=null&&t.has(r.id)))},className:"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"}),i&&e.jsxRuntimeExports.jsx(v.ChevronRight,{className:"h-4 w-4 text-muted-foreground/50"})]})]}),e.jsxRuntimeExports.jsx("div",{className:"px-4 py-3 space-y-3",children:d.slice(1).map(s=>e.jsxRuntimeExports.jsxs("div",{className:"flex items-start gap-3 text-sm group",onMouseEnter:()=>s.tooltipValue&&u(`${a}-${s.id}`),onMouseLeave:()=>u(null),children:[e.jsxRuntimeExports.jsx("div",{className:"font-medium text-muted-foreground w-1/3 min-w-[80px] text-xs uppercase tracking-wide pt-0.5",children:s.header}),e.jsxRuntimeExports.jsx("div",{className:l.cn("flex-1 min-w-0 text-foreground/90 group-hover:text-foreground transition-colors",s.truncate&&"truncate"),children:s.cell(r)}),s.tooltipValue&&m===`${a}-${s.id}`&&e.jsxRuntimeExports.jsx(h.Tooltip,{content:s.tooltipValue(r),side:"bottom",align:"start",isVisible:!0})]},s.id))})]},r.id))})}exports.TableMobile=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BYECrxsp.cjs"),l=require("../utils-DSKoFOjv.cjs"),j=require("./checkbox.js"),h=require("./tooltip.js"),b=require("react"),v=require("lucide-react");function g({data:x,columns:d,showCheckbox:n=!0,onRowClick:i,selectedItems:t,onSelect:o,isLoading:p=!1,loadingRows:c=3}){const[m,u]=b.useState(null);return p?e.jsxRuntimeExports.jsx("div",{className:"space-y-4",children:Array(c).fill(0).map((r,a)=>e.jsxRuntimeExports.jsxs("div",{className:"border border-border/50 rounded-xl p-4 space-y-4 shadow-sm bg-card/30 animate-pulse",children:[e.jsxRuntimeExports.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxRuntimeExports.jsx("div",{className:"h-5 bg-muted/70 rounded-md w-2/5"}),n&&e.jsxRuntimeExports.jsx("div",{className:"h-4 w-4 rounded-md bg-muted/50"})]}),e.jsxRuntimeExports.jsx("div",{className:"space-y-3 pt-2",children:d.slice(0,4).map((s,f)=>e.jsxRuntimeExports.jsxs("div",{className:"flex items-start gap-3",children:[e.jsxRuntimeExports.jsx("div",{className:"h-4 bg-muted/40 rounded-md w-1/4"}),e.jsxRuntimeExports.jsx("div",{className:"h-4 bg-muted/60 rounded-md",style:{width:Math.random()*50+30+"%"}})]},`skeleton-col-${s.id}`))})]},`skeleton-${a}`))}):x.length===0?null:e.jsxRuntimeExports.jsx("div",{className:"space-y-4",children:x.map((r,a)=>e.jsxRuntimeExports.jsxs("div",{className:l.cn("border border-border/40 rounded-xl overflow-hidden bg-card/30 shadow-sm transition-all duration-200",i&&"cursor-pointer hover:border-primary/30 hover:shadow-md hover:bg-card/50"),onClick:()=>i==null?void 0:i(r),children:[e.jsxRuntimeExports.jsxs("div",{className:"flex items-center justify-between p-4 border-b border-border/30 bg-muted/5",children:[e.jsxRuntimeExports.jsx("div",{className:"font-medium",children:d[0].cell(r)||`Item ${a+1}`}),e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-2",children:[n&&e.jsxRuntimeExports.jsx(j.Checkbox,{checked:t==null?void 0:t.has(r.id),onClick:s=>{s.stopPropagation(),o==null||o(r.id,!(t!=null&&t.has(r.id)))},className:"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"}),i&&e.jsxRuntimeExports.jsx(v.ChevronRight,{className:"h-4 w-4 text-muted-foreground/50"})]})]}),e.jsxRuntimeExports.jsx("div",{className:"px-4 py-3 space-y-3",children:d.slice(1).map(s=>e.jsxRuntimeExports.jsxs("div",{className:"flex items-start gap-3 text-sm group",onMouseEnter:()=>s.tooltipValue&&u(`${a}-${s.id}`),onMouseLeave:()=>u(null),children:[e.jsxRuntimeExports.jsx("div",{className:"font-medium text-muted-foreground w-1/3 min-w-[80px] text-xs uppercase tracking-wide pt-0.5",children:s.header}),e.jsxRuntimeExports.jsx("div",{className:l.cn("flex-1 min-w-0 text-foreground/90 group-hover:text-foreground transition-colors",s.truncate&&"truncate"),children:s.cell(r)}),s.tooltipValue&&m===`${a}-${s.id}`&&e.jsxRuntimeExports.jsx(h.Tooltip,{content:s.tooltipValue(r),side:"bottom",align:"start",isVisible:!0})]},s.id))})]},r.id))})}exports.TableMobile=g;
 //# sourceMappingURL=table-mobile.js.map

package/dist/components/table-mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-mobile.js","sources":["../../src/components/table-mobile.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\"\nimport { Checkbox } from \"./checkbox\"\nimport { Tooltip } from \"./tooltip\"\nimport { useState } from \"react\"\nimport { Column, TableProps } from \"./table\"\nimport { ChevronRight } from \"lucide-react\"\n\nexport function TableMobile<T extends { id: string }>({\n  data,\n  columns,\n  showCheckbox = true,\n  onRowClick,\n  selectedItems,\n  onSelect,\n  isLoading = false,\n  loadingRows = 3\n}: TableProps<T>) {\n  const [hoveredText, setHoveredText] = useState<string | null>(null);\n\n  // Loading skeleton component for mobile\n  if (isLoading) {\n    return (\n      <div className=\"space-y-4\">\n        {Array(loadingRows).fill(0).map((_, index) => (\n          <div \n            key={`skeleton-${index}`} \n            className=\"border border-border/40 rounded-xl p-4 space-y-4 shadow-sm bg-card/30 animate-pulse\"\n          >\n            <div className=\"flex items-center justify-between\">\n              <div className=\"h-5 bg-muted/70 rounded-md w-2/5\" />\n              {showCheckbox && (\n                <div className=\"h-4 w-4 rounded-md bg-muted/50\" />\n              )}\n            </div>\n            <div className=\"space-y-3 pt-2\">\n              {columns.slice(0, 4).map((column, colIndex) => (\n                <div key={`skeleton-col-${column.id}`} className=\"flex items-start gap-3\">\n                  <div className=\"h-4 bg-muted/40 rounded-md w-1/4\" />\n                  <div className=\"h-4 bg-muted/60 rounded-md\" style={{ width: Math.random() * 50 + 30 + '%' }} />\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  if (data.length === 0) {\n    return null; // Empty state is handled by the main Table component\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      {data.map((item, index) => (\n        <div\n          key={item.id}\n          className={cn(\n            \"border border-border/40 rounded-xl overflow-hidden bg-card/30 shadow-sm transition-all duration-200\",\n            onRowClick && \"cursor-pointer hover:border-primary/30 hover:shadow-md hover:bg-card/50\"\n          )}\n          onClick={() => onRowClick?.(item)}\n        >\n          <div className=\"flex items-center justify-between p-4 border-b border-border/30 bg-muted/5\">\n            <div className=\"font-medium\">\n              {/* Display a primary identifier */}\n              {columns[0].cell(item) || `Item ${index + 1}`}\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {showCheckbox && (\n                <Checkbox\n                  checked={selectedItems?.has(item.id)}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onSelect?.(item.id, !selectedItems?.has(item.id));\n                  }}\n                  className=\"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\"\n                />\n              )}\n              {onRowClick && (\n                <ChevronRight className=\"h-4 w-4 text-muted-foreground/50\" />\n              )}\n            </div>\n          </div>\n          \n          <div className=\"px-4 py-3 space-y-3\">\n            {columns.slice(1).map((column) => (\n              <div\n                key={column.id}\n                className=\"flex items-start gap-3 text-sm group\"\n                onMouseEnter={() => column.tooltipValue && setHoveredText(`${index}-${column.id}`)}\n                onMouseLeave={() => setHoveredText(null)}\n              >\n                <div className=\"font-medium text-muted-foreground w-1/3 min-w-[80px] text-xs uppercase tracking-wide pt-0.5\">\n                  {column.header}\n                </div>\n                <div className={cn(\n                  \"flex-1 min-w-0 text-foreground/90 group-hover:text-foreground transition-colors\",\n                  column.truncate && \"truncate\"\n                )}>\n                  {column.cell(item)}\n                </div>\n                {column.tooltipValue && hoveredText === `${index}-${column.id}` && (\n                  <Tooltip\n                    content={column.tooltipValue(item)}\n                    side=\"bottom\"\n                    align=\"start\"\n                    isVisible={true}\n                  />\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n} "],"names":["TableMobile","data","columns","showCheckbox","onRowClick","selectedItems","onSelect","isLoading","loadingRows","hoveredText","setHoveredText","useState","jsx","_","index","jsxs","column","colIndex","item","cn","Checkbox","e","ChevronRight","Tooltip"],"mappings":"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"}
+{"version":3,"file":"table-mobile.js","sources":["../../src/components/table-mobile.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\"\nimport { Checkbox } from \"./checkbox\"\nimport { Tooltip } from \"./tooltip\"\nimport { useState } from \"react\"\nimport { Column, TableProps } from \"./table\"\nimport { ChevronRight } from \"lucide-react\"\n\nexport function TableMobile<T extends { id: string }>({\n  data,\n  columns,\n  showCheckbox = true,\n  onRowClick,\n  selectedItems,\n  onSelect,\n  isLoading = false,\n  loadingRows = 3\n}: TableProps<T>) {\n  const [hoveredText, setHoveredText] = useState<string | null>(null);\n\n  // Loading skeleton component for mobile\n  if (isLoading) {\n    return (\n      <div className=\"space-y-4\">\n        {Array(loadingRows).fill(0).map((_, index) => (\n          <div \n            key={`skeleton-${index}`} \n            className=\"border border-border/50 rounded-xl p-4 space-y-4 shadow-sm bg-card/30 animate-pulse\"\n          >\n            <div className=\"flex items-center justify-between\">\n              <div className=\"h-5 bg-muted/70 rounded-md w-2/5\" />\n              {showCheckbox && (\n                <div className=\"h-4 w-4 rounded-md bg-muted/50\" />\n              )}\n            </div>\n            <div className=\"space-y-3 pt-2\">\n              {columns.slice(0, 4).map((column, colIndex) => (\n                <div key={`skeleton-col-${column.id}`} className=\"flex items-start gap-3\">\n                  <div className=\"h-4 bg-muted/40 rounded-md w-1/4\" />\n                  <div className=\"h-4 bg-muted/60 rounded-md\" style={{ width: Math.random() * 50 + 30 + '%' }} />\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  if (data.length === 0) {\n    return null; // Empty state is handled by the main Table component\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      {data.map((item, index) => (\n        <div\n          key={item.id}\n          className={cn(\n            \"border border-border/40 rounded-xl overflow-hidden bg-card/30 shadow-sm transition-all duration-200\",\n            onRowClick && \"cursor-pointer hover:border-primary/30 hover:shadow-md hover:bg-card/50\"\n          )}\n          onClick={() => onRowClick?.(item)}\n        >\n          <div className=\"flex items-center justify-between p-4 border-b border-border/30 bg-muted/5\">\n            <div className=\"font-medium\">\n              {/* Display a primary identifier */}\n              {columns[0].cell(item) || `Item ${index + 1}`}\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {showCheckbox && (\n                <Checkbox\n                  checked={selectedItems?.has(item.id)}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onSelect?.(item.id, !selectedItems?.has(item.id));\n                  }}\n                  className=\"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\"\n                />\n              )}\n              {onRowClick && (\n                <ChevronRight className=\"h-4 w-4 text-muted-foreground/50\" />\n              )}\n            </div>\n          </div>\n          \n          <div className=\"px-4 py-3 space-y-3\">\n            {columns.slice(1).map((column) => (\n              <div\n                key={column.id}\n                className=\"flex items-start gap-3 text-sm group\"\n                onMouseEnter={() => column.tooltipValue && setHoveredText(`${index}-${column.id}`)}\n                onMouseLeave={() => setHoveredText(null)}\n              >\n                <div className=\"font-medium text-muted-foreground w-1/3 min-w-[80px] text-xs uppercase tracking-wide pt-0.5\">\n                  {column.header}\n                </div>\n                <div className={cn(\n                  \"flex-1 min-w-0 text-foreground/90 group-hover:text-foreground transition-colors\",\n                  column.truncate && \"truncate\"\n                )}>\n                  {column.cell(item)}\n                </div>\n                {column.tooltipValue && hoveredText === `${index}-${column.id}` && (\n                  <Tooltip\n                    content={column.tooltipValue(item)}\n                    side=\"bottom\"\n                    align=\"start\"\n                    isVisible={true}\n                  />\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n} "],"names":["TableMobile","data","columns","showCheckbox","onRowClick","selectedItems","onSelect","isLoading","loadingRows","hoveredText","setHoveredText","useState","jsx","_","index","jsxs","column","colIndex","item","cn","Checkbox","e","ChevronRight","Tooltip"],"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;