pixelize-design-library 2.2.19 → 2.2.21

package/dist/Components/Card/PaymentCard/PaymentCard.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { PaymentCardProps } from "./PaymentCardProps";
-declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, }: PaymentCardProps) => React.JSX.Element;
+declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, isLoading, }: PaymentCardProps) => React.JSX.Element;
 export default PaymentCard;

package/dist/Components/Card/PaymentCard/PaymentCard.js

@@ -52,9 +52,9 @@ var getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
     };
 };
 var PaymentCard = function (_a) {
-    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover, buttonLoading = _a.buttonLoading;
+    var plan = _a.plan, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.isNextUpgrade, isNextUpgrade = _c === void 0 ? false : _c, billingCycle = _a.billingCycle, onSelect = _a.onSelect, onHover = _a.onHover, buttonLoading = _a.buttonLoading, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _d = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme), badgeText = _d.badgeText, badgeColor = _d.badgeColor, buttonColor = _d.buttonColor, buttonColor50 = _d.buttonColor50;
+    var _e = getCardStyles(isActive, isNextUpgrade, !!plan.popular, theme), badgeText = _e.badgeText, badgeColor = _e.badgeColor, buttonColor = _e.buttonColor, buttonColor50 = _e.buttonColor50;
     var variantStyles = plan.buttonVariant === "outline"
         ? {
             borderColor: buttonColor,
@@ -67,7 +67,18 @@ var PaymentCard = function (_a) {
             _hover: { bg: buttonColor },
         };
     return (react_1.default.createElement(react_2.GridItem, null,
-        react_1.default.createElement(react_2.Box, { bg: theme.colors.white, minH: "100%", borderRadius: "lg", p: 8, borderWidth: "0.063rem", borderColor: theme.colors.gray[200], boxShadow: "md", position: "relative", transition: "all 0.2s", transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "xl" }, onMouseEnter: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "card", true); }, onMouseLeave: function () { return onHover === null || onHover === void 0 ? void 0 : onHover(plan.plan_id, "card", false); } },
+        react_1.default.createElement(react_2.Box, { bg: theme.colors.white, minH: "100%", borderRadius: "lg", p: 8, borderWidth: "0.063rem", borderColor: theme.colors.gray[200], boxShadow: "md", position: "relative", transition: "all 0.2s", transform: plan.popular ? "scale(1.03)" : "none", border: badgeColor, _hover: { transform: "translateY(-0.313rem)", shadow: "xl" } }, isLoading ? (
+        // 🔹 Skeleton Loader Layout
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_2.Skeleton, { height: "24px", width: "120px", mx: "auto", mb: 4 }),
+            react_1.default.createElement(react_2.Skeleton, { height: "50px", width: "50px", borderRadius: "lg", mx: "auto", mb: 4 }),
+            react_1.default.createElement(react_2.Skeleton, { height: "24px", width: "100px", mx: "auto", mb: 3 }),
+            react_1.default.createElement(react_2.Skeleton, { height: "30px", width: "160px", mx: "auto", mb: 4 }),
+            react_1.default.createElement(react_2.SkeletonText, { noOfLines: 2, spacing: "2" }),
+            react_1.default.createElement(react_2.Skeleton, { height: "44px", width: "full", mt: 6, borderRadius: "md" }),
+            react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, mt: 6 }, [1, 2, 3, 4].map(function (i) { return (react_1.default.createElement(react_2.Skeleton, { key: i, height: "16px", width: "80%" })); })))) : (
+        // 🔹 Actual Card Content
+        react_1.default.createElement(react_1.default.Fragment, null,
             badgeText && (react_1.default.createElement(react_2.Badge, { position: "absolute", top: "-0.75rem", left: "50%", transform: "translateX(-50%)", bg: buttonColor, color: theme.colors.white, fontSize: "sm", px: 4, py: 1, borderRadius: "full" }, badgeText)),
             react_1.default.createElement(react_2.Box, { textAlign: "center", mb: 6 },
                 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),
@@ -82,6 +93,6 @@ var PaymentCard = function (_a) {
             !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)),
             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" },
                 react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Check, color: theme.colors.green[500], mr: 2 }),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, feature))); })))));
+                react_1.default.createElement(react_2.Text, { fontSize: "sm" }, feature))); })))))));
 };
 exports.default = PaymentCard;

package/dist/Components/Card/PaymentCard/PaymentCardProps.d.ts

