infinity-ui-elements 1.5.1-beta.1 → 1.5.1-beta.3

package/dist/index.js

@@ -798,6 +798,9 @@ const iconRegistry = {
     // Alias: check points to the same icon as tick
     check: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M10.364 15.1924L19.5564 6L20.9706 7.41421L10.364 18.0208L4 11.6569L5.41422 10.2427L10.364 15.1924Z" fill="#081416"/>
+</svg>`,
+    add: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path d="M12.9 11.0999L21 11.0997V12.8997L12.9 12.8999V21H11.1V12.8999L3.00004 12.9001L3 11.1001L11.1 11.0999L11.0999 3.00001L12.8999 3L12.9 11.0999Z" fill="#081416"/>
 </svg>`,
 };
 const Icon = ({ name, size = 24, className = "", style = {}, ...props }) => {
@@ -2710,69 +2713,219 @@ const tableHeaderVariants = classVarianceAuthority.cva("text-body-medium-regular
         size: "medium",
     },
 });
-const tableCellVariants = classVarianceAuthority.cva("text-body-medium-regular border-b border-surface-outline-neutral-muted text-surface-ink-neutral-normal", {
+const tableCellVariants = classVarianceAuthority.cva("text-body-medium-regular border-b border-surface-outline-neutral-muted text-surface-ink-neutral-normal transition-colors duration-150", {
     variants: {
         size: {
             small: "px-3 py-2 h-[40px]",
-            medium: "px-4 py-3 h-[48px]",
+            medium: "px-4 py-3 h-[72px]",
             large: "px-6 py-4 h-[56px]",
         },
+        state: {
+            default: "",
+            focus: "",
+            // focus:
+            //   "outline outline-2 outline-action-outline-primary-default outline-offset-[-2px]",
+        },
     },
     defaultVariants: {
         size: "medium",
+        state: "default",
     },
 });
-function TableComponent({ className, wrapperClassName, containerClassName, variant, size, table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, ...props }, ref) {
+
+function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, }) {
+    return (jsxRuntime.jsx("thead", { className: cn(showHeaderBackground && "bg-surface-fill-neutral-moderate", stickyHeader && "sticky top-0 z-10"), children: headerGroups.map((headerGroup) => (jsxRuntime.jsxs("tr", { children: [enableRowSelection && enableSelectAll && (jsxRuntime.jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground && "bg-surface-fill-neutral-moderate", "w-10 rounded-tl-xlarge rounded-bl-xlarge", headerClassName), children: jsxRuntime.jsx(Checkbox, { checked: isAllRowsSelected, isIndeterminate: isSomeRowsSelected, onChange: onToggleAllRows, "aria-label": "Select all rows" }) })), headerGroup.headers.map((header, index) => {
+                    const shouldHideColumn = isDetailPanelOpen && index >= visibleHeadersCount;
+                    const isLastVisibleColumn = isDetailPanelOpen
+                        ? index === visibleHeadersCount - 1
+                        : index === headerGroup.headers.length - 1;
+                    return (jsxRuntime.jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground &&
+                            "bg-surface-fill-neutral-moderate border-none", !enableRowSelection &&
+                            index === 0 &&
+                            "rounded-tl-xlarge rounded-bl-xlarge", isLastVisibleColumn && "rounded-tr-xlarge rounded-br-xlarge", header.column.columnDef.meta?.headerClassName, headerClassName, "transition-all duration-300 ease-in-out", shouldHideColumn
+                            ? "opacity-0 translate-x-8 pointer-events-none"
+                            : "opacity-100 translate-x-0"), style: {
+                            width: header.getSize(),
+                            minWidth: header.column.columnDef.minSize,
+                            maxWidth: header.column.columnDef.maxSize,
+                        }, children: header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() && "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsxRuntime.jsx("span", { className: "text-surface-ink-neutral-muted", children: {
+                                        asc: "↑",
+                                        desc: "↓",
+                                    }[header.column.getIsSorted()] ?? "↕" }))] })) }, header.id));
+                })] }, headerGroup.id))) }));
+}
+
+function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, }) {
+    const [focusedCell, setFocusedCell] = React__namespace.useState(null);
+    const [hoveredRow, setHoveredRow] = React__namespace.useState(null);
+    return (jsxRuntime.jsx("tbody", { className: "bg-surface-fill-neutral-intense", children: rows.map((row) => {
+            const isRowSelected = row.id === effectiveSelectedRowId;
+            const isRowHovered = hoveredRow === row.id;
+            const handleClick = () => handleRowClick(row.original, row.id);
+            return (jsxRuntime.jsxs("tr", { className: cn(variant === "striped" &&
+                    row.index % 2 === 1 &&
+                    "bg-surface-fill-neutral-moderate", onRowClick && "cursor-pointer", isRowSelected && "bg-action-fill-primary-faded", isRowHovered &&
+                    showRowHover &&
+                    "bg-surface-fill-neutral-moderate", getRowClassName(row.original)), onClick: handleClick, onMouseEnter: () => setHoveredRow(row.id), onMouseLeave: () => setHoveredRow(null), children: [enableRowSelection && (jsxRuntime.jsx("td", { className: cn(tableCellVariants({ size }), "w-10", cellClassName), children: jsxRuntime.jsx(Checkbox, { checked: row.getIsSelected(), isIndeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler(), onClick: (e) => e.stopPropagation(), "aria-label": `Select row ${row.id}` }) })), row.getVisibleCells().map((cell, cellIndex) => {
+                        const shouldHideColumn = isDetailPanelOpen && cellIndex >= visibleHeadersCount;
+                        const isCellFocused = focusedCell?.rowId === row.id &&
+                            focusedCell?.cellId === cell.id;
+                        const cellState = isCellFocused ? "focus" : "default";
+                        return (jsxRuntime.jsx("td", { className: cn(tableCellVariants({ size, state: cellState }), cell.column.columnDef.meta?.cellClassName, cellClassName, "transition-all duration-300 ease-in-out", shouldHideColumn
+                                ? "opacity-0 translate-x-8 pointer-events-none"
+                                : "opacity-100 translate-x-0"), style: {
+                                width: cell.column.getSize(),
+                                minWidth: cell.column.columnDef.minSize,
+                                maxWidth: cell.column.columnDef.maxSize,
+                            }, tabIndex: 0, onFocus: () => setFocusedCell({ rowId: row.id, cellId: cell.id }), onBlur: () => setFocusedCell(null), children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                    })] }, row.id));
+        }) }));
+}
+
+function DetailPanel({ isOpen, content, data, onClose, }) {
+    return (jsxRuntime.jsx("div", { className: cn("absolute top-0 right-0 h-full z-20 transition-all duration-300 ease-in-out", isOpen
+            ? "translate-x-0 opacity-100"
+            : "translate-x-full opacity-0 pointer-events-none"), style: { width: "332px", paddingLeft: "12px" }, children: jsxRuntime.jsx("div", { className: "w-full h-full bg-white border border-surface-outline-neutral-muted rounded-tr-xlarge rounded-br-xlarge overflow-hidden", children: jsxRuntime.jsx("div", { className: "w-full h-full overflow-auto", children: data && (jsxRuntime.jsxs("div", { className: "relative h-full", children: [jsxRuntime.jsx("button", { onClick: (e) => {
+                                e.stopPropagation();
+                                onClose();
+                            }, className: "absolute top-4 right-4 z-10 p-2 rounded-medium hover:bg-surface-fill-neutral-faded transition-colors", "aria-label": "Close detail panel", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-surface-ink-neutral-muted", children: jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }), content(data)] })) }) }) }));
+}
+
+function renderDefaultLoadingState({ colSpan }) {
+    return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: colSpan, className: "text-center py-12 text-surface-ink-neutral-muted", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-action-fill-primary-default" }), jsxRuntime.jsx("span", { children: "Loading..." })] }) }) }));
+}
+function renderDefaultEmptyState({ colSpan }) {
+    return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: colSpan, className: "text-center py-12 text-surface-ink-neutral-muted", children: "No data available" }) }));
+}
+
+// ==================== Component ====================
+function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, ...props }, ref) {
+    // ==================== State ====================
+    const [internalSelectedRowId, setInternalSelectedRowId] = React__namespace.useState(null);
+    const selectedRowIdRef = React__namespace.useRef(null);
+    const effectiveSelectedRowId = selectedRowId !== undefined ? selectedRowId : internalSelectedRowId;
+    const isDetailPanelOpen = Boolean(effectiveSelectedRowId);
+    // ==================== Effects ====================
+    // Keep ref in sync
+    React__namespace.useEffect(() => {
+        selectedRowIdRef.current = effectiveSelectedRowId;
+    }, [effectiveSelectedRowId]);
+    // Clear selection if selected row is not in current data
+    React__namespace.useEffect(() => {
+        if (effectiveSelectedRowId) {
+            const rowExists = table
+                .getRowModel()
+                .rows.some((r) => r.id === effectiveSelectedRowId);
+            if (!rowExists) {
+                if (selectedRowId === undefined) {
+                    setInternalSelectedRowId(null);
+                }
+                if (onRowSelectionChange) {
+                    onRowSelectionChange(null);
+                }
+            }
+        }
+    }, [
+        table.getRowModel().rows,
+        effectiveSelectedRowId,
+        selectedRowId,
+        onRowSelectionChange,
+    ]);
+    // ==================== Computed Values ====================
     const hasData = table.getRowModel().rows?.length > 0;
-    const getRowClassName = (row) => {
+    const headerGroups = table.getHeaderGroups();
+    const headers = headerGroups[0]?.headers || [];
+    const visibleHeadersCount = React__namespace.useMemo(() => {
+        return isDetailPanelOpen
+            ? headers.length - hideColumnsOnDetailOpen
+            : headers.length;
+    }, [isDetailPanelOpen, headers.length, hideColumnsOnDetailOpen]);
+    // ==================== Callbacks ====================
+    const getRowClassName = React__namespace.useCallback((row) => {
         if (typeof rowClassName === "function") {
             return rowClassName(row);
         }
         return rowClassName || "";
+    }, [rowClassName]);
+    const handleRowClickInternal = React__namespace.useCallback((row, rowId) => {
+        const currentSelectedId = selectedRowIdRef.current;
+        const newSelectedId = currentSelectedId === rowId ? null : rowId;
+        if (selectedRowId === undefined) {
+            setInternalSelectedRowId(newSelectedId);
+        }
+        if (onRowSelectionChange) {
+            onRowSelectionChange(newSelectedId);
+        }
+        if (onRowClick) {
+            onRowClick(row);
+        }
+    }, [selectedRowId, onRowSelectionChange, onRowClick]);
+    const getSelectedRowData = () => {
+        if (!effectiveSelectedRowId)
+            return null;
+        const row = table
+            .getRowModel()
+            .rows.find((r) => r.id === effectiveSelectedRowId);
+        return row ? row.original : null;
+    };
+    const handleDetailPanelClose = () => {
+        if (selectedRowId === undefined) {
+            setInternalSelectedRowId(null);
+        }
+        if (onRowSelectionChange) {
+            onRowSelectionChange(null);
+        }
     };
+    // ==================== Render Helpers ====================
     const renderLoadingState = () => {
-        if (loadingComponent) {
+        if (loadingComponent)
             return loadingComponent;
-        }
-        return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: table.getAllColumns().length, className: "text-center py-12 text-surface-ink-neutral-muted", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-action-fill-primary-default" }), jsxRuntime.jsx("span", { children: "Loading..." })] }) }) }));
+        return renderDefaultLoadingState({ colSpan: table.getAllColumns().length });
     };
     const renderEmptyState = () => {
-        if (emptyComponent) {
+        if (emptyComponent)
             return emptyComponent;
-        }
-        return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: table.getAllColumns().length, className: "text-center py-12 text-surface-ink-neutral-muted", children: "No data available" }) }));
+        return renderDefaultEmptyState({ colSpan: table.getAllColumns().length });
     };
-    return (jsxRuntime.jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxRuntime.jsx("div", { className: cn("relative", enableHorizontalScroll && "overflow-x-auto", maxHeight && "overflow-y-auto", containerClassName), style: maxHeight ? { maxHeight } : undefined, children: jsxRuntime.jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsxRuntime.jsx("thead", { className: cn(showHeaderBackground && "bg-surface-fill-neutral-moderate", stickyHeader && "sticky top-0 z-10"), children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs("tr", { children: [enableRowSelection && enableSelectAll && (jsxRuntime.jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground &&
-                                        "bg-surface-fill-neutral-moderate", "w-10 rounded-tl-xlarge rounded-bl-xlarge", headerClassName), children: jsxRuntime.jsx(Checkbox, { checked: table.getIsAllRowsSelected(), isIndeterminate: table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler(), "aria-label": "Select all rows" }) })), headerGroup.headers.map((header, index) => (jsxRuntime.jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground &&
-                                        "bg-surface-fill-neutral-moderate border-none", 
-                                    // Apply rounded corners to first and last headers
-                                    !enableRowSelection &&
-                                        index === 0 &&
-                                        "rounded-tl-xlarge rounded-bl-xlarge", index === headerGroup.headers.length - 1 &&
-                                        "rounded-tr-xlarge rounded-br-xlarge", header.column.columnDef.meta?.headerClassName, headerClassName), style: {
-                                        width: header.getSize(),
-                                        minWidth: header.column.columnDef.minSize,
-                                        maxWidth: header.column.columnDef.maxSize,
-                                    }, children: header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() &&
-                                            "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsxRuntime.jsx("span", { className: "text-surface-ink-neutral-muted", children: {
-                                                    asc: "↑",
-                                                    desc: "↓",
-                                                }[header.column.getIsSorted()] ?? "↕" }))] })) }, header.id)))] }, headerGroup.id))) }), jsxRuntime.jsx("tbody", { className: "bg-surface-fill-neutral-intense", children: isLoading
-                            ? renderLoadingState()
-                            : !hasData
-                                ? renderEmptyState()
-                                : table.getRowModel().rows.map((row) => (jsxRuntime.jsxs("tr", { className: cn(variant === "striped" &&
-                                        row.index % 2 === 1 &&
-                                        "bg-surface-fill-neutral-moderate", showRowHover && "hover:bg-surface-fill-neutral-moderate", onRowClick && "cursor-pointer", getRowClassName(row.original)), onClick: () => onRowClick?.(row.original), children: [enableRowSelection && (jsxRuntime.jsx("td", { className: cn(tableCellVariants({ size }), "w-10", cellClassName), children: jsxRuntime.jsx(Checkbox, { checked: row.getIsSelected(), isIndeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler(), onClick: (e) => e.stopPropagation(), "aria-label": `Select row ${row.id}` }) })), row.getVisibleCells().map((cell) => (jsxRuntime.jsx("td", { className: cn(tableCellVariants({ size }), cell.column.columnDef.meta?.cellClassName, cellClassName), style: {
-                                                width: cell.column.getSize(),
-                                                minWidth: cell.column.columnDef.minSize,
-                                                maxWidth: cell.column.columnDef.maxSize,
-                                            }, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)))] }, row.id))) })] }) }) }));
+    // ==================== Render ====================
+    return (jsxRuntime.jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxRuntime.jsxs("div", { className: cn("relative overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: maxHeight ? { maxHeight } : undefined, children: [jsxRuntime.jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsxRuntime.jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected() }), isLoading ? (jsxRuntime.jsx("tbody", { children: renderLoadingState() })) : !hasData ? (jsxRuntime.jsx("tbody", { children: renderEmptyState() })) : (jsxRuntime.jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, effectiveSelectedRowId: effectiveSelectedRowId, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal }))] }), detailPanel && (jsxRuntime.jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
 }
-// Use React.forwardRef with generic type
+// ==================== Export ====================
 const Table = React__namespace.forwardRef(TableComponent);
 Table.displayName = "Table";
 
+const TableDetailPanel = React__namespace.forwardRef(({ isOpen, onClose, children, className, width = "400px" }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: cn("absolute top-0 right-0 h-full bg-white border  border-surface-outline-neutral-muted  transition-transform duration-300 ease-in-out overflow-auto", isOpen ? "translate-x-0" : "translate-x-full", className), style: { width }, children: children }));
+});
+TableDetailPanel.displayName = "TableDetailPanel";
+
+function NumberCell({ value, currency, subtitle, className, }) {
+    return (jsxRuntime.jsxs("div", { className: cn("flex flex-col", className), children: [jsxRuntime.jsxs("div", { className: "text-body-medium-medium text-surface-ink-neutral-normal", children: [currency, " ", value.toLocaleString("en-IN", {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2,
+                    })] }), subtitle && (jsxRuntime.jsx("div", { className: "text-body-small-regular text-surface-ink-neutral-muted", children: subtitle }))] }));
+}
+function IconCell({ icon, background = "neutral", className, }) {
+    const backgrounds = {
+        neutral: "bg-surface-fill-neutral-faded",
+        primary: "bg-action-fill-primary-faded",
+        success: "bg-action-fill-positive-faded",
+        warning: "bg-action-fill-warning-faded",
+        danger: "bg-action-fill-negative-faded",
+    };
+    return (jsxRuntime.jsx("div", { className: cn("inline-flex items-center justify-center w-10 h-10 rounded-medium", backgrounds[background], className), children: icon }));
+}
+// ==================== Spacer Cell ====================
+function SpacerCell() {
+    return jsxRuntime.jsx("div", { className: "w-full h-full" });
+}
+function SlotCell({ onDragStart, onDragEnd, className }) {
+    return (jsxRuntime.jsx("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, className: cn("flex items-center justify-center cursor-grab active:cursor-grabbing", className), children: jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-surface-ink-neutral-muted", children: [jsxRuntime.jsx("path", { d: "M6 4C6 3.44772 5.55228 3 5 3C4.44772 3 4 3.44772 4 4C4 4.55228 4.44772 5 5 5C5.55228 5 6 4.55228 6 4Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M6 8C6 7.44772 5.55228 7 5 7C4.44772 7 4 7.44772 4 8C4 8.55228 4.44772 9 5 9C5.55228 9 6 8.55228 6 8Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13C5.55228 13 6 12.5523 6 12Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M12 4C12 3.44772 11.5523 3 11 3C10.4477 3 10 3.44772 10 4C10 4.55228 10.4477 5 11 5C11.5523 5 12 4.55228 12 4Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M12 8C12 7.44772 11.5523 7 11 7C10.4477 7 10 7.44772 10 8C10 8.55228 10.4477 9 11 9C11.5523 9 12 8.55228 12 8Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M12 12C12 11.4477 11.5523 11 11 11C10.4477 11 10 11.4477 10 12C10 12.5523 10.4477 13 11 13C11.5523 13 12 12.5523 12 12Z", fill: "currentColor" })] }) }));
+}
+function AvatarCell({ name, initials, avatar, subtitle, color = "a1", className, }) {
+    return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", className), children: [avatar ? (jsxRuntime.jsx("img", { src: avatar, alt: name, className: "w-10 h-10 rounded-full object-cover" })) : (jsxRuntime.jsx("div", { className: cn("w-10 h-10 rounded-full flex items-center justify-center text-body-medium-medium", `bg-${color}`), children: initials || name.charAt(0).toUpperCase() })), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx("div", { className: "text-body-medium-medium text-surface-ink-neutral-normal", children: name }), subtitle && (jsxRuntime.jsx("div", { className: "text-body-small-regular text-surface-ink-neutral-muted", children: subtitle }))] })] }));
+}
+
 const tabItemVariants = classVarianceAuthority.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative cursor-pointer", {
     variants: {
         variant: {
@@ -2976,6 +3129,7 @@ const TextArea = React__namespace.forwardRef(({ label, helperText, errorText, su
 TextArea.displayName = "TextArea";
 
 exports.Avatar = Avatar;
+exports.AvatarCell = AvatarCell;
 exports.Badge = Badge;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
@@ -2987,16 +3141,21 @@ exports.DropdownMenu = DropdownMenu;
 exports.FormFooter = FormFooter;
 exports.FormHeader = FormHeader;
 exports.Icon = Icon;
+exports.IconCell = IconCell;
 exports.Link = Link;
 exports.ListItem = ListItem;
 exports.Modal = Modal;
+exports.NumberCell = NumberCell;
 exports.Pagination = Pagination;
 exports.Radio = Radio;
 exports.SearchableDropdown = SearchableDropdown;
 exports.Select = Select;
+exports.SlotCell = SlotCell;
+exports.SpacerCell = SpacerCell;
 exports.Switch = Switch;
 exports.TabItem = TabItem;
 exports.Table = Table;
+exports.TableDetailPanel = TableDetailPanel;
 exports.Tabs = Tabs;
 exports.Text = Text;
 exports.TextArea = TextArea;