npm - pixelize-design-library - Versions diffs - 2.4.2-beta.63 → 2.4.2-beta.65 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (135) hide show

package/dist/Components/NavLauncher/spotlightParts.js ADDED Viewed

@@ -0,0 +1,108 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.describeFacts = exports.QUICK_ACTION_LIMIT = void 0;
+exports.QuickActionsRow = QuickActionsRow;
+exports.TopHitCard = TopHitCard;
+exports.AnswerCard = AnswerCard;
+exports.ShowMoreOption = ShowMoreOption;
+exports.FactList = FactList;
+exports.PreviewPane = PreviewPane;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const motion_1 = require("../../Theme/chakra/motion");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Button_1 = __importDefault(require("../Button/Button"));
+const CopyButton_1 = __importDefault(require("../CopyButton/CopyButton"));
+const Kbd_1 = require("../Kbd/Kbd");
+const launcherParts_1 = require("./launcherParts");
+exports.QUICK_ACTION_LIMIT = 5;
+const HIDE_ON_TOUCH = { "@media (hover: none)": { display: "none" } };
+function QuickActionsRow({ items, label, link, onRun, }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "group", "aria-label": label, "data-testid": "launcher-quick-actions", gap: "6px", minW: 0, flexWrap: "wrap", px: "4px", children: items.slice(0, exports.QUICK_ACTION_LIMIT).map((item) => {
+            const Icon = item.icon;
+            const common = {
+                variant: "outline",
+                colorScheme: "gray",
+                size: "sm",
+                borderRadius: "full",
+                flexShrink: 0,
+                label: item.label,
+                leftIcon: Icon ? ((0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 2, "aria-hidden": true })) : undefined,
+            };
+            return item.href && !item.run ? ((0, jsx_runtime_1.jsx)(Button_1.default, { ...common, as: link.linkAs, href: item.href, onClick: link.onPlainClick }, item.id)) : ((0, jsx_runtime_1.jsx)(Button_1.default, { ...common, onClick: () => onRun(item) }, item.id));
+        }) }));
+}
+const useCardSurface = (isActive) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { edge, fill } = (0, launcherParts_1.activeRowStyle)(colors);
+    return {
+        position: "relative",
+        borderRadius: "xl",
+        borderWidth: "1px",
+        borderColor: isActive ? edge : colors.boxborder[200],
+        bg: isActive ? fill : colors.surfaceRaised,
+        transition: (0, motion_2.transitionFor)(["background-color", "border-color"]),
+        sx: (0, motion_1.reducedMotionSx)(),
+    };
+};
+function IconChip({ icon, size }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const Icon = icon !== null && icon !== void 0 ? icon : lucide_react_1.Search;
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { boxSize: `${size}px`, borderRadius: "10px", bg: colors.primary.opacity[8], color: colors.accentText, align: "center", justify: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: Math.round(size / 2), strokeWidth: 1.8, "aria-hidden": true }) }));
+}
+function CardAnchor({ item, link }) {
+    if (!item.href)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: item.href, tabIndex: -1, "aria-hidden": true, onClick: link.onPlainClick, position: "absolute", inset: 0, borderRadius: "xl" }));
+}
+function TopHitCard({ item, query, isActive, optionId, link, labels, onOpen, onHover, describedBy, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const surface = useCardSurface(isActive);
+    const meta = [item.context, item.hint].filter(Boolean).join(" · ");
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "presentation", "data-group": true, "data-reveal": isActive, direction: "column", gap: "10px", p: "12px", onMouseMove: onHover, ...surface, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { id: optionId, role: "option", "aria-selected": isActive, "aria-describedby": describedBy, "data-active": isActive, align: "center", gap: "12px", minW: 0, cursor: "pointer", onClick: () => {
+                    if (!item.href)
+                        onOpen();
+                }, children: [(0, jsx_runtime_1.jsx)(IconChip, { icon: item.icon, size: 40 }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: "2px", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", lineHeight: "22px", fontWeight: 600, color: colors.text[900], noOfLines: 1, children: (0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.label, query: query }) }), meta ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "12.5px", color: colors.textMuted, noOfLines: 1, children: meta })) : null, item.keywordHint ? ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: [`${labels.matchedOn} “`, (0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.keywordHint, query: query }), "\u201D"] })) : null] }), (0, jsx_runtime_1.jsx)(launcherParts_1.CountBadge, { value: item.badge }), (0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, flexShrink: 0, sx: HIDE_ON_TOUCH, children: (0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "sm" }) })] }), (0, jsx_runtime_1.jsx)(CardAnchor, { item: item, link: link })] }));
+}
+function AnswerCard({ item, isActive, optionId, link, labels, onOpen, onHover, describedBy, }) {
+    var _a, _b;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const surface = useCardSurface(isActive);
+    const answer = (_a = item.answer) !== null && _a !== void 0 ? _a : {
+        label: (_b = item.context) !== null && _b !== void 0 ? _b : "",
+        value: item.label,
+    };
+    const acts = Boolean(item.href || item.run);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "presentation", "data-group": true, p: "12px 14px", onMouseMove: onHover, ...surface, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { id: optionId, role: "option", "aria-selected": isActive, "aria-describedby": describedBy, "data-active": isActive, align: "center", gap: "12px", flex: 1, minW: 0, cursor: "pointer", onClick: () => {
+                    if (!item.href)
+                        onOpen();
+                }, children: [(0, jsx_runtime_1.jsx)(IconChip, { icon: item.icon, size: 36 }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: "1px", children: [answer.label ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: colors.textMuted, noOfLines: 1, children: answer.label })) : null, (0, jsx_runtime_1.jsx)(react_1.Text, { id: `${optionId}-value`, fontSize: "lg", lineHeight: "24px", fontWeight: 600, color: colors.text[900], noOfLines: 2, children: answer.value }), answer.hint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: answer.hint })) : null] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, align: "center", gap: "6px", flexShrink: 0, fontSize: "11.5px", color: colors.textMuted, sx: HIDE_ON_TOUCH, children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }), acts ? labels.hintOpen : labels.hintCopy] })] }), (0, jsx_runtime_1.jsx)(CardAnchor, { item: item, link: link })] }));
+}
+function ShowMoreOption({ count, isActive, optionId, label, onExpand, onHover, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isTouch = (0, launcherParts_1.useTouchDensity)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: optionId, role: "option", "aria-selected": isActive, "data-active": isActive, align: "center", gap: "6px", minH: isTouch ? "44px" : "30px", px: "8px", mt: "2px", borderRadius: "lg", cursor: "pointer", fontSize: "12.5px", fontWeight: 500, color: colors.accentText, onClick: onExpand, onMouseMove: onHover, _hover: { bg: (0, rowStates_1.listRowBackgrounds)(colors).active }, sx: isActive ? (0, launcherParts_1.activeRowSurface)(colors) : undefined, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, strokeWidth: 2, "aria-hidden": true }), label(count)] }));
+}
+const describeFacts = (facts) => facts.map((f) => `${f.label}: ${f.value}`).join("; ");
+exports.describeFacts = describeFacts;
+function FactList({ facts, labels, layout, onCopied, onCopyBlocked, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const values = (0, react_2.useRef)([]);
+    const isPane = layout === "pane";
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "dl", m: 0, display: "grid", gridTemplateColumns: isPane ? "minmax(0, 1fr)" : "repeat(auto-fill, minmax(11rem, 1fr))", gap: isPane ? "12px" : "6px 16px", children: facts.map((fact, i) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "dt", fontSize: "11.5px", lineHeight: "16px", color: colors.textMuted, children: fact.label }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "dd", m: 0, align: "center", gap: "2px", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { ref: (node) => {
+                                values.current[i] = node;
+                            }, fontSize: isPane ? "13.5px" : "12.5px", lineHeight: "20px", color: colors.text[900], wordBreak: "break-word", minW: 0, children: fact.value }), fact.copyable ? ((0, jsx_runtime_1.jsx)(CopyButton_1.default, { value: fact.value, tooltip: labels.copy(fact.label), copiedLabel: labels.copied, size: isPane ? "xs" : "sm", iconSize: 14, onCopy: onCopied, onCopyError: () => onCopyBlocked(values.current[i]) })) : null] })] }, `${fact.label}-${i}`))) }));
+}
+function PreviewPane({ item, placement, width, labels, onCopied, onCopyBlocked, }) {
+    var _a, _b, _c, _d, _e;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isDock = placement === "dock";
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "aside", "aria-label": labels.preview, "data-testid": "launcher-preview", "data-scroll-region": true, direction: "column", gap: isDock ? "10px" : "16px", w: isDock ? "100%" : width, maxH: isDock ? "min(45vh, 20rem)" : undefined, flexShrink: 0, px: "18px", pt: isDock ? "12px" : "16px", pb: isDock ? "12px" : "16px", bg: colors.backgroundColor.subtle, ...(isDock ? { borderTopWidth: "1px" } : { borderLeftWidth: "1px" }), borderColor: colors.boxborder[200], overflowY: "auto", children: item ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "10px", minW: 0, children: [(0, jsx_runtime_1.jsx)(IconChip, { icon: item.icon, size: isDock ? 28 : 36 }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: isDock ? "14px" : "15px", fontWeight: 600, color: colors.text[900], noOfLines: isDock ? 1 : 2, children: (_b = (_a = item.answer) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : item.label }), item.context || item.answer ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: (_d = (_c = item.answer) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : item.context })) : null] })] }), ((_e = item.facts) === null || _e === void 0 ? void 0 : _e.length) ? ((0, jsx_runtime_1.jsx)(FactList, { facts: item.facts, labels: labels, layout: isDock ? "inline" : "pane", onCopied: onCopied, onCopyBlocked: onCopyBlocked }, item.id)) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, align: "center", gap: "6px", fontSize: "xs", color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }), labels.hintOpen] }))] })) : null }));
+}

