pixelize-design-library 2.4.2-beta.44 → 2.4.2-beta.46

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

@@ -40,18 +40,26 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const table_1 = require("../../../Utils/table");
+const Select_1 = __importDefault(require("../../Select/Select"));
+const useTable_1 = require("../hooks/useTable");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const lucide_react_1 = require("lucide-react");
 const Pagination = react_1.default.memo(({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }) => {
-    const computedOptions = (0, react_1.useMemo)(() => paginationSelectOptions && paginationSelectOptions.length
-        ? paginationSelectOptions
-        : (0, table_1.pageSizeCalculation)(dataLength), [paginationSelectOptions, dataLength]);
+    const computedOptions = (0, react_1.useMemo)(() => {
+        if (paginationSelectOptions && paginationSelectOptions.length) {
+            return paginationSelectOptions;
+        }
+        const sizes = new Set((0, table_1.pageSizeCalculation)(dataLength));
+        sizes.add(useTable_1.DEFAULT_PAGE_SIZE);
+        sizes.add(rowsPerPage);
+        return [...sizes].sort((a, b) => a - b);
+    }, [paginationSelectOptions, dataLength, rowsPerPage]);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // const isLeftDisabled = currentPage === 0;
     // const isRightDisabled = currentPage >= pages - 1;
     const isLeftDisabled = dataLength === 0 || currentPage === 0;
     const isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && ((0, jsx_runtime_1.jsxs)(react_2.Select, { "aria-label": "Rows per page", onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "lg", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? (0, jsx_runtime_1.jsx)("option", { value: 0 }) : null, computedOptions.map((size, index) => ((0, jsx_runtime_1.jsx)("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "First", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsLeft, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Previous", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}) }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Next", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Last", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsRight, {}) }) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && ((0, jsx_runtime_1.jsx)(Select_1.default, { native: false, isSearchable: false, "aria-label": "Rows per page", onChange: (option) => option && handlePageSizeChange(Number(option.id)), value: rowsPerPage, size: "xs", width: "4.5rem", isDisabled: dataLength === 0, options: computedOptions.map((size) => ({ id: size, label: String(size) })) })), dataLength > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "First", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsLeft, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Previous", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}) }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Next", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Last", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsRight, {}) }) })] }))] }));
 });
 exports.default = Pagination;

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

@@ -1,8 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectOperationControls = SelectOperationControls;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const Select_1 = __importDefault(require("../../Select/Select"));
+const OPERATOR_OPTIONS = [
+    { id: "is", label: "is" },
+    { id: "is not", label: "is not" },
+];
 function SelectOperationControls({ operator, onOperatorChange, size = "xs", ml = "1.25rem", mt = 2, }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: (0, jsx_runtime_1.jsxs)(react_1.Select, { size: size, value: operator, onChange: (e) => onOperatorChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "90px", children: [(0, jsx_runtime_1.jsx)("option", { value: "is", children: "is" }), (0, jsx_runtime_1.jsx)("option", { value: "is not", children: "is not" })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: (0, jsx_runtime_1.jsx)(Select_1.default, { native: false, isSearchable: false, "aria-label": "Operator", size: size, width: "90px", options: OPERATOR_OPTIONS, value: operator, onChange: (option) => option && onOperatorChange(String(option.id)) }) }));
 }

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

@@ -1,9 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.requiresValue = exports.TEXT_OPERATORS = void 0;
 exports.TextOperationControls = TextOperationControls;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
+const Select_1 = __importDefault(require("../../Select/Select"));
+const TextInput_1 = __importDefault(require("../../Input/TextInput"));
 exports.TEXT_OPERATORS = [
     "is",
     "is not",
@@ -17,5 +23,6 @@ exports.TEXT_OPERATORS = [
 const requiresValue = (op) => !(op === "is empty" || op === "is not empty");
 exports.requiresValue = requiresValue;
 function TextOperationControls({ operator, value, onOperatorChange, onValueChange, size = "xs", ml = "1.25rem", mt = 2, }) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: [(0, jsx_runtime_1.jsx)(react_1.Select, { size: size, value: operator, onChange: (e) => onOperatorChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "110px", children: exports.TEXT_OPERATORS.map((op) => ((0, jsx_runtime_1.jsx)("option", { value: op, children: op }, op))) }), (0, exports.requiresValue)(operator) && ((0, jsx_runtime_1.jsx)(react_1.Input, { size: size, placeholder: "Type here", value: value, onChange: (e) => onValueChange(e.target.value), sx: { fontSize: "0.75rem", height: "24px" }, width: "100%" }))] }));
