@definable/ui 0.1.12 → 0.1.13

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":"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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;

package/dist/components/table.esm.js

@@ -1,57 +1,64 @@
 import { j as r } from "../jsx-runtime-DGlMoOmv.js";
 import { c as s } from "../utils-qaFjX9_3.js";
-import { Checkbox as j } from "./checkbox.esm.js";
-import { Tooltip as y } from "./tooltip.esm.js";
-import { useState as T } from "react";
-import { TableEmpty as $ } from "./table-empty.esm.js";
-const h = ({ children: d, className: t }) => /* @__PURE__ */ r.jsx("div", { className: s("border border-border/50 rounded-lg overflow-hidden bg-background shadow-sm", t), children: d });
-function P({
+import { Checkbox as u } from "./checkbox.esm.js";
+import { Tooltip as T } from "./tooltip.esm.js";
+import { useState as $ } from "react";
+import { TableEmpty as k } from "./table-empty.esm.js";
+const c = ({ children: d, className: t }) => /* @__PURE__ */ r.jsx("div", { className: s("border border-border/50 rounded-lg overflow-hidden bg-background shadow-sm", t), children: d });
+function B({
   data: d,
   columns: t,
   showCheckbox: o = !0,
   onRowClick: p,
-  className: v,
+  className: h,
   selectedItems: a,
   onSelect: l,
-  emptyState: u,
-  isLoading: f = !1,
-  loadingRows: g = 5,
-  tableHeight: m
+  emptyState: f,
+  isLoading: g = !1,
+  loadingRows: b = 5,
+  tableHeightOffset: v
 }) {
-  const [b, c] = T(null), x = [
+  const [N, m] = $(null), j = { height: v ? `calc(100vh - ${v})` : "calc(100vh - 8rem)" }, x = [
     o ? "40px" : null,
     ...t.map((i) => i.width || "1fr")
-  ].filter(Boolean).join(" "), N = () => /* @__PURE__ */ r.jsx("div", { className: s("divide-y divide-border/30 overflow-y-auto", `h-[calc(100vh-${m})]`), children: Array(g).fill(0).map((i, n) => /* @__PURE__ */ r.jsxs(
+  ].filter(Boolean).join(" "), y = () => /* @__PURE__ */ r.jsx(
     "div",
     {
-      className: "grid items-center px-6 py-4 text-sm",
-      style: { gridTemplateColumns: x },
-      children: [
-        o && /* @__PURE__ */ r.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r.jsx("div", { className: "h-4 w-4 rounded bg-muted animate-pulse" }) }),
-        t.map((e) => /* @__PURE__ */ r.jsx(
-          "div",
-          {
-            className: s("px-2 relative min-w-0", e.className),
-            children: /* @__PURE__ */ r.jsx(
+      className: s("divide-y divide-border/50 overflow-y-auto"),
+      style: j,
+      children: Array(b).fill(0).map((i, n) => /* @__PURE__ */ r.jsxs(
+        "div",
+        {
+          className: "grid items-center px-6 py-4 text-sm",
+          style: { gridTemplateColumns: x },
+          children: [
+            o && /* @__PURE__ */ r.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r.jsx("div", { className: "h-4 w-4 rounded bg-muted animate-pulse" }) }),
+            t.map((e) => /* @__PURE__ */ r.jsx(
               "div",
               {
-                className: "h-4 bg-muted rounded animate-pulse",
-                style: { width: Math.random() * 40 + 40 + "%" }
-              }
-            )
-          },
-          `skeleton-col-${e.id}`
-        ))
-      ]
-    },
-    `skeleton-${n}`
-  )) });
-  return f ? /* @__PURE__ */ r.jsx(h, { className: v, children: /* @__PURE__ */ r.jsxs("div", { className: "relative", children: [
+                className: s("px-2 relative min-w-0", e.className),
+                children: /* @__PURE__ */ r.jsx(
+                  "div",
+                  {
+                    className: "h-4 bg-muted rounded animate-pulse",
+                    style: { width: Math.random() * 40 + 40 + "%" }
+                  }
+                )
+              },
+              `skeleton-col-${e.id}`
+            ))
+          ]
+        },
+        `skeleton-${n}`
+      ))
+    }
+  );
+  return g ? /* @__PURE__ */ r.jsx(c, { className: h, children: /* @__PURE__ */ r.jsxs("div", { className: "relative bg-card", children: [
     /* @__PURE__ */ r.jsxs(
       "div",
       {
         className: s(
-          "grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/30 sticky top-0 z-10"
+          "grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/50 sticky top-0 z-10"
         ),
         style: { gridTemplateColumns: x },
         children: [
@@ -60,18 +67,18 @@ function P({
         ]
       }
     ),
-    /* @__PURE__ */ r.jsx(N, {})
-  ] }) }) : d.length === 0 ? /* @__PURE__ */ r.jsx(h, { className: v, children: /* @__PURE__ */ r.jsx("div", { className: "relative", children: /* @__PURE__ */ r.jsx($, { ...u }) }) }) : /* @__PURE__ */ r.jsx(h, { className: v, children: /* @__PURE__ */ r.jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ r.jsx(y, {})
+  ] }) }) : d.length === 0 ? /* @__PURE__ */ r.jsx(c, { className: h, children: /* @__PURE__ */ r.jsx("div", { className: "relative bg-card", children: /* @__PURE__ */ r.jsx(k, { ...f }) }) }) : /* @__PURE__ */ r.jsx(c, { className: h, children: /* @__PURE__ */ r.jsxs("div", { className: "relative bg-card", children: [
     /* @__PURE__ */ r.jsxs(
       "div",
       {
         className: s(
-          "grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/30 sticky top-0 z-10"
+          "grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/50 sticky top-0 z-10"
         ),
         style: { gridTemplateColumns: x },
         children: [
           o && /* @__PURE__ */ r.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r.jsx(
-            j,
+            u,
             {
               checked: d.length > 0 && (a == null ? void 0 : a.size) === d.length,
               onClick: (i) => {
@@ -83,61 +90,68 @@ function P({
         ]
       }
     ),
-    /* @__PURE__ */ r.jsx("div", { className: s("divide-y divide-border/30 overflow-y-auto", m || "h-[calc(100vh-12rem)]"), children: d.map((i, n) => /* @__PURE__ */ r.jsxs(
+    /* @__PURE__ */ r.jsx(
       "div",
       {
-        className: s(
-          "grid items-center px-6 py-4 text-sm text-foreground bg-background hover:bg-muted/30 transition-colors duration-150 group cursor-pointer"
-        ),
-        style: { gridTemplateColumns: x },
-        onClick: () => p == null ? void 0 : p(i),
-        children: [
-          o && /* @__PURE__ */ r.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r.jsx(
-            j,
-            {
-              checked: a == null ? void 0 : a.has(i.id),
-              onClick: (e) => {
-                e.stopPropagation(), l == null || l(i.id, !(a != null && a.has(i.id)));
-              }
-            }
-          ) }),
-          t.map((e) => /* @__PURE__ */ r.jsxs(
-            "div",
-            {
-              className: s(
-                "px-2 relative min-w-0",
-                e.className
-              ),
-              onMouseEnter: () => e.tooltipValue && c(`${n}-${e.id}`),
-              onMouseLeave: () => c(null),
-              children: [
-                /* @__PURE__ */ r.jsx("div", { className: s(
-                  "flex items-center gap-2",
-                  e.truncate && "overflow-hidden"
-                ), children: /* @__PURE__ */ r.jsx("div", { className: s(
-                  "w-full",
-                  e.truncate && "truncate"
-                ), children: e.cell(i) }) }),
-                e.tooltipValue && b === `${n}-${e.id}` && /* @__PURE__ */ r.jsx(
-                  y,
-                  {
-                    content: e.tooltipValue(i),
-                    side: "bottom",
-                    align: "start",
-                    isVisible: !0
+        className: s("divide-y divide-border/30 overflow-y-auto"),
+        style: j,
+        children: d.map((i, n) => /* @__PURE__ */ r.jsxs(
+          "div",
+          {
+            className: s(
+              "grid items-center px-6 py-4 text-sm text-foreground hover:bg-muted/30 transition-colors duration-150 group cursor-pointer"
+            ),
+            style: { gridTemplateColumns: x },
+            onClick: () => p == null ? void 0 : p(i),
+            children: [
+              o && /* @__PURE__ */ r.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ r.jsx(
+                u,
+                {
+                  checked: a == null ? void 0 : a.has(i.id),
+                  onClick: (e) => {
+                    e.stopPropagation(), l == null || l(i.id, !(a != null && a.has(i.id)));
                   }
-                )
-              ]
-            },
-            e.id
-          ))
-        ]
-      },
-      i.id
-    )) })
+                }
+              ) }),
+              t.map((e) => /* @__PURE__ */ r.jsxs(
+                "div",
+                {
+                  className: s(
+                    "px-2 relative min-w-0",
+                    e.className
+                  ),
+                  onMouseEnter: () => e.tooltipValue && m(`${n}-${e.id}`),
+                  onMouseLeave: () => m(null),
+                  children: [
+                    /* @__PURE__ */ r.jsx("div", { className: s(
+                      "flex items-center gap-2",
+                      e.truncate && "overflow-hidden"
+                    ), children: /* @__PURE__ */ r.jsx("div", { className: s(
+                      "w-full",
+                      e.truncate && "truncate"
+                    ), children: e.cell(i) }) }),
+                    e.tooltipValue && N === `${n}-${e.id}` && /* @__PURE__ */ r.jsx(
+                      T,
+                      {
+                        content: e.tooltipValue(i),
+                        side: "bottom",
+                        align: "start",
+                        isVisible: !0
+                      }
+                    )
+                  ]
+                },
+                e.id
+              ))
+            ]
+          },
+          i.id
+        ))
+      }
+    )
   ] }) });
 }
 export {
-  P as Table
+  B as Table
 };
 //# sourceMappingURL=table.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table.esm.js","sources":["../../src/components/table.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\"\nimport { Checkbox } from \"./checkbox\"\nimport { Tooltip } from \"./tooltip\"\nimport { useState } from \"react\"\nimport { TableEmpty } from \"./table-empty\"\n\nexport interface Column<T> {\n  id: string\n  header: string\n  width?: string\n  cell: (item: T) => React.ReactNode\n  className?: string\n  tooltipValue?: (item: T) => string\n  truncate?: boolean\n}\n\nexport interface TableProps<T> {\n  data: T[]\n  columns: Column<T>[]\n  showCheckbox?: boolean\n  onRowClick?: (item: T) => void\n  className?: string\n  selectedItems?: Set<string>\n  onSelect?: (id: string, checked: boolean) => void\n  emptyState?: {\n    title?: string\n    description?: string\n    actionLabel?: string\n    onAction?: () => void\n    icon?: React.ReactNode\n  }\n  isLoading?: boolean\n  loadingRows?: number\n  tableHeight?: string\n}\n\nconst TableContainer = ({ children, className }: { children: React.ReactNode, className?: string }) => {\n  return (\n    <div className={cn(\"border border-border/50 rounded-lg overflow-hidden bg-background shadow-sm\", className)}>\n      {children}\n    </div>\n  )\n} \nexport function Table<T extends { id: string }>({ \n  data, \n  columns, \n  showCheckbox = true,\n  onRowClick,\n  className,\n  selectedItems,\n  onSelect,\n  emptyState,\n  isLoading = false,\n  loadingRows = 5,\n  tableHeight\n}: TableProps<T>) {\n  const [hoveredText, setHoveredText] = useState<string | null>(null);\n\n  // Improved grid template calculation\n  const gridTemplateColumns = [\n    showCheckbox ? '40px' : null,\n    ...columns.map(col => col.width || '1fr')\n  ].filter(Boolean).join(' ');\n\n  // Loading skeleton component\n  const TableSkeleton = () => (\n    <div className={cn(\"divide-y divide-border/30 overflow-y-auto\", `h-[calc(100vh-${tableHeight})]`)}>\n      {Array(loadingRows).fill(0).map((_, index) => (\n        <div\n          key={`skeleton-${index}`}\n          className=\"grid items-center px-6 py-4 text-sm\"\n          style={{ gridTemplateColumns }}\n        >\n          {showCheckbox && (\n            <div className=\"flex items-center justify-center\">\n              <div className=\"h-4 w-4 rounded bg-muted animate-pulse\" />\n            </div>\n          )}\n          \n          {columns.map(column => (\n            <div \n              key={`skeleton-col-${column.id}`} \n              className={cn(\"px-2 relative min-w-0\", column.className)}\n            >\n              <div className=\"h-4 bg-muted rounded animate-pulse\" \n                   style={{ width: Math.random() * 40 + 40 + '%' }} />\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n\n  if (isLoading) {\n    return (\n      <TableContainer className={className}>\n        <div className=\"relative\">\n          {/* Header */}\n          <div className={cn(\n            \"grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/30 sticky top-0 z-10\",\n          )}\n          style={{ gridTemplateColumns }}\n          >\n            {showCheckbox && (\n              <div className=\"flex items-center justify-center\">\n                <div className=\"h-4 w-4 rounded bg-muted animate-pulse\" />\n              </div>\n            )}\n            {columns.map(column => (\n              <div key={column.id} className={cn(\"px-2 font-medium\", column.className)}>\n                {column.header}\n              </div>\n            ))}\n          </div>\n\n          <TableSkeleton />\n        </div>\n      </TableContainer>\n    );\n  }\n\n  if (data.length === 0) {\n    return (\n      <TableContainer className={className}>\n        <div className=\"relative\">\n          <TableEmpty {...emptyState} />\n        </div>\n      </TableContainer>\n    );\n  }\n\n  return (\n    <TableContainer className={className}>\n      <div className=\"relative\">\n        {/* Header */}\n        <div className={cn(\n          \"grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/30 sticky top-0 z-10\",\n        )}\n        style={{ gridTemplateColumns }}\n        >\n          {showCheckbox && (\n            <div className=\"flex items-center justify-center\">\n              <Checkbox \n                checked={data.length > 0 && selectedItems?.size === data.length}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  data.forEach(item => onSelect?.(item.id, !selectedItems?.has(item.id)));\n                }}\n              />\n            </div>\n          )}\n          {columns.map(column => (\n            <div key={column.id} className={cn(\"px-2 font-medium\", column.className)}>\n              {column.header}\n            </div>\n          ))}\n        </div>\n\n        {/* Body */}\n        <div className={cn(\"divide-y divide-border/30 overflow-y-auto\", tableHeight || \"h-[calc(100vh-12rem)]\")}>\n          {data.map((item, index) => (\n            <div\n              key={item.id}\n              className={cn(\n                \"grid items-center px-6 py-4 text-sm text-foreground bg-background hover:bg-muted/30 transition-colors duration-150 group cursor-pointer\",\n              )}\n              style={{ gridTemplateColumns }}\n              onClick={() => onRowClick?.(item)}\n            >\n              {showCheckbox && (\n                <div className=\"flex items-center justify-center\">\n                  <Checkbox \n                    checked={selectedItems?.has(item.id)}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onSelect?.(item.id, !selectedItems?.has(item.id));\n                    }}\n                  />\n                </div>\n              )}\n              \n              {columns.map(column => (\n                <div \n                  key={column.id} \n                  className={cn(\n                    \"px-2 relative min-w-0\",\n                    column.className\n                  )}\n                  onMouseEnter={() => column.tooltipValue && setHoveredText(`${index}-${column.id}`)}\n                  onMouseLeave={() => setHoveredText(null)}\n                >\n                  <div className={cn(\n                    \"flex items-center gap-2\",\n                    column.truncate && \"overflow-hidden\"\n                  )}>\n                    <div className={cn(\n                      \"w-full\",\n                      column.truncate && \"truncate\"\n                    )}>\n                      {column.cell(item)}\n                    </div>\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          ))}\n        </div>\n      </div>\n    </TableContainer>\n  );\n} "],"names":["TableContainer","children","className","cn","Table","data","columns","showCheckbox","onRowClick","selectedItems","onSelect","emptyState","isLoading","loadingRows","tableHeight","hoveredText","setHoveredText","useState","gridTemplateColumns","col","TableSkeleton","jsx","_","index","jsxs","column","TableEmpty","Checkbox","e","item","Tooltip"],"mappings":"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"}
+{"version":3,"file":"table.esm.js","sources":["../../src/components/table.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\"\nimport { Checkbox } from \"./checkbox\"\nimport { Tooltip } from \"./tooltip\"\nimport { useState } from \"react\"\nimport { TableEmpty } from \"./table-empty\"\n\nexport interface Column<T> {\n  id: string\n  header: string\n  width?: string\n  cell: (item: T) => React.ReactNode\n  className?: string\n  tooltipValue?: (item: T) => string\n  truncate?: boolean\n}\n\nexport interface TableProps<T> {\n  data: T[]\n  columns: Column<T>[]\n  showCheckbox?: boolean\n  onRowClick?: (item: T) => void\n  className?: string\n  selectedItems?: Set<string>\n  onSelect?: (id: string, checked: boolean) => void\n  emptyState?: {\n    title?: string\n    description?: string\n    actionLabel?: string\n    onAction?: () => void\n    icon?: React.ReactNode\n  }\n  isLoading?: boolean\n  loadingRows?: number\n  tableHeightOffset?: string\n}\n\nconst TableContainer = ({ children, className }: { children: React.ReactNode, className?: string }) => {\n  return (\n    <div className={cn(\"border border-border/50 rounded-lg overflow-hidden bg-background shadow-sm\", className)}>\n      {children}\n    </div>\n  )\n} \nexport function Table<T extends { id: string }>({ \n  data, \n  columns, \n  showCheckbox = true,\n  onRowClick,\n  className,\n  selectedItems,\n  onSelect,\n  emptyState,\n  isLoading = false,\n  loadingRows = 5,\n  tableHeightOffset\n}: TableProps<T>) {\n  const [hoveredText, setHoveredText] = useState<string | null>(null);\n\n  const height = tableHeightOffset ? `calc(100vh - ${tableHeightOffset})` : \"calc(100vh - 8rem)\";\n  const heightStyle = { height };\n\n  // Improved grid template calculation\n  const gridTemplateColumns = [\n    showCheckbox ? '40px' : null,\n    ...columns.map(col => col.width || '1fr')\n  ].filter(Boolean).join(' ');\n\n  // Loading skeleton component\n  const TableSkeleton = () => (\n    <div className={cn(\"divide-y divide-border/50 overflow-y-auto\")}\n      style={heightStyle}\n    >\n      {Array(loadingRows).fill(0).map((_, index) => (\n        <div\n          key={`skeleton-${index}`}\n          className=\"grid items-center px-6 py-4 text-sm\"\n          style={{ gridTemplateColumns }}\n        >\n          {showCheckbox && (\n            <div className=\"flex items-center justify-center\">\n              <div className=\"h-4 w-4 rounded bg-muted animate-pulse\" />\n            </div>\n          )}\n          \n          {columns.map(column => (\n            <div \n              key={`skeleton-col-${column.id}`} \n              className={cn(\"px-2 relative min-w-0\", column.className)}\n            >\n              <div className=\"h-4 bg-muted rounded animate-pulse\" \n                   style={{ width: Math.random() * 40 + 40 + '%' }} />\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n\n  if (isLoading) {\n    return (\n      <TableContainer className={className}>\n        <div className=\"relative bg-card\">\n          {/* Header */}\n          <div className={cn(\n            \"grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/50 sticky top-0 z-10\",\n          )}\n          style={{ gridTemplateColumns }}\n          >\n            {showCheckbox && (\n              <div className=\"flex items-center justify-center\">\n                <div className=\"h-4 w-4 rounded bg-muted animate-pulse\" />\n              </div>\n            )}\n            {columns.map(column => (\n              <div key={column.id} className={cn(\"px-2 font-medium\", column.className)}>\n                {column.header}\n              </div>\n            ))}\n          </div>\n\n          <TableSkeleton />\n        </div>\n      </TableContainer>\n    );\n  }\n\n  if (data.length === 0) {\n    return (\n      <TableContainer className={className}>\n        <div className=\"relative bg-card\">\n          <TableEmpty {...emptyState} />\n        </div>\n      </TableContainer>\n    );\n  }\n\n  return (\n    <TableContainer className={className}>\n      <div className=\"relative bg-card\">\n        {/* Header */}\n        <div className={cn(\n          \"grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/50 sticky top-0 z-10\",\n        )}\n        style={{ gridTemplateColumns }}\n        >\n          {showCheckbox && (\n            <div className=\"flex items-center justify-center\">\n              <Checkbox \n                checked={data.length > 0 && selectedItems?.size === data.length}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  data.forEach(item => onSelect?.(item.id, !selectedItems?.has(item.id)));\n                }}\n              />\n            </div>\n          )}\n          {columns.map(column => (\n            <div key={column.id} className={cn(\"px-2 font-medium\", column.className)}>\n              {column.header}\n            </div>\n          ))}\n        </div>\n\n        {/* Body */}\n        <div className={cn(\"divide-y divide-border/30 overflow-y-auto\")}\n          style={heightStyle}\n        >\n          {data.map((item, index) => (\n            <div\n              key={item.id}\n              className={cn(\n                \"grid items-center px-6 py-4 text-sm text-foreground hover:bg-muted/30 transition-colors duration-150 group cursor-pointer\",\n              )}\n              style={{ gridTemplateColumns }}\n              onClick={() => onRowClick?.(item)}\n            >\n              {showCheckbox && (\n                <div className=\"flex items-center justify-center\">\n                  <Checkbox \n                    checked={selectedItems?.has(item.id)}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onSelect?.(item.id, !selectedItems?.has(item.id));\n                    }}\n                  />\n                </div>\n              )}\n              \n              {columns.map(column => (\n                <div \n                  key={column.id} \n                  className={cn(\n                    \"px-2 relative min-w-0\",\n                    column.className\n                  )}\n                  onMouseEnter={() => column.tooltipValue && setHoveredText(`${index}-${column.id}`)}\n                  onMouseLeave={() => setHoveredText(null)}\n                >\n                  <div className={cn(\n                    \"flex items-center gap-2\",\n                    column.truncate && \"overflow-hidden\"\n                  )}>\n                    <div className={cn(\n                      \"w-full\",\n                      column.truncate && \"truncate\"\n                    )}>\n                      {column.cell(item)}\n                    </div>\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          ))}\n        </div>\n      </div>\n    </TableContainer>\n  );\n} "],"names":["TableContainer","children","className","cn","Table","data","columns","showCheckbox","onRowClick","selectedItems","onSelect","emptyState","isLoading","loadingRows","tableHeightOffset","hoveredText","setHoveredText","useState","heightStyle","gridTemplateColumns","col","TableSkeleton","jsx","_","index","jsxs","column","TableEmpty","Checkbox","e","item","Tooltip"],"mappings":"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"}

package/dist/components/table.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../jsx-runtime-BYECrxsp.cjs"),t=require("../utils-DSKoFOjv.cjs"),v=require("./checkbox.js"),g=require("./tooltip.js"),N=require("react"),y=require("./table-empty.js"),j=({children:n,className:x})=>s.jsxRuntimeExports.jsx("div",{className:t.cn("border border-border/50 rounded-lg overflow-hidden bg-background shadow-sm",x),children:n});function T({data:n,columns:x,showCheckbox:o=!0,onRowClick:p,className:l,selectedItems:i,onSelect:d,emptyState:h,isLoading:E=!1,loadingRows:b=5,tableHeight:m}){const[f,c]=N.useState(null),u=[o?"40px":null,...x.map(e=>e.width||"1fr")].filter(Boolean).join(" "),R=()=>s.jsxRuntimeExports.jsx("div",{className:t.cn("divide-y divide-border/30 overflow-y-auto",`h-[calc(100vh-${m})]`),children:Array(b).fill(0).map((e,a)=>s.jsxRuntimeExports.jsxs("div",{className:"grid items-center px-6 py-4 text-sm",style:{gridTemplateColumns:u},children:[o&&s.jsxRuntimeExports.jsx("div",{className:"flex items-center justify-center",children:s.jsxRuntimeExports.jsx("div",{className:"h-4 w-4 rounded bg-muted animate-pulse"})}),x.map(r=>s.jsxRuntimeExports.jsx("div",{className:t.cn("px-2 relative min-w-0",r.className),children:s.jsxRuntimeExports.jsx("div",{className:"h-4 bg-muted rounded animate-pulse",style:{width:Math.random()*40+40+"%"}})},`skeleton-col-${r.id}`))]},`skeleton-${a}`))});return E?s.jsxRuntimeExports.jsx(j,{className:l,children:s.jsxRuntimeExports.jsxs("div",{className:"relative",children:[s.jsxRuntimeExports.jsxs("div",{className:t.cn("grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/30 sticky top-0 z-10"),style:{gridTemplateColumns:u},children:[o&&s.jsxRuntimeExports.jsx("div",{className:"flex items-center justify-center",children:s.jsxRuntimeExports.jsx("div",{className:"h-4 w-4 rounded bg-muted animate-pulse"})}),x.map(e=>s.jsxRuntimeExports.jsx("div",{className:t.cn("px-2 font-medium",e.className),children:e.header},e.id))]}),s.jsxRuntimeExports.jsx(R,{})]})}):n.length===0?s.jsxRuntimeExports.jsx(j,{className:l,children:s.jsxRuntimeExports.jsx("div",{className:"relative",children:s.jsxRuntimeExports.jsx(y.TableEmpty,{...h})})}):s.jsxRuntimeExports.jsx(j,{className:l,children:s.jsxRuntimeExports.jsxs("div",{className:"relative",children:[s.jsxRuntimeExports.jsxs("div",{className:t.cn("grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/30 sticky top-0 z-10"),style:{gridTemplateColumns:u},children:[o&&s.jsxRuntimeExports.jsx("div",{className:"flex items-center justify-center",children:s.jsxRuntimeExports.jsx(v.Checkbox,{checked:n.length>0&&(i==null?void 0:i.size)===n.length,onClick:e=>{e.stopPropagation(),n.forEach(a=>d==null?void 0:d(a.id,!(i!=null&&i.has(a.id))))}})}),x.map(e=>s.jsxRuntimeExports.jsx("div",{className:t.cn("px-2 font-medium",e.className),children:e.header},e.id))]}),s.jsxRuntimeExports.jsx("div",{className:t.cn("divide-y divide-border/30 overflow-y-auto",m||"h-[calc(100vh-12rem)]"),children:n.map((e,a)=>s.jsxRuntimeExports.jsxs("div",{className:t.cn("grid items-center px-6 py-4 text-sm text-foreground bg-background hover:bg-muted/30 transition-colors duration-150 group cursor-pointer"),style:{gridTemplateColumns:u},onClick:()=>p==null?void 0:p(e),children:[o&&s.jsxRuntimeExports.jsx("div",{className:"flex items-center justify-center",children:s.jsxRuntimeExports.jsx(v.Checkbox,{checked:i==null?void 0:i.has(e.id),onClick:r=>{r.stopPropagation(),d==null||d(e.id,!(i!=null&&i.has(e.id)))}})}),x.map(r=>s.jsxRuntimeExports.jsxs("div",{className:t.cn("px-2 relative min-w-0",r.className),onMouseEnter:()=>r.tooltipValue&&c(`${a}-${r.id}`),onMouseLeave:()=>c(null),children:[s.jsxRuntimeExports.jsx("div",{className:t.cn("flex items-center gap-2",r.truncate&&"overflow-hidden"),children:s.jsxRuntimeExports.jsx("div",{className:t.cn("w-full",r.truncate&&"truncate"),children:r.cell(e)})}),r.tooltipValue&&f===`${a}-${r.id}`&&s.jsxRuntimeExports.jsx(g.Tooltip,{content:r.tooltipValue(e),side:"bottom",align:"start",isVisible:!0})]},r.id))]},e.id))})]})})}exports.Table=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../jsx-runtime-BYECrxsp.cjs"),t=require("../utils-DSKoFOjv.cjs"),v=require("./checkbox.js"),y=require("./tooltip.js"),N=require("react"),T=require("./table-empty.js"),j=({children:n,className:x})=>s.jsxRuntimeExports.jsx("div",{className:t.cn("border border-border/50 rounded-lg overflow-hidden bg-background shadow-sm",x),children:n});function $({data:n,columns:x,showCheckbox:o=!0,onRowClick:p,className:l,selectedItems:i,onSelect:d,emptyState:E,isLoading:b=!1,loadingRows:g=5,tableHeightOffset:c}){const[R,m]=N.useState(null),h={height:c?`calc(100vh - ${c})`:"calc(100vh - 8rem)"},u=[o?"40px":null,...x.map(e=>e.width||"1fr")].filter(Boolean).join(" "),f=()=>s.jsxRuntimeExports.jsx("div",{className:t.cn("divide-y divide-border/50 overflow-y-auto"),style:h,children:Array(g).fill(0).map((e,a)=>s.jsxRuntimeExports.jsxs("div",{className:"grid items-center px-6 py-4 text-sm",style:{gridTemplateColumns:u},children:[o&&s.jsxRuntimeExports.jsx("div",{className:"flex items-center justify-center",children:s.jsxRuntimeExports.jsx("div",{className:"h-4 w-4 rounded bg-muted animate-pulse"})}),x.map(r=>s.jsxRuntimeExports.jsx("div",{className:t.cn("px-2 relative min-w-0",r.className),children:s.jsxRuntimeExports.jsx("div",{className:"h-4 bg-muted rounded animate-pulse",style:{width:Math.random()*40+40+"%"}})},`skeleton-col-${r.id}`))]},`skeleton-${a}`))});return b?s.jsxRuntimeExports.jsx(j,{className:l,children:s.jsxRuntimeExports.jsxs("div",{className:"relative bg-card",children:[s.jsxRuntimeExports.jsxs("div",{className:t.cn("grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/50 sticky top-0 z-10"),style:{gridTemplateColumns:u},children:[o&&s.jsxRuntimeExports.jsx("div",{className:"flex items-center justify-center",children:s.jsxRuntimeExports.jsx("div",{className:"h-4 w-4 rounded bg-muted animate-pulse"})}),x.map(e=>s.jsxRuntimeExports.jsx("div",{className:t.cn("px-2 font-medium",e.className),children:e.header},e.id))]}),s.jsxRuntimeExports.jsx(f,{})]})}):n.length===0?s.jsxRuntimeExports.jsx(j,{className:l,children:s.jsxRuntimeExports.jsx("div",{className:"relative bg-card",children:s.jsxRuntimeExports.jsx(T.TableEmpty,{...E})})}):s.jsxRuntimeExports.jsx(j,{className:l,children:s.jsxRuntimeExports.jsxs("div",{className:"relative bg-card",children:[s.jsxRuntimeExports.jsxs("div",{className:t.cn("grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/50 sticky top-0 z-10"),style:{gridTemplateColumns:u},children:[o&&s.jsxRuntimeExports.jsx("div",{className:"flex items-center justify-center",children:s.jsxRuntimeExports.jsx(v.Checkbox,{checked:n.length>0&&(i==null?void 0:i.size)===n.length,onClick:e=>{e.stopPropagation(),n.forEach(a=>d==null?void 0:d(a.id,!(i!=null&&i.has(a.id))))}})}),x.map(e=>s.jsxRuntimeExports.jsx("div",{className:t.cn("px-2 font-medium",e.className),children:e.header},e.id))]}),s.jsxRuntimeExports.jsx("div",{className:t.cn("divide-y divide-border/30 overflow-y-auto"),style:h,children:n.map((e,a)=>s.jsxRuntimeExports.jsxs("div",{className:t.cn("grid items-center px-6 py-4 text-sm text-foreground hover:bg-muted/30 transition-colors duration-150 group cursor-pointer"),style:{gridTemplateColumns:u},onClick:()=>p==null?void 0:p(e),children:[o&&s.jsxRuntimeExports.jsx("div",{className:"flex items-center justify-center",children:s.jsxRuntimeExports.jsx(v.Checkbox,{checked:i==null?void 0:i.has(e.id),onClick:r=>{r.stopPropagation(),d==null||d(e.id,!(i!=null&&i.has(e.id)))}})}),x.map(r=>s.jsxRuntimeExports.jsxs("div",{className:t.cn("px-2 relative min-w-0",r.className),onMouseEnter:()=>r.tooltipValue&&m(`${a}-${r.id}`),onMouseLeave:()=>m(null),children:[s.jsxRuntimeExports.jsx("div",{className:t.cn("flex items-center gap-2",r.truncate&&"overflow-hidden"),children:s.jsxRuntimeExports.jsx("div",{className:t.cn("w-full",r.truncate&&"truncate"),children:r.cell(e)})}),r.tooltipValue&&R===`${a}-${r.id}`&&s.jsxRuntimeExports.jsx(y.Tooltip,{content:r.tooltipValue(e),side:"bottom",align:"start",isVisible:!0})]},r.id))]},e.id))})]})})}exports.Table=$;
 //# sourceMappingURL=table.js.map

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../src/components/table.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\"\nimport { Checkbox } from \"./checkbox\"\nimport { Tooltip } from \"./tooltip\"\nimport { useState } from \"react\"\nimport { TableEmpty } from \"./table-empty\"\n\nexport interface Column<T> {\n  id: string\n  header: string\n  width?: string\n  cell: (item: T) => React.ReactNode\n  className?: string\n  tooltipValue?: (item: T) => string\n  truncate?: boolean\n}\n\nexport interface TableProps<T> {\n  data: T[]\n  columns: Column<T>[]\n  showCheckbox?: boolean\n  onRowClick?: (item: T) => void\n  className?: string\n  selectedItems?: Set<string>\n  onSelect?: (id: string, checked: boolean) => void\n  emptyState?: {\n    title?: string\n    description?: string\n    actionLabel?: string\n    onAction?: () => void\n    icon?: React.ReactNode\n  }\n  isLoading?: boolean\n  loadingRows?: number\n  tableHeight?: string\n}\n\nconst TableContainer = ({ children, className }: { children: React.ReactNode, className?: string }) => {\n  return (\n    <div className={cn(\"border border-border/50 rounded-lg overflow-hidden bg-background shadow-sm\", className)}>\n      {children}\n    </div>\n  )\n} \nexport function Table<T extends { id: string }>({ \n  data, \n  columns, \n  showCheckbox = true,\n  onRowClick,\n  className,\n  selectedItems,\n  onSelect,\n  emptyState,\n  isLoading = false,\n  loadingRows = 5,\n  tableHeight\n}: TableProps<T>) {\n  const [hoveredText, setHoveredText] = useState<string | null>(null);\n\n  // Improved grid template calculation\n  const gridTemplateColumns = [\n    showCheckbox ? '40px' : null,\n    ...columns.map(col => col.width || '1fr')\n  ].filter(Boolean).join(' ');\n\n  // Loading skeleton component\n  const TableSkeleton = () => (\n    <div className={cn(\"divide-y divide-border/30 overflow-y-auto\", `h-[calc(100vh-${tableHeight})]`)}>\n      {Array(loadingRows).fill(0).map((_, index) => (\n        <div\n          key={`skeleton-${index}`}\n          className=\"grid items-center px-6 py-4 text-sm\"\n          style={{ gridTemplateColumns }}\n        >\n          {showCheckbox && (\n            <div className=\"flex items-center justify-center\">\n              <div className=\"h-4 w-4 rounded bg-muted animate-pulse\" />\n            </div>\n          )}\n          \n          {columns.map(column => (\n            <div \n              key={`skeleton-col-${column.id}`} \n              className={cn(\"px-2 relative min-w-0\", column.className)}\n            >\n              <div className=\"h-4 bg-muted rounded animate-pulse\" \n                   style={{ width: Math.random() * 40 + 40 + '%' }} />\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n\n  if (isLoading) {\n    return (\n      <TableContainer className={className}>\n        <div className=\"relative\">\n          {/* Header */}\n          <div className={cn(\n            \"grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/30 sticky top-0 z-10\",\n          )}\n          style={{ gridTemplateColumns }}\n          >\n            {showCheckbox && (\n              <div className=\"flex items-center justify-center\">\n                <div className=\"h-4 w-4 rounded bg-muted animate-pulse\" />\n              </div>\n            )}\n            {columns.map(column => (\n              <div key={column.id} className={cn(\"px-2 font-medium\", column.className)}>\n                {column.header}\n              </div>\n            ))}\n          </div>\n\n          <TableSkeleton />\n        </div>\n      </TableContainer>\n    );\n  }\n\n  if (data.length === 0) {\n    return (\n      <TableContainer className={className}>\n        <div className=\"relative\">\n          <TableEmpty {...emptyState} />\n        </div>\n      </TableContainer>\n    );\n  }\n\n  return (\n    <TableContainer className={className}>\n      <div className=\"relative\">\n        {/* Header */}\n        <div className={cn(\n          \"grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/30 sticky top-0 z-10\",\n        )}\n        style={{ gridTemplateColumns }}\n        >\n          {showCheckbox && (\n            <div className=\"flex items-center justify-center\">\n              <Checkbox \n                checked={data.length > 0 && selectedItems?.size === data.length}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  data.forEach(item => onSelect?.(item.id, !selectedItems?.has(item.id)));\n                }}\n              />\n            </div>\n          )}\n          {columns.map(column => (\n            <div key={column.id} className={cn(\"px-2 font-medium\", column.className)}>\n              {column.header}\n            </div>\n          ))}\n        </div>\n\n        {/* Body */}\n        <div className={cn(\"divide-y divide-border/30 overflow-y-auto\", tableHeight || \"h-[calc(100vh-12rem)]\")}>\n          {data.map((item, index) => (\n            <div\n              key={item.id}\n              className={cn(\n                \"grid items-center px-6 py-4 text-sm text-foreground bg-background hover:bg-muted/30 transition-colors duration-150 group cursor-pointer\",\n              )}\n              style={{ gridTemplateColumns }}\n              onClick={() => onRowClick?.(item)}\n            >\n              {showCheckbox && (\n                <div className=\"flex items-center justify-center\">\n                  <Checkbox \n                    checked={selectedItems?.has(item.id)}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onSelect?.(item.id, !selectedItems?.has(item.id));\n                    }}\n                  />\n                </div>\n              )}\n              \n              {columns.map(column => (\n                <div \n                  key={column.id} \n                  className={cn(\n                    \"px-2 relative min-w-0\",\n                    column.className\n                  )}\n                  onMouseEnter={() => column.tooltipValue && setHoveredText(`${index}-${column.id}`)}\n                  onMouseLeave={() => setHoveredText(null)}\n                >\n                  <div className={cn(\n                    \"flex items-center gap-2\",\n                    column.truncate && \"overflow-hidden\"\n                  )}>\n                    <div className={cn(\n                      \"w-full\",\n                      column.truncate && \"truncate\"\n                    )}>\n                      {column.cell(item)}\n                    </div>\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          ))}\n        </div>\n      </div>\n    </TableContainer>\n  );\n} "],"names":["TableContainer","children","className","cn","Table","data","columns","showCheckbox","onRowClick","selectedItems","onSelect","emptyState","isLoading","loadingRows","tableHeight","hoveredText","setHoveredText","useState","gridTemplateColumns","col","TableSkeleton","jsx","_","index","jsxs","column","TableEmpty","Checkbox","item","e","Tooltip"],"mappings":"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"}
+{"version":3,"file":"table.js","sources":["../../src/components/table.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\"\nimport { Checkbox } from \"./checkbox\"\nimport { Tooltip } from \"./tooltip\"\nimport { useState } from \"react\"\nimport { TableEmpty } from \"./table-empty\"\n\nexport interface Column<T> {\n  id: string\n  header: string\n  width?: string\n  cell: (item: T) => React.ReactNode\n  className?: string\n  tooltipValue?: (item: T) => string\n  truncate?: boolean\n}\n\nexport interface TableProps<T> {\n  data: T[]\n  columns: Column<T>[]\n  showCheckbox?: boolean\n  onRowClick?: (item: T) => void\n  className?: string\n  selectedItems?: Set<string>\n  onSelect?: (id: string, checked: boolean) => void\n  emptyState?: {\n    title?: string\n    description?: string\n    actionLabel?: string\n    onAction?: () => void\n    icon?: React.ReactNode\n  }\n  isLoading?: boolean\n  loadingRows?: number\n  tableHeightOffset?: string\n}\n\nconst TableContainer = ({ children, className }: { children: React.ReactNode, className?: string }) => {\n  return (\n    <div className={cn(\"border border-border/50 rounded-lg overflow-hidden bg-background shadow-sm\", className)}>\n      {children}\n    </div>\n  )\n} \nexport function Table<T extends { id: string }>({ \n  data, \n  columns, \n  showCheckbox = true,\n  onRowClick,\n  className,\n  selectedItems,\n  onSelect,\n  emptyState,\n  isLoading = false,\n  loadingRows = 5,\n  tableHeightOffset\n}: TableProps<T>) {\n  const [hoveredText, setHoveredText] = useState<string | null>(null);\n\n  const height = tableHeightOffset ? `calc(100vh - ${tableHeightOffset})` : \"calc(100vh - 8rem)\";\n  const heightStyle = { height };\n\n  // Improved grid template calculation\n  const gridTemplateColumns = [\n    showCheckbox ? '40px' : null,\n    ...columns.map(col => col.width || '1fr')\n  ].filter(Boolean).join(' ');\n\n  // Loading skeleton component\n  const TableSkeleton = () => (\n    <div className={cn(\"divide-y divide-border/50 overflow-y-auto\")}\n      style={heightStyle}\n    >\n      {Array(loadingRows).fill(0).map((_, index) => (\n        <div\n          key={`skeleton-${index}`}\n          className=\"grid items-center px-6 py-4 text-sm\"\n          style={{ gridTemplateColumns }}\n        >\n          {showCheckbox && (\n            <div className=\"flex items-center justify-center\">\n              <div className=\"h-4 w-4 rounded bg-muted animate-pulse\" />\n            </div>\n          )}\n          \n          {columns.map(column => (\n            <div \n              key={`skeleton-col-${column.id}`} \n              className={cn(\"px-2 relative min-w-0\", column.className)}\n            >\n              <div className=\"h-4 bg-muted rounded animate-pulse\" \n                   style={{ width: Math.random() * 40 + 40 + '%' }} />\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n\n  if (isLoading) {\n    return (\n      <TableContainer className={className}>\n        <div className=\"relative bg-card\">\n          {/* Header */}\n          <div className={cn(\n            \"grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/50 sticky top-0 z-10\",\n          )}\n          style={{ gridTemplateColumns }}\n          >\n            {showCheckbox && (\n              <div className=\"flex items-center justify-center\">\n                <div className=\"h-4 w-4 rounded bg-muted animate-pulse\" />\n              </div>\n            )}\n            {columns.map(column => (\n              <div key={column.id} className={cn(\"px-2 font-medium\", column.className)}>\n                {column.header}\n              </div>\n            ))}\n          </div>\n\n          <TableSkeleton />\n        </div>\n      </TableContainer>\n    );\n  }\n\n  if (data.length === 0) {\n    return (\n      <TableContainer className={className}>\n        <div className=\"relative bg-card\">\n          <TableEmpty {...emptyState} />\n        </div>\n      </TableContainer>\n    );\n  }\n\n  return (\n    <TableContainer className={className}>\n      <div className=\"relative bg-card\">\n        {/* Header */}\n        <div className={cn(\n          \"grid items-center px-6 py-3 text-xs font-medium text-muted-foreground/80 bg-muted/30 border-b border-border/50 sticky top-0 z-10\",\n        )}\n        style={{ gridTemplateColumns }}\n        >\n          {showCheckbox && (\n            <div className=\"flex items-center justify-center\">\n              <Checkbox \n                checked={data.length > 0 && selectedItems?.size === data.length}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  data.forEach(item => onSelect?.(item.id, !selectedItems?.has(item.id)));\n                }}\n              />\n            </div>\n          )}\n          {columns.map(column => (\n            <div key={column.id} className={cn(\"px-2 font-medium\", column.className)}>\n              {column.header}\n            </div>\n          ))}\n        </div>\n\n        {/* Body */}\n        <div className={cn(\"divide-y divide-border/30 overflow-y-auto\")}\n          style={heightStyle}\n        >\n          {data.map((item, index) => (\n            <div\n              key={item.id}\n              className={cn(\n                \"grid items-center px-6 py-4 text-sm text-foreground hover:bg-muted/30 transition-colors duration-150 group cursor-pointer\",\n              )}\n              style={{ gridTemplateColumns }}\n              onClick={() => onRowClick?.(item)}\n            >\n              {showCheckbox && (\n                <div className=\"flex items-center justify-center\">\n                  <Checkbox \n                    checked={selectedItems?.has(item.id)}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onSelect?.(item.id, !selectedItems?.has(item.id));\n                    }}\n                  />\n                </div>\n              )}\n              \n              {columns.map(column => (\n                <div \n                  key={column.id} \n                  className={cn(\n                    \"px-2 relative min-w-0\",\n                    column.className\n                  )}\n                  onMouseEnter={() => column.tooltipValue && setHoveredText(`${index}-${column.id}`)}\n                  onMouseLeave={() => setHoveredText(null)}\n                >\n                  <div className={cn(\n                    \"flex items-center gap-2\",\n                    column.truncate && \"overflow-hidden\"\n                  )}>\n                    <div className={cn(\n                      \"w-full\",\n                      column.truncate && \"truncate\"\n                    )}>\n                      {column.cell(item)}\n                    </div>\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          ))}\n        </div>\n      </div>\n    </TableContainer>\n  );\n} "],"names":["TableContainer","children","className","cn","Table","data","columns","showCheckbox","onRowClick","selectedItems","onSelect","emptyState","isLoading","loadingRows","tableHeightOffset","hoveredText","setHoveredText","useState","heightStyle","gridTemplateColumns","col","TableSkeleton","jsx","_","index","jsxs","column","TableEmpty","Checkbox","item","e","Tooltip"],"mappings":"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"}