package/dist/Components/NavigationBar/NavigationBar.js CHANGED Viewed

@@ -9,6 +9,7 @@ const react_1 = require("@chakra-ui/react");
 const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
@@ -54,7 +55,7 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         _focus: { bg: menuHoverBg },
         _active: { bg: rowBackgrounds.selectedActive },
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", flex: "1 1 0%", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, flexShrink: 0, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", flexShrink: 0, onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), leading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leading, (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": "true", mx: 2, w: "1px", h: "1.625rem", flexShrink: 0, bg: theme.colors.boxborder[200] })] })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: typeof navigationBarText.text === "string" ? navigationBarText.text : "", overflowOnly: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_1.Text, { flex: "1 1 0%", w: 0, minW: 0, isTruncated: true, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "xl", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, sx: { "& > *": { minW: 0 } }, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem",
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: (0, planeStep_1.ruleOn)(theme.colors, theme.colors.backgroundColor.light), children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", flex: "1 1 0%", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, flexShrink: 0, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", flexShrink: 0, onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), leading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leading, (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": "true", mx: 2, w: "1px", h: "1.625rem", flexShrink: 0, bg: (0, planeStep_1.ruleOn)(theme.colors, theme.colors.backgroundColor.light) })] })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: typeof navigationBarText.text === "string" ? navigationBarText.text : "", overflowOnly: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_1.Text, { flex: "1 1 0%", w: 0, minW: 0, isTruncated: true, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "xl", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, sx: { "& > *": { minW: 0 } }, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem",
                                         // Without a cap one long title stretches the whole dropdown; titles truncate instead.
                                         maxW: "18rem", bg: theme.colors.surfaceRaised,
                                         // NOTE: Chakra's MenuItem inherits --menu-bg hardcoded to #fff via dead _dark — set it or items stay white.

package/dist/Components/OrgSwitcher/OrgSwitcher.js CHANGED Viewed

@@ -12,6 +12,7 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const optionRowInk_1 = require("../Select/optionRowInk");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
@@ -111,14 +112,11 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
                                             }
                                         }, borderRadius: "lg" })] }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": "Organizations", maxH: "320px", overflowY: "auto", py: 1, onKeyDown: handleListKeyDown, children: [filtered.map((org, idx) => {
                                     const isActive = org.id === value;
