pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.9
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.
- package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js +1 -1
- package/dist/Components/Checkbox/Checkbox.styles.js +2 -0
- package/dist/Components/DatePicker/RangeDatePicker.js +1 -1
- package/dist/Components/DatePicker/SingleDatePicker.js +1 -1
- package/dist/Components/Form/FormWrapper.js +1 -1
- package/dist/Components/Input/TextInput.styles.js +6 -7
- package/dist/Components/InputTextArea/InputTextArea.style.js +5 -3
- package/dist/Components/NavigationBar/NavigationBar.js +3 -3
- package/dist/Components/NoteTextArea/NoteTextArea.js +6 -2
- package/dist/Components/NumberInput/NumberInput.styles.js +5 -3
- package/dist/Components/ProfileCard/ProfileCard.js +1 -1
- package/dist/Components/SearchSelect/SearchSelect.js +2 -1
- package/dist/Components/Select/Select.styles.js +2 -0
- package/dist/Components/SelectSearch/SelectSearch.js +1 -1
- package/dist/Components/SelectV2/SelectV2.js +3 -2
- package/dist/Components/SideBar/SecondaryBar.js +1 -1
- package/dist/Components/Table/Table.js +4 -2
- package/dist/Components/Table/components/TableActions.js +2 -2
- package/dist/Components/Table/components/TableBody.js +1 -1
- package/dist/Components/Table/components/TableGroupRow.js +1 -1
- package/dist/Components/Table/components/TableHeader.js +4 -4
- package/dist/Components/Table/components/TableSearch.js +1 -1
- package/dist/Components/Table/settings/ManageColumns.js +1 -1
- package/dist/Components/Table/settings/TableSettings.js +2 -2
- package/dist/Components/Trail/TrailWorks.js +1 -1
- package/dist/Theme/chakra/Menu.styles.d.ts +1 -1
- package/dist/Theme/chakra/Menu.styles.js +3 -3
- package/dist/Theme/chakra/Popover.styles.d.ts +1 -0
- package/dist/Theme/chakra/Popover.styles.js +3 -1
- package/dist/Theme/chakra/componentStyles.d.ts +4 -3
- package/dist/Theme/provider/ThemeSwitcher.js +5 -2
- package/dist/Theme/tokens/builders/chartColorsFromTheme.js +1 -1
- package/dist/Theme/tokens/builders/index.d.ts +1 -0
- package/dist/Theme/tokens/builders/index.js +1 -0
- package/dist/Theme/tokens/builders/placeholderInk.d.ts +19 -0
- package/dist/Theme/tokens/builders/placeholderInk.js +33 -0
- package/dist/Theme/tokens/builders/resolvedRungs.d.ts +5 -1
- package/dist/Theme/tokens/builders/resolvedRungs.js +7 -2
- package/dist/Theme/tokens/builders/surfaceRungs.d.ts +5 -2
- package/dist/Theme/tokens/builders/surfaceRungs.js +8 -9
- package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIcon.js +1 -1
- package/dist/esm/Components/Checkbox/Checkbox.styles.js +2 -0
- package/dist/esm/Components/DatePicker/RangeDatePicker.js +1 -1
- package/dist/esm/Components/DatePicker/SingleDatePicker.js +1 -1
- package/dist/esm/Components/Form/FormWrapper.js +1 -1
- package/dist/esm/Components/Input/TextInput.styles.js +6 -7
- package/dist/esm/Components/InputTextArea/InputTextArea.style.js +5 -3
- package/dist/esm/Components/NavigationBar/NavigationBar.js +3 -3
- package/dist/esm/Components/NoteTextArea/NoteTextArea.js +6 -2
- package/dist/esm/Components/NumberInput/NumberInput.styles.js +5 -3
- package/dist/esm/Components/ProfileCard/ProfileCard.js +1 -1
- package/dist/esm/Components/SearchSelect/SearchSelect.js +2 -1
- package/dist/esm/Components/Select/Select.styles.js +2 -0
- package/dist/esm/Components/SelectSearch/SelectSearch.js +1 -1
- package/dist/esm/Components/SelectV2/SelectV2.js +3 -2
- package/dist/esm/Components/SideBar/SecondaryBar.js +1 -1
- package/dist/esm/Components/Table/Table.js +4 -2
- package/dist/esm/Components/Table/components/TableActions.js +2 -2
- package/dist/esm/Components/Table/components/TableBody.js +1 -1
- package/dist/esm/Components/Table/components/TableGroupRow.js +1 -1
- package/dist/esm/Components/Table/components/TableHeader.js +4 -4
- package/dist/esm/Components/Table/components/TableSearch.js +1 -1
- package/dist/esm/Components/Table/settings/ManageColumns.js +1 -1
- package/dist/esm/Components/Table/settings/TableSettings.js +2 -2
- package/dist/esm/Components/Trail/TrailWorks.js +1 -1
- package/dist/esm/Theme/chakra/Menu.styles.js +3 -3
- package/dist/esm/Theme/chakra/Popover.styles.js +3 -1
- package/dist/esm/Theme/provider/ThemeSwitcher.js +5 -2
- package/dist/esm/Theme/tokens/builders/chartColorsFromTheme.js +1 -1
- package/dist/esm/Theme/tokens/builders/index.js +1 -0
- package/dist/esm/Theme/tokens/builders/placeholderInk.js +27 -0
- package/dist/esm/Theme/tokens/builders/resolvedRungs.js +7 -2
- package/dist/esm/Theme/tokens/builders/surfaceRungs.js +9 -10
- package/dist/esm/index.js +2 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +9 -1
- package/package.json +4 -2
|
@@ -31,7 +31,7 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
|
|
|
31
31
|
e.preventDefault();
|
|
32
32
|
if (!item.disabled)
|
|
33
33
|
onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
|
|
34
|
-
}, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color:
|
|
34
|
+
}, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: "0.75rem", children: _jsxs(Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
|
|
35
35
|
};
|
|
36
36
|
const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
|
|
37
37
|
var _a;
|
|
@@ -356,7 +356,9 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
|
|
|
356
356
|
from { transform: rotate(0deg); }
|
|
357
357
|
to { transform: rotate(360deg); }
|
|
358
358
|
}
|
|
359
|
-
` }), _jsxs(Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.
|
|
359
|
+
` }), _jsxs(Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "base",
|
|
360
|
+
// Square children poked past the rounded border, leaving a gap at each corner.
|
|
361
|
+
overflow: "hidden", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { theme: theme, sections: (_c = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _c !== void 0 ? _c : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_jsx(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: theme.colors.boxborder[200], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: _jsx(LeftFilterPane, { height: controlsHeight + tableMaxH, theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [filterSidebar && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(Icon, { as: Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
|
|
360
362
|
color: theme.colors.accentText,
|
|
361
363
|
} }), sidebarActiveCount > 0 && (_jsx(Box, { position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[500], color: theme.colors.onPrimary, borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
|
|
362
364
|
var _a;
|
|
@@ -413,5 +415,5 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
|
|
|
413
415
|
backgroundColor: "transparent",
|
|
414
416
|
zIndex: 999,
|
|
415
417
|
},
|
|
416
|
-
}, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: theme.colors.table.hover[200], children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.
|
|
418
|
+
}, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: theme.colors.table.hover[200], children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
|
|
417
419
|
}
|
|
@@ -37,11 +37,11 @@ const TableActions = React.memo(({ row }) => {
|
|
|
37
37
|
// ✅ if row itself is missing, render nothing
|
|
38
38
|
if (!row)
|
|
39
39
|
return null;
|
|
40
|
-
return (_jsx(Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: _jsxs("div", { ref: ref, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.
|
|
40
|
+
return (_jsx(Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: _jsxs("div", { ref: ref, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, gap: 2, onClick: () => {
|
|
41
41
|
var _a;
|
|
42
42
|
(_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
|
|
43
43
|
handleClose();
|
|
44
|
-
}, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.
|
|
44
|
+
}, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, onClick: () => {
|
|
45
45
|
var _a;
|
|
46
46
|
(_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
|
|
47
47
|
handleClose();
|
|
@@ -246,7 +246,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
|
|
|
246
246
|
const checkboxOffset = isCheckbox ? 50 : 0;
|
|
247
247
|
return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
|
|
248
248
|
}, [columnWidths, isCheckbox]);
|
|
249
|
-
const borderStyle = useMemo(() => noBorders ? "none" : `0.063rem solid ${theme.colors.
|
|
249
|
+
const borderStyle = useMemo(() => noBorders ? "none" : `0.063rem solid ${theme.colors.boxborder[200]}`, [noBorders, theme.colors.border]);
|
|
250
250
|
// Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
|
|
251
251
|
// cells keep their solid color + white text instead of white-on-tint.
|
|
252
252
|
const selectedBg = theme.colors.primary.opacity[16];
|
|
@@ -5,6 +5,6 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
|
|
|
5
5
|
/** Monday-style colored, collapsible group header row. */
|
|
6
6
|
export const TableGroupRow = ({ label, value, count, color, collapsed, colSpan, ariaRowIndex, onToggle, onAddItem, }) => {
|
|
7
7
|
const theme = useCustomTheme();
|
|
8
|
-
return (_jsx(Tr, { "aria-rowindex": ariaRowIndex, children: _jsx(Td, { colSpan: colSpan, p: 0, border: "none", children: _jsxs(Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${theme.colors.
|
|
8
|
+
return (_jsx(Tr, { "aria-rowindex": ariaRowIndex, children: _jsx(Td, { colSpan: colSpan, p: 0, border: "none", children: _jsxs(Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [_jsx(IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? _jsx(ChevronRight, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) }), _jsx(Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), _jsx(Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: theme.colors.background[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem", children: count }), onAddItem && (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: theme.colors.text[500], _hover: { bg: theme.colors.background[50], color: color.text }, onClick: () => onAddItem(value), children: [_jsx(Plus, { size: 14 }), " Add item"] }))] }) }) }));
|
|
9
9
|
};
|
|
10
10
|
export default TableGroupRow;
|
|
@@ -18,15 +18,15 @@ const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths
|
|
|
18
18
|
export default memo(TableHeader);
|
|
19
19
|
const SelectAllCell = memo(({ freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
|
|
20
20
|
const theme = useCustomTheme();
|
|
21
|
-
return (_jsx(Th, { scope: "col", w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: theme.colors.table.hover[200], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.
|
|
21
|
+
return (_jsx(Th, { scope: "col", w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: theme.colors.table.hover[200], position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.boxborder[200]}`, children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }));
|
|
22
22
|
});
|
|
23
23
|
const ContentSpacerCell = memo(({ noBorders }) => {
|
|
24
24
|
const theme = useCustomTheme();
|
|
25
|
-
return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.
|
|
25
|
+
return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.boxborder[200]}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));
|
|
26
26
|
});
|
|
27
27
|
const ViewSpacerCell = memo(({ noBorders, isActionFreeze, }) => {
|
|
28
28
|
const theme = useCustomTheme();
|
|
29
|
-
return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.
|
|
29
|
+
return (_jsx(Th, { scope: "col", w: 2, p: 0, minW: "2.065rem", backgroundColor: theme.colors.table.hover[200], borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.boxborder[200]}`, position: isActionFreeze ? "sticky" : "relative", className: `columns sticky-columns`, right: "0px", zIndex: 1 }));
|
|
30
30
|
});
|
|
31
31
|
const SortingIcon = memo(({ label, sortState, isVisible, handleSortClick, }) => {
|
|
32
32
|
const theme = useCustomTheme();
|
|
@@ -77,7 +77,7 @@ const ColumnHeader = memo(({ header, index, columnWidths, isCheckbox, noBorders,
|
|
|
77
77
|
document.addEventListener("mouseup", onMouseUp);
|
|
78
78
|
};
|
|
79
79
|
const isSortActive = !!(isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none";
|
|
80
|
-
return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: theme.colors.table.hover[200], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.
|
|
80
|
+
return (_jsx(Th, { scope: "col", ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: theme.colors.table.hover[200], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${theme.colors.boxborder[200]}`, borderRight: noBorders ? "none" : `0.063rem solid ${theme.colors.boxborder[200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(Box, { display: "flex", color: accentTextOnCanvas(theme.colors.secondary, theme.colors.table.hover[200]), lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [_jsx(Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), _jsxs(Box, { display: "inline-flex", alignItems: "center", children: [header.isSort && (_jsx(SortingIcon, { label: String(header.label), sortState: (_a = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _a !== void 0 ? _a : "none", isVisible: isHovered || isSortActive, handleSortClick: () => {
|
|
81
81
|
let direction = "asc";
|
|
82
82
|
if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
|
|
83
83
|
direction = "desc";
|
|
@@ -25,6 +25,6 @@ const TableSearch = ({ onSearch }) => {
|
|
|
25
25
|
setQuery(value);
|
|
26
26
|
handleDebounce(value);
|
|
27
27
|
};
|
|
28
|
-
return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: colors.
|
|
28
|
+
return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: colors.boxborder[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
|
|
29
29
|
};
|
|
30
30
|
export default TableSearch;
|
|
@@ -82,7 +82,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
|
|
|
82
82
|
? theme.colors.primary[400]
|
|
83
83
|
: "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
|
|
84
84
|
bg: theme.colors.gray[50],
|
|
85
|
-
borderColor: theme.colors.
|
|
85
|
+
borderColor: theme.colors.boxborder[200],
|
|
86
86
|
}, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.gray[500] }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
|
|
87
87
|
color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
|
|
88
88
|
} }), _jsx(Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${item.label} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${item.label} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
|
|
@@ -48,7 +48,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
|
|
|
48
48
|
return (_jsxs(Box, { children: [_jsx(ToolTip, { label: "Table Settings", placement: "top", children: _jsx(IconButton, { "aria-label": "Table settings", icon: _jsx(Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
|
|
49
49
|
transform: "scale(1.1)",
|
|
50
50
|
color: theme.colors.accentText
|
|
51
|
-
} }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.background[50], overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.
|
|
51
|
+
} }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.background[50], overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
|
|
52
52
|
const selected = density === opt.value;
|
|
53
53
|
return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
|
|
54
54
|
}) }) }), _jsx(TabPanel, { px: 0, py: 0, children: _jsx(Box, { sx: {
|
|
@@ -69,6 +69,6 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
|
|
|
69
69
|
var _a;
|
|
70
70
|
const selected = selectedGroup === opt.id;
|
|
71
71
|
return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
|
|
72
|
-
}) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.
|
|
72
|
+
}) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
|
|
73
73
|
};
|
|
74
74
|
export default TableSettings;
|
|
@@ -3,7 +3,7 @@ import { Box, Thead, Table, Tr, Th, Tbody, Td, Checkbox, } from "@chakra-ui/reac
|
|
|
3
3
|
import { useCustomTheme } from "../../Theme/useCustomTheme.js";
|
|
4
4
|
const TrailWorks = () => {
|
|
5
5
|
const { colors } = useCustomTheme();
|
|
6
|
-
const cellBorder = colors.
|
|
6
|
+
const cellBorder = colors.boxborder[200];
|
|
7
7
|
const data = [
|
|
8
8
|
{
|
|
9
9
|
contact: "John Doe",
|
|
@@ -28,9 +28,9 @@ const baseStyle = definePartsStyle(({ theme }) => {
|
|
|
28
28
|
[$bg.variable]: colors.backgroundColor.light,
|
|
29
29
|
bg: $bg.reference,
|
|
30
30
|
color: colors.text[900],
|
|
31
|
-
//
|
|
32
|
-
//
|
|
33
|
-
|
|
31
|
+
// An elevated surface is separated by its shadow, not a rule. Chakra's default
|
|
32
|
+
// gray.200 border read as a hard edge against our surfaces.
|
|
33
|
+
borderWidth: 0,
|
|
34
34
|
},
|
|
35
35
|
// Own CSS var (`--menu-item-bg`), NOT the list's `--menu-bg` — Chakra's stock item
|
|
36
36
|
// baseStyle rewrites `--menu-bg` itself on hover/focus, so reusing that same var name
|
|
@@ -18,8 +18,10 @@ const baseStyle = definePartsStyle(({ theme }) => {
|
|
|
18
18
|
content: {
|
|
19
19
|
[$popperBg.variable]: colors.backgroundColor.light,
|
|
20
20
|
bg: $popperBg.reference,
|
|
21
|
-
[$arrowShadowColor.variable]: colors.
|
|
21
|
+
[$arrowShadowColor.variable]: colors.boxborder[200],
|
|
22
22
|
color: colors.text[900],
|
|
23
|
+
// Elevated surfaces are separated by their shadow, not a rule.
|
|
24
|
+
borderWidth: 0,
|
|
23
25
|
},
|
|
24
26
|
};
|
|
25
27
|
});
|
|
@@ -23,7 +23,10 @@ const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
|
|
|
23
23
|
* regardless of which brand/mode is currently active.
|
|
24
24
|
*/
|
|
25
25
|
const brandSwatchColor = (brand) => brandThemes[brand].light.colors.primary[500];
|
|
26
|
-
const BrandSwatch = ({ brand }) =>
|
|
26
|
+
const BrandSwatch = ({ brand }) => {
|
|
27
|
+
const { colors } = useCustomTheme();
|
|
28
|
+
return (_jsx(Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0 }));
|
|
29
|
+
};
|
|
27
30
|
/**
|
|
28
31
|
* Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
|
|
29
32
|
* are read straight from the active theme — no `useColorModeValue` pairing needed here.
|
|
@@ -36,7 +39,7 @@ const useSwitcherColors = () => {
|
|
|
36
39
|
activeColor: colors.primary[500],
|
|
37
40
|
mutedColor: colors.text[600],
|
|
38
41
|
hoverBg: colors.gray[100],
|
|
39
|
-
borderColor: colors.
|
|
42
|
+
borderColor: colors.boxborder[200],
|
|
40
43
|
// NOTE: menuBg lives in Menu.styles.ts — re-pushing it via `sx` flickers on every render.
|
|
41
44
|
menuColor: colors.text[900],
|
|
42
45
|
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { contrastRatio } from "./color.js";
|
|
2
|
+
import { liftToContrast } from "./outlineRung.js";
|
|
3
|
+
import { PLACEHOLDER_TEXT } from "./surfaceRungs.js";
|
|
4
|
+
/**
|
|
5
|
+
* The hint ink for a field: the rung the brand authored, guaranteed to clear `PLACEHOLDER_TEXT`
|
|
6
|
+
* on every surface a field can land on.
|
|
7
|
+
*
|
|
8
|
+
* It does not walk the rung toward AA in either direction. Lifting it to 4.5 made an empty field
|
|
9
|
+
* read as one already typed into; softening it back down again undershot on the next surface.
|
|
10
|
+
* The published library ships this rung untouched and that is the look being matched.
|
|
11
|
+
*/
|
|
12
|
+
export const placeholderInkOn = (palette, surfaces) => {
|
|
13
|
+
const rung = palette.placeholder[500];
|
|
14
|
+
const hardest = surfaces.reduce((worst, s) => contrastRatio(rung, s) < contrastRatio(rung, worst) ? s : worst);
|
|
15
|
+
return liftToContrast(rung, hardest, PLACEHOLDER_TEXT);
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Every surface an ENABLED field renders on. Disabled fields are deliberately absent — 1.4.3
|
|
19
|
+
* exempts them, and folding their dimmer fill in here would darken the hint on every other field.
|
|
20
|
+
*/
|
|
21
|
+
export const fieldSurfaces = (palette) => [
|
|
22
|
+
palette.gray[50],
|
|
23
|
+
palette.background[50],
|
|
24
|
+
palette.backgroundColor.main,
|
|
25
|
+
];
|
|
26
|
+
/** The hint ink every field in this library reads. Takes no backdrop: see `fieldSurfaces`. */
|
|
27
|
+
export const placeholderInk = (palette) => placeholderInkOn(palette, fieldSurfaces(palette));
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import { liftToContrast, AA_NON_TEXT } from "./outlineRung.js";
|
|
2
2
|
import { AA_NORMAL_TEXT } from "./accentText.js";
|
|
3
|
-
|
|
3
|
+
import { PLACEHOLDER_TEXT } from "./surfaceRungs.js";
|
|
4
|
+
/**
|
|
5
|
+
* A hint is floored at 3:1, not 4.5:1. Held to body-text contrast it stopped reading as a hint —
|
|
6
|
+
* an empty field looked like one already typed into — and the published library ships this rung
|
|
7
|
+
* as the brand authored it. See CHROME-CONSISTENCY.md.
|
|
8
|
+
*/
|
|
4
9
|
export function withPlaceholderRung(palette) {
|
|
5
|
-
const resolved = liftToContrast(palette.placeholder[500], palette.background[50],
|
|
10
|
+
const resolved = liftToContrast(palette.placeholder[500], palette.background[50], PLACEHOLDER_TEXT);
|
|
6
11
|
if (resolved === palette.placeholder[500])
|
|
7
12
|
return palette;
|
|
8
13
|
return { ...palette, placeholder: { ...palette.placeholder, 500: resolved } };
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { contrastRatio } from "./color.js";
|
|
2
|
-
import { liftToContrast,
|
|
2
|
+
import { liftToContrast, AA_NON_TEXT } from "./outlineRung.js";
|
|
3
3
|
import { AA_NORMAL_TEXT, pickAccentText } from "./accentText.js";
|
|
4
4
|
import { SEMANTIC_TONES } from "./semanticText.js";
|
|
5
|
-
/**
|
|
6
|
-
|
|
5
|
+
/**
|
|
6
|
+
* A hint is held to the non-text floor, not the body-text one. Deliberate: at 4.5 an empty field
|
|
7
|
+
* reads as one already typed into. See CHROME-CONSISTENCY.md.
|
|
8
|
+
*/
|
|
9
|
+
export const PLACEHOLDER_TEXT = AA_NON_TEXT;
|
|
7
10
|
export const namedSurfaces = (palette) => [
|
|
8
11
|
...Object.values(palette.backgroundColor),
|
|
9
12
|
palette.background[50],
|
|
@@ -15,7 +18,6 @@ export const hardestSurface = (ink, surfaces) => surfaces.reduce((worst, s) => c
|
|
|
15
18
|
export function withSurfaceRungs(palette) {
|
|
16
19
|
const surfaces = namedSurfaces(palette);
|
|
17
20
|
const lift = (ink, target) => liftToContrast(ink, hardestSurface(ink, surfaces), target);
|
|
18
|
-
const soften = (ink, target) => softenToContrast(ink, hardestSurface(ink, surfaces), target);
|
|
19
21
|
const semanticText = SEMANTIC_TONES.reduce((acc, tone) => {
|
|
20
22
|
acc[tone] = lift(palette.semanticText[tone], AA_NORMAL_TEXT);
|
|
21
23
|
return acc;
|
|
@@ -27,12 +29,9 @@ export function withSurfaceRungs(palette) {
|
|
|
27
29
|
semanticText,
|
|
28
30
|
text: { ...palette.text, 500: lift(palette.text[500], AA_NORMAL_TEXT) },
|
|
29
31
|
header: { ...palette.header, 500: lift(palette.header[500], AA_NORMAL_TEXT) },
|
|
30
|
-
//
|
|
31
|
-
//
|
|
32
|
-
|
|
33
|
-
...palette.placeholder,
|
|
34
|
-
500: soften(lift(palette.placeholder[500], AA_NORMAL_TEXT), PLACEHOLDER_TEXT),
|
|
35
|
-
},
|
|
32
|
+
// `placeholder` is deliberately absent: the brand authors that rung and the published
|
|
33
|
+
// library ships it untouched. Its floor is enforced in `placeholderInk`, against the
|
|
34
|
+
// surfaces a FIELD renders on — not `table.hover`, which no field sits on.
|
|
36
35
|
boxborder: { ...palette.boxborder, 500: lift(palette.boxborder[500], AA_NON_TEXT) },
|
|
37
36
|
};
|
|
38
37
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -137,3 +137,5 @@ export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText,
|
|
|
137
137
|
// color has no defined luminance on its own, so measure the composited result, not the tint).
|
|
138
138
|
export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexToHsl, hslToHex, withLightness, mix, relativeLuminance, contrastRatio, } from "./Theme/tokens/builders/color.js";
|
|
139
139
|
export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Theme/tokens/builders/scrollbar.js";
|
|
140
|
+
export { placeholderInk, placeholderInkOn, fieldSurfaces } from "./Theme/tokens/builders/placeholderInk.js";
|
|
141
|
+
export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk.js";
|
package/dist/index.d.ts
CHANGED
|
@@ -160,3 +160,7 @@ export type { HeaderProps } from "./Components/Header/HeaderProps";
|
|
|
160
160
|
export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Theme/tokens/builders/scrollbar";
|
|
161
161
|
export type { ScrollbarVariant, ScrollbarStyle, } from "./Theme/tokens/builders/scrollbar";
|
|
162
162
|
export type { ScrollbarBoxProps } from "./Components/ScrollbarBox/ScrollbarBox";
|
|
163
|
+
export { placeholderInk, placeholderInkOn, fieldSurfaces } from "./Theme/tokens/builders/placeholderInk";
|
|
164
|
+
export type { FieldSurfaces } from "./Theme/tokens/builders/placeholderInk";
|
|
165
|
+
export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk";
|
|
166
|
+
export type { Gradient, ResolvedGradient, } from "./Theme/tokens/builders/gradientInk";
|
package/dist/index.js
CHANGED
|
@@ -40,7 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
40
40
|
exports.UserDetails = exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemaining = exports.formatPlanExpiry = exports.formatPlanElapsed = exports.PlanBadge = exports.PlanPill = exports.UpgradeButton = exports.LimitReachedModal = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.WorkspaceTrayPreview = exports.WorkspaceTray = exports.WorkspaceWindow = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexRadialChart = exports.ApexAreaChart = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
|
|
41
41
|
exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.ScrollbarBox = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.SelectV2 = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = void 0;
|
|
42
42
|
exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.AppearanceSettings = exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = exports.VerifyEmailOtp = exports.useToaster = exports.OverflowToolTip = void 0;
|
|
43
|
-
exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = void 0;
|
|
43
|
+
exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = void 0;
|
|
44
44
|
const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
|
|
45
45
|
exports.Accordian = Accordion_1.default;
|
|
46
46
|
const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
|
|
@@ -330,3 +330,11 @@ var scrollbar_1 = require("./Theme/tokens/builders/scrollbar");
|
|
|
330
330
|
Object.defineProperty(exports, "scrollbarStyles", { enumerable: true, get: function () { return scrollbar_1.scrollbarStyles; } });
|
|
331
331
|
Object.defineProperty(exports, "globalScrollbarStyles", { enumerable: true, get: function () { return scrollbar_1.globalScrollbarStyles; } });
|
|
332
332
|
Object.defineProperty(exports, "SCROLLBAR_WIDTH", { enumerable: true, get: function () { return scrollbar_1.SCROLLBAR_WIDTH; } });
|
|
333
|
+
var placeholderInk_1 = require("./Theme/tokens/builders/placeholderInk");
|
|
334
|
+
Object.defineProperty(exports, "placeholderInk", { enumerable: true, get: function () { return placeholderInk_1.placeholderInk; } });
|
|
335
|
+
Object.defineProperty(exports, "placeholderInkOn", { enumerable: true, get: function () { return placeholderInk_1.placeholderInkOn; } });
|
|
336
|
+
Object.defineProperty(exports, "fieldSurfaces", { enumerable: true, get: function () { return placeholderInk_1.fieldSurfaces; } });
|
|
337
|
+
var gradientInk_1 = require("./Theme/tokens/builders/gradientInk");
|
|
338
|
+
Object.defineProperty(exports, "resolveGradient", { enumerable: true, get: function () { return gradientInk_1.resolveGradient; } });
|
|
339
|
+
Object.defineProperty(exports, "gradientCss", { enumerable: true, get: function () { return gradientInk_1.gradientCss; } });
|
|
340
|
+
Object.defineProperty(exports, "inkSafeGradientToken", { enumerable: true, get: function () { return gradientInk_1.inkSafeGradient; } });
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pixelize-design-library",
|
|
3
|
-
"version": "2.4.2-beta.
|
|
3
|
+
"version": "2.4.2-beta.9",
|
|
4
4
|
"description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -91,7 +91,9 @@
|
|
|
91
91
|
"\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
|
|
92
92
|
},
|
|
93
93
|
"testPathIgnorePatterns": [
|
|
94
|
-
"
|
|
94
|
+
"/node_modules/",
|
|
95
|
+
"<rootDir>/dist/",
|
|
96
|
+
"<rootDir>/.claude/"
|
|
95
97
|
],
|
|
96
98
|
"testMatch": [
|
|
97
99
|
"**/__tests__/**/*.[jt]s?(x)",
|