pixelize-design-library 1.0.34 → 1.0.35

package/README.md

@@ -32,7 +32,7 @@ PixelizeDesign Library Components Are Below
 - Card,
 - Checkbox,
 - Dropdown,
-- Editor, \* New
+- Editor, 
 - InputTextArea,
 - Loading,
 - Modal,
@@ -54,3 +54,4 @@ PixelizeDesign Library Components Are Below
 - Toaster,
   - useToaster,
 - ToolTip,
+- VerifyEmailOtp \* New

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

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

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

@@ -0,0 +1,40 @@
+"use strict";
+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 lu_1 = require("react-icons/lu");
+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;
+    return (react_1.default.createElement(react_2.Card, { style: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            width: "97%",
+        } },
+        react_1.default.createElement("div", { style: { padding: "3%" } },
+            react_1.default.createElement(lu_1.LuMailCheck, { size: "100", color: "#3182ce" })),
+        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 }, 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?",
+            " ",
+            react_1.default.createElement("button", { onClick: function () { return resendMaill(); }, style: {
+                    background: "none",
+                    color: "#3182ce",
+                    border: "none",
+                    padding: "0",
+                    font: "inherit",
+                    cursor: "pointer",
+                    outline: "inherit",
+                } }, "Resend Code"))));
+}
+exports.default = VerifyEmailOtp;

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

@@ -0,0 +1,9 @@
+export type VerifyEmailOtpProps = {
+    resendMaill: () => void;
+    onChange: (value: string) => void;
+    onComplete: (value: string) => void;
+    placeholder?: string;
+    pins: number;
+    title: string;
+    description: string;
+};

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

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

package/dist/Layout.js

@@ -66,6 +66,7 @@ var Card_1 = __importDefault(require("./Components/Card/Card"));
 var NoteTextArea_1 = __importDefault(require("./Components/NoteTextArea/NoteTextArea"));
 var DropDown_1 = __importDefault(require("./Components/Dropdown/DropDown"));
 var Editor_1 = __importDefault(require("./Components/Editor/Editor"));
+var VerifyEmailOtp_1 = __importDefault(require("./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp"));
 var Layout = function () {
     var navmenus = [
         { title: "Account Settings", url: "myaccount" },
@@ -399,6 +400,14 @@ var Layout = function () {
                     react_2.default.createElement("br", null),
                     react_2.default.createElement(Editor_1.default, { value: "heeeeejhbjhvbjhvbhj jbhkjhbiubviu iuhiuhiuhiu", config: { readonly: false, width: "900px" }, onChange: function (val) {
                             console.log(val);
-                        } }))))));
+                        } }),
+                    react_2.default.createElement("br", null),
+                    react_2.default.createElement(VerifyEmailOtp_1.default, { resendMaill: function () {
+                            console.log("hello");
+                        }, onChange: function (val) {
+                            console.log("onchange", val);
+                        }, onComplete: function (val) {
+                            console.log("onComplete", val);
+                        }, pins: 6, title: "Please Verify Account", description: "Enter the six digit code we sent to your email address to verify" }))))));
 };
 exports.default = Layout;

package/dist/index.d.ts

@@ -26,4 +26,5 @@ import Table from "./Components/Table/Table";
 import TextInput from "./Components/Input/TextInput";
 import Toaster, { useToaster } from "./Components/Toaster/Toaster";
 import ToolTip from "./Components/ToolTip/ToolTip";
-export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Select, SideBar, Skeletons, Switch, Table, TextInput, Toaster, ToolTip, useToaster, };
+import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp";
+export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, Dropdown, Editor, InputTextArea, Loading, Modal, NavigationBar, NoteTextArea, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Select, SideBar, Skeletons, Switch, Table, TextInput, Toaster, ToolTip, useToaster, VerifyEmailOtp, };

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.useToaster = exports.ToolTip = exports.Toaster = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
+exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.TextInput = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.Select = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.NoteTextArea = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
 var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarChart/ApexBarChart"));
 exports.ApexBarChart = ApexBarChart_1.default;
 var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
@@ -86,3 +86,5 @@ exports.Toaster = Toaster_1.default;
 Object.defineProperty(exports, "useToaster", { enumerable: true, get: function () { return Toaster_1.useToaster; } });
 var ToolTip_1 = __importDefault(require("./Components/ToolTip/ToolTip"));
 exports.ToolTip = ToolTip_1.default;
+var VerifyEmailOtp_1 = __importDefault(require("./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp"));
+exports.VerifyEmailOtp = VerifyEmailOtp_1.default;

package/package.json

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