-                                    const rowHoverBg = isActive
-                                        ? rowBackgrounds.selectedActive
-                                        : rowBackgrounds.active;
                                     return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", role: "option", "aria-selected": isActive, ref: (el) => {
                                             optionRefs.current[idx] = el;
                                             if (idx === 0)
                                                 firstOptionRef.current = el;
-                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: isActive ? rowBackgrounds.selected : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: "transparent", transition: "background 0.12s ease", ...(0, optionRowInk_1.optionRowCursorSx)(rowBackgrounds), onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
                                 }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 exports.default = OrgSwitcher;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js CHANGED Viewed

@@ -26,6 +26,7 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
     const fileInputRef = (0, react_1.useRef)(null);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;
+    const editFill = (0, filledSurface_1.resolveFilledSurface)(c.primary, c);
     const handlePhotoChange = (event) => {
         var _a;
         if (!isEditable)
@@ -75,14 +76,14 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
             "&:hover .ppv-media": {
                 boxShadow: `0 0 0 0.1875rem ${c.primary.opacity[24]}`,
             },
-        }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: RING_TRANSITION, children: renderMedia() }), hasActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: hoverScrim(0.3), opacity: 0, transition: FADE_TRANSITION, pointerEvents: "none" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: FADE_TRANSITION, children: [isEditable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[(0, filledSurface_1.solidFillRung)(c.primary, c.white)], color: (0, filledSurface_1.labelOnFill)(c.primary[(0, filledSurface_1.solidFillRung)(c.primary, c.white)], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: ACTION_TRANSITION, _hover: {
-                                        bg: c.primary[600],
-                                        color: (0, filledSurface_1.labelOnFill)(c.primary[600], c.white, c.black),
+        }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: RING_TRANSITION, children: renderMedia() }), hasActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: hoverScrim(0.3), opacity: 0, transition: FADE_TRANSITION, pointerEvents: "none" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: FADE_TRANSITION, children: [isEditable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: editFill.fill, color: editFill.color, border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: ACTION_TRANSITION, _hover: {
+                                        bg: editFill.hoverFill,
+                                        color: editFill.hoverColor,
                                         transform: "scale(1.1)",
                                         boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg,
                                     }, _active: {
-                                        bg: c.primary[700],
-                                        color: (0, filledSurface_1.labelOnFill)(c.primary[700], c.white, c.black),
+                                        bg: editFill.activeFill,
+                                        color: editFill.activeColor,
                                     } }) })), isView && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: ACTION_TRANSITION, _hover: {
                                         bg: c.gray[50],
                                         color: (0, accentText_1.accentTextOnCanvas)(c.primary, c.gray[50]),

package/dist/Components/ScrollToTop/ScrollToTop.js CHANGED Viewed

@@ -19,6 +19,7 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
     const [visible, setVisible] = (0, react_1.useState)(false);
     const anchorRef = (0, react_1.useRef)(null);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const fill = (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors);
     const getScroller = () => {
         var _a, _b;
         if (useWindow)
@@ -67,9 +68,9 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [useWindow, threshold]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: anchorRef, position: "relative", children: [children, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, placement: "left", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], color: (0, filledSurface_1.labelOnFill)(theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: (0, primitives_1.transitionFor)(["opacity", "transform", "box-shadow", "background-color", "color"], "base"), _hover: {
-                        bg: theme.colors.primary[600],
-                        color: (0, filledSurface_1.labelOnFill)(theme.colors.primary[600], theme.colors.white, theme.colors.black),
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: anchorRef, position: "relative", children: [children, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, placement: "left", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: fill.fill, color: fill.color, boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: (0, primitives_1.transitionFor)(["opacity", "transform", "box-shadow", "background-color", "color"], "base"), _hover: {
+                        bg: fill.hoverFill,
+                        color: fill.hoverColor,
                         transform: "translateY(-2px) scale(1.05)",
                         boxShadow: "lg",
                     }, _active: { transform: "scale(0.95)" }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(theme.colors), ...(0, motion_1.reducedMotionSx)({ transform: "none" }) }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));

package/dist/Components/SearchSelect/SearchSelect.js CHANGED Viewed

@@ -79,17 +79,9 @@ const normalizeMultiValue = (val) => {
 const DECORATIVE_CHECKBOX_SX = { pointerEvents: "none", "& input": { visibility: "hidden" } };
 const OptionRow = react_1.default.memo(function OptionRow({ option, index, optionId, isSelected, isActive, isMultiple, spec, colors, rowBackgrounds, checkboxSize, onSelect, onActivate, }) {
     const singleSelected = isSelected && !isMultiple;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: optionId, "data-index": index, role: "option", "aria-selected": isSelected, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", bg: isSelected
-            ? isActive
-                ? rowBackgrounds.selectedActive
-                : rowBackgrounds.selected
-            : isActive
-                ? rowBackgrounds.active
-                : "transparent", _hover: {
-            bg: isSelected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
-        }, onClick: () => onSelect(option), onMouseEnter: () => onActivate(index), display: "flex", alignItems: "center", gap: spec.gap, color: (0, optionRowInk_1.optionRowInk)(colors, singleSelected),
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: optionId, "data-index": index, role: "option", "aria-selected": isSelected, mx: spec.mx, py: spec.py, px: spec.px, minH: spec.minH, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, cursor: "pointer", bg: (0, optionRowInk_1.optionRowFill)(rowBackgrounds, isActive), onClick: () => onSelect(option), onMouseEnter: () => onActivate(index), display: "flex", alignItems: "center", gap: spec.gap, color: (0, optionRowInk_1.optionRowInk)(colors, singleSelected),
         // `view` is consumer JSX with no size of its own; it inherited the 16px body font.
-        fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(singleSelected), borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, surfaceRaised_1.raisedRule)(colors)}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected, sx: DECORATIVE_CHECKBOX_SX, size: checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { isTruncated: true, children: option.label })), singleSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: colors.accentText, flexShrink: 0 }))] }));
+        fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(singleSelected), children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected, sx: DECORATIVE_CHECKBOX_SX, size: checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { flex: 1, minW: 0, isTruncated: true, children: option.label })), singleSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: colors.accentText, flexShrink: 0 }))] }));
 });
 /** Full-featured combobox: search, chips, select-all, paginated infinite scroll — not DOM-virtualized despite the `virtualization` prop. */
 /** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
@@ -656,11 +648,7 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                                 }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "4.5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.375rem", children: [insideLabel ? ((0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: theme.colors.textMuted, isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: customSelectOpen ? theme.colors.accentText : theme.colors.textMuted, transition: CHEVRON_TRANSITION, transform: customSelectOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: setInsideSelectMenuRef, id: insideSelectPortalId, role: "listbox", "aria-label": insidePlaceholder, onKeyDown: handleInsideMenuKeyDown, onFocus: stopFocusBubbling, onBlur: stopFocusBubbling, position: "fixed", style: { top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px` }, zIndex: zIndices_1.default.popoverNested, bg: theme.colors.surfaceRaised, border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_c = insideSelect.option) === null || _c === void 0 ? void 0 : _c.map((item) => {
                                                 var _a;
                                                 const selected = ((_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.id) === item.id;
-                                                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spec.gap, minH: spec.minH, py: spec.py, px: spec.px, fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(selected), color: (0, optionRowInk_1.optionRowInk)(theme.colors, selected), bg: selected ? rowBackgrounds.selected : "transparent", _hover: {
-                                                        bg: selected
-                                                            ? rowBackgrounds.selectedActive
-                                                            : rowBackgrounds.active,
-                                                    }, cursor: "pointer", role: "option", "aria-selected": selected, tabIndex: -1, _focusVisible: insideFocusRing, onClick: (e) => {
+                                                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spec.gap, minH: spec.minH, py: spec.py, px: spec.px, fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(selected), color: (0, optionRowInk_1.optionRowInk)(theme.colors, selected), bg: "transparent", ...(0, optionRowInk_1.optionRowCursorSx)(rowBackgrounds), cursor: "pointer", role: "option", "aria-selected": selected, tabIndex: -1, _focusVisible: insideFocusRing, onClick: (e) => {
                                                         e.stopPropagation();
                                                         handleCustomSelect(item);
                                                     }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { isTruncated: true, children: item.label }), selected && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: spec.iconSize, color: theme.colors.accentText }))] }, item.id));
@@ -699,6 +687,6 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                         top: `${dropdownPos.top}px`,
                         left: `${dropdownPos.left}px`,
                         width: `${dropdownPos.width}px`,
-                    }, zIndex: zIndices_1.default.popover, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", bg: theme.colors.surfaceRaised, boxShadow: theme.shadows.lg, display: "flex", flexDirection: "column", children: [hasSelectAllRow && ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, bg: activeIndex === searchSelectNav_1.SELECT_ALL_ROW ? rowBackgrounds.active : undefined, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.text[700], borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: DECORATIVE_CHECKBOX_SX, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: optionsListRef, flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsx)(OptionRow, { option: option, index: index, optionId: getOptionId(index), isSelected: isSelected(option.id), isActive: index === activeIndex, isMultiple: isMultiple, spec: spec, colors: theme.colors, rowBackgrounds: rowBackgrounds, checkboxSize: s.checkboxSize, onSelect: selectOption, onActivate: setActiveIndex }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", justifyContent: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: addNewId, role: "option", "aria-selected": false, py: spec.py, px: spec.px, borderTop: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), bg: activeIndex === searchSelectNav_1.ADD_NEW_ROW ? rowBackgrounds.active : theme.colors.surfaceRaised, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.accentText, fontWeight: 500, minH: spec.minH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: rowBackgrounds.active }, children: [addNew.icon || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: addNew.text || "Add New" })] }))] }) })), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                    }, zIndex: zIndices_1.default.popover, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", bg: theme.colors.surfaceRaised, boxShadow: theme.shadows.lg, display: "flex", flexDirection: "column", children: [hasSelectAllRow && ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, bg: activeIndex === searchSelectNav_1.SELECT_ALL_ROW ? rowBackgrounds.active : undefined, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.text[700], borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: DECORATIVE_CHECKBOX_SX, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: optionsListRef, flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", py: 1, borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsx)(OptionRow, { option: option, index: index, optionId: getOptionId(index), isSelected: isSelected(option.id), isActive: index === activeIndex, isMultiple: isMultiple, spec: spec, colors: theme.colors, rowBackgrounds: rowBackgrounds, checkboxSize: s.checkboxSize, onSelect: selectOption, onActivate: setActiveIndex }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", justifyContent: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: addNewId, role: "option", "aria-selected": false, py: spec.py, px: spec.px, borderTop: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), bg: activeIndex === searchSelectNav_1.ADD_NEW_ROW ? rowBackgrounds.active : theme.colors.surfaceRaised, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.accentText, fontWeight: 500, minH: spec.minH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: rowBackgrounds.active }, children: [addNew.icon || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: addNew.text || "Add New" })] }))] }) })), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 exports.default = SearchSelect;

package/dist/Components/Select/SelectPopup.js CHANGED Viewed

@@ -74,9 +74,7 @@ const parseRemToPx = (value, fallbackPx) => {
 };
 const OptionRow = react_1.default.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, backgrounds, spec, renderOption, onSelect, onActivate, }) {
     const isSingleSelected = isSelected && !isMulti;
-    const selectedBg = isActive ? backgrounds.selectedActive : backgrounds.selected;
-    const restBg = isActive ? backgrounds.active : "transparent";
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(isSingleSelected), color: (0, optionRowInk_1.optionRowInk)(theme.colors, isSingleSelected), bg: isSingleSelected ? selectedBg : restBg, transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), children: [isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1, sx: DECORATIVE_CHECKBOX_SX })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: spec.descriptionFontSize, color: (0, optionRowInk_1.optionRowDescriptionInk)(theme.colors), isTruncated: true, children: option.description })) : null] })] })), isSingleSelected ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(isSingleSelected), color: (0, optionRowInk_1.optionRowInk)(theme.colors, isSingleSelected), bg: (0, optionRowInk_1.optionRowFill)(backgrounds, isActive), transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), children: [isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1, sx: DECORATIVE_CHECKBOX_SX })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: spec.descriptionFontSize, color: (0, optionRowInk_1.optionRowDescriptionInk)(theme.colors), isTruncated: true, children: option.description })) : null] })] })), isSingleSelected ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 })) : null] }));
 });
 const buildGroupedRows = (options) => {
     const rows = [];

package/dist/Components/Select/optionRowInk.d.ts CHANGED Viewed

@@ -1,7 +1,19 @@
+import { type RowStateBackgrounds } from "../../Theme/tokens/builders/rowStates";
 import type { PaletteProps } from "../../Theme/tokens/types";
 /** Selection is carried by weight and a trailing brand check, so the label itself stays neutral. */
 export declare const optionRowInk: (colors: PaletteProps, isSingleSelected: boolean) => string;
 export declare const optionRowDescriptionInk: (colors: PaletteProps) => string;
