phx-react 1.3.13 → 1.3.15

package/dist/cjs/components/Tabs/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Tabs"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Tabs/index.ts"],"names":[],"mappings":";;;AAAA,iDAAsB"}

package/dist/cjs/components/Test/Test.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface InputProps {
+    className?: string;
+    props?: any;
+}
+export declare const Test: () => JSX.Element;

package/dist/cjs/components/Test/Test.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+exports.Test = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var Input_1 = require("../Input");
+var Test = function () {
+    return (react_1["default"].createElement("form", null,
+        react_1["default"].createElement(Input_1.Input, { autoComplete: 'on', defaultValue: 'abc' })));
+};
+exports.Test = Test;
+//# sourceMappingURL=Test.js.map

package/dist/cjs/components/Test/Test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Test.js","sourceRoot":"","sources":["../../../../src/components/Test/Test.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,kCAAgC;AAOzB,IAAM,IAAI,GAAG;IAClB,OAAO,CACL;QACE,iCAAC,aAAK,IAAC,YAAY,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,GAAG,CACzC,CACR,CAAA;AACH,CAAC,CAAA;AANY,QAAA,IAAI,QAMhB"}

package/dist/cjs/components/Test/index.d.ts

@@ -0,0 +1 @@
+export * from './Test';

package/dist/cjs/components/Test/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Test"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Test/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Test/index.ts"],"names":[],"mappings":";;;AAAA,iDAAsB"}

package/dist/cjs/components/WrapTable/WrapTable.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface TableProps {
+    color?: 'indigo' | 'gray';
+    className?: string;
+}
+export declare const WrapTable: ({ color, className }: TableProps) => JSX.Element;

package/dist/cjs/components/WrapTable/WrapTable.js

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+exports.WrapTable = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var types_1 = require("../types");
+var WrapTable = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? 'indigo' : _b, _c = _a.className, className = _c === void 0 ? 'w-5 h-5' : _c;
+    var colorMaker = (0, types_1.classNames)(color === 'indigo' && 'text-indigo-600', color === 'gray' && 'text-gray-600');
+    return (react_1["default"].createElement("div", { className: "animate-spin inline-block ".concat(className, " border-[3px] border-current border-t-transparent ").concat(colorMaker, " rounded-full"), role: 'status', "aria-label": 'loading1' }));
+};
+exports.WrapTable = WrapTable;
+//# sourceMappingURL=WrapTable.js.map

package/dist/cjs/components/WrapTable/WrapTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrapTable.js","sourceRoot":"","sources":["../../../../src/components/WrapTable/WrapTable.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,kCAAqC;AAO9B,IAAM,SAAS,GAAG,UAAC,EAAuD;QAArD,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAAE,iBAAqB,EAArB,SAAS,mBAAG,SAAS,KAAA;IACjE,IAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,KAAK,KAAK,QAAQ,IAAI,iBAAiB,EAAE,KAAK,KAAK,MAAM,IAAI,eAAe,CAAC,CAAA;IAC3G,OAAO,CACL,0CACE,SAAS,EAAE,oCAA6B,SAAS,+DAAqD,UAAU,kBAAe,EAC/H,IAAI,EAAC,QAAQ,gBACF,UAAU,GAChB,CACR,CAAA;AACH,CAAC,CAAA;AATY,QAAA,SAAS,aASrB"}

package/dist/cjs/components/WrapTable/index.d.ts

@@ -0,0 +1 @@
+export * from './WrapTable';

package/dist/cjs/components/WrapTable/index.js

@@ -0,0 +1,5 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./WrapTable"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/WrapTable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/WrapTable/index.ts"],"names":[],"mappings":";;;AAAA,sDAA2B"}

package/dist/cjs/demo/LoginDemo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LoginDemo: () => JSX.Element;

package/dist/cjs/demo/LoginDemo.js

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+exports.LoginDemo = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var LoginScreen_1 = require("../components/LoginScreen/LoginScreen");
+var apollo_wrapper_1 = require("../lib/apollo-wrapper");
+var LoginDemo = function () {
+    return (react_1["default"].createElement(apollo_wrapper_1.ApolloWrapper, null,
+        react_1["default"].createElement(LoginScreen_1.PHXLoginScreen, null)));
+};
+exports.LoginDemo = LoginDemo;
+//# sourceMappingURL=LoginDemo.js.map

package/dist/cjs/demo/LoginDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginDemo.js","sourceRoot":"","sources":["../../../src/demo/LoginDemo.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,qEAAsE;AACtE,wDAAqD;AAE9C,IAAM,SAAS,GAAG;IACvB,OAAO,CACL,iCAAC,8BAAa;QACZ,iCAAC,4BAAc,OAAG,CACJ,CACjB,CAAA;AACH,CAAC,CAAA;AANY,QAAA,SAAS,aAMrB"}

package/dist/cjs/index.d.ts

@@ -13,10 +13,12 @@ import { PHXRadio } from './components/Radio';
 import { PHXCheckbox } from './components/Checkbox';
 import { PHXFormStep } from './components/FormStep';
 import { PHXNotifications } from './components/Notifications';
-import { PHXSkeletonLarge } from './components/Skeleton';
+import { PHXSkeleton } from './components/Skeleton';
 import PHXFuncGetLoggedInfo from './components/Func/getLoginInfo';
 import PHXClientQuery from './components/Func/clientQueryV2';
 import PHXClientMutation from './components/Func/clientMutationV2';
 import { PHXTextarea } from './components/Textarea';
 import { PHXModal } from './components/Modal';
