pixelize-design-library 2.4.2-beta.59 → 2.4.2-beta.61

package/dist/Components/Table/components/TableBody.js

@@ -54,6 +54,7 @@ const rowMetrics_1 = require("./rowMetrics");
 const columnLabel_1 = require("../columnLabel");
 const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../../Theme/chakra/motion");
+const rowDetail_1 = require("./rowDetail");
 const getRowId = (row) => row.id;
 const getRowContent = (row) => typeof row.content === "function"
     ? row.content
@@ -87,20 +88,26 @@ const StatusCell = ({ value, onSolid, align, }) => ((0, jsx_runtime_1.jsx)(react
 // the group header already uses, so an override hex behaves identically in both.
 const StatusPill = ({ value, soft, ink, radius, }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: "100%", px: "0.5rem", py: "0.125rem", borderRadius: radius, bg: soft, color: ink, fontSize: "0.75rem", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
 const EMPTY_HOVER = {};
-const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, isStriped, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
+const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, isStriped, rowDetail, isDetailOpen = false, detailLeft = 0, detailColSpan = 0, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
     // Measured-height virtualization: report this row's real height (main + any
     // expanded panel) so the windower can place variable/expandable rows exactly.
     const mainRowRef = (0, react_2.useRef)(null);
     const expandedRowRef = (0, react_2.useRef)(null);
+    const detailRowRef = (0, react_2.useRef)(null);
     const hasContent = !!getRowContent(row);
+    const detailNode = rowDetail ? rowDetail.render(row) : null;
+    const hasDetail = detailNode !== null && detailNode !== undefined;
+    const detailOpen = isDetailOpen && hasDetail;
+    const detailIds = rowDetail ? (0, rowDetail_1.detailDomIds)(rowDetail.idPrefix, getRowId(row)) : null;
     (0, react_2.useLayoutEffect)(() => {
         if (!onMeasure)
             return;
         const measure = () => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
             const main = (_b = (_a = mainRowRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
             const exp = isExpanded && hasContent ? (_d = (_c = expandedRowRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0 : 0;
-            const h = main + exp;
+            const det = detailOpen ? (_f = (_e = detailRowRef.current) === null || _e === void 0 ? void 0 : _e.offsetHeight) !== null && _f !== void 0 ? _f : 0 : 0;
+            const h = main + exp + det;
             if (h > 0)
                 onMeasure(getRowId(row), h);
         };
@@ -113,12 +120,14 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
                 ro.observe(mainRowRef.current);
             if (expandedRowRef.current)
                 ro.observe(expandedRowRef.current);
+            if (detailRowRef.current)
+                ro.observe(detailRowRef.current);
         }
         return () => {
             cancelAnimationFrame(raf);
             ro === null || ro === void 0 ? void 0 : ro.disconnect();
         };
-    }, [onMeasure, isExpanded, hasContent, row]);
+    }, [onMeasure, isExpanded, hasContent, detailOpen, row]);
     const handleCellClick = (0, react_2.useCallback)((header) => {
         if (!header.node && onRowClick) {
             onRowClick(row, {
@@ -148,6 +157,10 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
                 "& .table-slot-index": { opacity: isChecked ? 0 : 1 },
                 "&:hover .table-slot-box, &:focus-within .table-slot-box": { opacity: 1 },
                 "&:hover .table-slot-index, &:focus-within .table-slot-index": { opacity: 0 },
+                "@media (pointer: coarse)": {
+                    "& .table-slot-box": { opacity: 1 },
+                    "& .table-slot-index": { opacity: 0 },
+                },
             }
             : {}),
     };
@@ -159,12 +172,12 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
     const chromeHoverable = rowStyle ? "false" : "true";
     const rowContent = getRowContent(row);
     const restBg = isStriped ? variant.row.stripeBg : theme.colors.background[50];
-    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: { ...rowSx, ...(0, motion_2.reducedMotionSx)() }, children: [isContent && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: hasContent && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { fontSize: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: (0, motion_1.transitionFor)(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...(0, motion_2.reducedMotionSx)() }, children: rowIndex + 1 })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), columns.map((header, headerIndex) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: { ...rowSx, ...(0, motion_2.reducedMotionSx)() }, children: [isContent && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: hasContent && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { fontSize: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: (0, motion_1.transitionFor)(["opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...(0, motion_2.reducedMotionSx)() }, children: rowIndex + 1 })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), rowDetail && detailIds && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: `${rowDetail_1.DETAIL_SLOT_PX}px`, minW: `${rowDetail_1.DETAIL_SLOT_PX}px`, maxW: `${rowDetail_1.DETAIL_SLOT_PX}px`, p: 0, textAlign: "center", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent && !isCheckbox ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: `${detailLeft}px`, zIndex: 1, className: "columns sticky-columns", children: hasDetail && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailToggle, { isOpen: detailOpen, detailId: detailIds.detailId, color: theme.colors.textMuted, theme: theme, onToggle: () => rowDetail.toggle(getRowId(row)) })) })), columns.map((header, headerIndex) => {
                         var _a, _b, _c, _d;
                         if (header.isHidden)
                             return null;
                         const isFrozen = header.isFreeze;
-                        const isFirstDataCell = !isContent && !isCheckbox && headerIndex === firstDataColIndex;
+                        const isFirstDataCell = !isContent && !isCheckbox && !rowDetail && headerIndex === firstDataColIndex;
                         const isStatus = header.type === "status" && !header.node;
                         const rawStatus = String((_a = row[header.id]) !== null && _a !== void 0 ? _a : "");
                         const statusColor = isStatus
@@ -174,7 +187,7 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
                         const bleedBg = statusColor === null || statusColor === void 0 ? void 0 : statusColor.soft;
                         const bleedInk = statusColor === null || statusColor === void 0 ? void 0 : statusColor.text;
                         const canHover = !isBleed && !((cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle);
-                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffsets[headerIndex]}px` : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : restBg, textAlign: isBleed ? undefined : header.align, textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
+                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, id: hasDetail && headerIndex === firstDataColIndex ? detailIds === null || detailIds === void 0 ? void 0 : detailIds.cellId : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? `${leftOffsets[headerIndex]}px` : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : restBg, textAlign: isBleed ? undefined : header.align, textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
                                 ? "none"
                                 : `0.063rem solid ${isFrozen || isChecked
                                     ? variant.row.frozenRuleColor
@@ -184,7 +197,7 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
                     }), isLink && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : restBg, color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? ((0, jsx_runtime_1.jsx)(TableActions_1.default, { row: row })) : null }))] }), rowContent && isExpanded && ((0, jsx_runtime_1.jsx)(react_1.Tr, { ref: expandedRowRef, children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: columns.length +
                         (isCheckbox ? 1 : 0) +
                         (isContent ? 1 : 0) +
-                        (isLink ? 1 : 0), p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Box, { p: 2, bg: theme.colors.background[50], borderRadius: "lg", children: rowContent(row) }) }) }))] }));
+                        (isLink ? 1 : 0), p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Box, { p: 2, bg: theme.colors.background[50], borderRadius: "lg", children: rowContent(row) }) }) })), detailOpen && detailIds && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailRow, { ref: detailRowRef, id: detailIds.detailId, labelledBy: detailIds.cellId, colSpan: detailColSpan, bg: theme.colors.backgroundColor.secondary, borderColor: variant.row.ruleColor, noBorders: noBorders, children: detailNode }))] }));
 });
 const isStructuredEmpty = (value) => !!value && typeof value === "object" && !react_2.default.isValidElement(value);
 const TableEmpty = ({ emptyState }) => {
@@ -195,7 +208,7 @@ const TableEmpty = ({ emptyState }) => {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emptyState });
     return ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { size: "sm", minH: `${rowMetrics_1.EMPTY_STATE_HEIGHT}px`, title: structured === null || structured === void 0 ? void 0 : structured.title, description: structured === null || structured === void 0 ? void 0 : structured.description, icon: icon }));
 };
