pixelize-design-library 2.2.18 → 2.2.20

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/KanbanBoard/MeasuredItem.js

@@ -1,5 +1,4 @@
 "use strict";
-// import React, { useRef, useLayoutEffect } from "react";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -24,52 +23,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// type MeasuredItemProps = {
-//   index: number;
-//   setSize: (index: number, size: number) => void;
-//   children: React.ReactNode;
-// };
-// const MeasuredItem: React.FC<MeasuredItemProps> = ({
-//   index,
-//   setSize,
-//   children,
-// }) => {
-//   const ref = useRef<HTMLDivElement | null>(null);
-//   const prevHeight = useRef<number | null>(null);
-//   // measure function
-//   const measure = () => {
-//     if (ref.current) {
-//       const height = Math.round(ref.current.getBoundingClientRect().height);
-//       if (prevHeight.current !== height) {
-//         prevHeight.current = height;
-//         setSize(index, height);
-//       }
-//     }
-//   };
-//   useLayoutEffect(() => {
-//     // initial measure
-//     measure();
-//     // ResizeObserver to capture any content changes (collapse/expand)
-//     let ro: ResizeObserver | undefined;
-//     if (typeof ResizeObserver !== "undefined") {
-//       ro = new ResizeObserver(() => {
-//         measure();
-//       });
-//       if (ref.current) ro.observe(ref.current);
-//     } else {
-//       // fallback: window resize
-//       window.addEventListener("resize", measure);
-//     }
-//     return () => {
-//       if (ro && ref.current) ro.unobserve(ref.current);
-//       if (!ro) window.removeEventListener("resize", measure);
-//     };
-//     // We intentionally do not add children to deps to avoid extra runs; ResizeObserver catches updates.
-//     // eslint-disable-next-line react-hooks/exhaustive-deps
-//   }, [index, setSize]);
-//   return <div ref={ref}>{children}</div>;
-// };
-// export default MeasuredItem;
 var react_1 = __importStar(require("react"));
 var MeasuredItem = function (_a) {
     var index = _a.index, setSize = _a.setSize, children = _a.children;

package/dist/Components/Slider/Slider.js

@@ -1,8 +1,4 @@
 "use strict";
-// import React, { useEffect, useRef, useState } from "react";
-// import { Box, Flex, IconButton, Image } from "@chakra-ui/react";
-// import { ChevronLeft, ChevronRight } from "lucide-react";
-// import { useCustomTheme } from "../../Theme/useCustomTheme";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -36,123 +32,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// type ImageSliderProps = {
-//   images: SliderImage[];
-//   interval?: number;
-//   isArrow?: boolean;
-// };
-// type SliderImage = {
-//   id: string | number;
-//   label?: string;
-//   previewUrl: string;
-//   order: number;
-// };
-// const Slider: React.FC<ImageSliderProps> = ({
-//   images,
-//   interval = 5000,
-//   isArrow = false,
-// }) => {
-//   const { colors } = useCustomTheme();
-//   const [currentIndex, setCurrentIndex] = useState(0);
-//   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-//   const nextSlide = () => setCurrentIndex((prev) => (prev + 1) % images.length);
-//   const prevSlide = () =>
-//     setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
-//   useEffect(() => {
-//     if (interval > 0) {
-//       timeoutRef.current = setTimeout(nextSlide, interval);
-//     }
-//     return () => {
-//       if (timeoutRef.current) clearTimeout(timeoutRef.current);
-//     };
-//   }, [currentIndex, interval]);
-//   return (
-//     <Box
-//       position="relative"
-//       w="100%"
-//       h="30rem"
-//       overflow="hidden"
-//     >
-//       <Flex
-//         w={`${images.length * 100}vw`}
-//         transform={`translateX(-${currentIndex * 100}vw)`}
-//         transition="transform 0.5s ease"
-//       >
-//         {[...images]
-//           .sort((a, b) => a.order - b.order)
-//           .map((image, idx) => (
-//             <Box
-//               key={image.id}
-//               w="100vw"
-//               h="30rem"
-//               flexShrink={0}
-//               display="flex"
-//               justifyContent="center"
-//               alignItems="center"
-//             >
-//               <Image
-//                 src={image.previewUrl}
-//                 alt={`Slide ${idx + 1}`}
-//                 objectFit="cover"
-//                 w="100vw"
-//                 h="100%"
-//               />
-//             </Box>
-//           ))}
-//       </Flex>
-//       {isArrow && (
-//         <>
-//           <IconButton
-//             icon={<ChevronLeft color={colors?.gray?.[800]} />}
-//             aria-label="Previous Slide"
-//             onClick={prevSlide}
-//             position="absolute"
-//             top="50%"
-//             left="1rem"
-//             transform="translateY(-50%)"
-//             zIndex={2}
-//             variant="ghost"
-//             _hover={{ bg: colors?.gray?.[200] }}
-//           />
-//           <IconButton
-//             icon={<ChevronRight color={colors?.gray?.[800]} />}
-//             aria-label="Next Slide"
-//             onClick={nextSlide}
-//             position="absolute"
-//             top="50%"
-//             right="1rem"
-//             transform="translateY(-50%)"
-//             zIndex={2}
-//             variant="ghost"
-//             _hover={{ bg: colors?.gray?.[200] }}
-//           />
-//         </>
-//       )}
-//       <Flex
-//         position="absolute"
-//         bottom="1rem"
-//         left="50%"
-//         transform="translateX(-50%)"
-//         gap="0.5rem"
-//         zIndex={2}
-//       >
-//         {images.map((_, idx) => (
-//           <Box
-//             key={idx}
-//             w="0.8rem"
-//             h="0.8rem"
-//             bg={idx === currentIndex ? "white" : "whiteAlpha.600"}
-//             borderRadius="full"
-//             cursor="pointer"
-//             onClick={() => setCurrentIndex(idx)}
-//             transition="all 0.3s"
-//           />
-//         ))}
-//       </Flex>
-//     </Box>
-//   );
-// };
-// export default Slider;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");

package/dist/Components/Timeline/Timeline.js

@@ -90,8 +90,6 @@ var Timeline = function (_a) {
                 react_1.default.createElement(react_2.Box, { fontSize: "1rem", fontWeight: "400", color: theme.colors.black, bg: theme.colors.gray[50], border: "0.063rem solid ".concat(theme.colors.gray[300]), borderRadius: "0.313rem", px: { base: 3, md: 6 }, py: 1, textAlign: "center", zIndex: 1 }, date)),
             groupedEvents[date].map(function (event, index) {
                 var isLeft = index % 2 === 0 && !isMobile;
-                // const title = event.title; /* "Updated" | "Created" | Delete*/
-                console.log(event, "event");
                 return (react_1.default.createElement(react_2.Flex, { key: index, justify: isLeft ? "flex-end" : "flex-start", flexDir: { base: "column", md: "row" }, align: "center", mb: 6, position: "relative", textAlign: { base: "left", md: isLeft ? "left" : "right" } },
                     react_1.default.createElement(react_2.Box, { position: "absolute", left: { base: "1.25rem", md: "50%" }, transform: { base: "none", md: "translateX(-50%)" }, w: "1.875rem", h: "1.875rem", bg: theme.colors.gray[50], borderRadius: "full", border: "0.063rem solid ".concat(theme.colors.gray[300]), display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1 }, getIcon(event)),
                     react_1.default.createElement(react_2.Text, { position: { base: "relative", md: "absolute" }, left: { md: isLeft ? "38%" : "53%" }, ml: { base: "3.125rem", md: 0 }, color: theme.colors.gray[500] }, formatTimestamp(event.created_at, "time")),

package/package.json

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