-export { MyCounter, PHXButton, PHXCard, PHXSpinner, PHXMainWrap, PHXFormWrap, PHXHeaderBar, PHXTable, PHXInput, PHXSelect, PHXRadio, PHXCheckbox, PHXFormStep, PHXNotifications, PHXStep, PHXSkeletonLarge, PHXFuncGetLoggedInfo, PHXClientQuery, PHXClientMutation, PHXTextarea, PHXModal, };
+import { PHXLoginScreen } from './components/LoginScreen';
+import { PHXTabs } from './components/Tabs';
+export { MyCounter, PHXButton, PHXCard, PHXSpinner, PHXMainWrap, PHXFormWrap, PHXHeaderBar, PHXTable, PHXInput, PHXSelect, PHXRadio, PHXCheckbox, PHXFormStep, PHXNotifications, PHXStep, PHXSkeleton, PHXFuncGetLoggedInfo, PHXClientQuery, PHXClientMutation, PHXTextarea, PHXModal, PHXLoginScreen, PHXTabs, };

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.PHXModal = exports.PHXTextarea = exports.PHXClientMutation = exports.PHXClientQuery = exports.PHXFuncGetLoggedInfo = exports.PHXSkeletonLarge = exports.PHXStep = exports.PHXNotifications = exports.PHXFormStep = exports.PHXCheckbox = exports.PHXRadio = exports.PHXSelect = exports.PHXInput = exports.PHXTable = exports.PHXHeaderBar = exports.PHXFormWrap = exports.PHXMainWrap = exports.PHXSpinner = exports.PHXCard = exports.PHXButton = exports.MyCounter = void 0;
+exports.PHXTabs = exports.PHXLoginScreen = exports.PHXModal = exports.PHXTextarea = exports.PHXClientMutation = exports.PHXClientQuery = exports.PHXFuncGetLoggedInfo = exports.PHXSkeleton = exports.PHXStep = exports.PHXNotifications = exports.PHXFormStep = exports.PHXCheckbox = exports.PHXRadio = exports.PHXSelect = exports.PHXInput = exports.PHXTable = exports.PHXHeaderBar = exports.PHXFormWrap = exports.PHXMainWrap = exports.PHXSpinner = exports.PHXCard = exports.PHXButton = exports.MyCounter = void 0;
 var tslib_1 = require("tslib");
 var Step_1 = require("./components/Step");
 exports.PHXStep = Step_1.PHXStep;
@@ -33,7 +33,7 @@ exports.PHXFormStep = FormStep_1.PHXFormStep;
 var Notifications_1 = require("./components/Notifications");
 exports.PHXNotifications = Notifications_1.PHXNotifications;
 var Skeleton_1 = require("./components/Skeleton");
-exports.PHXSkeletonLarge = Skeleton_1.PHXSkeletonLarge;
+exports.PHXSkeleton = Skeleton_1.PHXSkeleton;
 var getLoginInfo_1 = tslib_1.__importDefault(require("./components/Func/getLoginInfo"));
 exports.PHXFuncGetLoggedInfo = getLoginInfo_1["default"];
 var clientQueryV2_1 = tslib_1.__importDefault(require("./components/Func/clientQueryV2"));
@@ -44,4 +44,8 @@ var Textarea_1 = require("./components/Textarea");
 exports.PHXTextarea = Textarea_1.PHXTextarea;
 var Modal_1 = require("./components/Modal");
 exports.PHXModal = Modal_1.PHXModal;
