pixelize-design-library 2.1.74 → 2.1.76

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { ApexLineChartProps } from "./ApexLineChartProps";
+declare const ApexLineChart: ({ data, labels, title, height, width, lineColors, titlePosition, titleStyle, variant, }: ApexLineChartProps) => React.JSX.Element;
+export default ApexLineChart;

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -0,0 +1,125 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+var ApexLineChart = function (_a) {
+    var data = _a.data, labels = _a.labels, title = _a.title, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 600 : _c, _d = _a.lineColors, lineColors = _d === void 0 ? ["#3182ce", "#e53e3e", "#38a169"] : _d, _e = _a.titlePosition, titlePosition = _e === void 0 ? "center" : _e, _f = _a.titleStyle, titleStyle = _f === void 0 ? {
+        color: "#3182ce",
+        fontSize: "16px",
+        fontWeight: 600,
+        fontFamily: "Arial",
+    } : _f, _g = _a.variant, variant = _g === void 0 ? "basic" : _g;
+    var _h = (0, react_1.useState)([
+        {
+            name: "Series 1",
+            data: Array.isArray(data) ? data : [],
+        },
+    ]), series = _h[0], setSeries = _h[1];
+    var chartRef = (0, react_1.useRef)(null);
+    // 🔄 Handle realtime updates
+    (0, react_1.useEffect)(function () {
+        if (variant === "realtime") {
+            var interval_1 = setInterval(function () {
+                setSeries(function (prev) {
+                    var newData = __spreadArray([], prev[0].data, true);
+                    newData.push(Math.floor(Math.random() * 100) + 10); // simulate
+                    if (newData.length > 20)
+                        newData.shift(); // keep window size
+                    return [{ name: "Series 1", data: newData }];
+                });
+            }, 1000);
+            return function () { return clearInterval(interval_1); };
+        }
+    }, [variant]);
+    //   const options: ApexOptions = {
+    //     chart: {
+    //       type: "line",
+    //       animations:
+    //         variant === "realtime"
+    //           ? {
+    //               enabled: true,
+    //               easing: "linear",
+    //               dynamicAnimation: { speed: 1000 },
+    //             }
+    //           : undefined,
+    //       zoom: { enabled: true },
+    //       toolbar: { show: true },
+    //     },
+    //     stroke: { curve: "smooth" },
+    //     colors: lineColors,
+    //     xaxis: labels
+    //       ? { categories: labels }
+    //       : { type: variant === "realtime" ? "numeric" : "category" },
+    //     title: {
+    //       text: title,
+    //       align: titlePosition ?? "center",
+    //       style: titleStyle,
+    //     },
+    //     markers: { size: 4 },
+    //     dataLabels: { enabled: false },
+    //   };
+    var options = {
+        chart: {
+            type: "line",
+            animations: variant === "realtime"
+                ? {
+                    enabled: true,
+                    speed: 1000,
+                    dynamicAnimation: { speed: 1000 }, // ✅ allowed
+                }
+                : { enabled: false },
+            zoom: { enabled: true },
+            toolbar: { show: true },
+        },
+        stroke: { curve: "smooth" },
+        colors: lineColors,
+        xaxis: labels
+            ? { categories: labels }
+            : { type: variant === "realtime" ? "numeric" : "category" },
+        title: {
+            text: title,
+            align: titlePosition !== null && titlePosition !== void 0 ? titlePosition : "center",
+            style: titleStyle,
+        },
+        markers: { size: 4 },
+        dataLabels: { enabled: false },
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_apexcharts_1.default, { ref: chartRef, options: options, series: series, type: "line", height: height, width: width })));
+};
+exports.default = ApexLineChart;

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts

@@ -0,0 +1,22 @@
+export type ApexLineChartProps = {
+    variant?: LineChartVariant;
+    data: number[];
+    labels?: string[];
+    title?: string;
+    height?: number;
+    width?: number;
+    lineColors?: string[];
+    titlePosition?: "left" | "center" | "right";
+    titleStyle?: {
+        color?: string;
+        fontSize?: string;
+        fontWeight?: number | string;
+        fontFamily?: string;
+    };
+    legendStyle?: {
+        colors?: string | string[];
+        useSeriesColors?: boolean;
+        position?: "top" | "right" | "bottom" | "left";
+    };
+};
+export type LineChartVariant = "basic" | "realtime";

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.js

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

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

