pixelize-design-library 2.1.68 → 2.1.71

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

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

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

@@ -0,0 +1,86 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 getCardStyles = function (isActive, isNextUpgrade, popular, theme) {
+    if (isActive) {
+        return {
+            badgeText: "Active Plan",
+            badgeColor: "0.125rem solid ".concat(theme.colors.green[500]),
+            buttonColor: theme.colors.green[500],
+            buttonColor50: theme.colors.green[50],
+        };
+    }
+    if (isNextUpgrade) {
+        return {
+            badgeText: "Upgrade Your Plan",
+            badgeColor: "0.125rem solid ".concat(theme.colors.primary[500]),
+            buttonColor: theme.colors.primary[500],
+            buttonColor50: theme.colors.primary[50],
+        };
+    }
+    if (popular) {
+        return {
+            badgeText: "Most Popular",
+            badgeColor: "0.125rem solid ".concat(theme.colors.primary[500]),
+            buttonColor: theme.colors.primary[500],
+            buttonColor50: theme.colors.primary[50],
+        };
+    }
+    return {
+        badgeText: "",
+        badgeColor: "",
+        buttonColor: theme.colors.primary[500],
+        buttonColor50: theme.colors.primary[50],
+    };
+};
+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 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"
+        ? {
+            borderColor: buttonColor,
+            color: buttonColor,
+            _hover: { bg: buttonColor50 },
+        }
+        : {
+            bg: buttonColor,
+            color: theme.colors.white,
+            _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); } },
+            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),
+                react_1.default.createElement(react_2.Heading, { as: "h3", size: "lg", mb: 4, color: theme.colors.gray[800] }, plan.name),
+                react_1.default.createElement(react_2.Heading, { as: "h4", size: "2xl", mb: 1, color: theme.colors.gray[800], display: "flex", justifyContent: "center" },
+                    react_1.default.createElement(react_2.Box, { fontSize: "1.5rem" }, "\u20B9"),
+                    billingCycle === "yearly" ? plan.yearlyPrice : plan.monthlyPrice,
+                    react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", justifyContent: "end", ml: 1 },
+                        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" },
+                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))); })))));
+};
+exports.default = PaymentCard;

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export type PaymentCardProps = {
+    plan: Plan;
+    isActive?: boolean;
+    isNextUpgrade?: boolean;
+    billingCycle: "monthly" | "yearly";
+    onSelect?: (planId: number) => void;
+    onHover?: (planId: number, type: "card" | "button", state: boolean) => void;
+};
+export type Plan = {
+    plan_id: number;
+    name: string;
+    description: string;
+    monthlyPrice: number;
+    yearlyPrice: number;
+    billing: string;
+    tax: string;
+    features: string[];
+    icon: React.ReactNode;
+    buttonText: string;
+    buttonVariant: "solid" | "outline" | "link";
+    popular?: boolean;
+};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Pages/card.js

@@ -30,7 +30,60 @@ var react_1 = __importDefault(require("react"));
 var Card_1 = __importDefault(require("../Components/Card/Card"));
 var ProfileCard_1 = __importStar(require("../Components/ProfileCard/ProfileCard"));
 var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var PaymentCard_1 = __importDefault(require("../Components/Card/PaymentCard/PaymentCard"));