+    const options = (0, react_2.useMemo)(() => exports.TEXT_OPERATORS.map((op) => ({ id: op, label: op })), []);
+    return ((0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 2, align: "stretch", mt: mt, ml: ml, children: [(0, jsx_runtime_1.jsx)(Select_1.default, { native: false, isSearchable: false, "aria-label": "Operator", size: size, width: "110px", options: options, value: operator, onChange: (option) => option && onOperatorChange(String(option.id)) }), (0, exports.requiresValue)(operator) && ((0, jsx_runtime_1.jsx)(TextInput_1.default, { size: size, placeholder: "Type here", value: value, onChange: (e) => onValueChange(e.target.value), width: "100%" }))] }));
 }

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

@@ -13,6 +13,7 @@ type UseTableProps = {
     onNoOfRowsPerPageChange?: (noOfRows: number) => void;
     defaultVisibleColumns?: number;
 };
+export declare const DEFAULT_PAGE_SIZE = 20;
 declare const useTable: ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, }: UseTableProps) => {
     tableData: DataObject[];
     isContent: boolean;
@@ -26,7 +27,7 @@ declare const useTable: ({ data, isPagination, selections, onSelection, tablePre
     endRow: number;
     selection: (string | number)[];
     columnsSort: ColumnSortingProps[];
-    handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    handlePageSizeChange: (size: number) => void;
     pages: number;
     currentPage: number;
     rowsPerPage: number;

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

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PAGE_SIZE = void 0;
 const react_1 = require("react");
 const table_1 = require("../../../Utils/table");
-const defaultPageSize = 20;
+exports.DEFAULT_PAGE_SIZE = 20;
+const defaultPageSize = exports.DEFAULT_PAGE_SIZE;
 const mergeColumnWithPreference = (pref, originalCol) => {
     var _a;
     if (!pref || typeof pref !== "object") {
@@ -102,8 +104,8 @@ const useTable = ({ data, isPagination, selections, onSelection, tablePreference
         const sortedData = (0, table_1.SortMultiColumnData)(tableData, columnsSort);
         return sortedData.slice(startRow, endRow);
     }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
-    const handlePageSizeChange = (event) => {
-        const value = Number(event.target.value);
+    const handlePageSizeChange = (size) => {
+        const value = Number(size);
         setRowsPerPage(value !== 0 ? value : defaultPageSize);
         if (onNoOfRowsPerPageChange) {
             onNoOfRowsPerPageChange(value !== 0 ? value : defaultPageSize);

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

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

package/dist/Theme/chakra/focusRing.styles.d.ts

@@ -1,4 +1,4 @@
-import type { FocusRingTokens } from "../tokens/types";
+import type { BrandScale, FocusRingTokens } from "../tokens/types";
 /** Inner band, in the surface tone: separates the ring from the control's own fill. */
 export declare const FOCUS_HALO_WIDTH = 2;
 /** Outer edge of the brand band. The band itself is the 2px between halo and ring. */
@@ -6,6 +6,9 @@ export declare const FOCUS_RING_WIDTH = 4;
 type WithFocusRing = {
     focusRing: FocusRingTokens;
 };
+type WithBrandGlow = {
+    primary: BrandScale;
+};
 export declare const focusRingShadow: (colors: WithFocusRing) => string;
 export declare const FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
 export declare const focusVisibleRing: (colors: WithFocusRing) => {
@@ -13,6 +16,19 @@ export declare const focusVisibleRing: (colors: WithFocusRing) => {
     outlineOffset: string;
     boxShadow: string;
 };
+/** Blurred, never a flat band: a band has a hard outer edge at every opacity and reads as a second border. */
+export declare const FOCUS_GLOW_BLUR = 6;
+/** Negative spread keeps the bloom tight to the border instead of haloing the whole control. */
+export declare const FOCUS_GLOW_SPREAD = -1;
+/** Step on `primary.opacity`. Safe to raise because a blur has no edge to sharpen. */
+export declare const FOCUS_GLOW_ALPHA = 32;
+export declare const focusGlowShadow: (colors: WithBrandGlow) => string;
+/** Field focus: the brand border is the indicator, this only makes it findable. */
+export declare const fieldFocusVisible: (colors: WithBrandGlow) => {
+    outline: string;
+    outlineOffset: string;
+    boxShadow: string;
+};
 /** Both selectors a control needs to keep the ring on top of its own hover/active styling. */
 export declare const focusVisibleStyles: (colors: WithFocusRing) => {
     _focusVisible: {

package/dist/Theme/chakra/focusRing.styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.focusVisibleStyles = exports.focusVisibleRing = exports.FOCUS_VISIBLE_OVER_STATE = exports.focusRingShadow = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = void 0;
+exports.focusVisibleStyles = exports.fieldFocusVisible = exports.focusGlowShadow = exports.FOCUS_GLOW_ALPHA = exports.FOCUS_GLOW_SPREAD = exports.FOCUS_GLOW_BLUR = exports.focusVisibleRing = exports.FOCUS_VISIBLE_OVER_STATE = exports.focusRingShadow = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = void 0;
 // Web binding for the focusRing token pair — colors come from tokens/builders/focusRing.ts; CSS shape is web-only.
 /** Inner band, in the surface tone: separates the ring from the control's own fill. */
 exports.FOCUS_HALO_WIDTH = 2;
@@ -19,6 +19,21 @@ const focusVisibleRing = (colors) => ({
     boxShadow: (0, exports.focusRingShadow)(colors),
 });
 exports.focusVisibleRing = focusVisibleRing;
+/** Blurred, never a flat band: a band has a hard outer edge at every opacity and reads as a second border. */
+exports.FOCUS_GLOW_BLUR = 6;
+/** Negative spread keeps the bloom tight to the border instead of haloing the whole control. */
+exports.FOCUS_GLOW_SPREAD = -1;
+/** Step on `primary.opacity`. Safe to raise because a blur has no edge to sharpen. */
+exports.FOCUS_GLOW_ALPHA = 32;
+const focusGlowShadow = (colors) => `0 0 ${exports.FOCUS_GLOW_BLUR}px ${exports.FOCUS_GLOW_SPREAD}px ${colors.primary.opacity[exports.FOCUS_GLOW_ALPHA]}`;
+exports.focusGlowShadow = focusGlowShadow;
+/** Field focus: the brand border is the indicator, this only makes it findable. */
+const fieldFocusVisible = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: (0, exports.focusGlowShadow)(colors),
+});
+exports.fieldFocusVisible = fieldFocusVisible;
 /** Both selectors a control needs to keep the ring on top of its own hover/active styling. */
 const focusVisibleStyles = (colors) => {
     const ring = (0, exports.focusVisibleRing)(colors);

package/dist/Theme/provider/ThemeSwitcher.js

@@ -8,6 +8,8 @@ const lucide_react_1 = require("lucide-react");
 const index_1 = require("../index");
 const useCustomTheme_1 = require("../useCustomTheme");
 const useThemeMode_1 = require("./useThemeMode");
+const focusRing_styles_1 = require("../chakra/focusRing.styles");
+const outlineRung_1 = require("../tokens/builders/outlineRung");
 const MODE_OPTIONS = [
     { value: "light", label: "Light", Icon: lucide_react_1.Sun },
     { value: "system", label: "System", Icon: lucide_react_1.Monitor },
@@ -37,25 +39,30 @@ const useSwitcherColors = () => {
         borderColor: colors.boxborder[200],
         // NOTE: menuBg lives in Menu.styles.ts — re-pushing it via `sx` flickers on every render.
         menuColor: colors.text[900],
+        focusRing: (0, focusRing_styles_1.focusVisibleRing)(colors),
     };
 };
 const BrandMenu = ({ size }) => {
     const { brand, setBrand } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, menuColor } = useSwitcherColors();
+    const { mutedColor, menuColor, focusRing } = useSwitcherColors();
     const brands = Object.keys(index_1.brandThemes);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: { boxShadow: "outline" }, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: brand }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(brand) })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "9rem", color: menuColor, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: focusRing, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: brand }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(brand) })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "9rem", color: menuColor, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) }) })] }));
 };
 const IconVariant = ({ size, label, }) => {
     const { resolvedMode, toggle } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, hoverBg } = useSwitcherColors();
