pixelize-design-library 2.2.17 → 2.2.19

package/dist/Components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { ButtonProps } from "./ButtonProps";
-declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, }: ButtonProps): React.JSX.Element;
+declare function Button({ label, children, onClick, opacity, variant, leftIcon, rightIcon, size, isDisabled, isLoading, loadingText, type, width, sx, colorScheme, ref, border, borderRadius, onMouseEnter, onMouseLeave, }: ButtonProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Button>;
 export default _default;

package/dist/Components/Button/Button.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 function Button(_a) {
-    var label = _a.label, children = _a.children, onClick = _a.onClick, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? "solid" : _b, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type, width = _a.width, sx = _a.sx, colorScheme = _a.colorScheme, ref = _a.ref, border = _a.border, borderRadius = _a.borderRadius;
-    return (react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius }, children !== null && children !== void 0 ? children : label));
+    var label = _a.label, children = _a.children, onClick = _a.onClick, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? "solid" : _b, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, size = _a.size, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, _e = _a.loadingText, loadingText = _e === void 0 ? "Loading" : _e, type = _a.type, width = _a.width, sx = _a.sx, colorScheme = _a.colorScheme, ref = _a.ref, border = _a.border, borderRadius = _a.borderRadius, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
+    return (react_1.default.createElement(react_2.Button, { type: type, onClick: onClick, width: width || "fit-content", variant: variant, size: size, isLoading: isLoading, isDisabled: isDisabled, loadingText: loadingText, leftIcon: leftIcon, rightIcon: rightIcon, ref: ref, colorScheme: colorScheme, sx: sx, opacity: opacity, border: border, borderRadius: borderRadius, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, children !== null && children !== void 0 ? children : label));
 }
 exports.default = (0, react_1.memo)(Button);

package/dist/Components/Button/ButtonProps.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
-export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius"> & {
+export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "spinner" | "sx" | "border" | "borderRadius" | "onMouseEnter" | "onMouseLeave"> & {
     label?: string;
     width?: string | number;
     size?: "lg" | "md" | "sm" | "xs" | "xl";

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, }: PaymentCardProps) => React.JSX.Element;
+declare const PaymentCard: ({ plan, isActive, isNextUpgrade, billingCycle, onSelect, onHover, buttonLoading, }: PaymentCardProps) => React.JSX.Element;
 export default PaymentCard;

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

@@ -18,6 +18,7 @@ var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../../Button/Button"));
 var getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
     if (isActive) {
         return {
@@ -51,7 +52,7 @@ 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;
+    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 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 variantStyles = plan.buttonVariant === "outline"
@@ -78,8 +79,8 @@ var PaymentCard = function (_a) {
                         react_1.default.createElement(react_2.Text, { fontSize: "0.9rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.billing),
                         react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", fontWeight: "normal", color: theme.colors.gray[600] }, plan.tax))),
                 react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], mt: 3 }, plan.description)),
-            !isActive && (react_1.default.createElement(react_2.Button, __assign({ w: "full", variant: plan.buttonVariant, mb: 6, 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 }, plan.features.map(function (feature, i) { return (react_1.default.createElement(react_2.Flex, { key: i, align: "center" },
+            !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))); })))));
 };

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

@@ -6,6 +6,7 @@ export type PaymentCardProps = {
     billingCycle: "monthly" | "yearly";
     onSelect?: (planId: number) => void;
     onHover?: (planId: number, type: "card" | "button", state: boolean) => void;
+    buttonLoading?: number;
 };
 export type Plan = {
     plan_id: number;
@@ -20,4 +21,5 @@ export type Plan = {
     buttonText: string;
     buttonVariant: "solid" | "outline" | "link";
     popular?: boolean;
+    buttonLoadingText?: string;
 };

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.17",
+  "version": "2.2.19",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/Assets/defaultLogo.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { useCustomTheme } from "../Theme/useCustomTheme";
-
-const DefaultLogo = () => {
-  const theme = useCustomTheme();
-  return (
-    <svg
-      width="12.09"
-      height="15.95"
-      viewBox="0 0 31 29"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
-        fill={theme.colors.black}
-      />
-      <path
-        d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
-        fill={theme.colors.black}
-      />
-      <path
-        d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
-        fill={theme.colors.black}
-      />
-    </svg>
-
-  )
-};
-
-export default DefaultLogo;