pixelize-design-library 1.1.44 → 1.1.47

package/dist/Components/AlertDialog/AlertDialog.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { AlertDialogsProps } from "./AlertDialogProps";
-declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key }: AlertDialogsProps) => React.JSX.Element;
+declare const AlertDialog: ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText, cancelButtonText, isConfirmLoading, onConfirm, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, confirmButtonColor, key, }: AlertDialogsProps) => React.JSX.Element;
 export default AlertDialog;

package/dist/Components/AlertDialog/AlertDialog.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@chakra-ui/react");
 var react_2 = __importDefault(require("react"));
 var AlertDialog = function (_a) {
-    var isOpen = _a.isOpen, onClose = _a.onClose, leastDestructiveRef = _a.leastDestructiveRef, content = _a.content, title = _a.title, _b = _a.confirmButtonText, confirmButtonText = _b === void 0 ? "Yes" : _b, _c = _a.cancelButtonText, cancelButtonText = _c === void 0 ? "No" : _c, isConfirmLoading = _a.isConfirmLoading, onConfirm = _a.onConfirm, headerStyle = _a.headerStyle, bodyStyle = _a.bodyStyle, footerStyle = _a.footerStyle, closeButtonStyle = _a.closeButtonStyle, button1Style = _a.button1Style, button2Style = _a.button2Style, isCentered = _a.isCentered, key = _a.key;
+    var isOpen = _a.isOpen, onClose = _a.onClose, leastDestructiveRef = _a.leastDestructiveRef, content = _a.content, title = _a.title, _b = _a.confirmButtonText, confirmButtonText = _b === void 0 ? "Yes" : _b, _c = _a.cancelButtonText, cancelButtonText = _c === void 0 ? "No" : _c, isConfirmLoading = _a.isConfirmLoading, onConfirm = _a.onConfirm, headerStyle = _a.headerStyle, bodyStyle = _a.bodyStyle, footerStyle = _a.footerStyle, closeButtonStyle = _a.closeButtonStyle, button1Style = _a.button1Style, button2Style = _a.button2Style, isCentered = _a.isCentered, _d = _a.confirmButtonColor, confirmButtonColor = _d === void 0 ? "red" : _d, key = _a.key;
     return (react_2.default.createElement(react_1.AlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, key: key },
         react_2.default.createElement(react_1.AlertDialogOverlay, null),
         react_2.default.createElement(react_1.AlertDialogContent, null,
@@ -14,7 +14,7 @@ var AlertDialog = function (_a) {
             react_2.default.createElement(react_1.AlertDialogCloseButton, { sx: closeButtonStyle }),
             react_2.default.createElement(react_1.AlertDialogBody, { sx: bodyStyle }, content),
             react_2.default.createElement(react_1.AlertDialogFooter, { sx: footerStyle },
-                react_2.default.createElement(react_1.Button, { ref: null, onClick: onClose, sx: button1Style }, cancelButtonText),
-                react_2.default.createElement(react_1.Button, { colorScheme: "red", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, sx: button2Style }, confirmButtonText)))));
+                react_2.default.createElement(react_1.Button, { ref: null, onClick: onClose, size: "sm", sx: button1Style }, cancelButtonText),
+                react_2.default.createElement(react_1.Button, { colorScheme: confirmButtonColor, onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style }, confirmButtonText)))));
 };
 exports.default = AlertDialog;

