pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/Components/Table/settings/ManageColumns.js

@@ -9,9 +9,15 @@ const react_2 = require("@chakra-ui/react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
+const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
+const columnLabel_1 = require("../columnLabel");
 const lucide_react_1 = require("lucide-react");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
 const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
     const [draggedItemIndex, setDraggedItemIndex] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -62,7 +68,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
         setItems(newItems);
         setError(null);
     };
-    const filteredItems = items.filter((item) => item.label.toString().toLowerCase().includes(searchTerm.toLowerCase()));
+    const filteredItems = items.filter((item) => (0, columnLabel_1.columnLabelText)(item).toLowerCase().includes(searchTerm.toLowerCase()));
     const allChecked = items.every((item) => !item.isHidden);
     const someChecked = items.some((item) => !item.isHidden) && !allChecked;
     const handleSelectAll = () => {
@@ -75,22 +81,22 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
             setError(null);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 2, children: [error && ((0, jsx_runtime_1.jsx)(react_2.Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200], children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500, children: error }) })), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "md" }), !searchTerm.length && ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 2, children: [error && ((0, jsx_runtime_1.jsx)(react_2.Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "lg", border: "1px solid", borderColor: theme.colors.red[200], children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.red[50]), fontSize: "xs", fontWeight: 500, children: error }) })), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "lg" }), !searchTerm.length && ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", mb: 1, bg: theme.colors.backgroundColor.subtle, px: 2, py: 1, borderRadius: "lg", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), (0, jsx_runtime_1.jsx)(react_2.List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
                     const isDraggingThisItem = draggedItemIndex === index;
                     const isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
                     const realIndex = items.findIndex((i) => i.id === item.id);
                     return ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { draggable: true, onDragStart: () => handleDragStart(index), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, bg: isDraggingThisItem
                             ? theme.colors.primary[100]
                             : isDropZone
-                                ? theme.colors.primary[50]
-                                : "transparent", display: "flex", alignItems: "center", borderRadius: "sm", border: "1px solid", borderColor: isDraggingThisItem
+                                ? rowBackgrounds.selected
+                                : "transparent", display: "flex", alignItems: "center", borderRadius: "lg", border: "1px solid", borderColor: isDraggingThisItem
                             ? theme.colors.primary[400]
-                            : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
-                            bg: theme.colors.gray[50],
-                            borderColor: theme.colors.boxborder[200],
-                        }, _active: { cursor: "grabbing" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.gray[500] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 14 }) }), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
-                                    color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
-                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${item.label} up`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${item.label} down`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
-                })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
+                            : "transparent", cursor: "grab", fontSize: "xs-plus", px: 2, py: "3px", mb: "3px", transition: (0, motion_1.transitionFor)(["background-color", "border-color"]), _hover: {
+                            bg: rowBackgrounds.active,
+                            borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors),
+                        }, _active: { cursor: "grabbing" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.textMuted }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 14 }) }), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: !item.isHidden, label: (0, columnLabel_1.columnLabelText)(item), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
+                                    color: item.isHidden ? theme.colors.textMuted : theme.colors.text[700],
+                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${(0, columnLabel_1.columnLabelText)(item)} up`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${(0, columnLabel_1.columnLabelText)(item)} down`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
+                })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 exports.default = ManageColumns;

package/dist/Components/Table/settings/TableSettings.js