+    const { mutedColor, hoverBg, focusRing } = useSwitcherColors();
     const isDark = resolvedMode === "dark";
     const Icon = isDark ? lucide_react_1.Moon : lucide_react_1.Sun;
     const accessibleLabel = label !== null && label !== void 0 ? label : `Switch to ${isDark ? "light" : "dark"} mode`;
-    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: accessibleLabel, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": accessibleLabel, "aria-pressed": isDark, icon: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), onClick: toggle, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: accessibleLabel, openDelay: 400, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": accessibleLabel, "aria-pressed": isDark, icon: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), onClick: toggle, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: focusRing }) }));
 };
 const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
     const { mode, setMode } = (0, useThemeMode_1.useThemeMode)();
     const { trackBg, activeBg, activeColor, mutedColor, borderColor } = useSwitcherColors();
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    // One tab stop, so the group wears the indicator: brand border plus the field bloom.
+    const focusBorder = (0, outlineRung_1.liftToContrast)(colors.primary[500], trackBg, outlineRung_1.AA_NON_TEXT);
+    const [showFocus, setShowFocus] = (0, react_1.useState)(false);
     const optionRefs = (0, react_1.useRef)([]);
     // APG radiogroup behavior: arrows move focus and selection together.
     const handleKeyDown = (event, index) => {
@@ -69,20 +76,20 @@ const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
         setMode(MODE_OPTIONS[next].value);
         (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { role: "radiogroup", "aria-label": label !== null && label !== void 0 ? label : "Color mode", display: "inline-flex", spacing: 1, p: "0.25rem", bg: trackBg, border: "0.063rem solid", borderColor: borderColor, borderRadius: "full", children: [MODE_OPTIONS.map(({ value, label: optionLabel, Icon }, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { role: "radiogroup", "aria-label": label !== null && label !== void 0 ? label : "Color mode", display: "inline-flex", spacing: 1, p: "0.25rem", bg: trackBg, border: "0.063rem solid", borderColor: showFocus ? focusBorder : borderColor, boxShadow: showFocus ? (0, focusRing_styles_1.focusGlowShadow)(colors) : undefined, borderRadius: "full", onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), children: [MODE_OPTIONS.map(({ value, label: optionLabel, Icon }, index) => {
                 const isSelected = mode === value;
                 return ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: (node) => {
                         optionRefs.current[index] = node;
-                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { boxShadow: "outline" }, children: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { outline: "2px solid transparent", outlineOffset: "2px" }, children: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
             }), showBrandPicker && (0, jsx_runtime_1.jsx)(BrandMenu, { size: size })] }));
 };
 const MenuVariant = ({ size, label, showBrandPicker, }) => {
     var _a;
     const { mode, brand, setMode, setBrand } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, hoverBg, menuColor } = useSwitcherColors();
+    const { mutedColor, hoverBg, menuColor, focusRing } = useSwitcherColors();
     const active = (_a = MODE_OPTIONS.find((option) => option.value === mode)) !== null && _a !== void 0 ? _a : MODE_OPTIONS[0];
     const brands = Object.keys(index_1.brandThemes);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: (0, jsx_runtime_1.jsx)(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { minW: "10rem", color: menuColor, children: [(0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: value, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: (0, jsx_runtime_1.jsx)(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: focusRing }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { minW: "10rem", color: menuColor, children: [(0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: value, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) })] }))] })] }));
 };
 const ThemeSwitcher = ({ variant = "icon", showBrandPicker = false, size = "md", "aria-label": ariaLabel, }) => {
     if (variant === "segmented") {

package/dist/esm/Components/Common/fieldStyles.js

@@ -2,7 +2,7 @@ import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
 import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
-import { focusRingShadow, focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { fieldFocusVisible, focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
 export const FIELD_RADIUS = "lg";
 export const FIELD_BORDER_WIDTH = "1px";
 export const FIELD_TRANSITION = transitionFor(["border-color", "box-shadow", "background-color"]);
@@ -43,7 +43,7 @@ export const fieldControlStyles = (colors) => {
         ...fieldTextStyles(colors),
         _placeholder: { color: placeholderInk(colors), opacity: 1 },
         _hover: { borderColor: fieldHoverBorder(colors) },
-        _focusVisible: { borderColor: colors.primary[500], ...focusVisibleRing(colors) },
+        _focusVisible: { borderColor: colors.primary[500], ...fieldFocusVisible(colors) },
         _invalid: {
             borderColor: colors.semanticText.error,
             _hover: { borderColor: colors.semanticText.error },
@@ -60,11 +60,11 @@ export const getFieldStateStyles = (theme, { error = false, focused = false, dis
         : focused
             ? colors.primary[500]
             : colors.boxborder[500];
-    const box = { ...fieldBoxStyles(colors), borderColor, boxShadow: focused ? focusRingShadow(colors) : "none" };
+    const box = { ...fieldBoxStyles(colors), borderColor, boxShadow: focused ? focusGlowShadow(colors) : "none" };
     if (!disabled)
         return box;
     const { bg, borderColor: disabledBorder, cursor } = disabledStyles(colors);
     return { ...box, bg, borderColor: disabledBorder, cursor };
 };
-/** Focus ring for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */
-export const fieldFocusRing = (theme) => focusRingShadow(theme.colors);
+/** Glow for `_focusWithin` on composite fields. `error` is accepted but ignored: invalid is the border's job. */
+export const fieldFocusRing = (theme) => focusGlowShadow(theme.colors);

package/dist/esm/Components/DatePicker/CalendarPanel.js

@@ -5,6 +5,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import Button from "../Button/Button.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
 import { DAY_CLASS, dayAccessibleName, dayStateClassName, resolveDayStateVisual, } from "./dayStates.js";
 /** Internal month grid shared by Single/RangeDatePicker; not published from index.ts, so only reachable via a deep import. */
 export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate, tempRangeStart, tempRangeEnd, isSameDay, isBefore, isAfter, minDate, maxDate, disablePastDates, disableFutureDates, disableToday, onDaySelect, hoveredDate, onDayHover, renderWeekdays, dayStates, renderDayContent, }) => {
@@ -35,11 +36,7 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
         bg: theme.colors.background[50],
         outline: "none",
         _hover: { borderColor: theme.colors.primary[300] },
-        _focus: {
-            outline: "none",
-            borderColor: theme.colors.primary[500],
-            boxShadow: `0 0 0 1px ${theme.colors.primary[500]}`,
-        },
+        _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) },
         style: {
             WebkitAppearance: "menulist",
             MozAppearance: "menulist",

package/dist/esm/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -1,12 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HStack, PinInput, PinInputField, Box, Text, Button, Flex, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { fieldFocusVisible } from "../../../Theme/chakra/focusRing.styles.js";
 import { MailCheck } from "lucide-react";
 /** Full verification card (icon, title, description, resend link, digits-only PinInput) — for a bare OTP field in your own layout, use PinInput instead. */
 export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pins = 5, description, title, isDisabled = false, isInvalid = false, styles, }) {
     const theme = useCustomTheme();
-    return (_jsxs(Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", bg: theme.colors.background[50], border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", children: [_jsx(Box, { mb: 4, children: _jsx(MailCheck, { size: 80, color: theme.colors.accentText }) }), _jsx(Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), _jsxs(Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, _jsx("br", {}), "your new Pixel Account"] }), _jsx(HStack, { spacing: 3, mb: 6, role: "group", "aria-label": title || "Verification code", children: _jsx(PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { "aria-label": `${title || "Verification code"}, digit ${index + 1} of ${pins}`, borderRadius: "lg", border: "0.063rem solid", borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: {
-                            borderColor: theme.colors.primary[500],
-                            boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
-                        } }, index))) }) }), _jsx(Flex, { justify: "center", children: _jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, children: ["Didn\u2019t receive the code?", " ", _jsx(Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
+    return (_jsxs(Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "25rem", mx: "auto", bg: theme.colors.background[50], border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", children: [_jsx(Box, { mb: 4, children: _jsx(MailCheck, { size: 80, color: theme.colors.accentText }) }), _jsx(Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center", children: title }), _jsxs(Text, { fontSize: "md", textAlign: "center", color: theme.colors.textMuted, mb: 6, children: [description, _jsx("br", {}), "your new Pixel Account"] }), _jsx(HStack, { spacing: 3, mb: 6, role: "group", "aria-label": title || "Verification code", children: _jsx(PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500], children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { "aria-label": `${title || "Verification code"}, digit ${index + 1} of ${pins}`, borderRadius: "lg", border: "0.063rem solid", borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) } }, index))) }) }), _jsx(Flex, { justify: "center", children: _jsxs(Text, { fontSize: "sm", color: theme.colors.textMuted, children: ["Didn\u2019t receive the code?", " ", _jsx(Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));
 }

package/dist/esm/Components/FilterSidebar/FilterSidebar.js

@@ -8,6 +8,7 @@ import ToolTip from "../ToolTip/ToolTip.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
 import { getFilterHoverBg } from "./filterHoverStyle.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
 const FilterSidebar = ({ sidebarOptions, selected, onChange, maxVisible = 10, width = 280, variant = "minimal", containerPadding, containerHeight, 
 // headerPadding = 2,
 panelPadding = 3, clearAllButton = true, onClearAllHandler,
@@ -168,7 +169,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                             return Array.from({ length: 5 }, (_, i) => (_jsx(Box, { children: _jsx(Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
                                         })() }), _jsx(Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && (_jsx(Input, { size: "xs", h: "26px", fontSize: "xs", "aria-label": `Search ${section.label}`, placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.background[50], border: "1px solid", 
                         // NOTE: boxborder[500] not gray[200] — WCAG 1.4.11 needs >=3:1 for a control boundary; gray[200] fails in dark.
-                        borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: (e) => {
+                        borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) }, value: searchTerms[section.id] || "", onChange: (e) => {
                             const v = e.target.value;
                             setSearchTerms((prev) => ({ ...prev, [section.id]: v }));
                             if (v)

package/dist/esm/Components/Header/HeaderActions.js

@@ -8,14 +8,14 @@ import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outline
 import Select from "../Select/Select.js";
 import VeritcalDivider from "../Divider/Divider.js";
 const HeaderActions = ({ select, edit, create, surface, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const { colors } = useCustomTheme();
     const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
     const ink = liftToContrast(colors.secondary[500], canvas, AA_NORMAL_TEXT);
     const iconInk = liftToContrast(colors.secondary[500], canvas, AA_NON_TEXT);
     const elements = [];
     if (select === null || select === void 0 ? void 0 : select.isSelect) {
-        elements.push(_jsx(Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: _jsx(Select, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, "aria-label": (_d = (_c = select.ariaLabel) !== null && _c !== void 0 ? _c : select.selectPlaceholderText) !== null && _d !== void 0 ? _d : "Select", onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
+        elements.push(_jsx(Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: _jsx(Select, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, "aria-label": select.ariaLabel || select.selectPlaceholderText || "Select", native: (_c = select.native) !== null && _c !== void 0 ? _c : false, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
     }
     if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
         elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [_jsx(SquarePen, { size: 16, color: iconInk }), _jsx(Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));

package/dist/esm/Components/Input/TextInput.styles.js

@@ -1,6 +1,6 @@
 import { controlSizeStyles, fieldControlStyles, FIELD_BORDER_WIDTH } from "../Common/fieldStyles.js";
 import { CONTROL_SIZE_NAMES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
-import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
 /** Field look shared by Input, Textarea and NumberInput; `_invalid` also clears Chakra's stock invalid shadow. */
 export const fieldPartStyles = (colors) => {
     const error = colors.semanticText.error;
@@ -10,7 +10,7 @@ export const fieldPartStyles = (colors) => {
             borderColor: error,
             boxShadow: "none",
             _hover: { borderColor: error },
-            _focusVisible: { borderColor: error, ...focusVisibleRing(colors) },
+            _focusVisible: { borderColor: error, ...fieldFocusVisible(colors) },
         },
     };
 };

package/dist/esm/Components/KanbanBoard/KanbanActions/KanbanActions.js

@@ -8,6 +8,6 @@ import Button from "../../Button/Button.js";
 /** Standalone filter+Edit+Create action bar; NOT rendered by KanbanBoard (which uses HeaderActions instead) and not exported from the package. */
 const KanbanActions = ({ options, onSelectChange, onEdit, onCreate, }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [_jsx(Select, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [_jsx(Button, { size: "sm", variant: "ghost", leftIcon: _jsx(SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), _jsx(VeritcalDivider, {}), _jsx(Button, { size: "sm", variant: "solid", leftIcon: _jsx(CirclePlus, { size: 20 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [_jsx(Select, { native: false, options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [_jsx(Button, { size: "sm", variant: "ghost", leftIcon: _jsx(SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), _jsx(VeritcalDivider, {}), _jsx(Button, { size: "sm", variant: "solid", leftIcon: _jsx(CirclePlus, { size: 20 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
 };
 export default KanbanActions;

package/dist/esm/Components/MultiSelect/MultiSelect.js

@@ -19,7 +19,7 @@ const generateUniqueId = (() => {
         return `${Date.now()}-${counter}`;
     };
 })();
-export default function MultiSelect({ value, onValueChange, width = "100%", label = "label", isRequired = true, isInformation = false, informationMessage = "", name, id, placeholderText = "Type valid email and press enter", isDisabled, isReadOnly, size = DEFAULT_CONTROL_SIZE, inputStyle, helperText, error, errorMessage, }) {
+export default function MultiSelect({ value, onValueChange, width = "100%", label = "label", isRequired = true, isInformation = false, informationMessage = "", name, id, placeholderText = "Type valid email and press enter", isDisabled, isReadOnly, addOnBlur = false, size = DEFAULT_CONTROL_SIZE, inputStyle, helperText, error, errorMessage, }) {
     const theme = useCustomTheme();
     const s = getSearchSelectSizeStyles((size || DEFAULT_CONTROL_SIZE));
     const options = value;
@@ -37,23 +37,34 @@ export default function MultiSelect({ value, onValueChange, width = "100%", labe
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         return emailRegex.test(email);
     };
+    const commitInput = useCallback(() => {
+        const entry = inputValue.trim();
+        if (entry === "")
+            return;
+        if (!validateEmail(entry)) {
+            setLocalError("Invalid email address");
+            return;
+        }
+        if (!options.some((option) => option.label === entry)) {
+            onValueChange([...options, { id: generateUniqueId(), label: entry }]);
+        }
+        setInputValue("");
+    }, [inputValue, options, onValueChange]);
     const handleKeyDown = (e) => {
-        if (e.key === "Enter" && inputValue.trim() !== "") {
-            if (!validateEmail(inputValue)) {
-                setLocalError("Invalid email address");
+        if (e.key === "Enter") {
+            if (inputValue.trim() === "")
                 return;
-            }
-            const existingOption = options.find((option) => option.label === inputValue);
-            if (!existingOption) {
-                const newOption = { id: generateUniqueId(), label: inputValue };
-                onValueChange([...options, newOption]);
-                setInputValue("");
-            }
+            e.preventDefault();
+            commitInput();
         }
         else if (e.key === "Backspace" && inputValue === "") {
             onValueChange(options.slice(0, -1));
         }
     };
+    const handleBlur = useCallback(() => {
+        if (addOnBlur && !isReadOnly && !isDisabled)
+            commitInput();
+    }, [addOnBlur, isReadOnly, isDisabled, commitInput]);
     const handleRemove = useCallback((optionToRemove) => {
         onValueChange(options.filter((option) => option.id !== optionToRemove.id));
     }, [options, onValueChange]);
@@ -66,5 +77,5 @@ export default function MultiSelect({ value, onValueChange, width = "100%", labe
                 }, children: [options.map((option) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: X }, option.id))), _jsx(Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: isInvalid, ...ids.controlProps, name: name, 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: placeholderInk(theme.colors), opacity: 1 }, style: {
                             backgroundColor: "transparent",
                             ...inputStyle,
-                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })] }), _jsx(FieldMessage, { error: isInvalid, errorMessage: shownErrorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: options.length === 0 ? placeholderText : "" })] }), _jsx(FieldMessage, { error: isInvalid, errorMessage: shownErrorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

package/dist/esm/Components/NotificationBell/notificationHelpers.js

@@ -13,10 +13,19 @@ const toDate = (value) => {
     return new Date(/^-?\d+$/.test(value) ? Number(value) : value);
 };
 const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
-/** Buckets rows into Today/Yesterday/Earlier, input order preserved within each bucket. */
-export function sectionizeByDay(rows, getTime, labels = DEFAULT_DAY_LABELS) {
-    const todayStart = startOfDay(new Date());
-    const yesterdayStart = todayStart - 24 * 60 * 60 * 1000;
+// NOTE: calendar arithmetic, not -24h — a DST shift makes the day shorter or longer.
+const startOfPrevDay = (dayStart) => {
+    const d = new Date(dayStart);
+    d.setDate(d.getDate() - 1);
+    return startOfDay(d);
+};
+/**
+ * Buckets rows into Today/Yesterday/Earlier, input order preserved within each bucket.
+ * `now` defaults to the wall clock; pass it to pin "today" in tests or a fixed-date view.
+ */
+export function sectionizeByDay(rows, getTime, labels = DEFAULT_DAY_LABELS, now = Date.now()) {
+    const todayStart = startOfDay(toDate(now));
+    const yesterdayStart = startOfPrevDay(todayStart);
     const today = [];
     const yesterday = [];
     const earlier = [];

package/dist/esm/Components/PinInput/PinInput.js

@@ -4,6 +4,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { TextLabel } from "../Common/FormLabel.js";
 import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { pinInputCellSize } from "./pinInputCellSize.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
 /** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. */
 export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, size = DEFAULT_CONTROL_SIZE, }) {
     var _a;
@@ -12,8 +13,5 @@ export default function PinInputs({ otp, mask, defaultValue, placeholder, manage
     // Square cells at the same heights every other field uses — Chakra's own PinInput size
     // scale doesn't line up with the library's, so cells are sized directly.
     const cell = pinInputCellSize(size);
-    return (_jsxs(_Fragment, { children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(HStack, { role: "group", "aria-label": fieldName, children: _jsx(PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { "aria-label": `${fieldName}, digit ${index + 1} of ${pins}`, boxSize: cell.boxSize, fontSize: cell.fontSize, borderRadius: "lg", backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[500], _focus: {
-                            borderColor: theme.colors.primary[500],
-                            boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
-                        } }, index))) }) })] }));
+    return (_jsxs(_Fragment, { children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(HStack, { role: "group", "aria-label": fieldName, children: _jsx(PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { "aria-label": `${fieldName}, digit ${index + 1} of ${pins}`, boxSize: cell.boxSize, fontSize: cell.fontSize, borderRadius: "lg", backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) } }, index))) }) })] }));
 }

package/dist/esm/Components/SearchSelect/SearchSelect.js

@@ -483,7 +483,7 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                             }, onBlur: () => {
                                 setFocused(false);
                                 setFocusedTrigger((prev) => (prev === "input" ? null : prev));
-                            }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })), _jsxs(Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && !isDisabled && (_jsx(ToolTip, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: _jsx(IconButton, { icon: _jsx(X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
+                            }, placeholder: selectedValues.length ? "" : placeholder })), _jsxs(Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && !isDisabled && (_jsx(ToolTip, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: _jsx(IconButton, { icon: _jsx(X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
                                             bg: "transparent",
                                             _hover: { bg: "transparent" },
                                             _active: { bg: "transparent" },