+var LoginScreen_1 = require("./components/LoginScreen");
+exports.PHXLoginScreen = LoginScreen_1.PHXLoginScreen;
+var Tabs_1 = require("./components/Tabs");
+exports.PHXTabs = Tabs_1.PHXTabs;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,0CAA2C;AAqCzC,kBArCO,cAAO,CAqCP;AApCT,iEAAwC;AAsBtC,oBAtBK,gBAAS,CAsBL;AArBX,8CAA+C;AAsB7C,oBAtBO,kBAAS,CAsBP;AArBX,0CAA2C;AAsBzC,kBAtBO,cAAO,CAsBP;AArBT,gDAAiD;AAsB/C,qBAtBO,oBAAU,CAsBP;AArBZ,kDAAmD;AAsBjD,sBAtBO,sBAAW,CAsBP;AArBb,4CAA6C;AAwB3C,mBAxBO,gBAAQ,CAwBP;AAvBV,kDAAmD;AAqBjD,sBArBO,sBAAW,CAqBP;AApBb,oDAAqD;AAqBnD,uBArBO,wBAAY,CAqBP;AApBd,4CAA6C;AAsB3C,mBAtBO,gBAAQ,CAsBP;AArBV,8CAA+C;AAsB7C,oBAtBO,kBAAS,CAsBP;AArBX,4CAA6C;AAsB3C,mBAtBO,gBAAQ,CAsBP;AArBV,kDAAmD;AAsBjD,sBAtBO,sBAAW,CAsBP;AArBb,kDAAmD;AAsBjD,sBAtBO,sBAAW,CAsBP;AArBb,4DAA6D;AAsB3D,2BAtBO,gCAAgB,CAsBP;AArBlB,kDAAwD;AAuBtD,2BAvBO,2BAAgB,CAuBP;AAtBlB,wFAAiE;AAuB/D,+BAvBK,yBAAoB,CAuBL;AAtBtB,0FAA4D;AAuB1D,yBAvBK,0BAAc,CAuBL;AAtBhB,gGAAkE;AAuBhE,4BAvBK,6BAAiB,CAuBL;AAtBnB,kDAAmD;AAuBjD,sBAvBO,sBAAW,CAuBP;AAtBb,4CAA6C;AAuB3C,mBAvBO,gBAAQ,CAuBP"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,0CAA2C;AAuCzC,kBAvCO,cAAO,CAuCP;AAtCT,iEAAwC;AAwBtC,oBAxBK,gBAAS,CAwBL;AAvBX,8CAA+C;AAwB7C,oBAxBO,kBAAS,CAwBP;AAvBX,0CAA2C;AAwBzC,kBAxBO,cAAO,CAwBP;AAvBT,gDAAiD;AAwB/C,qBAxBO,oBAAU,CAwBP;AAvBZ,kDAAmD;AAwBjD,sBAxBO,sBAAW,CAwBP;AAvBb,4CAA6C;AA0B3C,mBA1BO,gBAAQ,CA0BP;AAzBV,kDAAmD;AAuBjD,sBAvBO,sBAAW,CAuBP;AAtBb,oDAAqD;AAuBnD,uBAvBO,wBAAY,CAuBP;AAtBd,4CAA6C;AAwB3C,mBAxBO,gBAAQ,CAwBP;AAvBV,8CAA+C;AAwB7C,oBAxBO,kBAAS,CAwBP;AAvBX,4CAA6C;AAwB3C,mBAxBO,gBAAQ,CAwBP;AAvBV,kDAAmD;AAwBjD,sBAxBO,sBAAW,CAwBP;AAvBb,kDAAmD;AAwBjD,sBAxBO,sBAAW,CAwBP;AAvBb,4DAA6D;AAwB3D,2BAxBO,gCAAgB,CAwBP;AAvBlB,kDAAmD;AAyBjD,sBAzBO,sBAAW,CAyBP;AAxBb,wFAAiE;AAyB/D,+BAzBK,yBAAoB,CAyBL;AAxBtB,0FAA4D;AAyB1D,yBAzBK,0BAAc,CAyBL;AAxBhB,gGAAkE;AAyBhE,4BAzBK,6BAAiB,CAyBL;AAxBnB,kDAAmD;AAyBjD,sBAzBO,sBAAW,CAyBP;AAxBb,4CAA6C;AAyB3C,mBAzBO,gBAAQ,CAyBP;AAxBV,wDAAyD;AAyBvD,yBAzBO,4BAAc,CAyBP;AAxBhB,0CAA2C;AAyBzC,kBAzBO,cAAO,CAyBP"}

package/dist/cjs/utils/loginQuery.d.ts

@@ -0,0 +1 @@
+export declare const getUserInfo: import("@apollo/client").DocumentNode;

package/dist/cjs/utils/loginQuery.js

@@ -0,0 +1,8 @@
+"use strict";
+exports.__esModule = true;
+exports.getUserInfo = void 0;
+var tslib_1 = require("tslib");
+var client_1 = require("@apollo/client");
+exports.getUserInfo = (0, client_1.gql)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  query GetUsers($email: String, $password: String) {\n    users(where: { email: { _eq: $email }, v2_password: { _eq: $password } }) {\n      email\n      v2_password\n      id\n      school_info_id\n      user_id\n      user_role_id\n      user_type\n      avatar\n      name\n      created_at\n      deleted_at\n      updated_at\n    }\n  }\n"], ["\n  query GetUsers($email: String, $password: String) {\n    users(where: { email: { _eq: $email }, v2_password: { _eq: $password } }) {\n      email\n      v2_password\n      id\n      school_info_id\n      user_id\n      user_role_id\n      user_type\n      avatar\n      name\n      created_at\n      deleted_at\n      updated_at\n    }\n  }\n"])));
+var templateObject_1;
+//# sourceMappingURL=loginQuery.js.map

package/dist/cjs/utils/loginQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loginQuery.js","sourceRoot":"","sources":["../../../src/utils/loginQuery.ts"],"names":[],"mappings":";;;;AAAA,yCAAoC;AAEvB,QAAA,WAAW,OAAG,YAAG,waAAA,4VAiB7B,KAAA"}

package/dist/esm/components/Input/Textarea.d.ts

@@ -0,0 +1,8 @@
+import React, { TextareaHTMLAttributes } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    register?: UseFormRegisterReturn;
+    error?: boolean;
+    props?: any;
+}
+export declare const Textarea: React.FC<TextAreaProps>;

package/dist/esm/components/Input/Textarea.js

@@ -0,0 +1,8 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { classNames } from '../types';
+export var Textarea = function (_a) {
+    var register = _a.register, error = _a.error, props = _a.props;
+    return (React.createElement("textarea", __assign({}, props, register, { className: classNames('mt-1 font-light block w-full rounded-lg border border-gray-500 px-3 py-1.5 shadow-sm focus:outline-indigo-500 focus:outline-none focus:outline-offset-1 focus:bg-gray-50 hover:bg-gray-50 text-xs focus:ring-transparent focus:border-gray-500', error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '') })));
+};
+//# sourceMappingURL=Textarea.js.map

package/dist/esm/components/Input/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../../src/components/Input/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAQrC,MAAM,CAAC,IAAM,QAAQ,GAA4B,UAAC,EAAyC;QAAvC,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA;IACxE,OAAO,CACL,6CACM,KAAK,EACL,QAAQ,IACZ,SAAS,EAAE,UAAU,CACnB,gPAAgP,EAChP,KAAK,CAAC,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC,EAAE,CAC7F,IACD,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/LoginScreen/LoginScreen.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface LoginProps {
+    redirectPath?: any;
+    logo?: any;
+    banner?: any;
+}
+export declare const PHXLoginScreen: ({ logo, banner, redirectPath }: LoginProps) => JSX.Element;