@@ -10,10 +10,17 @@ const framer_motion_1 = require("framer-motion");
 const ManageColumns_1 = __importDefault(require("./ManageColumns"));
 const Button_1 = __importDefault(require("../../Button/Button"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
 const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
+const columnLabel_1 = require("../columnLabel");
 const lucide_react_1 = require("lucide-react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../../Theme/chakra/motion");
 const MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
+const SHEET_ENTER = (0, motion_1.motionTransition)("enter", "out");
+const SHEET_EXIT = (0, motion_1.motionTransition)("exit", "in");
 const DENSITY_OPTIONS = [
     { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
     { value: "normal", label: "Normal", desc: "Balanced default spacing" },
@@ -21,6 +28,8 @@ const DENSITY_OPTIONS = [
 ];
 const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, groupBy, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const sheetOffset = (0, motion_2.usePrefersReducedMotion)() ? 0 : "-100%";
+    const rowBackgrounds = (0, react_2.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     const childInputMethodsRef = (0, react_2.useRef)({});
     const [settingsOpen, setSettingsOpen] = (0, react_2.useState)(false);
     const [selectedIndex, setSelectedIndex] = (0, react_2.useState)(0);
@@ -37,7 +46,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
         setSettingsOpen(true);
     }, [columns, groupBy]);
     const tabStyle = {
-        fontSize: "13px",
+        fontSize: "xs-plus",
         fontWeight: 500,
         px: 4,
         py: 2,
@@ -50,12 +59,12 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
         },
         _hover: { color: theme.colors.text[600] },
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Table Settings", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Table settings", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Table Settings", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Table settings", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: (0, motion_1.transitionFor)(["color", "transform"], "base"), color: theme.colors.text[500], _hover: {
                         transform: "scale(1.1)",
                         color: theme.colors.accentText
-                    } }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.background[50], overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { pt: 4, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), (0, jsx_runtime_1.jsxs)(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Density" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Manage Columns" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Group" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(react_1.TabPanel, { px: 0, py: 1, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
+                    } }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: { base: "full", md: "md" }, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(MotionModalContent, { mt: "0", top: "0", left: { base: 0, md: "auto" }, right: { base: 0, md: "auto" }, position: "absolute", borderTopRadius: "none", initial: { y: sheetOffset, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: sheetOffset, opacity: 0, transition: SHEET_EXIT }, transition: SHEET_ENTER, padding: "0", minW: { base: "auto", md: "620px" }, minH: { base: "auto", md: "520px" }, maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.surfaceRaised, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { pt: 4, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), (0, jsx_runtime_1.jsxs)(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: [(0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Density" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Manage Columns" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Group" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(react_1.TabPanel, { px: 0, py: 1, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
                                                             const selected = density === opt.value;
-                                                            return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
+                                                            return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : (0, surfaceRaised_1.raisedRule)(theme.colors), bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: (0, motion_1.transitionFor)(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-plus", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-minus", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
                                                         }) }) }), (0, jsx_runtime_1.jsx)(react_1.TabPanel, { px: 0, py: 0, children: (0, jsx_runtime_1.jsx)(react_1.Box, { sx: {
                                                             "& [role='listitem'], & > div > div": {
                                                                 py: "4px !important",
@@ -65,15 +74,15 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                             "& .chakra-checkbox": { gap: "8px !important" },
                                                             "& .chakra-checkbox__label": { fontSize: "13px !important" },
                                                             "& [draggable]": { py: "5px !important" },
-                                                        }, children: (0, jsx_runtime_1.jsx)(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }) }) }), (0, jsx_runtime_1.jsxs)(react_1.TabPanel, { px: 0, py: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "12px", color: theme.colors.textMuted, mb: 2, children: "Group rows by a column. Click Save to apply." }), (0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, children: [{ id: undefined, label: "None (no grouping)" },
+                                                        }, children: (0, jsx_runtime_1.jsx)(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }) }) }), (0, jsx_runtime_1.jsxs)(react_1.TabPanel, { px: 0, py: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: theme.colors.textMuted, mb: 2, children: "Group rows by a column. Click Save to apply." }), (0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, children: [{ id: undefined, label: "None (no grouping)" },
                                                                 // Only columns that declare a `columnType` are groupable.
                                                                 ...columns
                                                                     .filter((c) => !!c.columnType && !c.isHidden)
-                                                                    .map((c) => ({ id: c.id, label: String(c.label) }))]
+                                                                    .map((c) => ({ id: c.id, label: (0, columnLabel_1.columnLabelText)(c) }))]
                                                                 .map((opt) => {
                                                                 var _a;
                                                                 const selected = selectedGroup === opt.id;
-                                                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
-                                                            }) })] })] }) })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], pt: 3, pb: 3, px: 4, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
+                                                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : (0, surfaceRaised_1.raisedRule)(theme.colors), bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: (0, motion_1.transitionFor)(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-plus", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
+                                                            }) })] })] }) })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), pt: 3, pb: 3, px: 4, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
 };
 exports.default = TableSettings;

