wini-web-components 2.2.8 → 2.3.2

package/dist/component/wini-icon/winicon.js

@@ -1,112 +1,121 @@
-"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);
-    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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Winicon = void 0;
-var react_1 = __importStar(require("react"));
-var winicon_module_css_1 = __importDefault(require("./winicon.module.css"));
-function Winicon(_a) {
-    var _this = this;
-    var id = _a.id, src = _a.src, link = _a.link, className = _a.className, style = _a.style, size = _a.size, color = _a.color, alt = _a.alt, onClick = _a.onClick;
-    var _b = (0, react_1.useState)(), svgData = _b[0], setSvgData = _b[1];
-    var cdnSrc = "https://cdn.jsdelivr.net/gh/WiniGit/icon-library@latest/";
-    (0, react_1.useEffect)(function () {
-        if (src) {
-            fetch(cdnSrc + src + ".svg").then(function (res) { return __awaiter(_this, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        _a = setSvgData;
-                        return [4 /*yield*/, res.text()];
-                    case 1:
-                        _a.apply(void 0, [_b.sent()]);
-                        return [2 /*return*/];
-                }
-            }); }); }).catch(function () { setSvgData(alt !== null && alt !== void 0 ? alt : "error"); });
-        }
-        else if (link) {
-            fetch(link).then(function (res) { return __awaiter(_this, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        _a = setSvgData;
-                        return [4 /*yield*/, res.text()];
-                    case 1:
-                        _a.apply(void 0, [_b.sent()]);
-                        return [2 /*return*/];
-                }
-            }); }); });
-        }
-    }, [src, link]);
-    return react_1.default.createElement("div", { id: id, onClick: onClick, className: "".concat(winicon_module_css_1.default['wini-icon'], " ").concat(svgData ? "" : "skeleton-loading", " ").concat(onClick ? winicon_module_css_1.default['clickable'] : '', " ").concat(className !== null && className !== void 0 ? className : '', " ").concat(src ? src.split("/").map(function (e, i) { return i === 0 ? "".concat(e, "-icon") : e.replace(" ", "-"); }).join(" ") : '').concat(link ? ' link-icon' : ""), style: (style ? __assign(__assign({}, style), { '--size': size, '--color': color }) : { '--size': size, '--color': color }), dangerouslySetInnerHTML: { __html: svgData !== null && svgData !== void 0 ? svgData : '' } });
-}
-exports.Winicon = Winicon;
+"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);
+    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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Winicon = Winicon;
+var react_1 = __importStar(require("react"));
+var winicon_module_css_1 = __importDefault(require("./winicon.module.css"));
+function Winicon(_a) {
+    var _this = this;
+    var id = _a.id, src = _a.src, link = _a.link, className = _a.className, style = _a.style, size = _a.size, color = _a.color, alt = _a.alt, onClick = _a.onClick;
+    var _b = (0, react_1.useState)(), svgData = _b[0], setSvgData = _b[1];
+    var cdnSrc = "https://cdn.jsdelivr.net/gh/WiniGit/icon-library@latest/";
+    (0, react_1.useEffect)(function () {
+        if (src) {
+            fetch(cdnSrc + src + ".svg").then(function (res) { return __awaiter(_this, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = setSvgData;
+                        return [4 /*yield*/, res.text()];
+                    case 1:
+                        _a.apply(void 0, [_b.sent()]);
+                        return [2 /*return*/];
+                }
+            }); }); }).catch(function () { setSvgData(alt !== null && alt !== void 0 ? alt : "error"); });
+        }
+        else if (link) {
+            fetch(link).then(function (res) { return __awaiter(_this, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = setSvgData;
+                        return [4 /*yield*/, res.text()];
+                    case 1:
+                        _a.apply(void 0, [_b.sent()]);
+                        return [2 /*return*/];
+                }
+            }); }); });
+        }
+    }, [src, link]);
+    return react_1.default.createElement("div", { id: id, onClick: onClick, className: "".concat(winicon_module_css_1.default['wini-icon'], " ").concat(svgData ? "" : "skeleton-loading", " ").concat(onClick ? winicon_module_css_1.default['clickable'] : '', " ").concat(className !== null && className !== void 0 ? className : '', " ").concat(src ? src.split("/").map(function (e, i) { return i === 0 ? "".concat(e, "-icon") : e.replace(" ", "-"); }).join(" ") : '').concat(link ? ' link-icon' : ""), style: (style ? __assign(__assign({}, style), { '--size': size, '--color': color }) : { '--size': size, '--color': color }), dangerouslySetInnerHTML: { __html: svgData !== null && svgData !== void 0 ? svgData : '' } });
+}