package/dist/esm/components/LoginScreen/LoginScreen.js

@@ -0,0 +1,96 @@
+import { __awaiter, __generator } from "tslib";
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/solid';
+import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { PHXFormWrap } from '../FormWrap';
+import { PHXInput } from '../Input';
+import { PHXButton } from '../Button';
+import Cookies from 'js-cookie';
+import { useLazyQuery } from '@apollo/client';
+import { getUserInfo } from '../../utils/loginQuery';
+export var PHXLoginScreen = function (_a) {
+    var logo = _a.logo, banner = _a.banner, redirectPath = _a.redirectPath;
+    var _b = useState(false), showPassword = _b[0], setShowPassword = _b[1];
+    var _c = useState(false), remember = _c[0], setRemember = _c[1];
+    var _d = useForm(), handleSubmit = _d.handleSubmit, register = _d.register, errors = _d.formState.errors;
+    var handleClickShowPassword = function () {
+        setShowPassword(!showPassword);
+    };
+    var loginAction = useLazyQuery(getUserInfo, {
+        fetchPolicy: 'network-only'
+    })[0];
+    var onSubmitForm = function (values) { return __awaiter(void 0, void 0, void 0, function () {
+        var email, password, loginInfo, userObjectString, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    email = values.email, password = values.password;
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, loginAction({
+                            variables: {
+                                email: email,
+                                password: password
+                            }
+                        })];
+                case 2:
+                    loginInfo = _a.sent();
+                    if (loginInfo && loginInfo.data) {
+                        userObjectString = JSON.stringify(loginInfo.data.users[0]);
+                        if (remember) {
+                            Cookies.set('isLoggedIn', userObjectString, { expires: 365 });
+                            window.location.replace(redirectPath);
+                        }
+                        else {
+                            Cookies.set('isLoggedIn', userObjectString);
+                            window.location.replace(redirectPath);
+                        }
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error('Error:', error_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("main", { className: 'flex min-h-screen items-center justify-center text-gray-700' },
+            React.createElement("div", { className: 'm-auto flex h-[100vh] max-w-[100vw] flex-1 justify-center' },
+                React.createElement("div", { className: 'py-auto flex w-[40%] flex-1 flex-col justify-center px-4 sm:px-6 lg:flex-none lg:px-12' },
+                    React.createElement("div", { className: 'lg:w-76 mx-auto w-full max-w-sm xl:w-96' },
+                        React.createElement("div", { className: 'flex flex-col items-center' },
+                            React.createElement("img", { className: 'h-[4rem] w-auto', src: logo !== null && logo !== void 0 ? logo : 'https://static-data.phx.asia/iris/iris-logo.png', alt: 'logo' }),
+                            React.createElement("h2", { className: 'mt-8 text-2xl font-bold leading-9 tracking-tight text-gray-900' }, "\u0110\u0103ng nh\u1EADp")),
+                        React.createElement("div", { className: 'mt-10' },
+                            React.createElement(PHXFormWrap, { headerAction: false, footerAction: false, submit: true, onSubmit: handleSubmit(onSubmitForm) },
+                                React.createElement("div", { className: 'space-y-6' },
+                                    React.createElement("div", { className: 'mt-2' },
+                                        React.createElement(PHXInput, { label: 'Email', 
+                                            //@ts-ignore
+                                            error: errors.email, register: register('email', {
+                                                required: true
+                                            }), errorMessage: 'Vui l\u00F2ng nh\u1EADp email' })),
+                                    React.createElement("div", { className: 'relative mt-2' },
+                                        showPassword ? (React.createElement(EyeIcon, { className: 'w-4 h-5 absolute right-2 top-[1.8rem] cursor-pointer', onClick: handleClickShowPassword })) : (React.createElement(EyeSlashIcon, { className: 'w-4 h-5 absolute right-2 top-[1.8rem] cursor-pointer', onClick: handleClickShowPassword })),
+                                        React.createElement(PHXInput
+                                        //@ts-ignore
+                                        , { 
+                                            //@ts-ignore
+                                            error: errors.password, errorMessage: 'Vui l\u00F2ng nh\u1EADp m\u1EADt kh\u1EA9u', register: register('password', {
+                                                required: true
+                                            }), label: 'Password', type: showPassword ? 'text' : 'password', id: 'password' })),
+                                    React.createElement("div", { className: 'flex items-center justify-between' },
+                                        React.createElement("div", { className: 'flex items-center' },
+                                            React.createElement("input", { onChange: function (e) { return setRemember(e.target.checked); }, id: 'remember-me', name: 'remember-me', type: 'checkbox', className: 'h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600' }),
+                                            React.createElement("label", { id: 'remember-me', className: 'ml-3 block text-sm leading-6 text-gray-900' }, "Ghi nh\u1EDB t\u00E0i kho\u1EA3n"))),
+                                    React.createElement(PHXButton, { className: 'flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600', primary: true, submit: true, size: 'large' }, "\u0110\u0103ng nh\u1EADp"))),
+                            React.createElement("div", { className: 'mt-10' },
+                                React.createElement("div", { className: 'relative' },
+                                    React.createElement("div", { className: 'absolute inset-0 flex items-center', "aria-hidden": 'true' })))))),
+                React.createElement("div", { className: 'relative hidden w-0 flex-1 lg:block lg:w-full' },
+                    React.createElement("img", { className: 'absolute inset-0 h-full w-full object-cover', src: banner !== null && banner !== void 0 ? banner : 'https://images.unsplash.com/photo-1496917756835-20cb06e75b4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1908&q=80', alt: 'banner' }))))));
+};
+//# sourceMappingURL=LoginScreen.js.map

package/dist/esm/components/LoginScreen/LoginScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginScreen.js","sourceRoot":"","sources":["../../../../src/components/LoginScreen/LoginScreen.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/LoginScreen/index.d.ts

@@ -0,0 +1 @@
+export * from './LoginScreen';

package/dist/esm/components/LoginScreen/index.js

@@ -0,0 +1,2 @@
+export * from './LoginScreen';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/LoginScreen/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/LoginScreen/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/esm/components/Modal/Modal.d.ts

@@ -2,13 +2,18 @@
 export interface ModalProps {
     show?: boolean;
     title?: string;
+    className?: string;
+    secondaryActionText?: string;
     primaryActionText?: string;
     dangerActionText?: string;
     children?: any;
     primaryLoading?: boolean;
     dangerLoading?: boolean;
-    onHide?: () => void;
+    primarySubmit?: boolean;
+    dangerSubmit?: boolean;
+    onHide?(): void;
+    onSubmit?(): void;
     onPrimaryClick?(): void;
     onDangerClick?(): void;
 }
-export declare const PHXModal: ({ show, title, primaryActionText, dangerActionText, children, primaryLoading, dangerLoading, onHide, onPrimaryClick, onDangerClick, }: ModalProps) => JSX.Element;
+export declare const PHXModal: ({ show, title, className, primaryActionText, dangerActionText, children, primaryLoading, dangerLoading, primarySubmit, dangerSubmit, onHide, onSubmit, onPrimaryClick, onDangerClick, }: ModalProps) => JSX.Element;

package/dist/esm/components/Modal/Modal.js

@@ -2,7 +2,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 import { PHXCard } from '../Card';
 export var PHXModal = function (_a) {
-    var show = _a.show, title = _a.title, _b = _a.primaryActionText, primaryActionText = _b === void 0 ? 'Lưu' : _b, dangerActionText = _a.dangerActionText, children = _a.children, primaryLoading = _a.primaryLoading, dangerLoading = _a.dangerLoading, onHide = _a.onHide, onPrimaryClick = _a.onPrimaryClick, onDangerClick = _a.onDangerClick;
+    var show = _a.show, title = _a.title, className = _a.className, _b = _a.primaryActionText, primaryActionText = _b === void 0 ? 'Lưu' : _b, dangerActionText = _a.dangerActionText, children = _a.children, primaryLoading = _a.primaryLoading, dangerLoading = _a.dangerLoading, primarySubmit = _a.primarySubmit, dangerSubmit = _a.dangerSubmit, onHide = _a.onHide, onSubmit = _a.onSubmit, onPrimaryClick = _a.onPrimaryClick, onDangerClick = _a.onDangerClick;
     var _c = useState(false), open = _c[0], setOpen = _c[1];
     useEffect(function () {
         // @ts-ignore
@@ -14,14 +14,25 @@ export var PHXModal = function (_a) {
             onHide();
         }
     };
+    var Card = function () { return (React.createElement(PHXCard, { primaryHeader: true, title: title, headerAction: { onClick: handleClickCloseAction }, secondaryFooterActions: [{ content: 'Hủy thay đổi', onClick: handleClickCloseAction }], primaryFooterAction: {
+            content: primaryActionText,
+            loading: primaryLoading,
+            onClick: onPrimaryClick,
+            submit: primarySubmit
+        }, dangerFooterAction: {
+            content: dangerActionText,
+            loading: dangerLoading,
+            onClick: onDangerClick,
+            submit: dangerSubmit
+        } }, children)); };
     return (React.createElement(Transition.Root, { show: open, as: Fragment },
         React.createElement(Dialog, { as: 'div', className: 'relative z-10', onClose: handleClickCloseAction },
             React.createElement(Transition.Child, { as: Fragment, enter: 'transform ease-out duration-300 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-100 sm:translate-y-0', leave: 'transition ease-in duration-100', leaveFrom: 'translate-y-0 opacity-100 sm:translate-y-0', leaveTo: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10' },
                 React.createElement("div", { className: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity' })),
-            React.createElement("div", { className: 'fixed inset-0 z-10 overflow-y-auto' },
+            React.createElement("div", { className: "fixed inset-0 z-10 overflow-y-auto ".concat(className) },
                 React.createElement("div", { className: 'flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0' },
                     React.createElement(Transition.Child, { as: Fragment, enter: 'transform ease-out duration-300 transition', enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10', enterTo: 'translate-y-0 opacity-100 sm:translate-y-0', leave: 'transition ease-in duration-100', leaveFrom: 'translate-y-0 opacity-100 sm:translate-y-0', leaveTo: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-y-10' },
-                        React.createElement(Dialog.Panel, { className: 'relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg' },
-                            React.createElement(PHXCard, { primaryHeader: true, title: title, headerAction: { onClick: handleClickCloseAction }, secondaryFooterActions: [{ content: 'Hủy thay đổi', onClick: handleClickCloseAction }], primaryFooterAction: { content: primaryActionText, loading: primaryLoading, onClick: onPrimaryClick }, dangerFooterAction: { content: dangerActionText, loading: dangerLoading, onClick: onDangerClick } }, children))))))));
+                        React.createElement(Dialog.Panel, { className: 'relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg' }, primarySubmit || dangerSubmit ? (React.createElement("form", { onSubmit: onSubmit },
+                            React.createElement(Card, null))) : (React.createElement(Card, null)))))))));
 };
 //# sourceMappingURL=Modal.js.map

package/dist/esm/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAejC,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAC,EAWZ;QAVX,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,yBAAyB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,gBAAgB,sBAAA,EAChB,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,MAAM,YAAA,EACN,cAAc,oBAAA,EACd,aAAa,mBAAA;IAEP,IAAA,KAAkB,QAAQ,CAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAA;IAEvC,SAAS,CAAC;QACR,aAAa;QACb,OAAO,CAAC,IAAI,CAAC,CAAA;IACf,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,IAAM,sBAAsB,GAAG;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAA;QACd,IAAI,MAAM,EAAE;YACV,MAAM,EAAE,CAAA;SACT;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ;QACvC,oBAAC,MAAM,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,sBAAsB;YACxE,oBAAC,UAAU,CAAC,KAAK,IACf,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAC,4CAA4C,EAClD,SAAS,EAAC,4DAA4D,EACtE,OAAO,EAAC,4CAA4C,EACpD,KAAK,EAAC,iCAAiC,EACvC,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAC,4DAA4D;gBAEpE,6BAAK,SAAS,EAAC,4DAA4D,GAAG,CAC7D;YAEnB,6BAAK,SAAS,EAAC,oCAAoC;gBACjD,6BAAK,SAAS,EAAC,oFAAoF;oBACjG,oBAAC,UAAU,CAAC,KAAK,IACf,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAC,4CAA4C,EAClD,SAAS,EAAC,4DAA4D,EACtE,OAAO,EAAC,4CAA4C,EACpD,KAAK,EAAC,iCAAiC,EACvC,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAC,4DAA4D;wBAEpE,oBAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAC,yHAAyH;4BAC/I,oBAAC,OAAO,IACN,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,EAAE,OAAO,EAAE,sBAAsB,EAAE,EACjD,sBAAsB,EAAE,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,sBAAsB,EAAE,CAAC,EACtF,mBAAmB,EAAE,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,EACrG,kBAAkB,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,IAEhG,QAAQ,CACD,CACG,CACE,CACf,CACF,CACC,CACO,CACnB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAoBjC,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAC,EAeZ;QAdX,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,SAAS,eAAA,EACT,yBAAyB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,gBAAgB,sBAAA,EAChB,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,YAAY,kBAAA,EACZ,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,aAAa,mBAAA;IAEP,IAAA,KAAkB,QAAQ,CAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAA;IAEvC,SAAS,CAAC;QACR,aAAa;QACb,OAAO,CAAC,IAAI,CAAC,CAAA;IACf,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,IAAM,sBAAsB,GAAG;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAA;QACd,IAAI,MAAM,EAAE;YACV,MAAM,EAAE,CAAA;SACT;IACH,CAAC,CAAA;IAED,IAAM,IAAI,GAAG,cAAM,OAAA,CACjB,oBAAC,OAAO,IACN,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,EAAE,OAAO,EAAE,sBAAsB,EAAE,EACjD,sBAAsB,EAAE,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,sBAAsB,EAAE,CAAC,EACtF,mBAAmB,EAAE;YACnB,OAAO,EAAE,iBAAiB;YAC1B,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,cAAc;YACvB,MAAM,EAAE,aAAa;SACtB,EACD,kBAAkB,EAAE;YAClB,OAAO,EAAE,gBAAgB;YACzB,OAAO,EAAE,aAAa;YACtB,OAAO,EAAE,aAAa;YACtB,MAAM,EAAE,YAAY;SACrB,IAEA,QAAQ,CACD,CACX,EArBkB,CAqBlB,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ;QACvC,oBAAC,MAAM,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,sBAAsB;YACxE,oBAAC,UAAU,CAAC,KAAK,IACf,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAC,4CAA4C,EAClD,SAAS,EAAC,4DAA4D,EACtE,OAAO,EAAC,4CAA4C,EACpD,KAAK,EAAC,iCAAiC,EACvC,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAC,4DAA4D;gBAEpE,6BAAK,SAAS,EAAC,4DAA4D,GAAG,CAC7D;YAEnB,6BAAK,SAAS,EAAE,6CAAsC,SAAS,CAAE;gBAC/D,6BAAK,SAAS,EAAC,oFAAoF;oBACjG,oBAAC,UAAU,CAAC,KAAK,IACf,EAAE,EAAE,QAAQ,EACZ,KAAK,EAAC,4CAA4C,EAClD,SAAS,EAAC,4DAA4D,EACtE,OAAO,EAAC,4CAA4C,EACpD,KAAK,EAAC,iCAAiC,EACvC,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAC,4DAA4D;wBAEpE,oBAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAC,yHAAyH,IAC9I,aAAa,IAAI,YAAY,CAAC,CAAC,CAAC,CAC/B,8BAAM,QAAQ,EAAE,QAAQ;4BACtB,oBAAC,IAAI,OAAG,CACH,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,OAAG,CACT,CACY,CACE,CACf,CACF,CACC,CACO,CACnB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Radio/Radio.d.ts

@@ -5,5 +5,8 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     register?: UseFormRegisterReturn;
     title?: string;
+    id?: any;
+    error?: boolean;
+    errorMessage?: string;
 }
 export declare const PHXRadio: React.FC<InputProps>;

package/dist/esm/components/Radio/Radio.js

@@ -1,11 +1,16 @@
 import { __assign, __rest } from "tslib";
 import React from 'react';
+import { classNames } from '../types';
 export var PHXRadio = function (_a) {
-    var className = _a.className, label = _a.label, register = _a.register, title = _a.title, rest = __rest(_a, ["className", "label", "register", "title"]);
+    var className = _a.className, error = _a.error, errorMessage = _a.errorMessage, id = _a.id, label = _a.label, register = _a.register, title = _a.title, rest = __rest(_a, ["className", "error", "errorMessage", "id", "label", "register", "title"]);
     return (React.createElement("div", { className: className },
         React.createElement("label", { className: 'block text-xs font-normal text-gray-700' }, label),
-        React.createElement("div", { className: 'flex items-center mt-1' },
-            React.createElement("input", __assign({}, rest, register, { type: 'radio', className: 'h-4 w-4 border-gray-300 p-0 text-indigo-600 focus:ring-indigo-500' })),
-            React.createElement("label", { className: 'ml-3 block text-xs text-gray-700' }, title))));
+        React.createElement("div", { className: 'mt-1 flex items-center' },
+            React.createElement("input", __assign({ id: id }, rest, register, { className: classNames(error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '', 'h-4 w-4 border-gray-300 p-0 text-indigo-600 focus:ring-indigo-500'), type: 'radio' })),
+            React.createElement("label", { className: 'ml-3 block text-xs text-gray-700', htmlFor: id }, title)),
+        error && errorMessage ? (React.createElement("div", { className: 'ml-1 mt-1 flex items-center' },
+            React.createElement("svg", { className: 'mr-2 h-4 w-4 text-red-500', fill: 'none', stroke: 'currentColor', strokeWidth: '2', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
+                React.createElement("path", { d: 'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z', strokeLinecap: 'round', strokeLinejoin: 'round' })),
+            React.createElement("p", { className: 'text-xs text-red-800' }, errorMessage))) : null));
 };
 //# sourceMappingURL=Radio.js.map