package/dist/Components/Table/variants/TableVariantContext.d.ts

@@ -0,0 +1,4 @@
+import type { TableVariantTokens } from "./tokens";
+export declare const TableVariantProvider: import("react").Provider<TableVariantTokens | null>;
+/** No provider means the default variant — studio, the same preset `Table` falls back to. */
+export declare function useTableVariant(): TableVariantTokens;

package/dist/Components/Table/variants/TableVariantContext.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableVariantProvider = void 0;
+exports.useTableVariant = useTableVariant;
+const react_1 = require("react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const studio_1 = require("./studio");
+const TableVariantContext = (0, react_1.createContext)(null);
+exports.TableVariantProvider = TableVariantContext.Provider;
+/** No provider means the default variant — studio, the same preset `Table` falls back to. */
+function useTableVariant() {
+    const provided = (0, react_1.useContext)(TableVariantContext);
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const isDark = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main);
+    return (0, react_1.useMemo)(() => provided !== null && provided !== void 0 ? provided : (0, studio_1.studioPreset)(theme.colors, isDark), [provided, theme.colors, isDark]);
+}

package/dist/Components/Table/variants/classic.d.ts

@@ -0,0 +1,6 @@
+import type { TableVariantPreset } from "./tokens";
+/**
+ * The table as it shipped. Pinned by snapshot: every value here is read off the
+ * live component, so adding a variant cannot move it.
+ */
+export declare const classicPreset: TableVariantPreset;

package/dist/Components/Table/variants/classic.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classicPreset = void 0;
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
+const tableRowHoverStyle_1 = require("../components/tableRowHoverStyle");
+const stripe_1 = require("./stripe");
+/**
+ * The table as it shipped. Pinned by snapshot: every value here is read off the
+ * live component, so adding a variant cannot move it.
+ */
+const classicPreset = (colors, isDark) => {
+    const headerBg = colors.table.hover[200];
+    return {
+        header: {
+            bg: headerBg,
+            ink: (0, accentText_1.accentTextOnCanvas)(colors.secondary, headerBg),
+            fontSize: 13,
+            fontWeight: 600,
+            textTransform: "capitalize",
+            letterSpacing: "normal",
+            height: "45px",
+            ruleColor: (0, planeStep_1.cardRule)(colors),
+            showColumnRule: true,
+            actions: "always",
+        },
+        row: {
+            hoverBg: (0, tableRowHoverStyle_1.getTableRowHoverStyle)(colors, isDark).backgroundColor,
+            hoverScope: "cell",
+            ruleColor: (0, planeStep_1.cardRule)(colors),
+            frozenRuleColor: colors.boxborder[300],
+            selectedBg: colors.primary.opacity[16],
+            selectedBarColor: colors.primary[500],
+            showSelectedBar: false,
+            stripeBg: (0, stripe_1.stripeFill)(colors),
+        },
+        slot: {
+            width: "6",
+            rest: "checkbox",
+            indexInk: colors.textMuted,
+            centered: false,
+        },
+        cells: {
+            ink: colors.text[500],
+            statusFill: "bleed",
+            pillRadius: "0",
+        },
+    };
+};
+exports.classicPreset = classicPreset;

package/dist/Components/Table/variants/index.d.ts

@@ -0,0 +1,7 @@
+import { classicPreset } from "./classic";
+import { studioPreset } from "./studio";
+import type { TableVariant, TableVariantPreset } from "./tokens";
+/** Adding a variant is one file and one union member — no component changes. */
+export declare const TABLE_VARIANTS: Record<TableVariant, TableVariantPreset>;
+export * from "./tokens";
+export { classicPreset, studioPreset };