-const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWidths, slotWidth, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe = false, accentColors, groups, onAddItem, emptyState, }) => {
+const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWidths, slotWidth, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, stripe = false, accentColors, groups, onAddItem, emptyState, rowDetail, expandedIds, }) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const variant = (0, TableVariantContext_1.useTableVariant)();
@@ -222,6 +235,8 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
     const OVERSCAN = 6;
     const VIRTUALIZE_THRESHOLD = 30;
     const ESTIMATED_EXPAND = 120; // assumed extra height for an expanded-but-not-yet-measured row
+    const detailWidth = rowDetail ? rowDetail_1.DETAIL_SLOT_PX : 0;
+    const detailLeft = isCheckbox ? slotWidth : 0;
     const shouldVirtualize = data.length > VIRTUALIZE_THRESHOLD;
     // Grouped mode has no pager, so it virtualizes too (when no expandable rows):
     // group headers + rows form one flat sequence that we window over.
@@ -293,11 +308,12 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
             const measured = measuredHeights.get(id);
             const h = measured != null
                 ? measured
-                : ROW_HEIGHT + (expandedRows.has(startRow + i) ? ESTIMATED_EXPAND : 0);
+                : ROW_HEIGHT +
+                    (expandedRows.has(startRow + i) || (expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(id)) ? ESTIMATED_EXPAND : 0);
             acc[i + 1] = acc[i] + h;
         }
         return acc;