@@ -1,3 +1,4 @@
 import React from "react";
 import { ApexPieChartProps } from "./ApexPieChartProps";
-export default function ApexPieChart({ data, labels, title, titlePosition, height, width, chartColor, titleStyle, }: ApexPieChartProps): React.JSX.Element;
+declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendStyle, variant, }: ApexPieChartProps) => React.JSX.Element;
+export default ApexPieChart;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -1,29 +1,126 @@
 "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_apexcharts_1 = __importDefault(require("react-apexcharts"));
-function ApexPieChart(_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, chartColor = _a.chartColor, _d = _a.titleStyle, titleStyle = _d === void 0 ? {
+var ApexPieChart = function (_a) {
+    var _b, _c;
+    var data = _a.data, labels = _a.labels, title = _a.title, _d = _a.height, height = _d === void 0 ? 400 : _d, _e = _a.width, width = _e === void 0 ? 500 : _e, donutColors = _a.donutColors, chartColor = _a.chartColor, _f = _a.titlePosition, titlePosition = _f === void 0 ? "center" : _f, _g = _a.titleStyle, titleStyle = _g === void 0 ? {
         color: "#3182ce",
-    } : _d;
-    var options = {
-        chart: {
-            type: "pie",
-            height: 350,
-        },
-        labels: labels,
-        title: {
+        fontSize: "16px",
+        fontWeight: 600,
+        fontFamily: "Arial",
+    } : _g, _h = _a.legendStyle, legendStyle = _h === void 0 ? {
+        colors: "#000",
+        position: "bottom",
+        useSeriesColors: false,
+    } : _h, _j = _a.variant, variant = _j === void 0 ? "pie" : _j;
+    var extraOptions = {};
+    switch (variant) {
+        case "semi-donut":
+            extraOptions = {
+                plotOptions: {
+                    pie: {
+                        startAngle: -90,
+                        endAngle: 90,
+                        offsetY: 10,
+                    },
+                },
+            };
+            break;
+        case "monochrome-pie":
+            extraOptions = {
+                theme: {
+                    monochrome: {
+                        enabled: true,
+                        shadeTo: "light",
+                        shadeIntensity: 0.65,
+                    },
+                },
+            };
+            break;
+        case "gradient-donut":
+            extraOptions = {
+                fill: {
+                    type: "gradient",
+                },
+            };
+            break;
+        case "donut-with-pattern":
+            extraOptions = {
+                fill: {
+                    type: "pattern",
+                    pattern: {
+                        style: ["verticalLines", "squares", "horizontalLines", "circles"],
+                    },
+                },
+            };
+            break;
+        case "pie-with-image":
+            extraOptions = {
+                fill: {
+                    type: "image",
+                    image: {
+                        src: [
+                            "https://i.imgur.com/UM3mrju.jpg",
+                            "https://i.imgur.com/NpPOqQq.jpg",
+                        ],
+                    },
+                },
+            };
+            break;
+        case "update-donut":
+            extraOptions = {
+                plotOptions: {
+                    pie: {
+                        donut: {
+                            labels: {
+                                show: true,
+                                total: {
+                                    show: true,
+                                    label: "Total",
+                                },
+                            },
+                        },
+                    },
+                },
+            };
+            break;
+        case "pie":
+            extraOptions = {
+                chart: { type: "pie" },
+            };
+            break;
+        default:
+            break;
+    }
+    var options = __assign({ chart: {
+            type: variant.includes("pie") ? "pie" : "donut",
+        }, labels: labels, colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"], legend: {
+            position: legendStyle.position,
+            labels: {
+                colors: legendStyle.colors,
+                useSeriesColors: legendStyle.useSeriesColors,
+            },
+        }, title: {
             text: title,
             align: titlePosition,
             style: titleStyle,
-        },
-        colors: chartColor,
-    };
-    var series = data;
+        }, dataLabels: { enabled: true } }, extraOptions);
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "pie", height: height, width: width })));
-}
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: (_c = options.chart) === null || _c === void 0 ? void 0 : _c.type, height: height, width: width })));
+};
 exports.default = ApexPieChart;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts

@@ -1,41 +1,23 @@
 export type ApexPieChartProps = {
+    variant?: DonutPieVariant;
     data: number[];
     labels: string[];
     title?: string;
-    titlePosition?: "left" | "center" | "right";
     height?: number;
     width?: number;
+    donutColors?: string[];
     chartColor?: string[];
-    titleStyle?: StyleProps;
-};
-type StyleProps = {
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string | number;
-    color?: string;
+    titlePosition?: "left" | "center" | "right";
+    titleStyle?: {
+        color?: string;
+        fontSize?: string;
+        fontWeight?: number | string;
+        fontFamily?: string;
+    };
+    legendStyle?: {
+        colors?: string | string[];
+        useSeriesColors?: boolean;
+        position?: "top" | "right" | "bottom" | "left";
+    };
 };
-export interface ApexOptions {
-    annotations?: ApexAnnotations;
-    chart?: ApexChart;
-    colors?: any[];
-    dataLabels?: ApexDataLabels;
-    fill?: ApexFill;
-    forecastDataPoints?: ApexForecastDataPoints;
-    grid?: ApexGrid;
-    labels?: string[];
-    legend?: ApexLegend;
-    markers?: ApexMarkers;
-    noData?: ApexNoData;
-    plotOptions?: ApexPlotOptions;
-    responsive?: ApexResponsive[];
-    series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
-    states?: ApexStates;
-    stroke?: ApexStroke;
-    subtitle?: ApexTitleSubtitle;
-    theme?: ApexTheme;
-    title?: ApexTitleSubtitle;
-    tooltip?: ApexTooltip;
-    xaxis?: ApexXAxis;
-    yaxis?: ApexYAxis | ApexYAxis[];
-}
-export {};
+export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -1,11 +1,4 @@
 "use strict";