package/dist/Components/Table/variants/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.studioPreset = exports.classicPreset = exports.TABLE_VARIANTS = void 0;
+const classic_1 = require("./classic");
+Object.defineProperty(exports, "classicPreset", { enumerable: true, get: function () { return classic_1.classicPreset; } });
+const studio_1 = require("./studio");
+Object.defineProperty(exports, "studioPreset", { enumerable: true, get: function () { return studio_1.studioPreset; } });
+/** Adding a variant is one file and one union member — no component changes. */
+exports.TABLE_VARIANTS = {
+    classic: classic_1.classicPreset,
+    studio: studio_1.studioPreset,
+};
+__exportStar(require("./tokens"), exports);

package/dist/Components/Table/variants/pillInk.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A consumer `statusColors` hex is a FILL, and `pickTableColor` hands it straight back as ink
+ * over a 13%-alpha tint of itself — legible reversed out of a solid cell, ~1.9:1 on a pill.
+ * The palette path is already resolved by `resolveStatusTone`; this rescues the override path.
+ */
+export declare function resolvePillInk(ink: string, soft: string, surface: string): string;

package/dist/Components/Table/variants/pillInk.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolvePillInk = resolvePillInk;
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const color_1 = require("../../../Theme/tokens/builders/color");
+const outlineRung_1 = require("../../../Theme/tokens/builders/outlineRung");
+const cache = new Map();
+/**
+ * A consumer `statusColors` hex is a FILL, and `pickTableColor` hands it straight back as ink
+ * over a 13%-alpha tint of itself — legible reversed out of a solid cell, ~1.9:1 on a pill.
+ * The palette path is already resolved by `resolveStatusTone`; this rescues the override path.
+ */
+function resolvePillInk(ink, soft, surface) {
+    const key = `${ink}|${soft}|${surface}`;
+    const hit = cache.get(key);
+    if (hit !== undefined)
+        return hit;
+    const resolved = (0, outlineRung_1.liftToContrast)(ink, (0, color_1.compositeOver)(soft, surface), accentText_1.AA_NORMAL_TEXT);
+    cache.set(key, resolved);
+    return resolved;
+}

package/dist/Components/Table/variants/stripe.d.ts

@@ -0,0 +1,3 @@
+import type { PaletteProps } from "../../../Theme/tokens/types";
+export declare const STRIPE_STEP = 1.04;
+export declare const stripeFill: (colors: PaletteProps) => string;

package/dist/Components/Table/variants/stripe.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripeFill = exports.STRIPE_STEP = void 0;
+const outlineRung_1 = require("../../../Theme/tokens/builders/outlineRung");
+exports.STRIPE_STEP = 1.04;
+const stripeFill = (colors) => (0, outlineRung_1.liftToContrast)(colors.table.hover[50], colors.background[50], exports.STRIPE_STEP);
+exports.stripeFill = stripeFill;

package/dist/Components/Table/variants/studio.d.ts

@@ -0,0 +1,6 @@
+import type { TableVariantPreset } from "./tokens";
+/**
+ * Quieter chrome, one rule instead of a grid, and a slot that rests on the row
+ * number. Every colour is lifted against the surface it actually sits on.
+ */
+export declare const studioPreset: TableVariantPreset;