+/** The one fill an option row paints: the cursor's (hover or keyboard). Selection never fills a row. */
+export declare const optionRowFill: (rows: RowStateBackgrounds, isActive: boolean) => string;
+/** Fill for rows that take real DOM focus (roving tabindex) — `:hover` and `:focus` are the cursor. */
+export declare const optionRowCursorSx: (rows: RowStateBackgrounds) => {
+    _hover: {
+        bg: string;
+    };
+    _focus: {
+        bg: string;
+    };
+};
 export declare const OPTION_ROW_REST_WEIGHT = 400;
 export declare const OPTION_ROW_SELECTED_WEIGHT = 500;
 export declare const optionRowWeight: (isSingleSelected: boolean) => number;

package/dist/Components/Select/optionRowInk.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.optionRowWeight = exports.OPTION_ROW_SELECTED_WEIGHT = exports.OPTION_ROW_REST_WEIGHT = exports.optionRowDescriptionInk = exports.optionRowInk = void 0;
+exports.optionRowWeight = exports.OPTION_ROW_SELECTED_WEIGHT = exports.OPTION_ROW_REST_WEIGHT = exports.optionRowCursorSx = exports.optionRowFill = exports.optionRowDescriptionInk = exports.optionRowInk = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
@@ -10,6 +10,15 @@ exports.optionRowInk = optionRowInk;
 // A 12px sub-line reached only 4.00:1 on the hovered selected row in dark.
 const optionRowDescriptionInk = (colors) => (0, outlineRung_1.liftToContrast)(colors.textMuted, (0, rowStates_1.listRowBackgrounds)(colors).selectedActive, accentText_1.AA_NORMAL_TEXT);
 exports.optionRowDescriptionInk = optionRowDescriptionInk;