-    }, [shouldVirtualize, groups, total, data, measuredHeights, expandedRows, startRow, ROW_HEIGHT, ESTIMATED_EXPAND]);
+    }, [shouldVirtualize, groups, total, data, measuredHeights, expandedRows, expandedIds, startRow, ROW_HEIGHT, ESTIMATED_EXPAND]);
     let firstIndex = 0;
     let lastIndex = total;
     let topPad = 0;
@@ -340,11 +356,12 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
     const totalVisibleColumns = (0, react_2.useMemo)(() => columns.filter((o) => !o.isHidden).length +
         (isCheckbox ? 1 : 0) +
         (isContent ? 1 : 0) +
-        (isLink ? 1 : 0), [columns, isCheckbox, isContent, isLink]);
+        (rowDetail ? 1 : 0) +
+        (isLink ? 1 : 0), [columns, isCheckbox, isContent, isLink, rowDetail]);
     const leftOffsets = (0, react_2.useMemo)(() => {
-        const checkboxOffset = isCheckbox ? slotWidth : 0;
+        const checkboxOffset = (isCheckbox ? slotWidth : 0) + detailWidth;
         return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
-    }, [columnWidths, isCheckbox, slotWidth]);
+    }, [columnWidths, isCheckbox, slotWidth, detailWidth]);
     const borderStyle = (0, react_2.useMemo)(() => noBorders ? "none" : `0.063rem solid ${variant.row.ruleColor}`, [noBorders, variant.row.ruleColor]);
     // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
     // cells keep their solid color + white text instead of white-on-tint.
@@ -372,7 +389,15 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
     const groupMetrics = (0, react_2.useMemo)(() => {
         if (!groupItems || !groupVirtualize)
             return null;
-        const heights = groupItems.map((it) => (it.kind === "header" ? rowMetrics_1.GROUP_HEADER_HEIGHT : rowHeight));
+        const heights = groupItems.map((it) => {
+            var _a;
+            if (it.kind === "header")
+                return rowMetrics_1.GROUP_HEADER_HEIGHT;
+            if (!rowDetail)
+                return rowHeight;
+            const id = getRowId(it.row);
+            return (_a = measuredHeights.get(id)) !== null && _a !== void 0 ? _a : rowHeight + ((expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(id)) ? ESTIMATED_EXPAND : 0);
+        });
         const offsets = [];
         let acc = 0;
         for (const h of heights) {
@@ -380,7 +405,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
             acc += h;
         }
         return { heights, offsets, totalH: acc };
-    }, [groupItems, groupVirtualize, rowHeight]);
+    }, [groupItems, groupVirtualize, rowHeight, rowDetail, measuredHeights, expandedIds, ESTIMATED_EXPAND]);
     // Clamp scrollTop back when a shorter data set leaves it past the new content height.
     (0, react_2.useEffect)(() => {
         const totalH = shouldVirtualize && offsets ? offsets[total] : groupVirtualize && groupMetrics ? groupMetrics.totalH : null;
@@ -447,7 +472,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
         const windowItems = groupVirtualize ? items.slice(firstI, lastI) : items;
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [gTopPad > 0 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", style: { height: gTopPad }, children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gTopPad } }) })), windowItems.map((it, k) => {
                     var _a;
-                    return it.kind === "header" ? ((0, jsx_runtime_1.jsx)(TableGroupRow_1.default, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : ((0, jsx_runtime_1.jsx)(TableRow, { row: it.row, rowIndex: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, isStriped: stripe && it.pos % 2 === 1, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
+                    return it.kind === "header" ? ((0, jsx_runtime_1.jsx)(TableGroupRow_1.default, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : ((0, jsx_runtime_1.jsx)(TableRow, { row: it.row, rowIndex: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, isStriped: stripe && it.pos % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(it.row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: groupVirtualize && rowDetail ? reportHeight : undefined }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
                 }), gBottomPad > 0 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", style: { height: gBottomPad }, children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gBottomPad } }) }))] }));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isLoading && data.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0, children: (0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10, children: (0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: theme.colors.accentText }) }) }) })), shouldVirtualize && topPad > 0 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", style: { height: topPad }, children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }) })), visibleRows.map((row, i) => {
@@ -456,7 +481,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
                 const rowIndex = startRow + index;
                 const isExpanded = expandedRows.has(rowIndex);
                 const isChecked = selectionsSet.has(getRowId(row));
-                return ((0, jsx_runtime_1.jsx)(TableRow, { row: row, rowIndex: rowIndex, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], isStriped: stripe && index % 2 === 1, ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
+                return ((0, jsx_runtime_1.jsx)(TableRow, { row: row, rowIndex: rowIndex, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], isStriped: stripe && index % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
             }), shouldVirtualize && bottomPad > 0 && ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": "true", style: { height: bottomPad }, children: (0, jsx_runtime_1.jsx)("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } }) }))] }));
 };
 exports.default = TableBody;

