pixelize-design-library 1.1.31 → 1.1.32

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { VerifyEmailOtpProps } from "./VerifyEmailOtpProps";
-export default function VerifyEmailOtp({ resendMaill, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): React.JSX.Element;
+export default function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder, pins, description, title, isDisabled, isInvalid, styles, }: VerifyEmailOtpProps): React.JSX.Element;

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

@@ -8,7 +8,7 @@ var react_2 = require("@chakra-ui/react");
 var lu_1 = require("react-icons/lu");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 function VerifyEmailOtp(_a) {
-    var resendMaill = _a.resendMaill, 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 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: {
@@ -31,7 +31,7 @@ function VerifyEmailOtp(_a) {
             react_1.default.createElement("p", { style: { textAlign: "center", marginBottom: "2%" } },
                 "Didn't receive the code?",
                 " ",
-                react_1.default.createElement("button", { onClick: function () { return resendMaill(); }, style: {
+                react_1.default.createElement("button", { onClick: function () { return resendMail(); }, style: {
                         background: "none",
                         color: theme.colors.primary[700],
                         border: "none",

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtpProps.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export type VerifyEmailOtpProps = {
-    resendMaill: () => void;
+    resendMail: () => void;
     onChange: (value: string) => void;
     onComplete: (value: string) => void;
     placeholder?: string;

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, }: MultiSelectProps): React.JSX.Element;
+export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, }: MultiSelectProps): React.JSX.Element;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -1,4 +1,15 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,6 +45,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 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 generateUniqueId = (function () {
     var counter = 0;
     return function () {
@@ -42,18 +55,32 @@ var generateUniqueId = (function () {
     };
 })();
 function MultiSelect(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange;
-    var _b = (0, react_1.useState)(value), options = _b[0], setOptions = _b[1];
-    var _c = (0, react_1.useState)(""), inputValue = _c[0], setInputValue = _c[1];
+    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 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];
     var inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         setOptions(value);
     }, [value]);
     var handleInputChange = function (e) {
         setInputValue(e.target.value);
+        setError("");
+    };
+    var validateEmail = function (email) {
+        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
     };
     var handleKeyDown = function (e) {
         if (e.key === "Enter" && inputValue.trim() !== "") {
+            if (!validateEmail(inputValue)) {
+                setError("Invalid email address");
+                return;
+            }
             var existingOption = options.find(function (option) { return option.label === inputValue; });
             if (!existingOption) {
                 var newOption = { id: generateUniqueId(), label: inputValue };
@@ -77,10 +104,12 @@ function MultiSelect(_a) {
         setOptions(updatedOptions);
         onValueChange(updatedOptions);
     };
-    return (react_1.default.createElement(react_2.Box, { width: "100%", borderRadius: "md", padding: "2", backgroundColor: "white" },
+    return (react_1.default.createElement(react_2.Box, { width: width, borderRadius: "md", padding: "2", backgroundColor: "white" },
+        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, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: "Type and press enter", marginTop: 2, marginLeft: 1 })));
+        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))));
 }
 exports.default = MultiSelect;

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

@@ -1,6 +1,18 @@
 export type MultiSelectProps = {
     value: MultiSelctOPtions[];
     onValueChange: (options: MultiSelctOPtions[]) => void;
+    width?: string;
+    label?: string;
+    id?: string;
+    name?: string;
+    isRequired?: boolean;
+    isInformation?: boolean;
+    informationMessage?: string;
+    placeholderText?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    size?: string;
+    inputStyle?: {};
 };
 export type MultiSelctOPtions = {
     id: string;

package/dist/Pages/selectSearch.js

@@ -30,7 +30,7 @@ var react_1 = __importStar(require("react"));
 var SelectSearch_1 = __importDefault(require("../Components/SelectSearch/SelectSearch"));
 var fi_1 = require("react-icons/fi");
 var SelectSearchs = function () {
-    var _a = (0, react_1.useState)("Option 1"), selectSearchText = _a[0], setSelectSearchText = _a[1];
+    var _a = (0, react_1.useState)(""), selectSearchText = _a[0], setSelectSearchText = _a[1];
     var _b = (0, react_1.useState)(), selectedOption = _b[0], setSelectedOption = _b[1];
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(SelectSearch_1.default, { options: [
@@ -44,11 +44,9 @@ var SelectSearchs = function () {
                 setSelectSearchText(value.toString());
                 console.log(value);
             }, initialSelectedOption: { id: "1", label: "Option 1" }, onOptionSelect: function (data) {
-                // setSelectSearchText(label);
-                console.log("Selected option:", data);
-            }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: true, onOptionMultiSelect: function (data) {
+                setSelectSearchText(data.label);
+            }, name: "hai", label: "SelectSearch", searchQuery: selectSearchText, rightIcon: react_1.default.createElement(fi_1.FiUser, { color: "gray.300" }), isMultipleSelect: false, onOptionMultiSelect: function (data) {
                 setSelectedOption(data);
-                console.log("Selected option:", data);
             } })));
 };
 exports.default = SelectSearchs;

package/dist/Pages/verifyEmail.js

@@ -7,7 +7,7 @@ var react_1 = __importDefault(require("react"));
 var VerifyEmailOtp_1 = __importDefault(require("../Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp"));
 var VerifyEmailPage = function () {
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(VerifyEmailOtp_1.default, { resendMaill: function () {
+        react_1.default.createElement(VerifyEmailOtp_1.default, { resendMail: function () {
                 console.log("hello");
             }, onChange: function (val) {
                 console.log("onchange", val);

package/dist/Theme/Default/fonts.d.ts

@@ -0,0 +1,35 @@
+import "@fontsource/ubuntu-sans";
+declare const fontOptions: {
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+};
+export default fontOptions;

package/dist/Theme/Default/fonts.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@fontsource/ubuntu-sans");
+var fontOptions = {
+    fonts: {
+        body: "Ubuntu Sans, serif",
+        heading: "Ubuntu Sans, serif",
+        mono: "Ubuntu Sans, monospace",
+    },
+    fontSizes: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+    },
+    fontWeights: {
+        hairline: 100,
+        thin: 200,
+        light: 300,
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        black: 900,
+    },
+};
+exports.default = fontOptions;

package/package.json

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

package/dist/Pages/katable.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const katable: () => React.JSX.Element;
-export default katable;

package/dist/Pages/katable.js

@@ -1,194 +0,0 @@
-"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 KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
-var KaTable_2 = require("../Components/KaTable/KaTable");
-var icons_1 = require("@chakra-ui/icons");
-var katable = function () {
-    var DataType = KaTable_2.TableEnums.DataType;
-    var dataArray = Array(50)
-        .fill(undefined)
-        .map(function (_, index) { return ({
-        column1: index % 2 === 0,
-        column2: "column:2 row:".concat(index + 1),
-        column3: index + 5,
-        column4: index + 10,
-        column5: index + 15,
-        column6: index + 20,
-        column7: index + 25,
-        column8: index + 30,
-        column9: index + 35,
-        column10: index + 40,
-        column11: index + 45,
-        column12: index + 50,
-        column13: index + 55,
-        column14: index + 60,
-        column15: new Date(2022, 11, index),
-        id: index + 1,
-    }); });
-    var columns = [
-        {
-            key: "column1",
-            title: "Column 1",
-            dataType: DataType.Boolean,
-            width: 150,
-            columnFreeze: true,
-            customHeader: false,
-        },
-        {
-            key: "column2",
-            title: "Column 2",
-            dataType: DataType.String,
-            width: 150,
-        },
-        {
-            key: "column3",
-            title: "Column 3",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column4",
-            title: "Column 4",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column5",
-            title: "Column 5",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column6",
-            title: "Column 6",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column7",
-            title: "Column 7",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column8",
-            title: "Column 8",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column9",
-            title: "Column 9",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column10",
-            title: "Column 10",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column11",
-            title: "Column 11",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column12",
-            title: "Column 12",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column13",
-            title: "Column 13",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column14",
-            title: "Column 14",
-            dataType: DataType.Number,
-            width: 150,
-        },
-        {
-            key: "column15",
-            title: "Column 15",
-            dataType: DataType.Date,
-            width: 150,
-        },
-        {
-            key: "editColumn",
-            width: 80,
-            customHeader: false,
-        },
-    ];
-    var kaTableFormat = function (props) {
-        if (props.column.dataType === DataType.Date) {
-            return (props.value &&
-                props.value.toLocaleDateString("en", {
-                    month: "2-digit",
-                    day: "2-digit",
-                    year: "numeric",
-                }));
-        }
-    };
-    var EditButton = function (_a) {
-        var dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue;
-        return (react_1.default.createElement("div", { className: "edit-cell-button" },
-            react_1.default.createElement(icons_1.EditIcon, null),
-            react_1.default.createElement(icons_1.DeleteIcon, null)));
-    };
-    var handleSortChange = function (newSortState, columnName) {
-        console.log("Sort state for ".concat(columnName, " changed to:"), newSortState);
-    };
-    var handleMenuItemClick = function (action, columnName) {
-        console.log("Menu item clicked for ".concat(columnName, ":"), action);
-    };
-    var menuItems = [
-        { label: "Sort", action: "Sort" },
-        { label: "Hide column", action: "Hide column" },
-        {
-            label: "Filter",
-            submenu: [
-                { label: "Filter by Date", action: "Filter by Date" },
-                { label: "Filter by Name", action: "Filter by Name" },
-                { label: "Filter by Status", action: "Filter by Status" },
-            ],
-        },
-    ];
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
-                console.log("Row clicked", rowKeyValue);
-            }, onSelectionChange: function (selectedRows) {
-                console.log("Selected rows:", selectedRows);
-            }, menuItems: menuItems, onSortChange: handleSortChange, onMenuItemClick: handleMenuItemClick, format: kaTableFormat, childComponents: {
-                cellText: {
-                    content: function (props) {
-                        if (props.column.key === "editColumn") {
-                            return react_1.default.createElement(EditButton, __assign({}, props));
-                        }
-                    },
-                },
-            }, loading: {
-                enabled: false,
-                text: "Loading data",
-            } })));
-};
-exports.default = katable;