+/** The one fill an option row paints: the cursor's (hover or keyboard). Selection never fills a row. */
+const optionRowFill = (rows, isActive) => isActive ? rows.active : "transparent";
+exports.optionRowFill = optionRowFill;
+/** Fill for rows that take real DOM focus (roving tabindex) — `:hover` and `:focus` are the cursor. */
+const optionRowCursorSx = (rows) => ({
+    _hover: { bg: rows.active },
+    _focus: { bg: rows.active },
+});
+exports.optionRowCursorSx = optionRowCursorSx;
 exports.OPTION_ROW_REST_WEIGHT = 400;
 // NOTE: 600 beside a tinted fill and a check read as three signals for one state.
 exports.OPTION_ROW_SELECTED_WEIGHT = 500;

package/dist/Components/SelectSearch/SelectSearch.js CHANGED Viewed

@@ -36,18 +36,9 @@ const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOp
                 const selected = isOptionSelected(option);
                 const isSingleSelected = selected && !isMultipleSelect;
                 const isActive = index === activeIndex;
-                const rowBg = selected
-                    ? isActive
-                        ? rowBackgrounds.selectedActive
-                        : rowBackgrounds.selected
-                    : isActive
-                        ? rowBackgrounds.active
-                        : "transparent";
                 return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (el) => {
                         optionRefs.current[index] = el;
-                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: rowBg, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, isSingleSelected), fontWeight: (0, optionRowInk_1.optionRowWeight)(isSingleSelected), transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), _hover: {
-                        bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
-                    }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
+                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: "transparent", mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, isSingleSelected), fontWeight: (0, optionRowInk_1.optionRowWeight)(isSingleSelected), transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), ...(0, optionRowInk_1.optionRowCursorSx)(rowBackgrounds), onClick: () => handleOptionClick(option), onKeyDown: (e) => {
                         if (e.key === "Enter" || e.key === " ") {
                             e.preventDefault();
                             handleOptionClick(option);

package/dist/Components/Table/Table.js CHANGED Viewed

@@ -49,11 +49,12 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
     name: "",
     page: "",
     orgId: "",
-}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe = false, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
+}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "studio", stripe = false, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
     var _a, _b, _c, _d, _e;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const prefersReducedMotion = (0, motion_2.usePrefersReducedMotion)();
     const clearFiltersTone = (0, react_1.useMemo)(() => (0, filledSurface_1.resolveFilledSurface)(theme.colors.semantic.error, theme.colors), [theme.colors]);
