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

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRowMeasurer = exports.createRowMeasurer = void 0;
+const react_1 = require("react");
+const createRowMeasurer = (onHeights) => {
+    const rowOf = new Map();
+    const heightOf = new Map();
+    const elementsOf = new Map();
+    let observer = null;
+    const totalOf = (id) => {
+        var _a, _b;
+        let total = 0;
+        for (const el of (_a = elementsOf.get(id)) !== null && _a !== void 0 ? _a : [])
+            total += (_b = heightOf.get(el)) !== null && _b !== void 0 ? _b : 0;
+        return total;
+    };
+    const onResize = (entries) => {
+        const touched = new Set();
+        for (const { target } of entries) {
+            const id = rowOf.get(target);
+            if (id === undefined)
+                continue;
+            heightOf.set(target, target.offsetHeight);
+            touched.add(id);
+        }
+        const heights = new Map();
+        touched.forEach((id) => {
+            const total = totalOf(id);
+            if (total > 0)
+                heights.set(id, total);
+        });
+        if (heights.size > 0)
+            onHeights(heights);
+    };
+    const untrack = (id, elements) => {
+        for (const el of elements) {
+            observer === null || observer === void 0 ? void 0 : observer.unobserve(el);
+            rowOf.delete(el);
+            heightOf.delete(el);
+        }
+        if (elementsOf.get(id) === elements)
+            elementsOf.delete(id);
+    };
+    return {
+        track(id, elements) {
+            elementsOf.set(id, elements);
+            if (typeof ResizeObserver === "undefined")
+                return () => untrack(id, elements);
+            observer !== null && observer !== void 0 ? observer : (observer = new ResizeObserver(onResize));
+            for (const el of elements) {
+                rowOf.set(el, id);
+                observer.observe(el);
+            }
+            return () => untrack(id, elements);
+        },
+        dispose() {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            observer = null;
+            rowOf.clear();
+            heightOf.clear();
+            elementsOf.clear();
+        },
+    };
+};
+exports.createRowMeasurer = createRowMeasurer;
+const useRowMeasurer = (onHeights) => {
+    const measurer = (0, react_1.useMemo)(() => (0, exports.createRowMeasurer)(onHeights), [onHeights]);
+    (0, react_1.useEffect)(() => () => measurer.dispose(), [measurer]);
+    return measurer;
+};
+exports.useRowMeasurer = useRowMeasurer;

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

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../../Theme/tokens/builders/surfaceRaised");
 const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
 const optionRowSizes_1 = require("../../../Theme/tokens/primitives/optionRowSizes");
 const optionRowInk_1 = require("../../Select/optionRowInk");
@@ -56,7 +57,7 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
                                             e.preventDefault();
                                             focusOption(0);
                                         }
-                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
+                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
                                             const selected = (value === null || value === void 0 ? void 0 : value.id) === opt.id;
                                             const isActive = i === activeIndex;
                                             const rowBg = selected

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

@@ -8,7 +8,6 @@ const lucide_react_1 = require("lucide-react");
 const TableFilters = (0, react_1.memo)(({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }) => {
     const theme = (0, react_2.useTheme)();
     const searchRef = (0, react_1.useRef)(null);
-    const [refreshDataOnOpen, setRefreshDataOnOpen] = (0, react_1.useState)(false);
     const setColumnsSearchRef = (0, react_1.useRef)(setColumnsSearch);
     setColumnsSearchRef.current = setColumnsSearch;
     const debounceTimerRef = (0, react_1.useRef)(null);
@@ -19,12 +18,6 @@ const TableFilters = (0, react_1.memo)(({ header, setColumnsSearch, columnsSearc
             setColumnsSearchRef.current(value);
         }, 700);
     }, []);
-    (0, react_1.useEffect)(() => {
-        if (columnsSearch.length && searchRef.current) {
-            searchRef.current.value = columnsSearch;
-        }
-        /* eslint-disable */
-    }, [refreshDataOnOpen]);
     // Auto-focus input when popover opens
     (0, react_1.useEffect)(() => {
         if (isOpen && searchRef.current) {
@@ -35,13 +28,9 @@ const TableFilters = (0, react_1.memo)(({ header, setColumnsSearch, columnsSearc
             }, 100);
         }
     }, [isOpen]);
-    const handleOpen = () => {
-        setRefreshDataOnOpen((prev) => !prev);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Filter ${(0, columnLabel_1.columnLabelText)(header)}`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "200px", bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { flex: "1", size: "xs", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, color: theme.colors.textMuted, boxSize: 4 }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { autoFocus: true, placeholder: `Search ${(0, columnLabel_1.columnLabelText)(header)}...`, size: "xs", ref: searchRef, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: onClose, onOpen: onOpen, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Filter ${(0, columnLabel_1.columnLabelText)(header)}`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "200px", bg: theme.colors.surfaceRaised, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { flex: "1", size: "xs", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, color: theme.colors.textMuted, boxSize: 4 }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { autoFocus: true, placeholder: `Search ${(0, columnLabel_1.columnLabelText)(header)}...`, size: "xs", ref: searchRef, defaultValue: columnsSearch, onChange: (e) => {
                                         e.stopPropagation();
                                         debouncedSearch(e.target.value);
-                                    }, onFocus: (e) => e.stopPropagation() })] }) }) }) })] }));
+                                    }, onFocus: (e) => e.stopPropagation() })] }) }) }) }))] }));
 });
 exports.default = TableFilters;

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