-// import React, { useEffect, useRef, useState } from "react";
-// import { NoteTextAreaProps } from "./NoteTextAreaProps";
-// import styled from "@emotion/styled";
-// import { Spinner } from "@chakra-ui/react";
-// import { CustomThemeProps } from "../../Theme/themeProps";
-// import { useCustomTheme } from "../../Theme/useCustomTheme";
-// import { Paperclip, X } from "lucide-react";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -39,380 +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 });
-// const Container = styled.div<{ isActive: boolean }>`
-//   border: ${({ isActive }) =>
-//     isActive ? "1px solid #3182ce" : "1px solid #c0c6cc"};
-//   border-radius: 5px;
-//   box-shadow: ${({ isActive }) =>
-//     isActive
-//       ? "-1px 1px 8px 4px rgb(49 130 206 / 24%), 0px 2px 6px 0 rgb(49 130 206 / 19%)"
-//       : "none"};
-// `;
-// const TextAreaContainer = styled.div<{ isActive: boolean }>`
-//   width: 100%;
-//   cursor: text;
-//   padding: 12px 15px;
-//   display: ${({ isActive }) => (isActive ? "block" : "none")};
-// `;
-// const PlaceholderText = styled.div<{ isActive: boolean }>`
-//   color: #c0c6cc;
-//   width: 100%;
-//   cursor: text;
-//   display: ${({ isActive }) => (isActive ? "block" : "none")};
-//   padding: 12px 15px;
-// `;
-// const InputTitle = styled.input`
-//   width: 100%;
-//   height: auto;
-//   border: none;
-//   outline: none;
-//   background: none;
-//   color: black;
-//   fontsize: 1rem;
-//   fontweight: 500;
-//   marginbottom: 2px;
-// `;
-// const NotesTextArea = styled.textarea<{ isActive: boolean; noteValue: string }>`
-//   color: ${({ isActive, noteValue }) =>
-//     isActive && noteValue ? "#000000" : "#c0c6cc"};
-//   width: 100%;
-//   height: auto;
-//   border: none;
-//   outline: none;
-//   background: none;
-//   fontweight: 300;
-// `;
-// const FileUploadLabel = styled.label`
-//   cursor: pointer;
-// `;
-// const AddTitleButton = styled.div`
-//   color: #616e88;
-//   cursor: pointer;
-//   fontsize: 0.8rem;
-// `;
-// const Button = styled.button<{
-//   noteValue: string;
-//   isSaveButton: boolean;
-//   isLoading: boolean;
-//   theme: CustomThemeProps;
-//   disabled: boolean;
-// }>`
-//   border: none;
-//   padding: 3px 15px;
-//   text-align: center;
-//   text-decoration: none;
-//   background: ${({ isSaveButton, noteValue, isLoading, theme }) =>
-//     isSaveButton
-//       ? noteValue && !isLoading
-//         ? theme.colors.primary[500]
-//         : theme.colors.primary[500]
-//       : "white"};
-//   color: ${({ isSaveButton, isLoading }) =>
-//     isSaveButton && !isLoading ? "white" : "white"};
-//   font-size: 1rem;
-//   margin-right: 5px;
-//   border-radius: 5px;
-//   opacity: ${({ isSaveButton, noteValue, isLoading, disabled }) =>
-//     isSaveButton && (!noteValue || isLoading || disabled) ? "0.5" : "1"};
-//   cursor: ${({ isSaveButton, noteValue, isLoading, disabled }) =>
-//     isSaveButton && (!noteValue || isLoading || disabled)
-//       ? "initial"
-//       : "pointer"};
-//   pointer-events: ${({ isLoading }) => (isLoading ? "none" : "auto")};
-// `;
-// const CancelButton = styled.button`
-//   border: none;
-//   color: #5e5c5c;
-//   padding: 3px 15px;
-//   text-align: center;
-//   text-decoration: none;
-//   background: white;
-//   font-size: 1rem;
-//   margin-right: 5px;
-//   border-radius: 5px;
-// `;
-// const FileViewer = styled.div`
-//   display: flex;
-//   align-items: center;
-//   justify-content: space-between;
-//   width: 300px;
-// `;
-// const FileEdit = styled(X)`
-//   cursor: pointer;
-//   color: #ff0000;
-// `;
-// const ErrorText = styled.div`
-//   color: #ff0000;
-//   font-size: 0.8rem;
-//   margin-top: 8px;
-// `;
-// const countWords = (text: string) => {
-//   return text.trim().split(/\s+/).length;
-// };
-// export default function NoteTextArea({
-//   width = "100%",
-//   handleSubmit,
-//   handleCancel,
-//   value,
-//   title,
-//   file,
-//   isEditable = false,
-//   saveButtonLoading,
-//   maxFileSize = 1 * 1024 * 1024,
-//   maxFilesSizeError = "Some files are too large. Maximum allowed size is",
-//   maxNoteWordCount = 15,
-//   onChange,
-//   ref,
-// }: NoteTextAreaProps) {
-//   const theme = useCustomTheme();
-//   const noteAreaRef = useRef<HTMLTextAreaElement>(null);
-//   const [isActive, setIsActive] = useState<boolean>(false);
-//   const [noteValue, setNoteValue] = useState<string>("");
-//   const [titleValue, setTitleValue] = useState<string>("");
-//   const [titleShow, setTitleShow] = useState<boolean>(false);
-//   const [files, setFiles] = useState<File[]>([]);
-//   const [fileError, setFileError] = useState<string>("");
-//   const [isSaveDisabled, setIsSaveDisabled] = useState(false);
-//   useEffect(() => {
-//     const titleWordCount = countWords(titleValue);
-//     setIsSaveDisabled(titleWordCount > maxNoteWordCount);
-//   }, [titleValue, maxNoteWordCount]);
-//   useEffect(() => {
-//     const noteWordCount = countWords(noteValue);
-//     setIsSaveDisabled(noteWordCount > maxNoteWordCount);
-//   }, [noteValue, maxNoteWordCount]);
-//   useEffect(() => {
-//     if (isEditable) {
-//       setIsActive(true);
-//       if (value) {
-//         setNoteValue(value);
-//       }
-//       if (title) {
-//         setTitleValue(title);
-//         setTitleShow(true);
-//       }
-//       if (file) {
-//         setFiles(file);
-//       }
-//     }
-//   }, [value, title, file, isEditable]);
-//   useEffect(() => {
-//     if (!saveButtonLoading) {
-//       setIsActive(false);
-//       if (!isEditable) {
-//         setNoteValue("");
-//         setTitleValue("");
-//         setTitleShow(false);
-//         setFiles([]);
-//       }
-//     }
-//     if (isEditable) {
-//       setIsActive(true);
-//     }
-//   }, [saveButtonLoading, isEditable]);
-//   const handleTextArea = () => {
-//     setIsActive(true);
-//     if (!isEditable) {
-//       setNoteValue("");
-//       setTitleValue("");
-//       setTitleShow(false);
-//       setFiles([]);
-//     }
-//   };
-//   const handleCloseTextArea = () => {
-//     setIsActive(false);
-//     if (handleCancel) {
-//       handleCancel(!isActive);
-//     }
-//     if (!isEditable) {
-//       setNoteValue("");
-//       setTitleValue("");
-//       setTitleShow(false);
-//       setFiles([]);
-//     }
-//     setFileError("");
-//   };
-//   const handleNoteChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-//     setNoteValue(event.target.value);
-//     onChange?.(event.target.value);
-//     adjustHeight();
-//   };
-//   useEffect(() => {
-//     if (isActive && noteAreaRef.current) {
-//       noteAreaRef.current.focus();
-//     }
-//   }, [isActive]);
-//   const adjustHeight = () => {
-//     const textarea = noteAreaRef.current;
-//     if (!textarea) return;
-//     textarea.style.height = "auto";
-//     textarea.style.height = `${textarea.scrollHeight}px`;
-//   };
-//   const handleSetTitle = () => {
-//     setTitleShow(true);
-//   };
-//   const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-//     event.target.value.length === 0 && setTitleShow(false);
-//     setTitleValue(event.target.value);
-//   };
-//   const formatBytes = (bytes: any, decimals = 2) => {
-//     if (bytes === 0) return "0 Bytes";
-//     const k = 1024;
-//     const dm = decimals < 0 ? 0 : decimals;
-//     const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-//     const i = Math.floor(Math.log(bytes) / Math.log(k));
-//     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-//   };
-//   const shortenFileName = (name: string, maxLength = 20) => {
-//     const extension = name.substring(name.lastIndexOf("."));
-//     if (name.length <= maxLength) return name;
-//     const nameWithoutExtension = name.replace(extension, "");
-//     const start = nameWithoutExtension.substring(
-//       0,
-//       maxLength - extension.length - 3
-//     );
-//     return `${start}...${extension} `;
-//   };
-//   return (
-//     <Container style={{ width }} isActive={isActive}>
-//       <PlaceholderText isActive={!isActive} onClick={handleTextArea}>
-//         <span>Add a note...</span>
-//       </PlaceholderText>
-//       <TextAreaContainer isActive={isActive}>
-//         {titleShow && (
-//           <InputTitle
-//             value={titleValue}
-//             onChange={handleTitleChange}
-//             placeholder="Add a title..."
-//             ref={ref}
-//           />
-//         )}
-//         <NotesTextArea
-//           ref={noteAreaRef}
-//           isActive={isActive}
-//           noteValue={noteValue}
-//           value={noteValue}
-//           onChange={handleNoteChange}
-//           placeholder="Add a note..."
-//         />
-//       </TextAreaContainer>
-//       {isActive && (
-//         <>
-//           <hr style={{ margin: 0 }} />
-//           <div style={{ padding: "12px 15px" }}>
-//             <div style={{ display: "flex", alignItems: "center" }}>
-//               <FileUploadLabel htmlFor="file-upload">
-//                 <Paperclip size={17} />
-//                 <input
-//                   id="file-upload"
-//                   type="file"
-//                   style={{ display: "none" }}
-//                   onChange={(e) => {
-//                     const newFiles = Array.from(e.target.files || []);
-//                     const validFiles = newFiles.filter(
-//                       (file) => file.size <= maxFileSize
-//                     );
-//                     const invalidFiles = newFiles.filter(
-//                       (file) => file.size > maxFileSize
-//                     );
-//                     if (invalidFiles.length > 0) {
-//                       setFileError(
-//                         `${maxFilesSizeError} ${formatBytes(maxFileSize)}.`
-//                       );
-//                     } else {
-//                       setFileError("");
-//                     }
-//                     if (validFiles.length > 0) {
-//                       setFiles((prevFiles) => [...prevFiles, ...validFiles]);
-//                     }
-//                   }}
-//                   multiple
-//                   // onChange={(event) => {
-//                   //   if (event.target.files && event.target.files.length > 0) {
-//                   //     const filesArray = Array.from(event.target.files);
-//                   //     const validFiles = filesArray.filter(
-//                   //       (file) => file.size <= maxFileSize
-//                   //     );
-//                   //     setFiles([...files, ...validFiles]);
-//                   //   }
-//                   // }}
-//                 />
-//               </FileUploadLabel>
-//               {!titleShow && (
-//                 <>
-//                   <div
-//                     style={{
-//                       height: "15px",
-//                       width: "1px",
-//                       backgroundColor: "#c0c6cc",
-//                       marginRight: "5px",
-//                       marginLeft: "5px",
-//                     }}
-//                   ></div>
-//                   <AddTitleButton onClick={handleSetTitle}>
-//                     Add a Title
-//                   </AddTitleButton>
-//                 </>
-//               )}
-//               <div style={{ marginLeft: "auto" }}>
-//                 <CancelButton onClick={handleCloseTextArea}>
-//                   Cancel
-//                 </CancelButton>
-//                 <Button
-//                   isSaveButton={true}
-//                   noteValue={noteValue}
-//                   isLoading={saveButtonLoading}
-//                   disabled={!noteValue || isSaveDisabled}
-//                   theme={theme}
-//                   onClick={() => {
-//                     handleSubmit(noteValue, titleValue, files);
-//                     // handleCloseTextArea();
-//                   }}
-//                 >
-//                   {saveButtonLoading && (
-//                     <span style={{ marginRight: "6px" }}>
-//                       <Spinner
-//                         thickness="2px"
-//                         speed="0.75s"
-//                         emptyColor="gray.200"
-//                         color="blue.500"
-//                         size="xs"
-//                       />
-//                     </span>
-//                   )}
-//                   Save
-//                 </Button>
-//               </div>
-//             </div>
-//             <div style={{ display: "flex", gap: "10px" }}>
-//               <div>Note:</div>
-//               <div>You can add up to {maxNoteWordCount} words only</div>
-//             </div>
-//             {fileError && <ErrorText>{fileError}</ErrorText>}{" "}
-//             {/* Display file error */}
-//             {files.length > 0 && (
-//               <div>
-//                 {files.map((item, index) => (
-//                   <FileViewer key={index}>
-//                     <>
-//                       <span>{shortenFileName(item.name)}</span>
-//                       <span>{formatBytes(item.size)}</span>
-//                     </>
-//                     <FileEdit
-//                       onClick={() =>
-//                         setFiles(files.filter((fileItem) => fileItem !== item))
-//                       }
-//                     />
-//                   </FileViewer>
-//                 ))}
-//               </div>
-//             )}
-//           </div>
-//         </>
-//       )}
-//     </Container>
-//   );
-// }
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");