+    const clearBadge = (0, react_1.useMemo)(() => (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors), [theme.colors]);
     const variantTokens = (0, react_1.useMemo)(() => variants_1.TABLE_VARIANTS[variant](theme.colors, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main)), [variant, theme.colors]);
     const [columnsSearch, setColumnsSearch] = (0, react_1.useState)({});
     const detailIdPrefix = (0, react_1.useId)();
@@ -397,7 +398,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, free
                                                                     ? isFilterModalOpen
                                                                     : !!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 0, bg: "transparent", border: "none", borderRadius: "md", cursor: "pointer", onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
                                                                     color: theme.colors.accentText,
-                                                                }, sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500] }) }), sidebarActiveCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": "Clear filters", position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], color: (0, filledSurface_1.labelOnFill)(theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), border: "none", borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
+                                                                }, sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500] }) }), sidebarActiveCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": "Clear filters", position: "absolute", top: "-6px", right: "-10px", bg: clearBadge.fill, color: clearBadge.color, border: "none", borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
                                                                     var _a;
                                                                     e.stopPropagation();
                                                                     if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {

package/dist/Components/Table/TableProps.d.ts CHANGED Viewed

@@ -26,7 +26,7 @@ export type TableProps = {
     onAddItem?: (groupValue: string | number) => void;
     /** Seeds the initial row height only — Table Settings > Density (or saved preferences.density) takes over after the first change. */
     density?: TableDensity;
-    /** Visual preset. Defaults to `classic` — the table exactly as it shipped. */
+    /** Visual preset. Defaults to `studio`; pass `"classic"` for the banded header and per-column rules. */
     variant?: TableVariant;
     /** Content shown under a row when expanded; return null for rows with no detail and they get no chevron. Memoize it: an inline function re-renders every row. */
     renderRowDetail?: (row: DataObject) => ReactNode | null;

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

@@ -424,7 +424,15 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
         });
     }, [data]);
     if (isLoading && data.length === 0) {
-        return ((0, jsx_runtime_1.jsx)(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.boxborder[200], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4, rowHeight: rowHeight }));
+        const dataColumns = columns.filter((o) => !o.isHidden).length;
+        const cells = [
+            ...(isContent ? ["blank"] : []),
+            ...(isCheckbox ? ["checkbox"] : []),
+            ...(rowDetail ? ["blank"] : []),
+            ...Array.from({ length: dataColumns || TableLoading_1.LOADING_PLACEHOLDER_COLUMNS }, () => "bar"),
+            ...(isLink ? ["blank"] : []),
+        ];
+        return ((0, jsx_runtime_1.jsx)(TableLoading_1.TableBodyLoading, { noOfColumns: cells.length, cells: cells, borderColor: variant.row.ruleColor, rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4, rowHeight: rowHeight }));
     }
     if (!isLoading && data.length === 0) {
         return ((0, jsx_runtime_1.jsx)(react_1.Tr, { backgroundColor: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: totalVisibleColumns, p: 0, border: "none", children: (0, jsx_runtime_1.jsx)(TableEmpty, { emptyState: emptyState }) }) }));

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