package/dist/esm/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAUlD,MAAM,CAAC,IAAM,QAAQ,GAAyB,UAAC,EAA0D;IAAxD,IAAA,SAAS,eAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAK,IAAI,cAA5C,2CAA8C,CAAF;IACzF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QACvB,+BAAO,SAAS,EAAC,yCAAyC,IAAE,KAAK,CAAS;QAC1E,6BAAK,SAAS,EAAC,wBAAwB;YACrC,0CACM,IAAI,EACJ,QAAQ,IACZ,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,mEAAmE,IAC7E;YACF,+BAAO,SAAS,EAAC,kCAAkC,IAAE,KAAK,CAAS,CAC/D,CACF,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../../src/components/Radio/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAYrC,MAAM,CAAC,IAAM,QAAQ,GAAyB,UAAC,EASlC;IARX,IAAA,SAAS,eAAA,EACT,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,EAAE,QAAA,EACF,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cARsC,0EAS9C,CADQ;IACS,OAAA,CAChB,6BAAK,SAAS,EAAE,SAAS;QACvB,+BAAO,SAAS,EAAC,yCAAyC,IAAE,KAAK,CAAS;QAC1E,6BAAK,SAAS,EAAC,wBAAwB;YACrC,wCACE,EAAE,EAAE,EAAE,IACF,IAAI,EACJ,QAAQ,IACZ,SAAS,EAAE,UAAU,CACnB,KAAK,CAAC,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC,EAAE,EAC5F,mEAAmE,CACpE,EACD,IAAI,EAAC,OAAO,IACZ;YACF,+BAAO,SAAS,EAAC,kCAAkC,EAAC,OAAO,EAAE,EAAE,IAC5D,KAAK,CACA,CACJ;QACL,KAAK,IAAI,YAAY,CAAC,CAAC,CAAC,CACvB,6BAAK,SAAS,EAAC,6BAA6B;YAC1C,6BACE,SAAS,EAAC,2BAA2B,EACrC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;gBAElC,8BACE,CAAC,EAAC,0EAA0E,EAC5E,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,CACE;YAEN,2BAAG,SAAS,EAAC,sBAAsB,IAAE,YAAY,CAAK,CAClD,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;CAAA,CAAA"}

