pixelize-design-library 2.1.72 → 2.1.74

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

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

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChart.js

@@ -0,0 +1,58 @@
+"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"));
+var ApexDonutChart = function (_a) {
+    var _b;
+    var data = _a.data, labels = _a.labels, title = _a.title, _c = _a.titlePosition, titlePosition = _c === void 0 ? "center" : _c, _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.titleStyle, titleStyle = _f === void 0 ? {
+        color: "#3182ce",
+        fontSize: "16px",
+        fontWeight: 600,
+        fontFamily: "Arial",
+    } : _f, _g = _a.legendStyle, legendStyle = _g === void 0 ? {
+        colors: "#000",
+        position: "bottom",
+        useSeriesColors: false,
+    } : _g;
+    var options = {
+        chart: {
+            type: "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: __assign(__assign({}, titleStyle), { fontSize: (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontSize)
+                    ? String(titleStyle.fontSize) // ✅ ensures string if number passed
+                    : undefined }),
+        },
+        dataLabels: {
+            enabled: true,
+        },
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: "donut", height: height, width: width })));
+};
+exports.default = ApexDonutChart;

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChartProps.d.ts

@@ -0,0 +1,21 @@
+export type ApexDonutChartProps = {
+    data: number[];
+    labels: string[];
+    title?: string;
+    titlePosition?: "left" | "center" | "right";
+    height?: number;
+    width?: number;
+    donutColors?: string[];
+    chartColor?: string[];
+    titleStyle?: {
+        color?: string;
+        fontSize?: string | number;
+        fontWeight?: number | string;
+        fontFamily?: string;
+    };
+    legendStyle?: {
+        colors?: string | string[];
+        useSeriesColors?: boolean;
+        position?: "top" | "right" | "bottom" | "left";
+    };
+};

package/dist/Components/Apexcharts/ApexDonutChart/ApexDonutChartProps.js

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

package/dist/Components/Dropdown/DropDown.js

@@ -79,7 +79,7 @@ var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
             var _a;
             return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, p: optionsSize === "sm" ? 1 : 2, px: 2, _hover: {
                     bg: theme.colors.gray[100],
-                    color: theme.colors.blue[500],
+                    color: theme.colors.primary[500],
                 }, display: "flex", alignItems: "center", cursor: "pointer", style: ItemStyle, borderBottom: divider ? "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]) : undefined, sx: {
                     "&:last-child": {
                         borderBottom: "none",

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -10,35 +10,23 @@ var lucide_react_1 = require("lucide-react");
 function VerifyEmailOtp(_a) {
     var resendMail = _a.resendMail, onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.placeholder, placeholder = _b === void 0 ? "" : _b, _c = _a.pins, pins = _c === void 0 ? 5 : _c, description = _a.description, title = _a.title, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isInvalid, isInvalid = _e === void 0 ? false : _e, styles = _a.styles;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement("div", { style: styles },
-        react_1.default.createElement("div", { style: {
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: "3%",
-            } },
-            react_1.default.createElement("div", { style: { padding: "3%" } },
-                react_1.default.createElement(lucide_react_1.MailCheck, { size: "100", color: theme.colors.primary[500] })),
-            react_1.default.createElement("h1", { style: { fontSize: "2rem", fontWeight: "bold", marginBottom: "2%" } }, title),
-            react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
-                description,
-                react_1.default.createElement("br", null),
-                " your new Pixel Account"),
-            react_1.default.createElement("div", { style: { marginBottom: "2%" } },
-                react_1.default.createElement(react_2.HStack, null,
-                    react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index })); })))),
-            react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
-                "Didn't receive the code?",
+    return (react_1.default.createElement(react_2.Box, { style: styles, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", p: 6, w: "100%", maxW: "400px", mx: "auto", borderColor: "gray.200", borderRadius: "lg" },
+        react_1.default.createElement(react_2.Box, { mb: 4 },
+            react_1.default.createElement(lucide_react_1.MailCheck, { size: 80, color: theme.colors.primary[500] })),
+        react_1.default.createElement(react_2.Text, { fontSize: "2xl", fontWeight: "bold", mb: 2, textAlign: "center" }, title),
+        react_1.default.createElement(react_2.Text, { fontSize: "md", textAlign: "center", color: "gray.600", mb: 6 },
+            description,
+            react_1.default.createElement("br", null),
+            "your new Pixel Account"),
+        react_1.default.createElement(react_2.HStack, { spacing: 3, mb: 6 },
+            react_1.default.createElement(react_2.PinInput, { placeholder: placeholder, onChange: onChange, onComplete: onComplete, isDisabled: isDisabled, isInvalid: isInvalid, size: "lg", focusBorderColor: theme.colors.primary[500] }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, borderRadius: "md", border: "1px solid", borderColor: "gray.300", _focus: {
+                    borderColor: theme.colors.primary[500],
+                    boxShadow: "0 0 0 1px ".concat(theme.colors.primary[500]),
+                } })); }))),
+        react_1.default.createElement(react_2.Flex, { justify: "center" },
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.600" },
+                "Didn\u2019t receive the code?",
                 " ",
-                react_1.default.createElement("button", { onClick: function () { return resendMail(); }, style: {
-                        background: "none",
-                        color: theme.colors.primary[700],
-                        border: "none",
-                        padding: "0",
-                        font: "inherit",
-                        cursor: "pointer",
-                        outline: "inherit",
-                    } }, "Resend Code")))));
+                react_1.default.createElement(react_2.Button, { variant: "link", color: theme.colors.primary[700], fontWeight: "semibold", onClick: resendMail }, "Resend Code")))));
 }
 exports.default = VerifyEmailOtp;