@@ -13,16 +13,19 @@ const TableFilters_1 = __importDefault(require("../filters/TableFilters"));
 const columnLabel_1 = require("../columnLabel");
 const lucide_react_1 = require("lucide-react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+const Skeletons_1 = __importDefault(require("../../Skeletons/Skeletons"));
 const TableVariantContext_1 = require("../variants/TableVariantContext");
 const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
 const motion_2 = require("../../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
 const rowDetail_1 = require("./rowDetail");
+const TableLoading_1 = require("./TableLoading");
 const LABEL_JUSTIFY = { start: "space-between", center: "center", end: "flex-start" };
 const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, hasDetail = false, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
     const [openFilterId, setOpenFilterId] = (0, react_2.useState)(null);
     const variant = (0, TableVariantContext_1.useTableVariant)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && (0, jsx_runtime_1.jsx)(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && ((0, jsx_runtime_1.jsx)(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), hasDetail && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailHeaderCell, { left: isCheckbox ? slotWidth : 0, bg: variant.header.bg, ruleColor: variant.header.ruleColor, noBorders: noBorders })), columns.map((header, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && (0, jsx_runtime_1.jsx)(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && ((0, jsx_runtime_1.jsx)(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), hasDetail && ((0, jsx_runtime_1.jsx)(rowDetail_1.RowDetailHeaderCell, { left: isCheckbox ? slotWidth : 0, bg: variant.header.bg, ruleColor: variant.header.ruleColor, noBorders: noBorders })), isLoading && !columns.some((header) => !(header === null || header === void 0 ? void 0 : header.isHidden)) && ((0, jsx_runtime_1.jsx)(LoadingHeaderCells, { noBorders: noBorders })), columns.map((header, index) => {
                 if (header === null || header === void 0 ? void 0 : header.isHidden)
                     return null;
                 return ((0, jsx_runtime_1.jsx)(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, detailWidth: hasDetail ? rowDetail_1.DETAIL_SLOT_PX : 0, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, (0, columnLabel_1.columnLabelText)(header)));
@@ -32,8 +35,12 @@ exports.default = (0, react_2.memo)(TableHeader);
 const SelectAllCell = (0, react_2.memo)(({ slotRef, freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const variant = (0, TableVariantContext_1.useTableVariant)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Th, { ref: slotRef, scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: theme.colors.accentText })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { ref: slotRef, scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "sm", color: theme.colors.accentText })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isDisabled: isLoading, isIndeterminate: checked === "indeterminate" })) }) }));
 });