package/dist/index.d.ts

@@ -118,7 +118,7 @@ export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLDivElemen
 }
 
 export declare const badgeVariants: (props?: ({
-    variant?: "default" | "outline" | "secondary" | "destructive" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function BarChart({ data }: BarChartProps): JSX_2.Element;
@@ -332,7 +332,7 @@ export declare const Command: React_2.ForwardRefExoticComponent<Omit<{
     ref?: React_2.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React_2.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "asChild" | "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -356,7 +356,7 @@ export declare const CommandEmpty: React_2.ForwardRefExoticComponent<Omit<{
     ref?: React_2.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React_2.HTMLAttributes<HTMLDivElement> | "asChild"> & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+}, "asChild" | "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare const CommandGroup: React_2.ForwardRefExoticComponent<Omit<{
     children?: React_2.ReactNode;
@@ -364,7 +364,7 @@ export declare const CommandGroup: React_2.ForwardRefExoticComponent<Omit<{
     ref?: React_2.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React_2.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React_2.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
     heading?: React_2.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -374,7 +374,7 @@ export declare const CommandInput: React_2.ForwardRefExoticComponent<Omit<Omit<P
     ref?: React_2.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React_2.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "asChild" | "key" | keyof React_2.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React_2.RefAttributes<HTMLInputElement>, "ref"> & React_2.RefAttributes<HTMLInputElement>>;
@@ -385,7 +385,7 @@ export declare const CommandItem: React_2.ForwardRefExoticComponent<Omit<{
     ref?: React_2.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React_2.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, "asChild" | "key" | keyof React_2.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -399,7 +399,7 @@ export declare const CommandList: React_2.ForwardRefExoticComponent<Omit<{
     ref?: React_2.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React_2.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "asChild" | "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
     label?: string;
 } & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -416,7 +416,7 @@ export declare const CommandSeparator: React_2.ForwardRefExoticComponent<Omit<Pi
     ref?: React_2.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React_2.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "asChild" | "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
 } & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -645,7 +645,7 @@ export declare interface MentionUserData extends SuggestionDataItem {
     subtitle?: string;
 }
 
-export declare function Modal({ isOpen, onClose, title, description, icon, children, footer, size, showClose, className, isContentScrollable, mainClassName, contentClassName, header, zIndexClassName }: ModalProps): ReactPortal;
+export declare function Modal({ isOpen, onClose, title, description, icon, children, footer, size, showClose, className, isContentScrollable, mainClassName, contentClassName, header, headerClassName, zIndexClassName, mobileSheet, }: ModalProps): JSX_2.Element;
 
 export declare interface ModalProps {
     isOpen: boolean;
@@ -664,6 +664,10 @@ export declare interface ModalProps {
     headerClassName?: string;
     contentClassName?: string;
     zIndexClassName?: string;
+    mobileSheet?: {
+        enable: boolean;
+        position?: 'left' | 'right' | 'bottom';
+    };
 }
 
 export declare function MonacoEditor({ value, onChange, language, height, className, options, onMount, title, variables, variablePrefix, variableSuffix, predefinedVariables, allowFullscreen, isDark, }: MonacoEditorProps): JSX_2.Element;
@@ -845,7 +849,7 @@ export declare const Switch: React_2.ForwardRefExoticComponent<Omit<SwitchPrimit
 
 export declare function Table<T extends {
     id: string;
-}>({ data, columns, showCheckbox, onRowClick, className, selectedItems, onSelect, emptyState, isLoading, loadingRows, tableHeight }: TableProps<T>): JSX_2.Element;
+}>({ data, columns, showCheckbox, onRowClick, className, selectedItems, onSelect, emptyState, isLoading, loadingRows, tableHeightOffset }: TableProps<T>): JSX_2.Element;
 
 export declare function TableEmpty({ title, description, actionLabel, onAction, icon }: TableEmptyProps): JSX_2.Element;
 
@@ -878,7 +882,7 @@ export declare interface TableProps<T> {
     };
     isLoading?: boolean;
     loadingRows?: number;
-    tableHeight?: string;
+    tableHeightOffset?: string;
 }
 
 export declare const Tabs: React_2.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React_2.RefAttributes<HTMLDivElement>>;

package/dist/modal.d.ts

@@ -1,6 +1,6 @@
-import { ReactPortal } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 
-export declare function Modal({ isOpen, onClose, title, description, icon, children, footer, size, showClose, className, isContentScrollable, mainClassName, contentClassName, header, zIndexClassName }: ModalProps): ReactPortal;
+export declare function Modal({ isOpen, onClose, title, description, icon, children, footer, size, showClose, className, isContentScrollable, mainClassName, contentClassName, header, headerClassName, zIndexClassName, mobileSheet, }: ModalProps): JSX_2.Element;
 
 export declare interface ModalProps {
     isOpen: boolean;
@@ -19,6 +19,10 @@ export declare interface ModalProps {
     headerClassName?: string;
     contentClassName?: string;
     zIndexClassName?: string;
+    mobileSheet?: {
+        enable: boolean;
+        position?: 'left' | 'right' | 'bottom';
+    };
 }
 
 export { }