pixelize-design-library 2.2.45 → 2.2.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/Components/Card/PaymentCard/PaymentCard.js +4 -3
  2. package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts +1 -0
  3. package/dist/Components/NoteTextArea/NoteTextArea.d.ts +1 -1
  4. package/dist/Components/NoteTextArea/NoteTextArea.js +11 -10
  5. package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts +1 -0
  6. package/dist/Components/Table/Components/HeaderActions.js +5 -34
  7. package/package.json +1 -1
package/dist/Components/Card/PaymentCard/PaymentCard.js CHANGED
@@ -83,13 +83,14 @@ var PaymentCard = function (_a) {
83
83
  react_1.default.createElement(react_2.Box, { textAlign: "center", mb: 6 },
84
84
  react_1.default.createElement(react_2.Flex, { justify: "center", align: "center", w: "3.125rem", h: "3.125rem", borderRadius: "lg", bg: buttonColor50, color: buttonColor, mx: "auto", mb: 4 }, plan.icon),
85
85
  react_1.default.createElement(react_2.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800] }, plan.name),
86
- react_1.default.createElement(react_2.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center" },
86
+ (plan.yearlyPrice !== 0 || plan.monthlyPrice !== 0) && (react_1.default.createElement(react_2.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center" },
87
87
  react_1.default.createElement(react_2.Box, { fontSize: "1.5rem" }, "\u20B9"),
88
88
  billingCycle === "yearly" ? plan.yearlyPrice : plan.monthlyPrice,
89
89
  react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1 },
90
90
  react_1.default.createElement(react_2.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.billing),
91
- react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax))),
92
- react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 3 }, plan.description)),
91
+ react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax)))),
92
+ plan.priceDescription && (react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 2 }, plan === null || plan === void 0 ? void 0 : plan.priceDescription)),
93
+ react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 2 }, plan.description)),
93
94
  !isActive && (react_1.default.createElement(Button_1.default, __assign({ isLoading: plan.plan_id === buttonLoading, loadingText: plan.buttonLoadingText, width: "full", variant: plan.buttonVariant, size: "lg", onClick: function () { return onSelect === null || onSelect === void 0 ? void 0 : onSelect(plan.plan_id); }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "button", false); } }, variantStyles), plan.buttonText)),
94
95
  react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, mt: 6 }, plan.features.map(function (feature, i) { return (react_1.default.createElement(react_2.Flex, { key: i, align: "center" },
95
96
  react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }),
package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts CHANGED
@@ -23,4 +23,5 @@ export type Plan = {
23
23
  buttonVariant: "solid" | "outline" | "link";
24
24
  popular?: boolean;
25
25
  buttonLoadingText?: string;
26
+ priceDescription?: string;
26
27
  };
package/dist/Components/NoteTextArea/NoteTextArea.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from "react";
2
2
  import { NoteTextAreaProps } from "./NoteTextAreaProps";
3
- export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder }: NoteTextAreaProps): React.JSX.Element;
3
+ export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder, cancelButtonHide, }: NoteTextAreaProps): React.JSX.Element;
package/dist/Components/NoteTextArea/NoteTextArea.js CHANGED
@@ -45,16 +45,16 @@ var countWords = function (text) {
45
45
  };