package/dist/form/login/view.d.ts

@@ -1,40 +1,40 @@
-import React, { CSSProperties } from 'react';
-import { FieldValues, UseFormReturn } from 'react-hook-form';
-interface Props {
-    logo: React.ReactNode | string;
-    formData: {
-        "username": {
-            label: string;
-            name: string;
-            prefix?: React.ReactNode;
-            onValidate?: React.FocusEventHandler<HTMLInputElement>;
-            maxLength?: number;
-        };
-        "password": {
-            label: string;
-            name: string;
-            prefix?: React.ReactNode;
-            onValidate?: React.FocusEventHandler<HTMLInputElement>;
-            maxLength?: number;
-        };
-    };
-    onSubmit?: (data: FieldValues, methods?: UseFormReturn<any>) => void;
-    title?: string;
-    orText?: string;
-    methods?: UseFormReturn<any>;
-    buttonLoginLabel?: string;
-    loginWithGoogle?: React.MouseEventHandler<HTMLButtonElement>;
-    loginWithFacebook?: React.MouseEventHandler<HTMLButtonElement>;
-    loginWithApple?: React.MouseEventHandler<HTMLButtonElement>;
-    loginWithMicrosoft?: React.MouseEventHandler<HTMLButtonElement>;
-    onRegister?: React.MouseEventHandler<HTMLDivElement>;
-    registerPrefixText?: string;
-    registerText?: string;
-    forgotPasswordText?: string;
-    onForgotPassword?: React.MouseEventHandler<HTMLDivElement>;
-    style?: CSSProperties;
-    className?: string;
-    id?: string;
-}
-export declare function WLoginView(props: Props): React.JSX.Element;
-export {};
+import React, { CSSProperties } from 'react';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+interface Props {
+    logo: React.ReactNode | string;
+    formData: {
+        "username": {
+            label: string;
+            name: string;
+            prefix?: React.ReactNode;
+            onValidate?: React.FocusEventHandler<HTMLInputElement>;
+            maxLength?: number;
+        };
+        "password": {
+            label: string;
+            name: string;
+            prefix?: React.ReactNode;
+            onValidate?: React.FocusEventHandler<HTMLInputElement>;
+            maxLength?: number;
+        };
+    };
+    onSubmit?: (data: FieldValues, methods?: UseFormReturn<any>) => void;
+    title?: string;
+    orText?: string;
+    methods?: UseFormReturn<any>;
+    buttonLoginLabel?: string;
+    loginWithGoogle?: React.MouseEventHandler<HTMLButtonElement>;
+    loginWithFacebook?: React.MouseEventHandler<HTMLButtonElement>;
+    loginWithApple?: React.MouseEventHandler<HTMLButtonElement>;
+    loginWithMicrosoft?: React.MouseEventHandler<HTMLButtonElement>;
+    onRegister?: React.MouseEventHandler<HTMLDivElement>;
+    registerPrefixText?: string;
+    registerText?: string;
+    forgotPasswordText?: string;
+    onForgotPassword?: React.MouseEventHandler<HTMLDivElement>;
+    style?: CSSProperties;
+    className?: string;
+    id?: string;
+}
+export declare function WLoginView(props: Props): React.JSX.Element;
+export {};

package/dist/form/login/view.js