package/dist/Components/Table/variants/studio.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.studioPreset = void 0;
+const outlineRung_1 = require("../../../Theme/tokens/builders/outlineRung");
+const tableRowHoverStyle_1 = require("../components/tableRowHoverStyle");
+const stripe_1 = require("./stripe");
+/**
+ * Quieter chrome, one rule instead of a grid, and a slot that rests on the row
+ * number. Every colour is lifted against the surface it actually sits on.
+ */
+const studioPreset = (colors, isDark) => {
+    const surface = colors.background[50];
+    // Studio drops the per-column rule, so the one line left has to be visible on
+    // every brand — `boxborder[200]` measures as low as 1.09:1 on some of them.
+    const rule = (0, outlineRung_1.liftToContrast)(colors.boxborder[200], surface, outlineRung_1.CHROME_RULE);
+    return {
+        header: {
+            bg: surface,
+            ink: colors.text[500],
+            fontSize: 11,
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.06em",
+            height: "40px",
+            ruleColor: rule,
+            showColumnRule: false,
+            actions: "hover",
+        },
+        row: {
+            hoverBg: (0, tableRowHoverStyle_1.getTableRowHoverStyle)(colors, isDark).backgroundColor,
+            hoverScope: "row",
+            ruleColor: rule,
+            frozenRuleColor: rule,
+            selectedBg: (0, outlineRung_1.liftToContrast)(colors.primary[50], surface, outlineRung_1.MIN_PERCEPTIBLE_STEP),
+            selectedBarColor: colors.primary[500],
+            showSelectedBar: true,
+            stripeBg: (0, stripe_1.stripeFill)(colors),
+        },
+        slot: {
+            width: "3.5rem",
+            rest: "index",
+            indexInk: colors.textMuted,
+            centered: true,
+        },
+        cells: {
+            ink: colors.text[500],
+            statusFill: "pill",
+            pillRadius: "0.375rem",
+        },
+    };
+};
+exports.studioPreset = studioPreset;

package/dist/Components/Table/variants/tokens.d.ts

@@ -0,0 +1,55 @@
+/**
+ * A variant is a resolved token set, never a branch. Components read named tokens;
+ * only `Table.tsx` knows which variant is active.
+ *
+ * PURITY: presets take a palette and return values — no Chakra, no React, no CSS.
+ */
+import type { PaletteProps } from "../../../Theme/tokens/types";
+export type TableVariant = "classic" | "studio";
+export type TableSlotRest = "checkbox" | "index";
+export type TableStatusFill = "bleed" | "pill";
+export type TableHoverScope = "cell" | "row";
+export type TableChromeReveal = "always" | "hover";
+/** Every field required: a preset that forgets one is a compile error, not a runtime gap. */
+export type TableVariantTokens = {
+    /** Header row look: fill, ink, type scale, height, column rules and when the filter kebab shows. */
+    header: {
+        bg: string;
+        ink: string;
+        fontSize: number;
+        fontWeight: number;
+        textTransform: "capitalize" | "uppercase";
+        letterSpacing: string;
+        height: string;
+        ruleColor: string;
+        showColumnRule: boolean;
+        /** When the per-column filter kebab appears. Active columns always show it. */
+        actions: TableChromeReveal;
+    };
+    /** Body row look: hover and selected fills, rules and the zebra stripe fill. */
+    row: {
+        hoverBg: string;
+        hoverScope: TableHoverScope;
+        ruleColor: string;
+        frozenRuleColor: string;
+        selectedBg: string;
+        selectedBarColor: string;
+        showSelectedBar: boolean;
+        /** Zebra fill for odd rows when `stripe` is on; a quiet step below `hoverBg`. */
+        stripeBg: string;
+    };
+    /** Leading checkbox/index column: width, what rests in it and its ink. */
+    slot: {
+        width: string;
+        rest: TableSlotRest;
+        indexInk: string;
+        centered: boolean;
+    };
+    /** Body cell ink and how status values render (bleed fill or pill). */
+    cells: {
+        ink: string;
+        statusFill: TableStatusFill;
+        pillRadius: string;
+    };
+};
+export type TableVariantPreset = (colors: PaletteProps, isDark: boolean) => TableVariantTokens;

package/dist/Components/Table/variants/tokens.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,4 @@
+import type { TabsProps } from "./TabsProps";
+/** Tabs from `items` or composed TabList and TabPanels; all-`href` items render a nav. */
+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