package/dist/Pages/chart.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 ApexDonutChart_1 = __importDefault(require("../Components/Apexcharts/ApexDonutChart/ApexDonutChart"));
+var ApexLineChart_1 = __importDefault(require("../Components/Apexcharts/ApexLineChart/ApexLineChart"));
 var ChartPage = function () {
     var data = Array.from({ length: 10 }, function () { return Math.floor(Math.random() * 100); });
     var categories = data.map(function (_, index) { return "Category ".concat(index + 1); });
@@ -15,12 +15,21 @@ var ChartPage = function () {
     });
     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", 
-            // barColor={["#00E396"]}
+        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" }}
             titleStyle: { color: "#00E396" } }),
-        react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "Pie Chart", titlePosition: "left", chartColor: ["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"], titleStyle: { color: "#00E396" } }),
-        react_1.default.createElement(ApexDonutChart_1.default, { data: data1, labels: categories1, title: "Donut Chart", titlePosition: "left", chartColor: ["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"], titleStyle: { color: "#00E396" } })));
+        react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "Pie Chart", titlePosition: "left", chartColor: ["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"], titleStyle: { color: "#00E396" }, variant: "pie" }),
+        react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "donut Chart", titlePosition: "left", chartColor: ["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"], titleStyle: { color: "#00E396" }, variant: "donut" }),
+        react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "update-donut", variant: "update-donut" }),
+        react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "Monochrome Pie", variant: "monochrome-pie" }),
+        react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "Gradient Donut", variant: "gradient-donut" }),
+        react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "Semi Donut", variant: "semi-donut", titlePosition: "left", chartColor: ["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"], titleStyle: { color: "#00E396" } }),
+        react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "donut-with-pattern", variant: "donut-with-pattern", titlePosition: "left", 
+            // chartColor={["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"]}
+            titleStyle: { color: "#00E396" } }),
+        react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "pie-with-image", variant: "pie-with-image", titlePosition: "left", chartColor: ["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"], titleStyle: { color: "#00E396" } }),
+        react_1.default.createElement(ApexLineChart_1.default, { variant: "basic", data: [10, 20, 30, 40, 50], labels: ["Jan", "Feb", "Mar", "Apr", "May"], title: "Basic Line Chart", lineColors: ["#3182ce"], height: 300, width: 600 }),
+        react_1.default.createElement(ApexLineChart_1.default, { variant: "realtime", data: [15, 25, 35], title: "Realtime Line Chart", lineColors: ["#e53e3e"], height: 300, width: 600 })));
 };
 exports.default = ChartPage;

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import Accordian from "./Components/Accordion/Accordion";
 import AlertDialog from "./Components/AlertDialog/AlertDialog";
 import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
 import ApexPieChart from "./Components/Apexcharts/ApexPieChart/ApexPieChart";
