pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.67

package/dist/Components/Table/filters/FilterDatePicker.js

@@ -0,0 +1,61 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.preloadFilterDatePicker = void 0;
+exports.default = FilterDatePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Skeletons_1 = __importDefault(require("../../Skeletons/Skeletons"));
+const lazyWithRetry_1 = require("../../../Utils/lazyWithRetry");
+const controlSizes_1 = require("../../../Theme/tokens/primitives/controlSizes");
+let loadedPicker = null;
+const loadDatePicker = () => Promise.resolve().then(() => __importStar(require("../../DatePicker/DatePicker"))).then((mod) => {
+    loadedPicker = mod.default;
+    return mod;
+});
+const LazyDatePicker = (0, lazyWithRetry_1.lazyWithRetry)(loadDatePicker);
+const preloadFilterDatePicker = () => {
+    if (!loadedPicker)
+        loadDatePicker().catch(() => undefined);
+};
+exports.preloadFilterDatePicker = preloadFilterDatePicker;
+/** The Table's date filter control; DatePicker and date-fns load on first use. */
+function FilterDatePicker(props) {
+    const [DatePicker] = (0, react_1.useState)(() => loadedPicker !== null && loadedPicker !== void 0 ? loadedPicker : LazyDatePicker);
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: controlSizes_1.CONTROL_SIZES.sm.height, borderRadius: "md" }), children: (0, jsx_runtime_1.jsx)(DatePicker, { ...props }) }));
+}

package/dist/Components/Table/filters/LeftFilterPane.d.ts

@@ -30,6 +30,7 @@ export type SelectedFilterItem = {
     value?: unknown;
     type?: "text" | "select" | "user" | "date";
 };
+/** Left-hand filter pane for Table, as a sidebar or a modal. */
 export type LeftFilterPaneProps = {
     title?: string;
     /** Ignored when `filterMode="modal"` — height is forced to 100% then. */

package/dist/Components/Table/filters/LeftFilterPane.js

@@ -41,6 +41,7 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const framer_motion_1 = require("framer-motion");
+const motion_1 = require("../../../Theme/chakra/motion");
 const react_3 = require("@chakra-ui/react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
@@ -48,7 +49,8 @@ const RadioButton_1 = require("../../RadioButton/RadioButton");
 const TextOperationControls_1 = require("./TextOperationControls");
 const SelectOperationControls_1 = require("./SelectOperationControls");
 const CompactSelect_1 = __importDefault(require("./CompactSelect"));
-const DatePicker_1 = __importDefault(require("../../DatePicker/DatePicker"));
+const FilterDatePicker_1 = __importStar(require("./FilterDatePicker"));
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 const getSectionItems = (selected, sectionId) => {
     const value = selected[sectionId];
@@ -83,7 +85,7 @@ const ActiveItemControls = ({ activeItem, sec, setTextOperator, setTextValue })
     if (!activeItem)
         return null;
     if (activeItem.type === "date") {
-        return ((0, jsx_runtime_1.jsx)(DatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, activeItem.id, val) }));
+        return ((0, jsx_runtime_1.jsx)(FilterDatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, activeItem.id, val) }));
     }
     if (activeItem.type === "text") {
         return ((0, jsx_runtime_1.jsx)(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: String((_a = activeItem.value) !== null && _a !== void 0 ? _a : ""), onOperatorChange: (op) => setTextOperator(sec.id, activeItem.id, op), onValueChange: (val) => setTextValue(sec.id, activeItem.id, val) }));