46
46
  function NoteTextArea(_a) {
47
47
  var _b;
48
- var _c = _a.width, width = _c === void 0 ? "100%" : _c, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _d = _a.isEditable, isEditable = _d === void 0 ? false : _d, saveButtonLoading = _a.saveButtonLoading, _e = _a.maxFileSize, maxFileSize = _e === void 0 ? 1 * 1024 * 1024 : _e, _f = _a.maxFilesSizeError, maxFilesSizeError = _f === void 0 ? "Some files are too large. Maximum allowed size is" : _f, _g = _a.maxNoteWordCount, maxNoteWordCount = _g === void 0 ? 15 : _g, onChange = _a.onChange, inputRef = _a.ref, _h = _a.customPlaceholder, customPlaceholder = _h === void 0 ? "Add a note..." : _h;
48
+ var _c = _a.width, width = _c === void 0 ? "100%" : _c, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _d = _a.isEditable, isEditable = _d === void 0 ? false : _d, saveButtonLoading = _a.saveButtonLoading, _e = _a.maxFileSize, maxFileSize = _e === void 0 ? 1 * 1024 * 1024 : _e, _f = _a.maxFilesSizeError, maxFilesSizeError = _f === void 0 ? "Some files are too large. Maximum allowed size is" : _f, _g = _a.maxNoteWordCount, maxNoteWordCount = _g === void 0 ? 15 : _g, onChange = _a.onChange, inputRef = _a.ref, _h = _a.customPlaceholder, customPlaceholder = _h === void 0 ? "Add a note..." : _h, _j = _a.cancelButtonHide, cancelButtonHide = _j === void 0 ? false : _j;
49
49
  var theme = (0, useCustomTheme_1.useCustomTheme)();
50
50
  var noteAreaRef = (0, react_1.useRef)(null);
51
- var _j = (0, react_1.useState)(false), isActive = _j[0], setIsActive = _j[1];
52
- var _k = (0, react_1.useState)(""), noteValue = _k[0], setNoteValue = _k[1];
53
- var _l = (0, react_1.useState)(""), titleValue = _l[0], setTitleValue = _l[1];
54
- var _m = (0, react_1.useState)(false), titleShow = _m[0], setTitleShow = _m[1];
55
- var _o = (0, react_1.useState)([]), files = _o[0], setFiles = _o[1];
56
- var _p = (0, react_1.useState)(""), fileError = _p[0], setFileError = _p[1];
57
- var _q = (0, react_1.useState)(false), isSaveDisabled = _q[0], setIsSaveDisabled = _q[1];
51
+ var _k = (0, react_1.useState)(false), isActive = _k[0], setIsActive = _k[1];
52
+ var _l = (0, react_1.useState)(""), noteValue = _l[0], setNoteValue = _l[1];
53
+ var _m = (0, react_1.useState)(""), titleValue = _m[0], setTitleValue = _m[1];
54
+ var _o = (0, react_1.useState)(false), titleShow = _o[0], setTitleShow = _o[1];
55
+ var _p = (0, react_1.useState)([]), files = _p[0], setFiles = _p[1];
56
+ var _q = (0, react_1.useState)(""), fileError = _q[0], setFileError = _q[1];
57
+ var _r = (0, react_1.useState)(false), isSaveDisabled = _r[0], setIsSaveDisabled = _r[1];
58
58
  (0, react_1.useEffect)(function () {
59
59
  setIsSaveDisabled(countWords(titleValue) > maxNoteWordCount);
60
60
  }, [titleValue, maxNoteWordCount]);
@@ -164,7 +164,7 @@ function NoteTextArea(_a) {
164
164
  background: theme.colors.white,
165
165
  } })),
166
166
  react_1.default.createElement(react_2.Box, { bg: theme.colors.white, minH: "80px", pl: 3, pt: 2, position: "relative" },
167
- react_1.default.createElement(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: "Add a note...", variant: "unstyled", resize: "none", minH: "80px", _placeholder: { fontStyle: "italic", color: theme.colors.gray[300] }, style: { overflow: "hidden" }, p: 0 }))),
167
+ react_1.default.createElement(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "80px", _placeholder: { fontStyle: "italic", color: theme.colors.gray[300] }, style: { overflow: "hidden" }, p: 0 }))),
168
168
  react_1.default.createElement(react_2.Divider, null),