package/dist/esm/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface SkeletonProps {
+    size?: 'small' | 'medium' | 'large' | 'extra-large';
+    type?: 'default' | 'col' | 'single';
+    loadingHeader?: boolean;
+    className?: string;
+}
+export declare function PHXSkeleton({ className, loadingHeader, size, type, }: SkeletonProps): JSX.Element;

package/dist/esm/components/Skeleton/Skeleton.js

@@ -0,0 +1,55 @@
+import { PHXCard } from '../Card/Card';
+import React from 'react';
+import { classNames } from '../types';
+export function PHXSkeleton(_a) {
+    var className = _a.className, _b = _a.loadingHeader, loadingHeader = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? 'extra-large' : _c, _d = _a.type, type = _d === void 0 ? 'default' : _d;
+    var skeletonClass = classNames(
+    // @ts-ignore
+    size === 'small' && 'mx-auto md:w-4/6 lg:w-1/2', size === 'medium' && 'mx-auto md:w-5/6 lg:w-3/4', size === 'large' && 'mx-auto md:w-md lg:w-11/12', size === 'extra-large' && 'mx-auto w-full');
+    return (React.createElement(React.Fragment, null, type === 'single' ? (React.createElement("div", { className: "flex animate-pulse space-x-4 ".concat(className) },
+        React.createElement("div", { className: 'h-5 w-full rounded bg-gray-300' }))) : (React.createElement("div", { className: "".concat(className, " ").concat(skeletonClass) },
+        loadingHeader ? (React.createElement("div", { className: 'mb-8 flex animate-pulse space-x-4' },
+            React.createElement("div", { className: 'h-6 w-1/3 rounded bg-gray-200' }))) : null,
+        React.createElement("div", { className: classNames(type === 'default' ? '' : 'grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-6') },
+            React.createElement("div", { className: classNames(type === 'default' ? '' : 'grid grid-cols-1 gap-4 lg:col-span-2') },
+                React.createElement(PHXCard, null,
+                    React.createElement("div", { className: 'mb-4 flex animate-pulse space-x-4' },
+                        React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
+                            React.createElement("div", { className: 'h-6 w-1/4 rounded bg-gray-200' }),
+                            React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
+                            React.createElement("div", { className: 'space-y-3' },
+                                React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
+                                    React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
+                                    React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
+                                React.createElement("div", { className: 'h-2 rounded bg-gray-200' })))),
+                    React.createElement("div", { className: 'mb-4 flex animate-pulse space-x-4' },
+                        React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
+                            React.createElement("div", { className: 'h-6 w-1/4 rounded bg-gray-200' }),
+                            React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
+                            React.createElement("div", { className: 'space-y-3' },
+                                React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
+                                    React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
+                                    React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
+                                React.createElement("div", { className: 'h-2 rounded bg-gray-200' })))),
+                    React.createElement("div", { className: 'flex animate-pulse space-x-4' },
+                        React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
+                            React.createElement("div", { className: 'h-6 w-1/4 rounded bg-gray-200' }),
+                            React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
+                            React.createElement("div", { className: 'space-y-3' },
+                                React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
+                                    React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
+                                    React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
+                                React.createElement("div", { className: 'h-2 rounded bg-gray-200' })))))),
+            type === 'col' ? (React.createElement("div", { className: 'grid grid-cols-1 gap-4' },
+                React.createElement(PHXCard, null,
+                    React.createElement("div", { className: 'flex animate-pulse space-x-4' },
+                        React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
+                            React.createElement("div", { className: 'h-6 w-1/3 rounded bg-gray-200' }),
+                            React.createElement("div", { className: 'h-2 rounded bg-gray-200' }),
+                            React.createElement("div", { className: 'space-y-3' },
+                                React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
+                                    React.createElement("div", { className: 'col-span-2 h-2 rounded bg-gray-200' }),
+                                    React.createElement("div", { className: 'col-span-1 h-2 rounded bg-gray-200' })),
+                                React.createElement("div", { className: 'h-2 rounded bg-gray-200' }))))))) : null)))));
+}
+//# sourceMappingURL=Skeleton.js.map