@@ -121,14 +123,20 @@ const SectionContent = ({ sec, selected, toggleItem, setTextOperator, setTextVal
                             textOverflow: "ellipsis",
                             ".chakra-checkbox__control": { width: "12px", height: "12px", mt: "2px" },
                             ".chakra-checkbox__label": { lineHeight: "1rem", whiteSpace: "normal", wordBreak: "break-word" },
-                        } }), checked && it.type === "date" && ((0, jsx_runtime_1.jsx)(react_2.Box, { ml: "1.25rem", children: (0, jsx_runtime_1.jsx)(DatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, it.id, val) }) })), checked && it.type === "text" && ((0, jsx_runtime_1.jsx)(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: String((_a = activeItem.value) !== null && _a !== void 0 ? _a : ""), onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), onValueChange: (val) => setTextValue(sec.id, it.id, val) })), checked && (it.type === "select" || it.type === "user") && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), size: "xs", ml: "1.25rem" }), (0, jsx_runtime_1.jsx)(react_2.Box, { mt: 2, ml: "1.25rem", children: (0, jsx_runtime_1.jsx)(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "30px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: (option) => setTextValue(sec.id, it.id, option) }) })] }))] }, it.id));
+                        } }), checked && it.type === "date" && ((0, jsx_runtime_1.jsx)(react_2.Box, { ml: "1.25rem", children: (0, jsx_runtime_1.jsx)(FilterDatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: (val) => setTextValue(sec.id, it.id, val) }) })), checked && it.type === "text" && ((0, jsx_runtime_1.jsx)(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: String((_a = activeItem.value) !== null && _a !== void 0 ? _a : ""), onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), onValueChange: (val) => setTextValue(sec.id, it.id, val) })), checked && (it.type === "select" || it.type === "user") && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: (op) => setTextOperator(sec.id, it.id, op), size: "xs", ml: "1.25rem" }), (0, jsx_runtime_1.jsx)(react_2.Box, { mt: 2, ml: "1.25rem", children: (0, jsx_runtime_1.jsx)(CompactSelect_1.default, { placeholder: it.label, size: "xs", height: "30px", options: it.selectOption || it.option || [], value: activeItem.value, onSelect: (option) => setTextValue(sec.id, it.id, option) }) })] }))] }, it.id));
         }) }));
 };
 // ─── Main Component ───────────────────────────────────────────────────────────
 const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading = false, filterMode = "sidebar", }) => {
+    const prefersReducedMotion = (0, motion_1.usePrefersReducedMotion)();
     const [isSearching, setIsSearching] = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search));
     const [localSelected, setLocalSelected] = (0, react_1.useState)({});
     const searchRef = (0, react_1.useRef)(null);
+    const hasDateItem = sections.some((sec) => { var _a; return (_a = sec.items) === null || _a === void 0 ? void 0 : _a.some((item) => item.type === "date"); });
+    (0, react_1.useEffect)(() => {
+        if (hasDateItem)
+            (0, FilterDatePicker_1.preloadFilterDatePicker)();
+    }, [hasDateItem]);
     (0, react_1.useEffect)(() => {
         setLocalSelected(selectedProp || {});
         if (selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)
@@ -202,10 +210,10 @@ const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: se
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 4, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, children: "No filters found" }) }));
         }
         if (filteredSections.length > 1) {
-            return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: true, defaultIndex: filteredSections.map((s, i) => (s.initiallyExpanded ? i : -1)).filter((i) => i >= 0), children: filteredSections.map((sec) => ((0, jsx_runtime_1.jsxs)(react_2.AccordionItem, { border: "none", children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 3, py: 2, _expanded: { bg: theme.colors.background[100] }, children: [(0, jsx_runtime_1.jsx)(SectionLabel, { label: sec.label, flex: true, theme: theme }), (0, jsx_runtime_1.jsx)(react_2.AccordionIcon, {})] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 3, pt: 2, pb: 1, children: (0, jsx_runtime_1.jsx)(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id))) }));
+            return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: true, defaultIndex: filteredSections.map((s, i) => (s.initiallyExpanded ? i : -1)).filter((i) => i >= 0), children: filteredSections.map((sec) => ((0, jsx_runtime_1.jsxs)(react_2.AccordionItem, { border: "none", children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 3, py: 2, _expanded: { bg: (0, planeStep_1.bandOn)(theme.colors.background[100], theme.colors.background[50]) }, children: [(0, jsx_runtime_1.jsx)(SectionLabel, { label: sec.label, flex: true, theme: theme }), (0, jsx_runtime_1.jsx)(react_2.AccordionIcon, {})] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 3, pt: 2, pb: 1, children: (0, jsx_runtime_1.jsx)(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id))) }));
         }