+const LoadingHeaderCells = ({ noBorders }) => {
+    const variant = (0, TableVariantContext_1.useTableVariant)();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: TableLoading_1.LOADING_PLACEHOLDER_COLUMNS }, (_, i) => ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", "aria-hidden": "true", px: 3, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: i % 2 ? "50%" : "70%", borderRadius: "full" }) }, i))) }));
+};
 const ContentSpacerCell = (0, react_2.memo)(({ noBorders }) => {
     const variant = (0, TableVariantContext_1.useTableVariant)();
     return ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));

package/dist/Components/Table/components/TableLoading.d.ts CHANGED Viewed

@@ -1,7 +1,10 @@
 declare const TableLoading: () => import("react/jsx-runtime").JSX.Element;
 export default TableLoading;
-export declare const TableBodyLoading: ({ noOfColumns, borderColor, rowsCount, rowHeight, }: {
+export declare const LOADING_PLACEHOLDER_COLUMNS = 4;
+export type LoadingCell = "bar" | "checkbox" | "blank";
+export declare const TableBodyLoading: ({ noOfColumns, cells, borderColor, rowsCount, rowHeight, }: {
     noOfColumns: number;
+    cells?: LoadingCell[];
     borderColor: string;
     rowsCount?: number;
     rowHeight?: number;

package/dist/Components/Table/components/TableLoading.js CHANGED Viewed

@@ -1,15 +1,22 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableBodyLoading = void 0;
+exports.TableBodyLoading = exports.LOADING_PLACEHOLDER_COLUMNS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const Skeletons_1 = __importDefault(require("../../Skeletons/Skeletons"));
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const CHECKBOX_PLACEHOLDER_STYLE = { display: "inline-block", verticalAlign: "middle" };
 const TableLoading = () => {
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { overflowX: "auto", p: 4, children: (0, jsx_runtime_1.jsxs)(react_1.Table, { variant: "simple", width: "full", children: [(0, jsx_runtime_1.jsx)(react_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_1.Tr, { children: [(0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.Tbody, { children: Array.from({ length: 5 }).map((_, rowIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Tr, { children: [(0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) })] }, rowIndex))) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { overflowX: "auto", p: 4, children: (0, jsx_runtime_1.jsxs)(react_1.Table, { variant: "simple", width: "full", children: [(0, jsx_runtime_1.jsx)(react_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_1.Tr, { children: [(0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "20px" }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.Tbody, { children: Array.from({ length: 5 }).map((_, rowIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Tr, { children: [(0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) })] }, rowIndex))) })] }) }));
 };
 exports.default = TableLoading;
-const TableBodyLoading = ({ noOfColumns, borderColor, rowsCount = 4, rowHeight = 45, }) => {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowsCount }).map((_, index) => {
-            return ((0, jsx_runtime_1.jsx)(react_1.Tr, { children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: noOfColumns, textAlign: "center", border: `1px solid ${borderColor}`, px: 2, pt: 2, pb: 0, height: `${rowHeight}px`, boxSizing: "border-box", children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "15px", variant: "shine" }) }) }, index));
-        }) }));
+exports.LOADING_PLACEHOLDER_COLUMNS = 4;
+const BAR_WIDTHS = ["72%", "58%", "84%", "46%", "66%", "78%"];
+const TableBodyLoading = ({ noOfColumns, cells, borderColor, rowsCount = 4, rowHeight = 45, }) => {
+    const layout = cells !== null && cells !== void 0 ? cells : Array.from({ length: noOfColumns }, () => "bar");
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowsCount }).map((_, row) => ((0, jsx_runtime_1.jsx)(react_1.Tr, { "aria-hidden": "true", children: layout.map((kind, col) => ((0, jsx_runtime_1.jsxs)(react_1.Td, { px: kind === "checkbox" ? 0 : 3, py: 0, height: `${rowHeight}px`, boxSizing: "border-box", border: "none", borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${borderColor}`, textAlign: kind === "checkbox" ? "center" : undefined, children: [kind === "checkbox" && ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "1rem", borderRadius: "sm", style: CHECKBOX_PLACEHOLDER_STYLE })), kind === "bar" && ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: BAR_WIDTHS[(row * 3 + col) % BAR_WIDTHS.length], borderRadius: "full" }))] }, col))) }, row))) }));
 };
 exports.TableBodyLoading = TableBodyLoading;

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

@@ -60,18 +60,9 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
                                     }, 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
-                                                ? isActive
-                                                    ? rowBackgrounds.selectedActive
-                                                    : rowBackgrounds.selected
-                                                : isActive
-                                                    ? rowBackgrounds.active
-                                                    : theme.colors.transparent;
                                             return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, ref: (el) => {
                                                     optionRefs.current[i] = el;
-                                                }, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", display: "flex", alignItems: "center", gap: spec.gap, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, selected), fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(selected), _hover: {
-                                                    bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
-                                                }, bg: rowBg, onClick: () => {
+                                                }, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", display: "flex", alignItems: "center", gap: spec.gap, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, selected), fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(selected), bg: "transparent", ...(0, optionRowInk_1.optionRowCursorSx)(rowBackgrounds), onClick: () => {
                                                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
                                                     setIsOpen(false);
                                                     setQuery("");

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

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