package/dist/esm/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Skeleton/index.d.ts

@@ -1 +1 @@
-export * from './SkeletonLarge';
+export * from './Skeleton';

package/dist/esm/components/Skeleton/index.js

@@ -1,2 +1,2 @@
-export * from './SkeletonLarge';
+export * from './Skeleton';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/dist/esm/components/Table/SkeletonLarge.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function SkeletonLarge(): JSX.Element;

package/dist/esm/components/Table/SkeletonLarge.js

@@ -0,0 +1,32 @@
+import React from 'react';
+export default function SkeletonLarge() {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: 'mx-auto mb-4 w-full rounded-md p-4 shadow' },
+            React.createElement("div", { className: 'flex animate-pulse space-x-4' },
+                React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
+                    React.createElement("div", { className: 'h-2 rounded bg-slate-200' }),
+                    React.createElement("div", { className: 'space-y-3' },
+                        React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
+                            React.createElement("div", { className: 'col-span-2 h-2 rounded bg-slate-200' }),
+                            React.createElement("div", { className: 'col-span-1 h-2 rounded bg-slate-200' })),
+                        React.createElement("div", { className: 'h-2 rounded bg-slate-200' }))))),
+        React.createElement("div", { className: 'mx-auto mb-4 w-full rounded-md p-4 shadow' },
+            React.createElement("div", { className: 'flex animate-pulse space-x-4' },
+                React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
+                    React.createElement("div", { className: 'h-2 rounded bg-slate-200' }),
+                    React.createElement("div", { className: 'space-y-3' },
+                        React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
+                            React.createElement("div", { className: 'col-span-2 h-2 rounded bg-slate-200' }),
+                            React.createElement("div", { className: 'col-span-1 h-2 rounded bg-slate-200' })),
+                        React.createElement("div", { className: 'h-2 rounded bg-slate-200' }))))),
+        React.createElement("div", { className: 'mx-auto mb-4 w-full rounded-md p-4 shadow' },
+            React.createElement("div", { className: 'flex animate-pulse space-x-4' },
+                React.createElement("div", { className: 'flex-1 space-y-6 py-1' },
+                    React.createElement("div", { className: 'h-2 rounded bg-slate-200' }),
+                    React.createElement("div", { className: 'space-y-3' },
+                        React.createElement("div", { className: 'grid grid-cols-3 gap-4' },
+                            React.createElement("div", { className: 'col-span-2 h-2 rounded bg-slate-200' }),
+                            React.createElement("div", { className: 'col-span-1 h-2 rounded bg-slate-200' })),
+                        React.createElement("div", { className: 'h-2 rounded bg-slate-200' })))))));
+}
+//# sourceMappingURL=SkeletonLarge.js.map