package/dist/Components/AlertDialog/AlertDialogProps.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { AlertDialogProps, AlertProps } from "@chakra-ui/react";
+import { ButtonProps } from "../Button/ButtonProps";
 export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "leastDestructiveRef"> & Pick<AlertProps, "addRole" | "colorScheme" | "size" | "status" | "variant"> & {
     title: string;
     content: string;
@@ -15,4 +16,5 @@ export type AlertDialogsProps = Pick<AlertDialogProps, "isOpen" | "onClose" | "l
     button1Style?: React.CSSProperties;
     button2Style?: React.CSSProperties;
     key?: string | number;
+    confirmButtonColor?: ButtonProps["color"];
 };

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { ApexBarChartProps } from "./ApexBarChartProps";
-export default function ApexBarChart({ data, Labels, title, titlePosition, height, width, barColor, xAxisStyle, yAxisStyle, titleStyle, }: ApexBarChartProps): React.JSX.Element;
+export default function ApexBarChart({ data, labels, title, titlePosition, height, width, barColor, xAxisStyle, yAxisStyle, titleStyle, }: ApexBarChartProps): React.JSX.Element;

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
 function ApexBarChart(_a) {
-    var data = _a.data, Labels = _a.Labels, title = _a.title, titlePosition = _a.titlePosition, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, _d = _a.barColor, barColor = _d === void 0 ? ["#3182ce"] : _d, _e = _a.xAxisStyle, xAxisStyle = _e === void 0 ? {
+    var data = _a.data, labels = _a.labels, title = _a.title, titlePosition = _a.titlePosition, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, _d = _a.barColor, barColor = _d === void 0 ? ["#3182ce"] : _d, _e = _a.xAxisStyle, xAxisStyle = _e === void 0 ? {
         color: "#ffffff",
     } : _e, _f = _a.yAxisStyle, yAxisStyle = _f === void 0 ? {
         color: "#ffffff",
@@ -35,7 +35,7 @@ function ApexBarChart(_a) {
             },
         },
         xaxis: {
-            categories: Labels,
+            categories: labels,
             labels: {
                 style: xAxisStyle,
             },

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChartProps.d.ts

@@ -1,8 +1,8 @@
 export type ApexBarChartProps = {
     data: number[];
-    Labels: string[];
+    labels: string[];
     title?: string;
-    titlePosition?: 'left' | 'center' | 'right';
+    titlePosition?: "left" | "center" | "right";
     height?: number;
     width?: number;
     barColor?: string[];

package/dist/Components/ProfileCard/ProfileCard.d.ts

@@ -9,4 +9,4 @@ export declare const ProfileCardBody: React.FC<{
 export declare const ProfileCardFooter: React.FC<{
     children: React.ReactNode;
 }>;
-export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, CardHeaderStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): React.JSX.Element;
+export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): React.JSX.Element;

package/dist/Components/ProfileCard/ProfileCard.js

@@ -33,7 +33,7 @@ var ProfileCardFooter = function (_a) {
 };
 exports.ProfileCardFooter = ProfileCardFooter;
 function ProfileCard(_a) {
-    var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d, CardStyle = _a.CardStyle, CardHeaderStyle = _a.CardHeaderStyle, borderTopColor = _a.borderTopColor, borderLeftColor = _a.borderLeftColor;
+    var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d, CardStyle = _a.CardStyle, CardHeaderStyle = _a.CardHeaderStyle, CardBodyStyle = _a.CardBodyStyle, borderTopColor = _a.borderTopColor, borderLeftColor = _a.borderLeftColor;
     var isReactElement = function (child) {
         return child !== null && typeof child === "object" && "type" in child;
     };
@@ -51,7 +51,7 @@ function ProfileCard(_a) {
                     borderWidth: dividersize,
                     borderStyle: dividervariant,
                 } }))),
-        react_1.default.createElement(react_2.CardBody, null, body),
+        react_1.default.createElement(react_2.CardBody, { sx: CardBodyStyle }, body),
         footer && react_1.default.createElement(react_2.CardFooter, null, footer)));
 }
 exports.default = ProfileCard;

package/dist/Components/ProfileCard/ProfileCardProps.d.ts

@@ -10,6 +10,7 @@ export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" |
     dividervariant?: "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset";
     CardStyle?: React.CSSProperties;
     CardHeaderStyle?: React.CSSProperties;
+    CardBodyStyle?: React.CSSProperties;
     borderTopColor?: boolean;
     borderLeftColor?: boolean;
 };

package/dist/Components/Switch/Switch.js