169
169
  react_1.default.createElement(react_2.Box, { px: 4, py: 3 },
170
170
  react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", w: "100%" },
@@ -175,7 +175,8 @@ function NoteTextArea(_a) {
175
175
  !titleShow ? (react_1.default.createElement(react_2.Text, { onClick: function () { return setTitleShow(true); }, cursor: "pointer", color: theme.colors.gray[600], fontWeight: 500, fontSize: "sm" }, "Add a Title")) : (react_1.default.createElement(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue },
176
176
  react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "200px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, titleValue || "Title")))),
177
177
  react_1.default.createElement(react_2.Flex, { gap: 3, align: "center", ml: "auto", flexShrink: 0 },
178
- react_1.default.createElement(react_2.Button, { variant: "ghost", colorScheme: "gray", borderRadius: "6px", onClick: handleCloseTextArea, _hover: { bg: "transparent" } }, "Cancel"),
178
+ cancelButtonHide ? null : (react_1.default.createElement(react_1.default.Fragment, null,
179
+ react_1.default.createElement(react_2.Button, { variant: "ghost", colorScheme: "gray", borderRadius: "6px", onClick: handleCloseTextArea, _hover: { bg: "transparent" } }, "Cancel"))),
179
180
  react_1.default.createElement(react_2.Button, { colorScheme: "purple", borderRadius: "8px", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: function () { return handleSubmit(noteValue, titleValue, files); } },
180
181
  saveButtonLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null,
181
182
  "Save"))),
package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts CHANGED
@@ -14,4 +14,5 @@ export type NoteTextAreaProps = {
14
14
  onChange?: (value: string) => void;
15
15
  ref?: LegacyRef<HTMLInputElement>;
16
16
  customPlaceholder?: string;
17
+ cancelButtonHide?: boolean;
17
18
  };
package/dist/Components/Table/Components/HeaderActions.js CHANGED
@@ -18,35 +18,6 @@ var react_1 = require("@chakra-ui/react");
18
18
  var lucide_react_1 = require("lucide-react");
19
19
  var react_2 = __importDefault(require("react"));
20
20
  var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
21
- // const ListItem = ({
22
- // icon,
23
- // name,
24
- // onClick,
25
- // selections,
26
- // }: {
27
- // icon: React.ReactElement;
28
- // name: string;
29
- // onClick?: (selection: (string | number)[]) => void;
30
- // selections: (string | number)[];
31
- // }) => {
32
- // const { colors }: any = useCustomTheme();
33
- // const styledIcon = React.cloneElement(icon, {
34
- // color: colors?.text?.[500],
35
- // size: "1.25rem",
36
- // });
37
- // return (
38
- // <Box
39
- // display={"flex"}
40
- // alignItems={"center"}
41
- // gap={"0.375rem"}
42
- // onClick={() => onClick && onClick(selections)}
43
- // cursor={"pointer"}
44
- // _hover={{color: colors?.primary?.[500]}}
45
- // >
46
- // {styledIcon} {name}
47
- // </Box>
48
- // );
49
- // };
50
21
  var ListItem = function (_a) {
51
22
  var _b, _c;
52
23
  var icon = _a.icon, name = _a.name, onClick = _a.onClick, selections = _a.selections, _d = _a.isHoverEnabled, isHoverEnabled = _d === void 0 ? false : _d, hoverColor = _a.hoverColor;
@@ -55,7 +26,7 @@ var ListItem = function (_a) {
55
26
  color: "currentColor",
56
27
  size: "1.25rem",
57
28
  });
58
- return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: isHoverEnabled ? "pointer" : "default", onClick: function () { return onClick && onClick(selections); }, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500], _hover: isHoverEnabled
29
+ return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: function () { return onClick && onClick(selections); }, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500], _hover: isHoverEnabled
59
30
  ? { color: hoverColor ? hoverColor : (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[500] } // ✅ hover updates both
60
31
  : {}, transition: "color 0.2s ease" // ✅ smooth animation
61
32
  },
@@ -64,14 +35,14 @@ var ListItem = function (_a) {
64
35
  name));
65
36
  };
66
37
  var HeaderActions = function (_a) {
67
- var _b, _c, _d, _e, _f, _g, _h, _j;
38
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k;
68
39
  var actions = _a.actions, selections = _a.selections;
69
40
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
70
41
  return (react_2.default.createElement(react_1.Box, { display: "flex", gap: 4, fontSize: "0.875rem", fontWeight: 400, color: (_b = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _b === void 0 ? void 0 : _b[500] },
71
42
  ((_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_d = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _d === void 0 ? void 0 : _d.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[500] })),
72
- ((_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_g = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _g === void 0 ? void 0 : _g.onClick, selections: selections })),
73
- ((_h = actions === null || actions === void 0 ? void 0 : actions.items) === null || _h === void 0 ? void 0 : _h.length)
74
- ? (_j = actions === null || actions === void 0 ? void 0 : actions.items) === null || _j === void 0 ? void 0 : _j.map(function (item) { return (react_2.default.createElement(ListItem, __assign({}, item, { selections: selections }))); })
43
+ ((_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_g = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _g === void 0 ? void 0 : _g.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500] })),
44
+ ((_j = actions === null || actions === void 0 ? void 0 : actions.items) === null || _j === void 0 ? void 0 : _j.length)
45
+ ? (_k = actions === null || actions === void 0 ? void 0 : actions.items) === null || _k === void 0 ? void 0 : _k.map(function (item) { return (react_2.default.createElement(ListItem, __assign({}, item, { selections: selections }))); })
75
46
  : null));
76
47
  };
77
48
  exports.default = HeaderActions;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.45",
3
+ "version": "2.2.46",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",