package/dist/Components/MultiSelect/MultiSelect.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { MultiSelectProps } from "./MultiSelectProps";
-export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, }: MultiSelectProps): React.JSX.Element;
+export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, helperText, errorMessage, }: MultiSelectProps): React.JSX.Element;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -42,11 +42,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     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_2 = require("@chakra-ui/react");
 var FormLabel_1 = require("../Common/FormLabel");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var generateUniqueId = (function () {
     var counter = 0;
     return function () {
@@ -55,11 +60,8 @@ var generateUniqueId = (function () {
     };
 })();
 function MultiSelect(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.label, label = _c === void 0 ? "label" : _c, _d = _a.isRequired, isRequired = _d === void 0 ? true : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, _f = _a.informationMessage, informationMessage = _f === void 0 ? "" : _f, name = _a.name, id = _a.id, _g = _a.placeholderText, placeholderText = _g === void 0 ? "Type valid email and press enter" : _g, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, size = _a.size, inputStyle = _a.inputStyle;
+    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.label, label = _c === void 0 ? "label" : _c, _d = _a.isRequired, isRequired = _d === void 0 ? true : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, _f = _a.informationMessage, informationMessage = _f === void 0 ? "" : _f, name = _a.name, id = _a.id, _g = _a.placeholderText, placeholderText = _g === void 0 ? "Type valid email and press enter" : _g, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, size = _a.size, inputStyle = _a.inputStyle, helperText = _a.helperText, errorMessage = _a.errorMessage;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var getPadding = function () {
-        return "0.5rem";
-    };
     var _h = (0, react_1.useState)(value), options = _h[0], setOptions = _h[1];
     var _j = (0, react_1.useState)(""), inputValue = _j[0], setInputValue = _j[1];
     var _k = (0, react_1.useState)(""), error = _k[0], setError = _k[1];
@@ -88,9 +90,6 @@ function MultiSelect(_a) {
                 setOptions(updatedOptions);
                 onValueChange(updatedOptions);
                 setInputValue("");
-                if (inputRef.current) {
-                    inputRef.current.focus();
-                }
             }
         }
         else if (e.key === "Backspace" && inputValue === "") {
@@ -104,12 +103,17 @@ function MultiSelect(_a) {
         setOptions(updatedOptions);
         onValueChange(updatedOptions);
     };
-    return (react_1.default.createElement(react_2.Box, { width: width, borderRadius: "md", backgroundColor: "white" },
+    return (react_1.default.createElement(react_2.Box, { width: width },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2 }, options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", variant: "solid", colorScheme: "gray" },
-            react_1.default.createElement(react_2.TagLabel, null, option.label),
-            react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemove(option); } }))); })),
-        react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.light, fontWeight: 600, color: theme.colors.gray[600], padding: getPadding(), fontSize: 15, letterSpacing: 0.7, borderRadius: "0.125rem" }), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholderText, marginTop: 2, marginLeft: 1 }),
-        error && (react_1.default.createElement(react_2.Text, { color: "red.500", marginTop: 2, marginLeft: 1 }, error))));
+        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2, align: "center", px: 2, border: "1px solid", borderColor: theme.colors.gray[300], borderRadius: "sm", bg: theme.colors.white, minH: "42px", _focusWithin: {
+                borderColor: theme.colors.primary[500],
+                boxShadow: "0 0 0 1px " + theme.colors.primary[500],
+            } },
+            options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", borderRadius: "full", variant: "subtle", colorScheme: "blue" },
+                react_1.default.createElement(react_2.TagLabel, null, option.label),
+                react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemove(option); } }))); }),
+            react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", flex: "1", style: __assign(__assign({}, inputStyle), { backgroundColor: "transparent", fontWeight: 500, color: theme.colors.gray[700], fontSize: 15, letterSpacing: 0.3 }), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })),
+        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }
 exports.default = MultiSelect;

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -13,6 +13,8 @@ export type MultiSelectProps = {
     isReadOnly?: boolean;
     size?: string;
     inputStyle?: {};
+    errorMessage?: string;
+    helperText?: string;
 };
 export type MultiSelctOPtions = {
     id: string;

package/dist/Components/NoteTextArea/NoteTextArea.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { NoteTextAreaProps } from "./NoteTextAreaProps";
-export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref, }: NoteTextAreaProps): React.JSX.Element;
+export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, }: NoteTextAreaProps): React.JSX.Element;