@@ -0,0 +1,84 @@
+"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("react");
+const react_2 = require("@chakra-ui/react");
+const TabsContext_1 = require("./TabsContext");
+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 TabLinkList_1 = __importDefault(require("./components/TabLinkList"));
+/** Tabs from `items` or composed TabList and TabPanels; all-`href` items render a nav. */
+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 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)));
+    (0, react_1.useEffect)(() => {
+        setFocusedId(selectedId);
+    }, [selectedId]);
+    const select = (0, react_1.useCallback)((next) => {
+        if (!isControlled)
+            setInternalValue(next);
+        setFocusedId(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [isControlled, onChange]);
+    const focusTab = (0, react_1.useCallback)((next) => setFocusedId(next), []);
+    const registerPanels = (0, react_1.useCallback)(() => setHasPanels(true), []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        baseId,
+        selectedId,
+        focusedId,
+        select,
+        focusTab,
+        hasPanels,
+        registerPanels,
+        orientation,
+        activationMode,
+        variant,
+        size,
+        colorScheme,
+        isLazy,
+        isFitted,
+    }), [
+        baseId,
+        selectedId,
+        focusedId,
+        select,
+        focusTab,
+        hasPanels,
+        registerPanels,
+        orientation,
+        activationMode,
+        variant,
+        size,
+        colorScheme,
+        isLazy,
+        isFitted,
+    ]);
+    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] }) }));
+};
+exports.default = Tabs;

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

@@ -0,0 +1,36 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+import type { TabActivationMode, TabsColorScheme, TabsOrientation, TabsVariant } from "./TabsProps";
+export interface TabsContextValue {
+    /** Id prefix from which tab and panel ids are derived. */
+    baseId: string;
+    /** Selected tab value; undefined when none is selected, e.g. in link mode. */
+    selectedId: string | undefined;
+    /** Tab that holds the roving tab stop. */
+    focusedId: string | undefined;
+    /** Selects a tab by value; updates internal state only when uncontrolled. */
+    select: (value: string) => void;
+    /** Moves the roving focus to a tab without selecting it. */
+    focusTab: (value: string) => void;
+    /** True once a panel container exists; tabs then point `aria-controls` at their panel. */
+    hasPanels: boolean;
+    /** Called by TabPanels to mark that this Tabs instance has panels. */
+    registerPanels: () => void;
+    /** Layout axis and arrow-key direction. */
+    orientation: TabsOrientation;
+    /** Whether focus alone selects a tab. */
+    activationMode: TabActivationMode;
+    /** Visual treatment shared by every tab. */
+    variant: TabsVariant;
+    /** Control size shared by every tab. */
+    size: ControlSize;
+    /** Colour of the selected tab and its count badge. */
+    colorScheme: TabsColorScheme;
+    /** Keeps unselected panels unmounted until first selected. */
+    isLazy: boolean;
+    /** Tabs share the tablist's width equally. */
+    isFitted: boolean;
+}
+export declare const TabsContext: import("react").Context<TabsContextValue | undefined>;
+export declare const useTabsContext: () => TabsContextValue;
+export declare const tabId: (baseId: string, value: string) => string;
+export declare const panelId: (baseId: string, value: string) => string;

package/dist/Components/Tabs/TabsContext.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.panelId = exports.tabId = exports.useTabsContext = exports.TabsContext = void 0;
+const react_1 = require("react");
+exports.TabsContext = (0, react_1.createContext)(undefined);
+const useTabsContext = () => {
+    const ctx = (0, react_1.useContext)(exports.TabsContext);
+    if (!ctx)
+        throw new Error("Tabs.List/Tab/Panels/Panel must be rendered inside <Tabs>");
+    return ctx;
+};
+exports.useTabsContext = useTabsContext;
+const tabId = (baseId, value) => `${baseId}-tab-${value}`;
+exports.tabId = tabId;
+const panelId = (baseId, value) => `${baseId}-panel-${value}`;
+exports.panelId = panelId;