package/dist/Components/Table/components/TableHeader.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableHeaderPageProps } from "../TableProps";
-declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, hasDetail, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/Components/Table/components/TableHeader.js

@@ -17,13 +17,15 @@ const TableVariantContext_1 = require("../variants/TableVariantContext");
 const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+const rowDetail_1 = require("./rowDetail");
 const LABEL_JUSTIFY = { start: "space-between", center: "center", end: "flex-start" };
-const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
+const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, hasDetail = false, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
     const [openFilterId, setOpenFilterId] = (0, react_2.useState)(null);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && (0, jsx_runtime_1.jsx)(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && ((0, jsx_runtime_1.jsx)(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), columns.map((header, index) => {
+    const variant = (0, TableVariantContext_1.useTableVariant)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && (0, jsx_runtime_1.jsx)(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && ((0, jsx_runtime_1.jsx)(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), hasDetail && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailHeaderCell, { left: isCheckbox ? slotWidth : 0, bg: variant.header.bg, ruleColor: variant.header.ruleColor, noBorders: noBorders })), columns.map((header, index) => {
                 if (header === null || header === void 0 ? void 0 : header.isHidden)
                     return null;
-                return ((0, jsx_runtime_1.jsx)(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, (0, columnLabel_1.columnLabelText)(header)));
+                return ((0, jsx_runtime_1.jsx)(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, detailWidth: hasDetail ? rowDetail_1.DETAIL_SLOT_PX : 0, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, (0, columnLabel_1.columnLabelText)(header)));
             }), isLink && (0, jsx_runtime_1.jsx)(ViewSpacerCell, { noBorders: noBorders, isActionFreeze: isActionFreeze })] }));
 };
 exports.default = (0, react_2.memo)(TableHeader);
@@ -48,7 +50,7 @@ const SortingIcon = (0, react_2.memo)(({ label, sortState, isVisible, handleSort
             color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, variant.header.bg),
         }, children: [sortState === "none" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { size: 14 }), sortState === "asc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), sortState === "desc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 })] }));
 });
-const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, slotWidth, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
+const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, slotWidth, detailWidth = 0, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
     var _a, _b;
     const [isHovered, setIsHovered] = (0, react_2.useState)(false);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -56,7 +58,7 @@ const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, slotWidth
     const isFrozen = header.isFreeze;
     const align = (_a = header.align) !== null && _a !== void 0 ? _a : "start";
     const leftOffset = isFrozen
-        ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? slotWidth : 0)
+        ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? slotWidth : 0) + detailWidth
         : undefined;
     const isSorting = header.isSort
         ? columnsSort.find((o) => o.column === header.id)