@@ -19,6 +19,11 @@ const mergeColumnWithPreference = (pref, originalCol) => {
     }
     return next;
 };
+const sameColumn = (a, b) => {
+    const keys = Object.keys(a);
+    return keys.length === Object.keys(b).length && keys.every((key) => Object.is(a[key], b[key]));
+};
+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)([]);
@@ -62,24 +67,22 @@ const useTable = ({ data, isPagination, selections, onSelection, tablePreference
     (0, react_1.useEffect)(() => {
         var _a;
         const columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
-        if (Array.isArray(columnPreference) && columnPreference.length > 0) {
-            const mergedColumns = columnPreference.map((originalCol) => {
+        const next = Array.isArray(columnPreference) && columnPreference.length > 0
+            ? columnPreference.map((originalCol) => {
                 const prefCol = columns.find((c) => c.id === originalCol.id);
                 return prefCol
                     ? mergeColumnWithPreference(originalCol, prefCol)
                     : { ...originalCol };
-            });
-            setColumnsList(mergedColumns);
-        }
-        else {
-            setColumnsList(columns.map((col, i) => {
+            })
+            : columns.map((col, i) => {
                 var _a;
                 return ({
                     ...col,
                     isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false),
                 });
-            }));
-        }
+            });
+        // 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);

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

@@ -10,13 +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" },
@@ -24,6 +28,7 @@ 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);
@@ -57,7 +62,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
     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: { 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: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, 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: 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 ? 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));
                                                         }) }) }), (0, jsx_runtime_1.jsx)(react_1.TabPanel, { px: 0, py: 0, children: (0, jsx_runtime_1.jsx)(react_1.Box, { sx: {
@@ -78,6 +83,6 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 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__")));
-                                                            }) })] })] }) })] }), (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 })] })] })] })] }));
+                                                            }) })] })] }) })] }), (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/classic.js

@@ -2,6 +2,7 @@
 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");
 /**
@@ -19,14 +20,14 @@ const classicPreset = (colors, isDark) => {
             textTransform: "capitalize",
             letterSpacing: "normal",
             height: "45px",
-            ruleColor: colors.boxborder[200],
+            ruleColor: (0, planeStep_1.cardRule)(colors),
             showColumnRule: true,
             actions: "always",
         },
         row: {
             hoverBg: (0, tableRowHoverStyle_1.getTableRowHoverStyle)(colors, isDark).backgroundColor,
             hoverScope: "cell",
-            ruleColor: colors.boxborder[200],
+            ruleColor: (0, planeStep_1.cardRule)(colors),
             frozenRuleColor: colors.boxborder[300],
             selectedBg: colors.primary.opacity[16],
             selectedBarColor: colors.primary[500],

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

@@ -5,9 +5,9 @@ const react_1 = require("@chakra-ui/react");
 const tone_1 = require("../../../Theme/tokens/builders/tone");
 const BADGE_FONT_SIZE = {
     xs: "0.625rem",
-    sm: "0.6875rem",
-    md: "0.75rem",
-    lg: "0.8125rem",
+    sm: "xs-minus",
+    md: "xs",
+    lg: "xs-plus",
 };
 // Same resolveSoftTone(colors, scale, surface) pattern as SideBar/Header's own count badges.
 const CountBadge = ({ count, colors, scale, surface, size }) => {

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

@@ -1,3 +1,4 @@
 import type { TabProps } from "../TabsProps";
-declare const Tab: ({ value, children, icon, count, isDisabled }: TabProps) => import("react/jsx-runtime").JSX.Element;
+/** One role="tab" button inside a TabList; `ref` is that `<button>`. */
+declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default Tab;

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

@@ -9,13 +9,14 @@ const react_2 = require("@chakra-ui/react");
 const TabsContext_1 = require("../TabsContext");
 const useTabAppearance_1 = require("../useTabAppearance");
 const CountBadge_1 = __importDefault(require("./CountBadge"));
-const Tab = ({ value, children, icon, count, isDisabled }) => {
+/** One role="tab" button inside a TabList; `ref` is that `<button>`. */
+const Tab = (0, react_1.forwardRef)(function Tab({ value, children, icon, count, isDisabled }, ref) {
     var _a;
     const ctx = (0, TabsContext_1.useTabsContext)();
-    const ref = (0, react_1.useRef)(null);
     const isSelected = ctx.selectedId === value;
     const isFocusTarget = ((_a = ctx.focusedId) !== null && _a !== void 0 ? _a : ctx.selectedId) === value;
     const { colors, canvas, scale, style, iconSize, iconSx, boxProps } = (0, useTabAppearance_1.useTabAppearance)(isSelected, isDisabled);
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: ref, role: "tab", id: (0, TabsContext_1.tabId)(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? (0, TabsContext_1.panelId)(ctx.baseId, value) : undefined, "data-value": value, tabIndex: isDisabled ? -1 : isFocusTarget ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && ctx.select(value), onFocus: () => ctx.focusTab(value), ...boxProps, children: [icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: `${iconSize}px`, sx: iconSx, children: icon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", children: children }), count !== undefined ? ((0, jsx_runtime_1.jsx)(CountBadge_1.default, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
-};
+});
+Tab.displayName = "Tab";
 exports.default = Tab;

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

@@ -8,19 +8,34 @@ const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
 const TabsContext_1 = require("../TabsContext");
 const ENABLED_TAB_SELECTOR = '[role="tab"]:not([aria-disabled="true"])';
 const findByValue = (container, value) => Array.from(container.querySelectorAll("[data-value]")).find((node) => node.dataset.value === value);
+const overshoot = (start, end, boxStart, boxEnd) => start < boxStart ? start - boxStart : Math.max(0, end - boxEnd);
+const revealWithinList = (list, tab) => {
+    const box = list.getBoundingClientRect();
+    const rect = tab.getBoundingClientRect();
+    list.scrollLeft += overshoot(rect.left, rect.right, box.left, box.right);
+    list.scrollTop += overshoot(rect.top, rect.bottom, box.top, box.bottom);
+};
 const TabList = ({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const ctx = (0, TabsContext_1.useTabsContext)();
     const ref = (0, react_1.useRef)(null);
     const isVertical = ctx.orientation === "vertical";
     const isLine = ctx.variant === "line";
+    const revealed = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
         var _a, _b;
         const activeId = (_a = ctx.focusedId) !== null && _a !== void 0 ? _a : ctx.selectedId;
         if (!activeId || !ref.current)
             return;
         const el = findByValue(ref.current, activeId);
-        (_b = el === null || el === void 0 ? void 0 : el.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(el, { block: "nearest", inline: "nearest" });
+        if (!el)
+            return;
+        if (!revealed.current) {
+            revealed.current = true;
+            revealWithinList(ref.current, el);
+            return;
+        }
+        (_b = el.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(el, { block: "nearest", inline: "nearest" });
     }, [ctx.focusedId, ctx.selectedId]);
     const focusAndMaybeSelect = (el) => {
         el.focus();

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

@@ -1,5 +1,5 @@
 import React from "react";
 import { TagProps } from "./TagProps";
-/** Renders a pill-shaped status/filter chip (Chakra Tag) — not interchangeable with the raw Badge primitive's static marker. */
-declare const Tag: React.FC<TagProps>;
+/** Pill-shaped status/filter chip (Chakra Tag), not the raw Badge primitive; `ref` is the root element. */
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;
 export default Tag;

package/dist/Components/Tag/Tag.js

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 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 motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const tagDot_1 = require("./tagDot");
 // NOTE: the label's pill radius would slice descenders, so clipping lives on a square child.
-const LabelText = ({ children, title }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", title: title, display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", borderRadius: 0, px: "0.05em", mx: "-0.05em", children: children }));
+const LabelText = ({ children, title }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", title: title, display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", borderRadius: 0, px: "0.05em", mx: "-0.05em", children: children }));
 const ICON_SIZE = {
     xs: "0.75rem",
     sm: "0.875rem",
@@ -17,23 +19,24 @@ const ICON_SIZE = {
     lg: "1.1em",
 };
 const DOT_FONT_SIZE = {
-    xs: "0.75rem",
-    sm: "0.8125rem",
-    md: "0.875rem",
+    xs: "xs",
+    sm: "xs-plus",
+    md: "sm",
     lg: "0.9375rem",
 };
-/** Renders a pill-shaped status/filter chip (Chakra Tag) — not interchangeable with the raw Badge primitive's static marker. */
-const Tag = ({ label, colorScheme = "primary", tone, variant = "subtle", display = "chip", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, isDisabled, "data-testid": testId, }) => {
+/** 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 { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isInteractive = !!onTagClick;
     if (display === "dot") {
-        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { 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 ? 0.5 : 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_1.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_1.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, "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_1.Tag, { 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_1.TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? ((0, jsx_runtime_1.jsx)(react_1.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_1.TagLabel, { noOfLines: undefined, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
-                (onIconClick ? ((0, jsx_runtime_1.jsx)(react_1.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, "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) => {
                         e.stopPropagation();
                         if (!isDisabled)
                             onIconClick();
-                    }, display: "inline-flex", alignItems: "center", flexShrink: 0, ml: "0.25rem", borderRadius: "full", transition: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : ((0, jsx_runtime_1.jsx)(react_1.TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
-};
+                    }, display: "inline-flex", alignItems: "center", flexShrink: 0, ml: "0.25rem", borderRadius: "full", transition: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : ((0, jsx_runtime_1.jsx)(react_2.TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
+});
+Tag.displayName = "Tag";
 exports.default = Tag;

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

@@ -5,6 +5,8 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 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 motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 exports.INTERACTIVE_HOVER = "&[data-interactive]:hover";
@@ -33,7 +35,7 @@ exports.Tag = {
             transition: (0, motion_1.transitionFor)(["background-color", "color", "border-color", "box-shadow"]),
             ...(0, motion_2.reducedMotionSx)(),
             "&[data-interactive]": { cursor: "pointer" },
-            "&[data-disabled]": { opacity: 0.5, cursor: "not-allowed", pointerEvents: "none" },
+            "&[data-disabled]": { opacity: states_1.DISABLED_OPACITY, cursor: "not-allowed", pointerEvents: "none" },
         },
         label: {
             lineHeight: 1.45,
@@ -45,13 +47,13 @@ exports.Tag = {
     }),
     sizes: {
         xs: {
-            container: { fontSize: "0.6875rem", px: 2, h: "1.25rem" },
+            container: { fontSize: typography_1.fontSizes["xs-minus"], px: 2, h: "1.25rem" },
         },
         sm: {
-            container: { fontSize: "0.75rem", px: 2.5, h: "1.5rem" },
+            container: { fontSize: typography_1.fontSizes.xs, px: 2.5, h: "1.5rem" },
         },
         md: {
-            container: { fontSize: "0.8125rem", px: 3, h: "1.75rem" },
+            container: { fontSize: typography_1.fontSizes["xs-plus"], px: 3, h: "1.75rem" },
         },
         lg: {
             container: { fontSize: "0.9375rem", px: 3.5, h: "2rem" },

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

@@ -0,0 +1,3 @@
+import type { TagInputProps } from "./TagInputProps";
+declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default TagInput;

package/dist/Components/TagInput/TagInput.js

@@ -0,0 +1,99 @@
+"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 lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const motion_1 = require("../../Theme/chakra/motion");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const FormLabel_1 = require("../Common/FormLabel");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+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 theme = (0, useCustomTheme_1.useCustomTheme)();
+    const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)(size);
+    const inputRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_2.useMergeRefs)(inputRef, ref);
+    const [draft, setDraft] = (0, react_1.useState)("");
+    const [rejection, setRejection] = (0, react_1.useState)(null);
+    const [announcement, setAnnouncement] = (0, react_1.useState)("");
+    const isInvalid = Boolean(error || rejection);
+    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 commit = (text) => {
+        const result = (0, tagEntries_1.addTags)(value, (0, tagEntries_1.splitEntries)(text), { validate, maxTags, allowDuplicates });
+        if (result.added.length) {
+            onChange(result.tags);
+            setAnnouncement(`Added ${result.added.join(", ")}`);
+        }
+        setRejection(result.message);
+        setDraft(result.rejected.join(", "));
+    };
+    const removeAt = (index) => {
+        const removed = value[index];
+        onChange(value.filter((_, i) => i !== index));
+        setAnnouncement(`Removed ${removed}`);
+        setRejection(null);
+    };
+    const onKeyDown = (event) => {
+        if (locked)
+            return;
+        if (event.key === "Enter" || event.key === ",") {
+            if (event.key === "Enter" && !draft.trim())
+                return;
+            event.preventDefault();
+            commit(draft);
+        }
+        else if (event.key === "Backspace" && draft === "" && value.length > 0) {
+            removeAt(value.length - 1);
+        }
+    };
+    const onPaste = (event) => {
+        const pasted = event.clipboardData.getData("text");
+        if (locked || !(0, tagEntries_1.hasSeparator)(pasted))
+            return;
+        event.preventDefault();
+        const { selectionStart, selectionEnd } = event.currentTarget;
+        commit(`${draft.slice(0, selectionStart !== null && selectionStart !== void 0 ? selectionStart : draft.length)}${pasted}${draft.slice(selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : draft.length)}`);
+    };
+    const onInput = (event) => {
+        setDraft(event.target.value);
+        setRejection(null);
+    };
+    const onBlur = () => {
+        if (addOnBlur && !locked && draft.trim())
+            commit(draft);
+    };
+    const focusFromBox = (event) => {
+        var _a;
+        if (event.target !== event.currentTarget || isDisabled)
+            return;
+        event.preventDefault();
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, minH: s.minH, onMouseDown: focusFromBox, sx: {
+                    ...(0, fieldStyles_1.getFieldStateStyles)(theme, { error: isInvalid, disabled: isDisabled }),
+                    ...(0, motion_1.reducedMotionSx)(),
+                }, _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
+                            ? undefined
+                            : () => {
+                                var _a;
+                                removeAt(index);
+                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            } }, `${index}:${tag}`))), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: mergedRef, type: "text", value: draft, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: isInvalid, ...ids.controlProps, "aria-label": label ? undefined : ariaLabel, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: 400, color: theme.colors.text[900], flex: "1", minW: 0, _placeholder: { color: (0, placeholderInk_1.placeholderInk)(theme.colors), opacity: 1 }, style: { backgroundColor: "transparent" }, onChange: onInput, onKeyDown: onKeyDown, onPaste: onPaste, onBlur: onBlur, placeholder: value.length === 0 ? placeholder : "" })] }), name && value.map((tag, index) => (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: tag }, `${index}:${tag}`)), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", position: "fixed", top: 0, left: 0, children: announcement }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: isInvalid, errorMessage: shownError, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+TagInput.displayName = "TagInput";
+exports.default = TagInput;

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

@@ -0,0 +1,46 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** `false` or a non-empty string rejects `tag` (the string is shown as the message); `true` or `undefined` accepts. */
+export type TagValidator = (tag: string, tags: readonly string[]) => boolean | string | undefined;
+/** Free-text chips: Enter or comma adds, Backspace on an empty input removes the last; `ref` is the text `<input>`. */
+export type TagInputProps = {
+    /** The committed tags, in order. Controlled: the field never edits it itself. */
+    value: string[];
+    /** Called with the next list after an add or a remove. */
+    onChange: (tags: string[]) => void;
+    /** Runs on each trimmed entry before it is added; a rejected entry stays in the input with its message. */
+    validate?: TagValidator;
+    /** Cap on tags; adding past it is rejected with a message. */
+    maxTags?: number;
+    /** Allows the same tag twice. Defaults to false, compared case-insensitively. */
+    allowDuplicates?: boolean;
+    /** Also commits the typed text when focus leaves the input. Defaults to false. */
+    addOnBlur?: boolean;
+    /** DOM id of the text input; the label's `for` and the message ids derive from it. Generated when omitted. */
+    id?: string;
+    /** Submits each tag as its own hidden input with this name; the half-typed text is never submitted. */
+    name?: string;
+    label?: string;
+    /** Names the input when there is no visible `label`. */
+    "aria-label"?: string;
+    /** Shown only while there are no tags. */
+    placeholder?: string;
+    /** Label asterisk plus native `required` on the input. */
+    isRequired?: boolean;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage`. */
+    isInformation?: boolean;
+    informationMessage?: string;
+    /** Dims the chips, disables the input and drops the remove buttons. */
+    isDisabled?: boolean;
+    /** Keeps the input focusable but drops typing and the remove buttons. */
+    isReadOnly?: boolean;
+    /** Error border and `aria-invalid`; swaps `helperText` for `errorMessage`. A rejected entry sets this too. */
+    error?: boolean;
+    /** Shown while `error` is true; a rejected entry's own message wins until the input changes. */
+    errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
+    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;
+    /** Width of the whole field; defaults to "100%". */
+    width?: string | number;
+};

package/dist/Components/TagInput/TagInputProps.js

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

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

@@ -0,0 +1,15 @@
+import type { TagValidator } from "./TagInputProps";
+export type AddRules = {
+    validate?: TagValidator;
+    maxTags?: number;
+    allowDuplicates?: boolean;
+};
+export type AddResult = {
+    tags: string[];
+    added: string[];
+    rejected: string[];
+    message: string | null;
+};
+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;