@@ -1,65 +1,66 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WLoginView = void 0;
-var react_1 = __importDefault(require("react"));
-var index_1 = require("../../index");
-var view_module_css_1 = __importDefault(require("./view.module.css"));
-var react_hook_form_1 = require("react-hook-form");
-var react_2 = require("react");
-function WLoginView(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
-    var methods = (0, react_hook_form_1.useForm)({ shouldFocusError: false });
-    var _w = (0, react_2.useState)(false), isShowPass = _w[0], setShowPass = _w[1];
-    var _onSubmit = function (ev) {
-        if (props.onSubmit)
-            props.onSubmit(ev, methods);
-    };
-    return react_1.default.createElement("form", { id: props.id, className: "col login-view-container ".concat(view_module_css_1.default['login-view-container'], " ").concat((_a = props.className) !== null && _a !== void 0 ? _a : ''), style: props.style },
-        typeof props.logo === "string" ? react_1.default.createElement("img", { alt: 'logo', src: props.logo, height: "36rem" }) : props.logo,
-        react_1.default.createElement("div", { className: "col login-view-form-container ".concat(view_module_css_1.default['login-view-form-container']) },
-            react_1.default.createElement(index_1.Text, { className: 'heading-4' }, (_b = props.title) !== null && _b !== void 0 ? _b : "Log in to Wini"),
-            react_1.default.createElement("div", { className: 'col' },
-                react_1.default.createElement("div", { className: 'col', style: { gap: "0.8rem", overflow: "visible" } },
-                    react_1.default.createElement(index_1.Text, { className: 'label-3' }, props.formData.username.label),
-                    react_1.default.createElement(index_1.TextField, { autoComplete: 'username', className: "placeholder-2", placeholder: props.formData.username.label, style: { height: "4.8rem" }, prefix: props.formData.username.prefix, name: props.formData.username.name, register: ((_c = props.methods) !== null && _c !== void 0 ? _c : methods).register(props.formData.username.name, {
-                            onChange: function (ev) { ev.target.value = ev.target.value.trim(); },
-                            onBlur: props.formData.username.onValidate
-                        }), onComplete: function (ev) { ev.target.blur(); }, helperText: (_f = (_e = ((_d = props.methods) !== null && _d !== void 0 ? _d : methods).formState.errors) === null || _e === void 0 ? void 0 : _e[props.formData.username.name]) === null || _f === void 0 ? void 0 : _f.message })),
-                react_1.default.createElement("div", { className: 'col', style: { gap: "0.8rem", overflow: "visible" } },
-                    react_1.default.createElement(index_1.Text, { className: 'label-3' }, props.formData.password.label),
-                    react_1.default.createElement(index_1.TextField, { autoComplete: 'current-password', className: "placeholder-2", placeholder: props.formData.password.label, style: { height: "4.8rem" }, prefix: props.formData.password.prefix, suffix: react_1.default.createElement("button", { type: 'button', onClick: function () { setShowPass(!isShowPass); } },
-                            react_1.default.createElement(index_1.Winicon, { src: "outline/user interface/".concat(isShowPass ? "view" : "hide"), size: "1.6rem" })), name: props.formData.password.name, type: isShowPass ? "text" : "password", register: ((_g = props.methods) !== null && _g !== void 0 ? _g : methods).register(props.formData.password.name, {
-                            onChange: function (ev) { ev.target.value = ev.target.value.trim(); },
-                            onBlur: props.formData.password.onValidate
-                        }), onComplete: function (ev) {
-                            var _a, _b, _c;
-                            if ((_b = ((_a = props.methods) !== null && _a !== void 0 ? _a : methods).watch(props.formData.password.name)) === null || _b === void 0 ? void 0 : _b.length) {
-                                ev.target.blur();
-                                if (!props.formData.password.onValidate && props.onSubmit)
-                                    _onSubmit(((_c = props.methods) !== null && _c !== void 0 ? _c : methods).getValues());
-                            }
-                            else
-                                ev.target.blur();
-                        }, helperText: (_k = (_j = ((_h = props.methods) !== null && _h !== void 0 ? _h : methods).formState.errors) === null || _j === void 0 ? void 0 : _j[props.formData.password.name]) === null || _k === void 0 ? void 0 : _k.message })),
-                react_1.default.createElement(index_1.Text, { className: "button-text-3 ".concat(view_module_css_1.default['forgot-password-btn']), onClick: props.onForgotPassword }, (_l = props.forgotPasswordText) !== null && _l !== void 0 ? _l : "Forgot your password?"),
-                react_1.default.createElement("div", { className: 'col', style: { gap: "1.6rem" } },
-                    react_1.default.createElement(index_1.Button, { disabled: ((_o = ((_m = props.methods) !== null && _m !== void 0 ? _m : methods).watch(props.formData.username.name)) === null || _o === void 0 ? void 0 : _o.length) && ((_q = ((_p = props.methods) !== null && _p !== void 0 ? _p : methods).watch(props.formData.password.name)) === null || _q === void 0 ? void 0 : _q.length) ? false : true, className: "button-text-1 ".concat(view_module_css_1.default['login-btn']), onClick: props.onSubmit && ((_r = props.methods) !== null && _r !== void 0 ? _r : methods).handleSubmit(_onSubmit), label: (_s = props.buttonLoginLabel) !== null && _s !== void 0 ? _s : "Log In" }),
-                    react_1.default.createElement("div", { className: 'row', style: { justifyContent: "center", gap: "0.4rem" } },
-                        react_1.default.createElement(index_1.Text, { className: 'label-4' }, (_t = props.registerPrefixText) !== null && _t !== void 0 ? _t : "Don't have an account?"),
-                        react_1.default.createElement(index_1.Text, { className: "button-text-3 ".concat(view_module_css_1.default['register-btn']), onClick: props.onRegister }, (_u = props.registerText) !== null && _u !== void 0 ? _u : "Sign up for Wini"))),
-                (props.loginWithGoogle || props.loginWithFacebook || props.loginWithApple || props.loginWithMicrosoft) ?
-                    react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("div", { className: "row ".concat(view_module_css_1.default['or-spacing']) },
-                            react_1.default.createElement("div", null),
-                            react_1.default.createElement(index_1.Text, { className: "label-4" }, (_v = props.orText) !== null && _v !== void 0 ? _v : "Or"),
-                            react_1.default.createElement("div", null)),
-                        react_1.default.createElement("div", { className: "row ".concat(view_module_css_1.default['login-social-media']) },
-                            props.loginWithGoogle && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithGoogle, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/social media/google', size: "2rem" }), label: "Google" }),
-                            props.loginWithFacebook && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithFacebook, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/social media/logo-facebook', size: "2rem" }), label: "Facebook" }),
-                            props.loginWithApple && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithApple, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/development/apple', size: "2rem" }), label: "Apple" }),
-                            props.loginWithMicrosoft && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithMicrosoft, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/development/microsoft', size: "2rem" }), label: "Microsoft" }))) : null)));
-}
-exports.WLoginView = WLoginView;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WLoginView = WLoginView;
+var react_1 = __importDefault(require("react"));
+var index_1 = require("../../index");
+var view_module_css_1 = __importDefault(require("./view.module.css"));
+var react_hook_form_1 = require("react-hook-form");
+var react_2 = require("react");
+var react_i18next_1 = require("react-i18next");
+function WLoginView(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+    var methods = (0, react_hook_form_1.useForm)({ shouldFocusError: false });
+    var _y = (0, react_2.useState)(false), isShowPass = _y[0], setShowPass = _y[1];
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var _onSubmit = function (ev) {
+        if (props.onSubmit)
+            props.onSubmit(ev, methods);
+    };
+    return react_1.default.createElement("form", { id: props.id, className: "col login-view-container ".concat(view_module_css_1.default['login-view-container'], " ").concat((_a = props.className) !== null && _a !== void 0 ? _a : ''), style: props.style },
+        typeof props.logo === "string" ? react_1.default.createElement("img", { alt: 'logo', src: props.logo, height: "36rem" }) : props.logo,
+        react_1.default.createElement("div", { className: "col login-view-form-container ".concat(view_module_css_1.default['login-view-form-container']) },
+            react_1.default.createElement(index_1.Text, { className: 'heading-4' }, (_b = props.title) !== null && _b !== void 0 ? _b : "".concat(t("loginTo"), " Wini")),
+            react_1.default.createElement("div", { className: 'col' },
+                react_1.default.createElement("div", { className: 'col', style: { gap: "0.8rem", overflow: "visible" } },
+                    react_1.default.createElement(index_1.Text, { className: 'label-3' }, (_c = props.formData.username.label) !== null && _c !== void 0 ? _c : t("username")),
+                    react_1.default.createElement(index_1.TextField, { autoComplete: 'username', className: "placeholder-2", placeholder: props.formData.username.label, style: { height: "4.8rem" }, prefix: props.formData.username.prefix, name: props.formData.username.name, register: ((_d = props.methods) !== null && _d !== void 0 ? _d : methods).register(props.formData.username.name, {
+                            onChange: function (ev) { ev.target.value = ev.target.value.trim(); },
+                            onBlur: props.formData.username.onValidate
+                        }), onComplete: function (ev) { ev.target.blur(); }, helperText: (_g = (_f = ((_e = props.methods) !== null && _e !== void 0 ? _e : methods).formState.errors) === null || _f === void 0 ? void 0 : _f[props.formData.username.name]) === null || _g === void 0 ? void 0 : _g.message })),
+                react_1.default.createElement("div", { className: 'col', style: { gap: "0.8rem", overflow: "visible" } },
+                    react_1.default.createElement(index_1.Text, { className: 'label-3' }, (_h = props.formData.password.label) !== null && _h !== void 0 ? _h : t("password")),
+                    react_1.default.createElement(index_1.TextField, { autoComplete: 'current-password', className: "placeholder-2", placeholder: props.formData.password.label, style: { height: "4.8rem" }, prefix: props.formData.password.prefix, suffix: react_1.default.createElement("button", { type: 'button', onClick: function () { setShowPass(!isShowPass); } },
+                            react_1.default.createElement(index_1.Winicon, { src: "outline/user interface/".concat(isShowPass ? "view" : "hide"), size: "1.6rem" })), name: props.formData.password.name, type: isShowPass ? "text" : "password", register: ((_j = props.methods) !== null && _j !== void 0 ? _j : methods).register(props.formData.password.name, {
+                            onChange: function (ev) { ev.target.value = ev.target.value.trim(); },
+                            onBlur: props.formData.password.onValidate
+                        }), onComplete: function (ev) {
+                            var _a, _b, _c;
+                            if ((_b = ((_a = props.methods) !== null && _a !== void 0 ? _a : methods).watch(props.formData.password.name)) === null || _b === void 0 ? void 0 : _b.length) {
+                                ev.target.blur();
+                                if (!props.formData.password.onValidate && props.onSubmit)
+                                    _onSubmit(((_c = props.methods) !== null && _c !== void 0 ? _c : methods).getValues());
+                            }
+                            else
+                                ev.target.blur();
+                        }, helperText: (_m = (_l = ((_k = props.methods) !== null && _k !== void 0 ? _k : methods).formState.errors) === null || _l === void 0 ? void 0 : _l[props.formData.password.name]) === null || _m === void 0 ? void 0 : _m.message })),
+                react_1.default.createElement(index_1.Text, { className: "button-text-3 ".concat(view_module_css_1.default['forgot-password-btn']), onClick: props.onForgotPassword }, (_o = props.forgotPasswordText) !== null && _o !== void 0 ? _o : t("forgotPassword")),
+                react_1.default.createElement("div", { className: 'col', style: { gap: "1.6rem" } },
+                    react_1.default.createElement(index_1.Button, { disabled: ((_q = ((_p = props.methods) !== null && _p !== void 0 ? _p : methods).watch(props.formData.username.name)) === null || _q === void 0 ? void 0 : _q.length) && ((_s = ((_r = props.methods) !== null && _r !== void 0 ? _r : methods).watch(props.formData.password.name)) === null || _s === void 0 ? void 0 : _s.length) ? false : true, className: "button-text-1 ".concat(view_module_css_1.default['login-btn']), onClick: props.onSubmit && ((_t = props.methods) !== null && _t !== void 0 ? _t : methods).handleSubmit(_onSubmit), label: (_u = props.buttonLoginLabel) !== null && _u !== void 0 ? _u : t("login") }),
+                    react_1.default.createElement("div", { className: 'row', style: { justifyContent: "center", gap: "0.4rem" } },
+                        react_1.default.createElement(index_1.Text, { className: 'label-4' }, (_v = props.registerPrefixText) !== null && _v !== void 0 ? _v : t("dontHaveAccount")),
+                        react_1.default.createElement(index_1.Text, { className: "button-text-3 ".concat(view_module_css_1.default['register-btn']), onClick: props.onRegister }, (_w = props.registerText) !== null && _w !== void 0 ? _w : "".concat(t("signupFor"), " Wini")))),
+                (props.loginWithGoogle || props.loginWithFacebook || props.loginWithApple || props.loginWithMicrosoft) ?
+                    react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("div", { className: "row ".concat(view_module_css_1.default['or-spacing']) },
+                            react_1.default.createElement("div", null),
+                            react_1.default.createElement(index_1.Text, { className: "label-4" }, (_x = props.orText) !== null && _x !== void 0 ? _x : t("or")),
+                            react_1.default.createElement("div", null)),
+                        react_1.default.createElement("div", { className: "row ".concat(view_module_css_1.default['login-social-media']) },
+                            props.loginWithGoogle && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithGoogle, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/social media/google', size: "2rem" }), label: "Google" }),
+                            props.loginWithFacebook && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithFacebook, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/social media/logo-facebook', size: "2rem" }), label: "Facebook" }),
+                            props.loginWithApple && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithApple, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/development/apple', size: "2rem" }), label: "Apple" }),
+                            props.loginWithMicrosoft && react_1.default.createElement(index_1.Button, { className: "label-1", onClick: props.loginWithMicrosoft, prefix: react_1.default.createElement(index_1.Winicon, { src: 'color/development/microsoft', size: "2rem" }), label: "Microsoft" }))) : null)));
+}

package/dist/i18n.d.ts

@@ -0,0 +1,2 @@
+import i18n from 'i18next';
+export { i18n };

package/dist/i18n.js

@@ -0,0 +1,125 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+var i18next_1 = __importDefault(require("i18next"));
+exports.i18n = i18next_1.default;
+var react_i18next_1 = require("react-i18next");
+// Translation resources
+var resources = {
+    en: {
+        translation: {
+            su: 'Su',
+            mo: "Mo",
+            tu: "Tu",
+            we: "We",
+            th: "Th",
+            fr: "Fr",
+            sa: "Sa",
+            yesterday: "Yesterday",
+            lastWeek: "Last week",
+            lastMonth: "Last month",
+            lastYear: "Last year",
+            january: "January",
+            february: "February",
+            march: "March",
+            april: "April",
+            may: "May",
+            june: "June",
+            july: "July",
+            august: "August",
+            september: "September",
+            october: "October",
+            november: "November",
+            december: "December",
+            today: "Today",
+            apply: "Apply",
+            cancel: "Cancel",
+            submit: "Submit",
+            limitFileError: "File {{file.name}} exceeds the maximum size of {{sizeTitle}}",
+            limitFileWarning: "File size should not exceed {{sizeTitle}}.",
+            uploadFileAction: 'Click or drag and drop to upload file',
+            file: "File",
+            remove: "Remove",
+            choose: "Choose",
+            select: "Select",
+            all: "All",
+            noResultFound: "No result found",
+            ofItems: "of {{totalItem}} items",
+            page: "Page",
+            go: "Go to",
+            or: "Or",
+            username: "Username",
+            password: "Password",
+            dontHaveAccount: "Don't have an account?",
+            forgotPassword: "Forgot your password?",
+            login: "Log in",
+            loginTo: "Log in to",
+            signup: "Sign up",
+            signupFor: "Sign up for",
+        },
+    },
+    vi: {
+        translation: {
+            su: 'CN',
+            mo: "T2",
+            tu: "T3",
+            we: "T4",
+            th: "T5",
+            fr: "T6",
+            sa: "T7",
+            yesterday: "Hôm qua",
+            lastWeek: "Tuần trước",
+            lastMonth: "Tháng trước",
+            lastYear: "Năm trước",
+            january: "Tháng 1",
+            february: "Tháng 2",
+            march: "Tháng 3",
+            april: "Tháng 4",
+            may: "Tháng 5",
+            june: "Tháng 6",
+            july: "Tháng 7",
+            august: "Tháng 8",
+            september: "Tháng 9",
+            october: "Tháng 10",
+            november: "Tháng 11",
+            december: "Tháng 12",
+            today: "Hôm nay",
+            apply: "Áp dụng",
+            cancel: "Hủy",
+            submit: "Xác nhận",
+            limitFileError: "Tệp {{name}} vượt quá dung lượng tối đa {{sizeTitle}}",
+            limitFileWarning: "Tệp không được vượt quá {{sizeTitle}}.",
+            uploadFileAction: 'Nhấn hoặc kéo vào để tải tệp lên',
+            file: "Tệp",
+            remove: "Xóa",
+            choose: "Chọn",
+            select: "Chọn",
+            all: "Tất cả",
+            noResultFound: "Không tìm thấy kết quả",
+            ofItems: "trên {{totalItem}} kết quả",
+            page: "Trang",
+            go: "Đi tới",
+            or: "Hoặc",
+            username: "Tên đăng nhập",
+            password: "Mật khẩu",
+            dontHaveAccount: "Chưa có tài khoản?",
+            forgotPassword: "Quên mật khẩu?",
+            login: "Đăng nhập",
+            loginTo: "Đăng nhập vào",
+            signup: "Đăng ký",
+            signupFor: "Đăng ký"
+        },
+    },
+};
+// Initialize i18n
+i18next_1.default.use(react_i18next_1.initReactI18next).init({
+    resources: resources,
+    lng: 'en',
+    fallbackLng: 'en',
+    interpolation: {
+        escapeValue: false, // React already escapes values
+    },
+});