pixelize-design-library 2.2.147 → 2.2.149
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/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js +1 -1
- package/dist/Components/PinInput/PinInput.js +1 -1
- package/dist/Components/Table/Components/TableHeader.js +10 -10
- package/dist/Theme/Default/palette.d.ts +12 -12
- package/dist/Theme/Default/palette.js +276 -334
- package/dist/Theme/Meadow/palette.js +52 -52
- package/dist/Theme/Radiant/palette.js +82 -82
- package/dist/Theme/Skyline/palette.js +82 -82
- package/dist/Theme/Slate/palette.js +81 -81
- package/package.json +1 -1
|
@@ -20,7 +20,7 @@ function VerifyEmailOtp(_a) {
|
|
|
20
20
|
react_1.default.createElement("br", null),
|
|
21
21
|
"your new Pixel Account"),
|
|
22
22
|
react_1.default.createElement(react_2.HStack, { spacing: 3, mb: 6 },
|
|
23
|
-
react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500] }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, borderRadius: "md", border: "0.063rem solid", borderColor: theme.colors.
|
|
23
|
+
react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500] }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, borderRadius: "md", border: "0.063rem solid", borderColor: theme.colors.boxborder[300], backgroundColor: theme.colors.background[200], _focus: {
|
|
24
24
|
borderColor: theme.colors.primary[500],
|
|
25
25
|
boxShadow: "0 0 0 0.063rem ".concat(theme.colors.primary[500]),
|
|
26
26
|
} })); }))),
|
|
@@ -13,7 +13,7 @@ function PinInputs(_a) {
|
|
|
13
13
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
14
14
|
label && (react_1.default.createElement(react_2.Text, { fontWeight: "bold", marginBottom: "8px" }, label)),
|
|
15
15
|
react_1.default.createElement(react_2.HStack, null,
|
|
16
|
-
react_1.default.createElement(react_2.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 }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, _focus: {
|
|
16
|
+
react_1.default.createElement(react_2.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 }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[300], _focus: {
|
|
17
17
|
borderColor: theme.colors.primary[500],
|
|
18
18
|
boxShadow: "0 0 0 0.063rem ".concat(theme.colors.primary[500]),
|
|
19
19
|
} })); })))));
|
|
@@ -59,8 +59,8 @@ var TableHeader = function (_a) {
|
|
|
59
59
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
60
60
|
var _b = (0, react_2.useState)(null), openFilterId = _b[0], setOpenFilterId = _b[1];
|
|
61
61
|
var RenderCheckbox = (0, react_2.useCallback)(function () {
|
|
62
|
-
var _a, _b, _c
|
|
63
|
-
return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (
|
|
62
|
+
var _a, _b, _c;
|
|
63
|
+
return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderY: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: theme.shadows.md },
|
|
64
64
|
react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })));
|
|
65
65
|
}, [
|
|
66
66
|
checked,
|
|
@@ -71,12 +71,12 @@ var TableHeader = function (_a) {
|
|
|
71
71
|
theme.colors,
|
|
72
72
|
]);
|
|
73
73
|
var RenderConent = (0, react_2.useCallback)(function () {
|
|
74
|
-
var _a, _b, _c
|
|
75
|
-
return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (
|
|
74
|
+
var _a, _b, _c;
|
|
75
|
+
return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderY: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: theme.shadows.md }));
|
|
76
76
|
}, [noBorders, theme.colors]);
|
|
77
77
|
var RenderView = (0, react_2.useCallback)(function () {
|
|
78
|
-
var _a, _b, _c
|
|
79
|
-
return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (
|
|
78
|
+
var _a, _b, _c;
|
|
79
|
+
return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderY: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: theme.shadows.md }));
|
|
80
80
|
}, [noBorders, theme.colors, isActionFreeze]);
|
|
81
81
|
return (react_2.default.createElement(react_1.Tr, { pr: 0 },
|
|
82
82
|
isContent && react_2.default.createElement(RenderConent, null),
|
|
@@ -99,9 +99,9 @@ var SortingIcon = (0, react_2.memo)(function (_a) {
|
|
|
99
99
|
sortState === "desc" && react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 })));
|
|
100
100
|
});
|
|
101
101
|
var ColumnHeader = (0, react_2.memo)(function (_a) {
|
|
102
|
-
var _b, _c, _d, _e, _f
|
|
102
|
+
var _b, _c, _d, _e, _f;
|
|
103
103
|
var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort, openFilterId = _a.openFilterId, setOpenFilterId = _a.setOpenFilterId;
|
|
104
|
-
var
|
|
104
|
+
var _g = (0, react_2.useState)(false), isHovered = _g[0], setIsHovered = _g[1];
|
|
105
105
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
106
106
|
var isFrozen = header.isFreeze;
|
|
107
107
|
var leftOffset = isFrozen
|
|
@@ -144,8 +144,8 @@ var ColumnHeader = (0, react_2.memo)(function (_a) {
|
|
|
144
144
|
}, [handleSort]);
|
|
145
145
|
var isFiltersEnabled = (isHovered && header.isSort) ||
|
|
146
146
|
((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none");
|
|
147
|
-
return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", fontSize: 16, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (
|
|
148
|
-
react_2.default.createElement(react_1.Box, { display: "flex", color: (
|
|
147
|
+
return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", fontSize: 16, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.secondary) === null || _c === void 0 ? void 0 : _c[50], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.border[500]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 45, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
|
|
148
|
+
react_2.default.createElement(react_1.Box, { display: "flex", color: (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[500], lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative" },
|
|
149
149
|
react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden" }, header.label),
|
|
150
150
|
react_2.default.createElement(react_1.Box, { display: "inline-flex", alignItems: "center" },
|
|
151
151
|
isFiltersEnabled && (react_2.default.createElement(Sorting, { isSorting: isSorting, header: header })),
|
|
@@ -235,18 +235,6 @@ declare const palette: {
|
|
|
235
235
|
800: string;
|
|
236
236
|
900: string;
|
|
237
237
|
};
|
|
238
|
-
background: {
|
|
239
|
-
50: string;
|
|
240
|
-
100: string;
|
|
241
|
-
200: string;
|
|
242
|
-
300: string;
|
|
243
|
-
400: string;
|
|
244
|
-
500: string;
|
|
245
|
-
600: string;
|
|
246
|
-
700: string;
|
|
247
|
-
800: string;
|
|
248
|
-
900: string;
|
|
249
|
-
};
|
|
250
238
|
backgroundColor: {
|
|
251
239
|
main: string;
|
|
252
240
|
secondary: string;
|
|
@@ -261,6 +249,18 @@ declare const palette: {
|
|
|
261
249
|
base: string;
|
|
262
250
|
tableHeader: string;
|
|
263
251
|
};
|
|
252
|
+
background: {
|
|
253
|
+
50: string;
|
|
254
|
+
100: string;
|
|
255
|
+
200: string;
|
|
256
|
+
300: string;
|
|
257
|
+
400: string;
|
|
258
|
+
500: string;
|
|
259
|
+
600: string;
|
|
260
|
+
700: string;
|
|
261
|
+
800: string;
|
|
262
|
+
900: string;
|
|
263
|
+
};
|
|
264
264
|
text: {
|
|
265
265
|
50: string;
|
|
266
266
|
100: string;
|