-        return filteredSections.map((sec) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: (0, jsx_runtime_1.jsx)(SectionLabel, { label: sec.label, theme: theme }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pt: 2, pb: 1, children: (0, jsx_runtime_1.jsx)(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id)));
+        return filteredSections.map((sec) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: (0, planeStep_1.cardRule)(theme.colors), children: (0, jsx_runtime_1.jsx)(SectionLabel, { label: sec.label, theme: theme }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pt: 2, pb: 1, children: (0, jsx_runtime_1.jsx)(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id)));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: theme.colors.background[50], borderRight: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: !isSearching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "semibold", fontSize: "sm", children: title }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Search filters", icon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", boxSize: 4 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: theme.colors.text[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, color: theme.colors.text[500] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: theme.colors.background[50], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), (0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, colorScheme: "primary", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: theme.colors.background[50], borderRight: "1px solid", borderColor: (0, planeStep_1.cardRule)(theme.colors), borderRadius: "xl", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: (0, planeStep_1.cardRule)(theme.colors), children: !isSearching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "semibold", fontSize: "sm", children: title }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Search filters", icon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", boxSize: 4 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: theme.colors.text[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: searchRef, initial: prefersReducedMotion ? false : { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, color: theme.colors.text[500] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: (0, planeStep_1.cardRule)(theme.colors), spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: theme.colors.background[50], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), (0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, colorScheme: "primary", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
 };
 exports.default = LeftFilterPane;

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

@@ -25,7 +25,6 @@ const sameColumn = (a, b) => {
 };
 const sameColumns = (a, b) => a === b || (a.length === b.length && a.every((col, i) => sameColumn(col, b[i])));
 const useTable = ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, columnsSearch, }) => {
-    var _a, _b;
     const headerRefs = (0, react_1.useRef)([]);
     const slotObserver = (0, react_1.useRef)(null);
     const [columnWidths, setColumnWidths] = (0, react_1.useState)([]);
@@ -84,12 +83,17 @@ const useTable = ({ data, isPagination, selections, onSelection, tablePreference
         // NOTE: an equal list keeps its identity so memoised rows skip re-rendering.
         setColumnsList((prev) => (sameColumns(prev, next) ? prev : next));
     }, [tablePreferences, columns, defaultVisibleColumns]);
-    const isContent = (0, react_1.useMemo)(() => {
-        return tableData.some((o) => o.content);
-    }, [tableData.length === 0 ? 0 : (_a = tableData[0]) === null || _a === void 0 ? void 0 : _a.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
-    const isLink = (0, react_1.useMemo)(() => {
-        return tableData.some((o) => o.onLink || o.onDelete || o.onEdit);
-    }, [tableData.length === 0 ? 0 : (_b = tableData[0]) === null || _b === void 0 ? void 0 : _b.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    const { isContent, isLink } = (0, react_1.useMemo)(() => {
+        let content = false;
+        let link = false;
+        for (const row of tableData) {
+            content = content || Boolean(row.content);
+            link = link || Boolean(row.onLink || row.onDelete || row.onEdit);
+            if (content && link)
+                break;
+        }
+        return { isContent: content, isLink: link };
+    }, [tableData]);
     (0, react_1.useEffect)(() => {
         const widths = headerRefs.current.map((ref) => (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
         setColumnWidths(widths);

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

@@ -10,6 +10,7 @@ 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");
@@ -90,12 +91,12 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                                 ? 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: (0, motion_1.transitionFor)(["background-color", "border-color"]), _hover: {
+                            : "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: theme.colors.boxborder[200],
+                            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: "12px", 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, { 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

@@ -46,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,
@@ -64,7 +64,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                         color: theme.colors.accentText
                     } }) }), (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 ? 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: "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",
@@ -74,7 +74,7 @@ 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)
@@ -82,7 +82,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 .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 ? 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: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
+                                                                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/Tabs/Tabs.d.ts

@@ -1,3 +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

@@ -12,6 +12,7 @@ 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)();

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

@@ -1,5 +1,6 @@
 import type { ColorScale, PaletteProps } from "../../../Theme/tokens/types";
 import type { ControlSize } from "../../../Theme/tokens/primitives/controlSizes";
+/** Internal count pill on a tab; ink is lifted against `surface`. */
 export interface CountBadgeProps {
     count: number | string;
     colors: PaletteProps;

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

@@ -1,3 +1,4 @@
 import type { TabListProps } from "../TabsProps";
+/** Tablist that scrolls to keep the focused or selected tab in view. */
 declare const TabList: ({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }: TabListProps) => import("react/jsx-runtime").JSX.Element;
 export default TabList;

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

@@ -15,6 +15,7 @@ const revealWithinList = (list, tab) => {
     list.scrollLeft += overshoot(rect.left, rect.right, box.left, box.right);
     list.scrollTop += overshoot(rect.top, rect.bottom, box.top, box.bottom);
 };
+/** Tablist that scrolls to keep the focused or selected tab in view. */
 const TabList = ({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const ctx = (0, TabsContext_1.useTabsContext)();

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

@@ -1,3 +1,4 @@
 import type { TabPanelProps } from "../TabsProps";
+/** Panel for the tab with the same `value`; mounts on first selection when lazy. */
 declare const TabPanel: ({ value, children }: TabPanelProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TabPanel;

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

@@ -4,6 +4,7 @@ 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");
+/** Panel for the tab with the same `value`; mounts on first selection when lazy. */
 const TabPanel = ({ value, children }) => {
     const ctx = (0, TabsContext_1.useTabsContext)();
     const isSelected = ctx.selectedId === value;

package/dist/Components/Tabs/tabStyles.js

@@ -15,7 +15,8 @@ const restStyle = (colors, hoverBg) => ({
 });
 /** Rest/selected/hover ink+fill for one tab, mirroring Button.styles.ts's per-variant resolution. */
 const resolveTabStyle = (colors, scale, canvas, variant, isSelected) => {
-    const accent = (0, accentText_1.accentTextOnCanvas)(scale, canvas);
+    const pagePlanes = [canvas, colors.backgroundColor.base];
+    const accent = (0, accentText_1.accentTextOnPlanes)(scale, pagePlanes);
     const hoverTint = (0, outlineRung_1.resolveHoverTint)(colors.gray[50], canvas);
     if (!isSelected)
         return restStyle(colors, hoverTint);
@@ -31,7 +32,8 @@ const resolveTabStyle = (colors, scale, canvas, variant, isSelected) => {
         return { bg: "transparent", color: accent, hoverBg: "transparent", hoverColor: accent, border: accent };
     }
     if (variant === "ghost") {
-        return { bg: hoverTint, color: accent, hoverBg: hoverTint, hoverColor: accent };
+        const ghostAccent = (0, accentText_1.accentTextOnCanvas)(scale, hoverTint);
+        return { bg: hoverTint, color: ghostAccent, hoverBg: hoverTint, hoverColor: ghostAccent };
     }
     return { bg: "transparent", color: accent, hoverBg: "transparent", hoverColor: accent, indicator: accent };
 };

package/dist/Components/Tag/Tag.js

@@ -24,15 +24,16 @@ const DOT_FONT_SIZE = {
     md: "sm",
     lg: "0.9375rem",
 };
+const defaultRemoveLabel = (label) => `Remove ${label}`;
 /** Pill-shaped status/filter chip (Chakra Tag), not the raw Badge primitive; `ref` is the root element. */
-const Tag = (0, react_1.forwardRef)(function Tag({ label, colorScheme = "primary", tone, variant = "subtle", display = "chip", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, isDisabled, "data-testid": testId, }, ref) {
+const Tag = (0, react_1.forwardRef)(function Tag({ label, colorScheme = "primary", tone, variant = "subtle", display = "chip", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, removeLabel = defaultRemoveLabel, isDisabled, "data-testid": testId, ...dataAttributes }, ref) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isInteractive = !!onTagClick;
     if (display === "dot") {
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, as: isInteractive ? "button" : "span", ...(isInteractive ? { type: "button", disabled: isDisabled || undefined } : {}), display: "inline-flex", alignItems: "center", gap: 2, maxW: maxW, minW: 0, borderRadius: "sm", bg: "transparent", fontSize: DOT_FONT_SIZE[size], fontWeight: 500, color: colors.text[700], cursor: isInteractive ? "pointer" : undefined, opacity: isDisabled ? states_1.DISABLED_OPACITY : undefined, onClick: isInteractive && !isDisabled ? onTagClick : undefined, "data-testid": testId, "data-display": "dot", "data-disabled": isDisabled || undefined, sx: isInteractive ? (0, focusRing_styles_1.focusVisibleStyles)(colors) : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: "0.5rem", flexShrink: 0, borderRadius: "full", bg: (0, tagDot_1.dotColor)(colors, tone, colorScheme) }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", noOfLines: 1, title: maxW ? label : undefined, children: label })] }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, as: isInteractive ? "button" : "span", ...(isInteractive ? { type: "button", disabled: isDisabled || undefined } : {}), display: "inline-flex", alignItems: "center", gap: 2, maxW: maxW, minW: 0, borderRadius: "sm", bg: "transparent", fontSize: DOT_FONT_SIZE[size], fontWeight: 500, color: colors.text[700], cursor: isInteractive ? "pointer" : undefined, opacity: isDisabled ? states_1.DISABLED_OPACITY : undefined, onClick: isInteractive && !isDisabled ? onTagClick : undefined, ...dataAttributes, "data-testid": testId, "data-display": "dot", "data-disabled": isDisabled || undefined, sx: isInteractive ? (0, focusRing_styles_1.focusVisibleStyles)(colors) : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: "0.5rem", flexShrink: 0, borderRadius: "full", bg: (0, tagDot_1.dotColor)(colors, tone, colorScheme) }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", noOfLines: 1, title: maxW ? label : undefined, children: label })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_2.Tag, { ref: ref, size: size, variant: variant, colorScheme: tone ? tone_1.toneToColorScheme[tone] : colorScheme, borderRadius: "full", maxW: maxW, "data-testid": testId, "data-interactive": isInteractive || undefined, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [leadingIcon && (0, jsx_runtime_1.jsx)(react_2.TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? ((0, jsx_runtime_1.jsx)(react_2.TagLabel, { as: "button", type: "button", noOfLines: undefined, disabled: isDisabled || undefined, cursor: "pointer", onClick: isDisabled ? undefined : onTagClick, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_2.TagLabel, { noOfLines: undefined, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
-                (onIconClick ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": `Remove ${label}`, "data-testid": testId ? `${testId}-remove` : undefined, disabled: isDisabled || undefined, onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Tag, { ref: ref, size: size, variant: variant, colorScheme: tone ? tone_1.toneToColorScheme[tone] : colorScheme, borderRadius: "full", maxW: maxW, ...dataAttributes, "data-testid": testId, "data-interactive": isInteractive || undefined, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [leadingIcon && (0, jsx_runtime_1.jsx)(react_2.TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? ((0, jsx_runtime_1.jsx)(react_2.TagLabel, { as: "button", type: "button", noOfLines: undefined, disabled: isDisabled || undefined, cursor: "pointer", onClick: isDisabled ? undefined : onTagClick, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_2.TagLabel, { noOfLines: undefined, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
+                (onIconClick ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": typeof removeLabel === "function" ? removeLabel(label) : removeLabel, "data-testid": testId ? `${testId}-remove` : undefined, disabled: isDisabled || undefined, onClick: (e) => {
                         e.stopPropagation();
                         if (!isDisabled)
                             onIconClick();

package/dist/Components/Tag/Tag.styles.js

@@ -7,6 +7,7 @@ const tone_1 = require("../../Theme/tokens/builders/tone");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const states_1 = require("../../Theme/tokens/primitives/states");
 const typography_1 = require("../../Theme/tokens/primitives/typography");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 exports.INTERACTIVE_HOVER = "&[data-interactive]:hover";
@@ -80,9 +81,9 @@ exports.Tag = {
                 container: {
                     bg,
                     color: fg,
-                    boxShadow: `inset 0 0 0 0.0625rem ${border}`,
-                    [exports.INTERACTIVE_HOVER]: { bg: hoverBg, boxShadow: `inset 0 0 0 0.0625rem ${hoverBorder}` },
-                    [exports.INTERACTIVE_ACTIVE]: { bg: activeBg, boxShadow: `inset 0 0 0 0.0625rem ${activeBorder}` },
+                    boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${border}`,
+                    [exports.INTERACTIVE_HOVER]: { bg: hoverBg, boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${hoverBorder}` },
+                    [exports.INTERACTIVE_ACTIVE]: { bg: activeBg, boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${activeBorder}` },
                 },
             };
         },
@@ -93,7 +94,7 @@ exports.Tag = {
             return {
                 container: {
                     border: "none",
-                    boxShadow: `inset 0 0 0 0.0625rem ${ink}`,
+                    boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${ink}`,
                     color: ink,
                     bg: "transparent",
                     [exports.INTERACTIVE_HOVER]: { bg: softTint(c, 16) },

package/dist/Components/Tag/TagProps.d.ts

@@ -1,5 +1,6 @@
 import { ElementType } from "react";
 import type { BoxProps } from "@chakra-ui/react";
+import type { DataAttributes } from "../Common/dataAttributes";
 import type { Tone } from "../../Theme/tokens/builders/tone";
 /** Category colour, not status — for a status chip use `tone`, which wins when both are set. */
 export type TagColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
@@ -10,10 +11,12 @@ export type TagVariant = "solid" | "outline" | "subtle";
 /** "chip" is the filled/outlined pill; "dot" is a tone dot beside plain text. */
 export type TagDisplay = "chip" | "dot";
 /** Props for the pill-shaped status/filter Tag chip — see Tag.tsx for interactive/icon behavior. */
-export interface TagProps {
+export interface TagProps extends DataAttributes {
     label: string;
     /** No effect without icon — turns it into a remove button and stops the click from bubbling to onTagClick. */
     onIconClick?: () => void;
+    /** Accessible name of the remove button: a string as is, or a function of the label. Defaults to `Remove ${label}`. */
+    removeLabel?: string | ((label: string) => string);
     /** Makes the label a real button and turns on hover/cursor/focus styles; keyboard (Enter/Space) works natively. */
     onTagClick?: () => void;
     /** Decorative (aria-hidden) unless onIconClick is also passed — icon alone adds no interactivity. */

package/dist/Components/Tag/tagDot.js

@@ -3,19 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.dotColor = void 0;
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const tone_1 = require("../../Theme/tokens/builders/tone");
+const paletteScale_1 = require("../../Theme/tokens/builders/paletteScale");
+const paletteFromTheme_1 = require("../../Theme/chakra/paletteFromTheme");
 const SCALE_KEYS = [
     "primary", "secondary", "tertiary", "gray", "red", "orange", "yellow",
     "green", "teal", "blue", "cyan", "purple", "pink",
 ];
+const themedScale = (colors, colorScheme) => {
+    const scale = SCALE_KEYS.includes(colorScheme) ? (0, paletteScale_1.scaleNamed)(colors, colorScheme) : undefined;
+    if (scale)
+        return scale;
+    (0, paletteFromTheme_1.warnUnknownColorScheme)(colorScheme);
+    return colors.gray;
+};
 const dotColor = (colors, tone, colorScheme) => {
     const surfaces = [colors.background[50], colors.backgroundColor.main];
     if (tone === "neutral")
         return colors.textMuted;
     const scale = tone
         ? colors.semantic[tone_1.toneToSemantic[tone]]
-        : SCALE_KEYS.includes(colorScheme)
-            ? colors[colorScheme]
-            : colors.gray;
+        : themedScale(colors, colorScheme);
     return surfaces.reduce((ink, surface) => (0, outlineRung_1.liftToContrast)(ink, surface), scale[500]);
 };
 exports.dotColor = dotColor;

package/dist/Components/TagInput/TagInput.js

@@ -18,7 +18,7 @@ const useFieldIds_1 = require("../Common/useFieldIds");
 const searchSelectSize_1 = require("../SearchSelect/searchSelectSize");
 const Tag_1 = __importDefault(require("../Tag/Tag"));
 const tagEntries_1 = require("./tagEntries");
-const TagInput = (0, react_1.forwardRef)(function TagInput({ value, onChange, validate, maxTags, allowDuplicates = false, addOnBlur = false, id, name, label, "aria-label": ariaLabel, placeholder, isRequired = false, isInformation, informationMessage, isDisabled = false, isReadOnly = false, error, errorMessage, helperText, size = controlSizes_1.DEFAULT_CONTROL_SIZE, width = "100%", }, ref) {
+const TagInput = (0, react_1.forwardRef)(function TagInput({ value, onChange, validate, maxTags, allowDuplicates = false, addOnBlur = false, id, name, label, "aria-label": ariaLabel, placeholder, isRequired = false, isInformation, informationMessage, isDisabled = false, isReadOnly = false, error, errorMessage, helperText, size = controlSizes_1.DEFAULT_CONTROL_SIZE, labels, width = "100%", }, ref) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)(size);
     const inputRef = (0, react_1.useRef)(null);
@@ -30,11 +30,12 @@ const TagInput = (0, react_1.forwardRef)(function TagInput({ value, onChange, va
     const shownError = rejection !== null && rejection !== void 0 ? rejection : errorMessage;
     const ids = (0, useFieldIds_1.useFieldIds)(id, { error: isInvalid, errorMessage: shownError, helperText });
     const locked = isDisabled || isReadOnly;
+    const messages = (0, react_1.useMemo)(() => (0, tagEntries_1.resolveTagInputLabels)(labels), [labels]);
     const commit = (text) => {
-        const result = (0, tagEntries_1.addTags)(value, (0, tagEntries_1.splitEntries)(text), { validate, maxTags, allowDuplicates });
+        const result = (0, tagEntries_1.addTags)(value, (0, tagEntries_1.splitEntries)(text), { validate, maxTags, allowDuplicates, labels: messages });
         if (result.added.length) {
             onChange(result.tags);
-            setAnnouncement(`Added ${result.added.join(", ")}`);
+            setAnnouncement(messages.added(result.added));
         }
         setRejection(result.message);
         setDraft(result.rejected.join(", "));
@@ -42,7 +43,7 @@ const TagInput = (0, react_1.forwardRef)(function TagInput({ value, onChange, va
     const removeAt = (index) => {
         const removed = value[index];
         onChange(value.filter((_, i) => i !== index));
-        setAnnouncement(`Removed ${removed}`);
+        setAnnouncement(messages.removed(removed));
         setRejection(null);
     };
     const onKeyDown = (event) => {
@@ -87,7 +88,7 @@ const TagInput = (0, react_1.forwardRef)(function TagInput({ value, onChange, va
                 }, _hover: isDisabled || isInvalid ? undefined : { borderColor: (0, fieldStyles_1.fieldHoverBorder)(theme.colors) }, _focusWithin: {
                     borderColor: isInvalid ? theme.colors.semanticText.error : theme.colors.primary[500],
                     boxShadow: (0, fieldStyles_1.fieldFocusRing)(theme),
-                }, children: [value.map((tag, index) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: tag, isDisabled: isDisabled, icon: locked ? undefined : lucide_react_1.X, onIconClick: locked
+                }, children: [value.map((tag, index) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: tag, removeLabel: messages.remove, isDisabled: isDisabled, icon: locked ? undefined : lucide_react_1.X, onIconClick: locked
                             ? undefined
                             : () => {
                                 var _a;

package/dist/Components/TagInput/TagInputProps.d.ts

@@ -41,6 +41,21 @@ export type TagInputProps = {
     helperText?: string;
     /** Field height on the control scale: xs 32, sm 38, md 40, lg 48px; grows a row at a time. Defaults to `sm`. */
     size?: ControlSize;
+    /** Overrides the field's own messages and announcements; omit a key to keep its English default. */
+    labels?: Partial<{
+        /** Rejection when `maxTags` is reached. */
+        maxTags: (max: number) => string;
+        /** Rejection for a repeated entry. */
+        duplicate: (entry: string) => string;
+        /** Rejection when `validate` returns `false`; a returned string is shown as is. */
+        invalid: (entry: string) => string;
+        /** Live-region announcement after entries are added. */
+        added: (entries: string[]) => string;
+        /** Live-region announcement after a tag is removed. */
+        removed: (entry: string) => string;
+        /** Accessible name of each chip's remove button. */
+        remove: (entry: string) => string;
+    }>;
     /** Width of the whole field; defaults to "100%". */
     width?: string | number;
 };

package/dist/Components/TagInput/tagEntries.d.ts

@@ -1,5 +1,10 @@
-import type { TagValidator } from "./TagInputProps";
+import type { TagInputProps, TagValidator } from "./TagInputProps";
+type TagInputLabelOverrides = NonNullable<TagInputProps["labels"]>;
+export type TagInputLabels = Required<TagInputLabelOverrides>;
+export declare const DEFAULT_TAG_INPUT_LABELS: TagInputLabels;
+export declare const resolveTagInputLabels: (labels?: TagInputLabelOverrides) => TagInputLabels;
 export type AddRules = {
+    labels: TagInputLabels;
     validate?: TagValidator;
     maxTags?: number;
     allowDuplicates?: boolean;
@@ -13,3 +18,4 @@ export type AddResult = {
 export declare const hasSeparator: (text: string) => boolean;
 export declare const splitEntries: (text: string) => string[];
 export declare const addTags: (current: readonly string[], entries: readonly string[], rules: AddRules) => AddResult;
+export {};

package/dist/Components/TagInput/tagEntries.js

@@ -1,6 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addTags = exports.splitEntries = exports.hasSeparator = void 0;
+exports.addTags = exports.splitEntries = exports.hasSeparator = exports.resolveTagInputLabels = exports.DEFAULT_TAG_INPUT_LABELS = void 0;
+exports.DEFAULT_TAG_INPUT_LABELS = {
+    maxTags: (max) => `You can add up to ${max} ${max === 1 ? "tag" : "tags"}.`,
+    duplicate: (entry) => `"${entry}" is already added.`,
+    invalid: (entry) => `"${entry}" is not valid.`,
+    added: (entries) => `Added ${entries.join(", ")}`,
+    removed: (entry) => `Removed ${entry}`,
+    remove: (entry) => `Remove ${entry}`,
+};
+const resolveTagInputLabels = (labels) => ({
+    ...exports.DEFAULT_TAG_INPUT_LABELS,
+    ...labels,
+});
+exports.resolveTagInputLabels = resolveTagInputLabels;
 const SEPARATORS = /[,\r\n]/;
 const hasSeparator = (text) => SEPARATORS.test(text);
 exports.hasSeparator = hasSeparator;
@@ -11,14 +24,14 @@ const splitEntries = (text) => text
 exports.splitEntries = splitEntries;
 const fold = (tag) => tag.toLocaleLowerCase();
 const rejection = (entry, tags, seen, rules) => {
-    const { validate, maxTags, allowDuplicates = false } = rules;
+    const { validate, maxTags, allowDuplicates = false, labels } = rules;
     if (maxTags !== undefined && tags.length >= maxTags)
-        return `You can add up to ${maxTags} ${maxTags === 1 ? "tag" : "tags"}.`;
+        return labels.maxTags(maxTags);
     if (!allowDuplicates && seen.has(fold(entry)))
-        return `"${entry}" is already added.`;
+        return labels.duplicate(entry);
     const verdict = validate === null || validate === void 0 ? void 0 : validate(entry, tags);
     if (verdict === false)
-        return `"${entry}" is not valid.`;
+        return labels.invalid(entry);
     if (typeof verdict === "string" && verdict)
         return verdict;
     return null;