+var plans = [
+    {
+        plan_id: 1,
+        name: "Free",
+        description: "Basic features for small teams",
+        monthlyPrice: 0,
+        yearlyPrice: 0,
+        billing: "per month",
+        tax: "+ GST",
+        features: ["User Management (1 User)", "Single Pipeline", "500 Records", "Contacts, Products & Activities Management", "Automations (3)"],
+        icon: react_1.default.createElement(lucide_react_1.Star, { size: 20 }),
+        buttonText: "Choose Starter",
+        buttonVariant: "solid",
+    },
+    {
+        plan_id: 2,
+        name: "Pro",
+        description: "Perfect for small teams and growing businesses.",
+        monthlyPrice: 499,
+        yearlyPrice: 399,
+        billing: "per month",
+        tax: "+ GST",
+        features: ["User Management (5 User)", "Everything in Free Edition +", "Team Pipelines (3)", "50,000 Records", "Email & WhatsApp Business Integration", "Automations (30)", "Mass emails with email insights", "10 custom fields/module"],
+        icon: react_1.default.createElement(lucide_react_1.Zap, { size: 20 }),
+        buttonText: "Choose Pro",
+        buttonVariant: "outline",
+        popular: true,
+    },
+    {
+        plan_id: 3,
+        name: "Enterprise",
+        description: "Unlimited access for large organizations",
+        monthlyPrice: 1499,
+        yearlyPrice: 1399,
+        billing: "per month",
+        tax: "+ GST",
+        features: ["User Management (Unlimited Users)", "Everything in Premier Edition +", "Team Pipelines (15)", "1 Million Records", "Advanced Automation Rules (100)", "File Cabinet pre-installed with 5 GB storage", "50 custom fields/module", "1000 mass mails/day", "Highest limits for features"],
+        icon: react_1.default.createElement(lucide_react_1.Gem, { size: 20 }),
+        buttonText: "Contact Sales",
+        buttonVariant: "solid",
+    },
+];
 var CardPage = function () {
+    var activePlanId = 1; // Example: current active plan
+    var nextUpgradeId = 2; // Example: suggest upgrade
+    var handleSelect = function (planId) {
+        console.log("Selected plan:", planId);
+    };
+    var handleHover = function (planId, type, state) {
+        console.log("".concat(type, " hover ").concat(state ? "enter" : "leave", " on plan"), planId);
+    };
+    // console.log(activePlanId,"activePlanId",nextUpgradeId,"nextUpgradeId");
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(Card_1.default, null,
             react_1.default.createElement("div", null, "hello")),
@@ -43,6 +96,10 @@ var CardPage = function () {
             react_1.default.createElement(ProfileCard_1.ProfileCardBody, null,
                 react_1.default.createElement(react_2.Text, null, "View a summary of all your customers over the last month.")),
             react_1.default.createElement(ProfileCard_1.ProfileCardFooter, null,
-                react_1.default.createElement(react_2.Button, { color: "blue" }, "View here")))));
+                react_1.default.createElement(react_2.Button, { color: "blue" }, "View here"))),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement(react_2.SimpleGrid, { columns: { base: 1, md: 3 }, spacing: 6 }, plans.map(function (plan) { return (react_1.default.createElement(PaymentCard_1.default, { key: plan.plan_id, plan: plan, billingCycle: "monthly", isActive: plan.plan_id === activePlanId, isNextUpgrade: plan.plan_id === nextUpgradeId, onSelect: handleSelect, onHover: handleHover })); }))));
 };
 exports.default = CardPage;

package/dist/Utils/table.js

@@ -60,37 +60,6 @@ var calculateLeftOffset = function (columns, index) {
     return columns.slice(0, index).reduce(function (sum, width) { return sum + width; }, 0);
 };
 exports.calculateLeftOffset = calculateLeftOffset;
-// export const searchAndSortData = (
-//   data: DataObject[],
-//   searchValues: Record<string, string>
-// ) => {
-//   const filteredData = data.filter((item) => {
-//     return Object.keys(searchValues).every((key) => {
-//       const searchValue = searchValues[key].toLowerCase();
-//       return item[key].toString().toLowerCase().includes(searchValue);
-//     });
-//   });
-//   return filteredData.sort((a, b) => {
-//     let aMatchCount = 0;
-//     let bMatchCount = 0;
-//     Object.keys(searchValues).forEach((key) => {
-//       const searchValue = searchValues[key].toLowerCase();
-//       if (a[key] && a[key].toString().toLowerCase() === searchValue) {
-//         aMatchCount++;
-//       }
-//       if (b[key] && b[key].toString().toLowerCase() === searchValue) {
-//         bMatchCount++;
-//       }
-//       if (a[key] && a[key].toString().toLowerCase().includes(searchValue)) {
-//         aMatchCount += 0.5;
-//       }
-//       if (b[key] && b[key].toString().toLowerCase().includes(searchValue)) {
-//         bMatchCount += 0.5;
-//       }
-//     });
-//     return bMatchCount - aMatchCount;
-//   });
-// };
 var extractTextFromReactNode = function (node) {
     if (typeof node === "string" || typeof node === "number") {
         return String(node);

package/dist/index.d.ts

@@ -54,5 +54,6 @@ import ProductCard from "./Components/ProductCard/ProductCard";
 import ProductDetails from "./Components/ProductDetails/ProductDetails";
 import PhoneNumberInput from "./Components/Input/PhoneNumberInput";
 import { InputSwitch } from "./Components/Input/Switch/InputSwitch";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+import PaymentCard from "./Components/Card/PaymentCard/PaymentCard";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = void 0;
+exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -151,4 +151,6 @@ var PhoneNumberInput_1 = __importDefault(require("./Components/Input/PhoneNumber
 exports.PhoneNumberInput = PhoneNumberInput_1.default;
 var InputSwitch_1 = require("./Components/Input/Switch/InputSwitch");
 Object.defineProperty(exports, "InputSwitch", { enumerable: true, get: function () { return InputSwitch_1.InputSwitch; } });
+var PaymentCard_1 = __importDefault(require("./Components/Card/PaymentCard/PaymentCard"));
+exports.PaymentCard = PaymentCard_1.default;
 exports.default = withTheme_1.default;

package/package.json

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