package/dist/Components/Table/components/rowDetail.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { CustomThemeProps } from "../../../Theme/themeProps";
+export declare const DETAIL_SLOT_PX = 40;
+export declare const detailDomIds: (prefix: string, rowId: string | number) => {
+    cellId: string;
+    detailId: string;
+};
+export declare const RowDetailHeaderCell: ({ left, bg, ruleColor, noBorders, }: {
+    left: number;
+    bg: string;
+    ruleColor: string;
+    noBorders?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+type ToggleProps = {
+    isOpen: boolean;
+    detailId: string;
+    color: string;
+    theme: CustomThemeProps;
+    onToggle: () => void;
+};
+export declare const RowDetailToggle: ({ isOpen, detailId, color, theme, onToggle }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+type DetailRowProps = {
+    id: string;
+    labelledBy: string;
+    colSpan: number;
+    bg: string;
+    borderColor: string;
+    noBorders?: boolean;
+    children: React.ReactNode;
+};
+export declare const RowDetailRow: React.ForwardRefExoticComponent<DetailRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export {};

package/dist/Components/Table/components/rowDetail.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowDetailRow = exports.RowDetailToggle = exports.RowDetailHeaderCell = exports.detailDomIds = exports.DETAIL_SLOT_PX = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
+exports.DETAIL_SLOT_PX = 40;
+const detailDomIds = (prefix, rowId) => {
+    const safe = `${prefix}-${rowId}`.replace(/\s+/g, "_");
+    return { cellId: `${safe}-cell`, detailId: `${safe}-detail` };
+};
+exports.detailDomIds = detailDomIds;
+const RowDetailHeaderCell = ({ left, bg, ruleColor, noBorders, }) => ((0, jsx_runtime_1.jsx)(react_2.Th, { scope: "col", w: `${exports.DETAIL_SLOT_PX}px`, minW: `${exports.DETAIL_SLOT_PX}px`, maxW: `${exports.DETAIL_SLOT_PX}px`, p: 0, boxSizing: "border-box", backgroundColor: bg, position: "sticky", left: `${left}px`, zIndex: 9, className: "columns sticky-columns", borderBottom: noBorders ? "none" : `0.063rem solid ${ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: "Row details" }) }));
+exports.RowDetailHeaderCell = RowDetailHeaderCell;
+const RowDetailToggle = ({ isOpen, detailId, color, theme, onToggle }) => ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": isOpen ? "Collapse row details" : "Expand row details", "aria-expanded": isOpen, "aria-controls": detailId, icon: isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 }), color: color, size: "sm", variant: "ghost", onClick: onToggle, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors) }));
+exports.RowDetailToggle = RowDetailToggle;
+exports.RowDetailRow = (0, react_1.forwardRef)(({ id, labelledBy, colSpan, bg, borderColor, noBorders, children }, ref) => ((0, jsx_runtime_1.jsx)(react_2.Tr, { ref: ref, id: id, "aria-labelledby": labelledBy, children: (0, jsx_runtime_1.jsx)(react_2.Td, { colSpan: colSpan, p: 0, bg: bg, borderBottom: noBorders ? "none" : `0.063rem solid ${borderColor}`, children: (0, jsx_runtime_1.jsx)(react_2.Box, { px: 4, py: 3, children: children }) }) })));
+exports.RowDetailRow.displayName = "RowDetailRow";

package/dist/Components/Table/hooks/useRowExpansion.d.ts

@@ -0,0 +1,7 @@
+type RowId = string | number;
+/** Expanded-row ids, controlled when `controlled` is given and uncontrolled otherwise. */
+export declare const useRowExpansion: (controlled: RowId[] | undefined, onChange: ((ids: RowId[]) => void) | undefined) => {
+    expandedIds: Set<RowId>;
+    toggle: (id: RowId) => void;
+};
+export {};

package/dist/Components/Table/hooks/useRowExpansion.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRowExpansion = void 0;
+const react_1 = require("react");
+/** Expanded-row ids, controlled when `controlled` is given and uncontrolled otherwise. */
+const useRowExpansion = (controlled, onChange) => {
+    const [internal, setInternal] = (0, react_1.useState)([]);
+    const isControlled = controlled !== undefined;
+    const current = isControlled ? controlled : internal;
+    const currentRef = (0, react_1.useRef)(current);
+    currentRef.current = current;
+    const isControlledRef = (0, react_1.useRef)(isControlled);
+    isControlledRef.current = isControlled;
+    const onChangeRef = (0, react_1.useRef)(onChange);
+    onChangeRef.current = onChange;
+    const toggle = (0, react_1.useCallback)((id) => {
+        var _a;
+        const prev = currentRef.current;
+        const next = prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id];
+        if (!isControlledRef.current)
+            setInternal(next);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, next);
+    }, []);
+    const expandedIds = (0, react_1.useMemo)(() => new Set(current), [current]);
+    return { expandedIds, toggle };
+};
+exports.useRowExpansion = useRowExpansion;

package/dist/Components/Tabs/Tabs.d.ts

@@ -1,3 +1,3 @@
 import type { TabsProps } from "./TabsProps";
-declare const Tabs: ({ items, children, value, defaultValue, onChange, variant, size, colorScheme, orientation, activationMode, isLazy, isFitted, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tabs: ({ items, children, value, defaultValue, onChange, variant, size, colorScheme, orientation, activationMode, isLazy, isFitted, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, linkAs, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/Components/Tabs/Tabs.js

@@ -11,11 +11,21 @@ const TabList_1 = __importDefault(require("./components/TabList"));
 const Tab_1 = __importDefault(require("./components/Tab"));
 const TabPanels_1 = __importDefault(require("./components/TabPanels"));
 const TabPanel_1 = __importDefault(require("./components/TabPanel"));
-const Tabs = ({ items, children, value, defaultValue, onChange, variant = "line", size = "sm", colorScheme = "primary", orientation = "horizontal", activationMode = "automatic", isLazy = false, isFitted = false, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }) => {
+const TabLinkList_1 = __importDefault(require("./components/TabLinkList"));
+const Tabs = ({ items, children, value, defaultValue, onChange, variant = "line", size = "sm", colorScheme = "primary", orientation = "horizontal", activationMode = "automatic", isLazy = false, isFitted = false, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, linkAs = "a", }) => {
+    var _a;
     const generatedId = (0, react_1.useId)();
     const baseId = id !== null && id !== void 0 ? id : generatedId;
     const isControlled = value !== undefined;
-    const [internalValue, setInternalValue] = (0, react_1.useState)(() => { var _a; return defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_a = items === null || items === void 0 ? void 0 : items.find((item) => !item.isDisabled)) === null || _a === void 0 ? void 0 : _a.id; });
+    const linkCount = (_a = items === null || items === void 0 ? void 0 : items.filter((item) => item.href !== undefined).length) !== null && _a !== void 0 ? _a : 0;
+    const isLinkMode = !children && !!(items === null || items === void 0 ? void 0 : items.length) && linkCount === items.length;
+    const isMixed = !children && linkCount > 0 && !isLinkMode;
+    (0, react_1.useEffect)(() => {
+        if (isMixed && process.env.NODE_ENV !== "production") {
+            console.warn("Tabs: some items have `href` and some do not. Link mode needs `href` on every item; rendering a tablist and ignoring `href`.");
+        }
+    }, [isMixed]);
+    const [internalValue, setInternalValue] = (0, react_1.useState)(() => { var _a; return defaultValue !== null && defaultValue !== void 0 ? defaultValue : (isLinkMode ? undefined : (_a = items === null || items === void 0 ? void 0 : items.find((item) => !item.isDisabled)) === null || _a === void 0 ? void 0 : _a.id); });
     const selectedId = isControlled ? value : internalValue;
     const [focusedId, setFocusedId] = (0, react_1.useState)(selectedId);
     const [hasPanels, setHasPanels] = (0, react_1.useState)(() => !!(items === null || items === void 0 ? void 0 : items.some((item) => item.content !== undefined)));
@@ -64,6 +74,9 @@ const Tabs = ({ items, children, value, defaultValue, onChange, variant = "line"
     if (children) {
         return (0, jsx_runtime_1.jsx)(TabsContext_1.TabsContext.Provider, { value: contextValue, children: children });
     }
+    if (isLinkMode) {
+        return ((0, jsx_runtime_1.jsx)(TabsContext_1.TabsContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(TabLinkList_1.default, { items: items, linkAs: linkAs, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) }));
+    }
     const hasContent = !!(items === null || items === void 0 ? void 0 : items.some((item) => item.content !== undefined));
     return ((0, jsx_runtime_1.jsx)(TabsContext_1.TabsContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: orientation === "vertical" ? "row" : "column", alignItems: orientation === "vertical" ? "flex-start" : undefined, gap: orientation === "vertical" ? 4 : 2, children: [(0, jsx_runtime_1.jsx)(TabList_1.default, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: items === null || items === void 0 ? void 0 : items.map((item) => ((0, jsx_runtime_1.jsx)(Tab_1.default, { value: item.id, icon: item.icon, count: item.count, isDisabled: item.isDisabled, children: item.label }, item.id))) }), hasContent ? ((0, jsx_runtime_1.jsx)(TabPanels_1.default, { children: items === null || items === void 0 ? void 0 : items.filter((item) => item.content !== undefined).map((item) => ((0, jsx_runtime_1.jsx)(TabPanel_1.default, { value: item.id, children: item.content }, item.id))) })) : null] }) }));
 };

package/dist/Components/Tabs/TabsProps.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ElementType, ReactNode } from "react";
 import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
 /** Visual treatment; follows the repo's solid/subtle/outline/ghost/line vocabulary. Defaults to "line". */
 export type TabsVariant = "solid" | "subtle" | "outline" | "ghost" | "line";
@@ -8,7 +8,7 @@ export type TabsOrientation = "horizontal" | "vertical";
 export type TabActivationMode = "automatic" | "manual";
 /** Category colour for the selected tab's ink/fill and its count badge. */
 export type TabsColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
-/** One entry in the declarative `items` API; omit `content` when panels are rendered elsewhere (e.g. a route). */
+/** One entry in the declarative `items` API; omit `content` when panels are rendered elsewhere (e.g. a route). With `href` on every item it is a navigation link, not a tab. */
 export interface TabItem {
     id: string;
     label: ReactNode;
@@ -19,6 +19,8 @@ export interface TabItem {
     isDisabled?: boolean;
     /** Panel body for this tab; if no item in `items` sets one, no panel container is rendered at all. */
     content?: ReactNode;
+    /** Makes the item a link. When every item has one, `Tabs` renders a `<nav>` of links instead of a tablist. */
+    href?: string;
 }
 /** Themed, accessible tabs. Pass `items` for the declarative API, or `children` (TabList/Tab/TabPanels/TabPanel) to compose by hand. */
 export interface TabsProps {
@@ -45,6 +47,8 @@ export interface TabsProps {
     id?: string;
     "aria-label"?: string;
     "aria-labelledby"?: string;
+    /** Anchor-like component for `href` items, e.g. a router link. Defaults to "a"; link mode only. */
+    linkAs?: ElementType;
 }
 /** Composed-API tablist wrapper; renders `Tab` children and owns keyboard navigation + overflow scroll. */
 export interface TabListProps {

package/dist/Components/Tabs/components/Tab.js

@@ -6,45 +6,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
-const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
-const outlineRung_1 = require("../../../Theme/tokens/builders/outlineRung");
-const color_1 = require("../../../Theme/tokens/builders/color");
-const motion_1 = require("../../../Theme/tokens/primitives/motion");
-const motion_2 = require("../../../Theme/chakra/motion");
-const controlSizes_1 = require("../../../Theme/tokens/primitives/controlSizes");
-const iconBox_1 = require("../../Common/iconBox");
-const tabStyles_1 = require("../tabStyles");
 const TabsContext_1 = require("../TabsContext");
+const useTabAppearance_1 = require("../useTabAppearance");
 const CountBadge_1 = __importDefault(require("./CountBadge"));
 const Tab = ({ value, children, icon, count, isDisabled }) => {
-    var _a, _b, _c, _d;
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    var _a;
     const ctx = (0, TabsContext_1.useTabsContext)();
     const ref = (0, react_1.useRef)(null);
     const isSelected = ctx.selectedId === value;
     const isFocusTarget = ((_a = ctx.focusedId) !== null && _a !== void 0 ? _a : ctx.selectedId) === value;
-    const isVertical = ctx.orientation === "vertical";
-    const isLine = ctx.variant === "line";
-    const canvas = colors.backgroundColor.main;
-    const scale = (0, tabStyles_1.scaleForColorScheme)(colors, ctx.colorScheme);
-    const style = (0, tabStyles_1.resolveTabStyle)(colors, scale, canvas, ctx.variant, isSelected);
-    const spec = controlSizes_1.BUTTON_SIZES[ctx.size];
-    // The list scrolls on both axes, so an outer ring is clipped into arcs; a negative offset draws it
-    // inside the tab, clear of its own border rather than thickening it.
-    const focusRing = {
-        outline: `1px solid ${(0, outlineRung_1.liftToContrast)(colors.primary[500], 
-        // subtle/ghost fills are translucent tints; contrast has no meaning until they are flattened.
-        style.bg === "transparent" ? canvas : (0, color_1.compositeOver)(style.bg, canvas), outlineRung_1.AA_NON_TEXT)}`,
-        outlineOffset: "-2px",
-    };
-    const borderProps = ctx.variant === "outline"
-        ? { border: "1px solid", borderColor: (_b = style.border) !== null && _b !== void 0 ? _b : "transparent" }
-        : isLine
-            ? isVertical
-                ? { borderLeft: "0.125rem solid", borderLeftColor: (_c = style.indicator) !== null && _c !== void 0 ? _c : "transparent" }
-                : { borderBottom: "0.125rem solid", borderBottomColor: (_d = style.indicator) !== null && _d !== void 0 ? _d : "transparent" }
-            : {};
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: ref, role: "tab", id: (0, TabsContext_1.tabId)(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? (0, TabsContext_1.panelId)(ctx.baseId, value) : undefined, "data-value": value, tabIndex: isDisabled ? -1 : isFocusTarget ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && ctx.select(value), onFocus: () => ctx.focusTab(value), display: "flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flexShrink: 0, flex: ctx.isFitted ? 1 : undefined, w: isVertical ? "100%" : undefined, h: isVertical ? "auto" : spec.height, minH: spec.height, py: isVertical ? "0.5rem" : undefined, px: spec.paddingX, fontSize: spec.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, borderRadius: isLine ? "none" : "lg", bg: style.bg, color: style.color, ...borderProps, transition: (0, motion_1.transitionFor)(["background-color", "color", "border-color"]), sx: { _focusVisible: focusRing, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: focusRing, ...(0, motion_2.reducedMotionSx)() }, _hover: !isDisabled ? { bg: style.hoverBg, color: style.hoverColor } : undefined, children: [icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: `${spec.iconSize}px`, sx: (0, iconBox_1.iconBoxSx)(spec.iconSize), children: icon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", children: children }), count !== undefined ? ((0, jsx_runtime_1.jsx)(CountBadge_1.default, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
+    const { colors, canvas, scale, style, iconSize, iconSx, boxProps } = (0, useTabAppearance_1.useTabAppearance)(isSelected, isDisabled);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: ref, role: "tab", id: (0, TabsContext_1.tabId)(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? (0, TabsContext_1.panelId)(ctx.baseId, value) : undefined, "data-value": value, tabIndex: isDisabled ? -1 : isFocusTarget ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && ctx.select(value), onFocus: () => ctx.focusTab(value), ...boxProps, children: [icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: `${iconSize}px`, sx: iconSx, children: icon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", children: children }), count !== undefined ? ((0, jsx_runtime_1.jsx)(CountBadge_1.default, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
 };
 exports.default = Tab;

package/dist/Components/Tabs/components/TabLinkList.d.ts

@@ -0,0 +1,7 @@
+import type { ElementType } from "react";
+import type { TabsProps } from "../TabsProps";
+type TabLinkListProps = Pick<TabsProps, "items" | "aria-label" | "aria-labelledby"> & {
+    linkAs: ElementType;
+};
+declare const TabLinkList: ({ items, linkAs, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }: TabLinkListProps) => import("react/jsx-runtime").JSX.Element;
+export default TabLinkList;

package/dist/Components/Tabs/components/TabLinkList.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const TabsContext_1 = require("../TabsContext");
+const useTabAppearance_1 = require("../useTabAppearance");
+const CountBadge_1 = __importDefault(require("./CountBadge"));
+const isPlainPrimaryClick = (event) => event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+const TabLink = ({ item, linkAs }) => {
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    const isSelected = ctx.selectedId === item.id;
+    const { colors, canvas, scale, style, iconSize, iconSx, boxProps } = (0, useTabAppearance_1.useTabAppearance)(isSelected, item.isDisabled);
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, boxSize: `${iconSize}px`, sx: iconSx, children: item.icon })) : null, (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", children: item.label }), item.count !== undefined ? ((0, jsx_runtime_1.jsx)(CountBadge_1.default, { count: item.count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
+    if (item.isDisabled) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-disabled": "true", "data-value": item.id, ...boxProps, children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: linkAs, href: item.href, "aria-current": isSelected ? "page" : undefined, "data-value": item.id, onClick: (event) => {
+            if (!event.defaultPrevented && isPlainPrimaryClick(event))
+                ctx.select(item.id);
+        }, ...boxProps, children: content }));
+};
+const TabLinkList = ({ items, linkAs, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const ctx = (0, TabsContext_1.useTabsContext)();
+    const isVertical = ctx.orientation === "vertical";
+    const isLine = ctx.variant === "line";
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "nav", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, direction: isVertical ? "column" : "row", flexShrink: 0, minW: isVertical ? "10rem" : undefined, overflowX: isVertical ? undefined : "auto", overflowY: isVertical ? "auto" : undefined, flexWrap: "nowrap", gap: isLine ? 1 : 1.5, borderBottom: isLine && !isVertical ? "1px solid" : undefined, borderBottomColor: isLine && !isVertical ? colors.boxborder[200] : undefined, borderRight: isLine && isVertical ? "1px solid" : undefined, borderRightColor: isLine && isVertical ? colors.boxborder[200] : undefined, sx: (0, scrollbar_1.scrollbarStyles)(colors, "hover"), children: items === null || items === void 0 ? void 0 : items.map((item) => ((0, jsx_runtime_1.jsx)(TabLink, { item: item, linkAs: linkAs }, item.id))) }));
+};
+exports.default = TabLinkList;

package/dist/Components/Tabs/useTabAppearance.d.ts

@@ -0,0 +1,17 @@
+import type { BoxProps } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { iconBoxSx } from "../Common/iconBox";
+import { resolveTabStyle, scaleForColorScheme } from "./tabStyles";
+import { useTabsContext } from "./TabsContext";
+type TabAppearance = {
+    ctx: ReturnType<typeof useTabsContext>;
+    colors: ReturnType<typeof useCustomTheme>["colors"];
+    canvas: string;
+    scale: ReturnType<typeof scaleForColorScheme>;
+    style: ReturnType<typeof resolveTabStyle>;
+    iconSize: number | string;
+    iconSx: ReturnType<typeof iconBoxSx>;
+    boxProps: BoxProps;
+};
+export declare const useTabAppearance: (isSelected: boolean, isDisabled?: boolean) => TabAppearance;
+export {};