@@ -17,11 +17,11 @@ var Highlight = styled_1.default.div(templateObject_2 || (templateObject_2 = __m
 });
 // background-color: ${({ backgroundColor }) => backgroundColor};
 var SwitchList = styled_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  list-style-type: none;\n  margin: 0;\n  padding: 1px;\n  height: 100%;\n  z-index: 1;\n"], ["\n  display: flex;\n  list-style-type: none;\n  margin: 0;\n  padding: 1px;\n  height: 100%;\n  z-index: 1;\n"])));
-var SwitchOption = styled_1.default.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 110px;\n  height: 100%;\n  color: black;\n  transition: color 0.3s ease;\n  font-weight: 400;\n  padding: 2px;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 110px;\n  height: 100%;\n  color: black;\n  transition: color 0.3s ease;\n  font-weight: 400;\n  padding: 2px;\n  ", "\n"])), function (_a) {
+var SwitchOption = styled_1.default.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 110px;\n  height: 100%;\n  color: black;\n  transition: color 0.3s ease;\n  font-weight: 400;\n  padding: 2px;\n  font-size: 14px;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 110px;\n  height: 100%;\n  color: black;\n  transition: color 0.3s ease;\n  font-weight: 400;\n  padding: 2px;\n  font-size: 14px;\n  ", "\n"])), function (_a) {
     var isActive = _a.isActive;
-    return isActive && (0, react_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-weight: 700;\n      background-color: transparent;\n      z-index: 1;\n    "], ["\n      font-weight: 700;\n      background-color: transparent;\n      z-index: 1;\n    "])));
+    return isActive && (0, react_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-weight: 600;\n      background-color: transparent;\n      z-index: 1;\n    "], ["\n      font-weight: 600;\n      background-color: transparent;\n      z-index: 1;\n    "])));
 });
-var SwitchContainerHeader = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: white;\n  height: auto;\n  padding: 3px 3px 3px 3px;\n  width: 200px;\n  border-radius: 20px;\n  border: 1px solid #e2e7ee;\n"], ["\n  background-color: white;\n  height: auto;\n  padding: 3px 3px 3px 3px;\n  width: 200px;\n  border-radius: 20px;\n  border: 1px solid #e2e7ee;\n"])));
+var SwitchContainerHeader = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: white;\n  height: auto;\n  padding: 1px;\n  width: 200px;\n  border-radius: 20px;\n  border: 1px solid #e2e7ee;\n"], ["\n  background-color: white;\n  height: auto;\n  padding: 1px;\n  width: 200px;\n  border-radius: 20px;\n  border: 1px solid #e2e7ee;\n"])));
 function Switch(_a) {
     var leftText = _a.leftText, rightText = _a.rightText, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onSwitchToggle = _a.onSwitchToggle, switchActive = _a.switchActive;
     return (react_1.default.createElement(SwitchContainerHeader, null,

package/dist/Pages/chart.js

@@ -7,14 +7,16 @@ var react_1 = __importDefault(require("react"));
 var ApexBarChart_1 = __importDefault(require("../Components/Apexcharts/ApexBarChart/ApexBarChart"));
 var ApexPieChart_1 = __importDefault(require("../Components/Apexcharts/ApexPieChart/ApexPieChart"));
 var ChartPage = function () {
-    var data = Array.from({ length: 10 }, function () { return Math.floor(Math.random() * 100); });
+    var data = Array.from({ length: 10 }, function () {
+        return Math.floor(Math.random() * 100);
+    });
     var categories = data.map(function (_, index) { return "Category ".concat(index + 1); });
     var data1 = Array.from({ length: 10 }, function () {
         return Math.floor(Math.random() * 100);
     });
     var categories1 = data.map(function (_, index) { return "Category ".concat(index + 1); });
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(ApexBarChart_1.default, { data: data, Labels: categories, title: "Bar Chart", titlePosition: "left", 
+        react_1.default.createElement(ApexBarChart_1.default, { data: data, labels: categories, title: "Bar Chart", titlePosition: "left", 
             // barColor={["#00E396"]}
             // xAxisStyle={{ colors: "#00E396", fontSize: "12px" }}
             // yAxisStyle={{ colors: "#00E396", fontSize: "12px" }}

package/package.json

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