-import ApexDonutChart from "./Components/Apexcharts/ApexDonutChart/ApexDonutChart";
 import Breadcrumbs from "./Components/Breadcrumbs/Breadcrumbs";
 import Button from "./Components/Button/Button";
 import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon";
@@ -56,5 +55,6 @@ import ProductDetails from "./Components/ProductDetails/ProductDetails";
 import PhoneNumberInput from "./Components/Input/PhoneNumberInput";
 import { InputSwitch } from "./Components/Input/Switch/InputSwitch";
 import PaymentCard from "./Components/Card/PaymentCard/PaymentCard";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexDonutChart, 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, };
+import ApexLineChart from "./Components/Apexcharts/ApexLineChart/ApexLineChart";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexLineChart, 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,7 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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.ApexDonutChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+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.ApexLineChart = 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 = exports.SearchSelect = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
@@ -37,8 +37,6 @@ var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarCha
 exports.ApexBarChart = ApexBarChart_1.default;
 var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
 exports.ApexPieChart = ApexPieChart_1.default;
-var ApexDonutChart_1 = __importDefault(require("./Components/Apexcharts/ApexDonutChart/ApexDonutChart"));
-exports.ApexDonutChart = ApexDonutChart_1.default;
 var Breadcrumbs_1 = __importDefault(require("./Components/Breadcrumbs/Breadcrumbs"));
 exports.Breadcrumbs = Breadcrumbs_1.default;
 var Button_1 = __importDefault(require("./Components/Button/Button"));
@@ -155,4 +153,6 @@ 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;
+var ApexLineChart_1 = __importDefault(require("./Components/Apexcharts/ApexLineChart/ApexLineChart"));
+exports.ApexLineChart = ApexLineChart_1.default;
 exports.default = withTheme_1.default;

package/package.json

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