@@ -7,6 +7,7 @@ export type PaymentCardProps = {
     onSelect?: (planId: number) => void;
     onHover?: (planId: number, type: "card" | "button", state: boolean) => void;
     buttonLoading?: number;
+    isLoading?: boolean;
 };
 export type Plan = {
     plan_id: number;

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -76,7 +76,6 @@ function NoteTextArea(_a) {
     }, [value, title, file, isEditable]);
     (0, react_1.useEffect)(function () {
         if (!saveButtonLoading) {
-            // keep previous behavior: reset only if not editable
             if (!isEditable) {
                 setIsActive(false);
                 setNoteValue("");
@@ -90,7 +89,6 @@ function NoteTextArea(_a) {
     }, [saveButtonLoading, isEditable]);
     (0, react_1.useEffect)(function () {
         if (isActive && noteAreaRef.current) {
-            // ensure textarea fits content
             noteAreaRef.current.style.height = "auto";
             noteAreaRef.current.style.height = "".concat(noteAreaRef.current.scrollHeight, "px");
             noteAreaRef.current.focus();
@@ -148,9 +146,7 @@ function NoteTextArea(_a) {
         return "".concat(start, "...").concat(extension);
     };
     return (react_1.default.createElement(react_2.Box, { w: width, borderRadius: "0.25rem", overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[300] : theme.colors.gray[200], bg: isActive ? theme.colors.gray[50] : "transparent", boxShadow: isActive ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.primary) : "none" },
-        !isActive && (react_1.default.createElement(react_2.Flex, { px: 4, 
-            //  py={4}
-            align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.white, borderRadius: "0.25rem", minH: "44px" },
+        !isActive && (react_1.default.createElement(react_2.Flex, { px: 4, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.white, borderRadius: "0.25rem", minH: "44px" },
             react_1.default.createElement(react_2.Text, { color: theme.colors.gray[300], fontStyle: "italic", fontSize: "md" }, "Add a note..."))),
         isActive && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.Box, { bg: theme.colors.white },
@@ -158,26 +154,23 @@ function NoteTextArea(_a) {
                         if (e.target.value.length === 0)
                             setTitleShow(false);
                         setTitleValue(e.target.value);
-                    }, placeholder: "Add a title...", variant: "unstyled", pl: 3, pt: 0, pr: 0, pb: 0, fontWeight: 500, fontSize: "0.95rem", _placeholder: {
+                    }, placeholder: "Add a title...", variant: "unstyled", pl: 3, fontWeight: 500, fontSize: "0.95rem", _placeholder: {
                         fontStyle: "italic",
                         color: theme.colors.gray[300],
                         background: theme.colors.white,
                     } })),
-                react_1.default.createElement(react_2.Box, { bg: theme.colors.white, 
-                    // borderRadius="6px"
-                    // border="1px solid"
-                    // borderColor="gray.100"
-                    minH: "80px", pl: 3, pt: 2, position: "relative" },
+                react_1.default.createElement(react_2.Box, { bg: theme.colors.white, minH: "80px", pl: 3, pt: 2, position: "relative" },
                     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 }))),
             react_1.default.createElement(react_2.Divider, null),
             react_1.default.createElement(react_2.Box, { px: 4, py: 3 },
-                react_1.default.createElement(react_2.Flex, { align: "center" },
-                    react_1.default.createElement(react_2.Flex, { align: "center", gap: 3 },
+                react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", w: "100%" },
+                    react_1.default.createElement(react_2.Flex, { align: "center", gap: 3, minW: 0 },
                         react_1.default.createElement(react_2.Box, { as: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", gap: 2 },
                             react_1.default.createElement(lucide_react_1.Paperclip, { size: 18 })),
                         react_1.default.createElement(react_2.Box, { h: "18px", w: "1px", bg: theme.colors.gray[200] }),
-                        !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.Text, { color: theme.colors.gray[600], fontSize: "sm", fontWeight: 500 }, titleValue ? titleValue : "Title"))),
-                    react_1.default.createElement(react_2.Flex, { ml: "auto", gap: 3, align: "center" },
+                        !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 },
+                            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")))),
+                    react_1.default.createElement(react_2.Flex, { gap: 3, align: "center", ml: "auto", flexShrink: 0 },
                         react_1.default.createElement(react_2.Button, { variant: "ghost", colorScheme: "gray", borderRadius: "6px", onClick: handleCloseTextArea, _hover: { bg: "transparent" } }, "Cancel"),
                         react_1.default.createElement(react_2.Button, { colorScheme: "purple", borderRadius: "8px", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: function () { return handleSubmit(noteValue, titleValue, files); } },
                             saveButtonLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.19",
+  "version": "2.2.21",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",