phx-react 1.3.7 → 1.3.8

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

@@ -8,7 +8,9 @@ export interface CardProps {
     children?: React.ReactNode;
     primaryFooterAction?: ComplexAction;
     primaryHeader?: boolean;
+    headerAction?: ComplexAction;
     secondaryFooterActions?: ComplexAction[];
+    dangerFooterAction?: ComplexAction;
 }
 export declare const PHXCard: React.FunctionComponent<CardProps> & {
     Section: typeof Section;

package/dist/cjs/components/Card/Card.js

@@ -7,18 +7,23 @@ var Section_1 = tslib_1.__importDefault(require("./Section"));
 var WrapSection_1 = tslib_1.__importDefault(require("./WrapSection"));
 var Footer_1 = tslib_1.__importDefault(require("./Footer"));
 var Button_1 = require("../Button");
+var solid_1 = require("@heroicons/react/24/solid");
 var PHXCard = function Card(_a) {
-    var children = _a.children, title = _a.title, primaryFooterAction = _a.primaryFooterAction, primaryHeader = _a.primaryHeader, secondaryFooterActions = _a.secondaryFooterActions;
-    var footerActionMarkup = primaryFooterAction || secondaryFooterActions ? (react_1["default"].createElement("div", { className: 'bg-gray-50 px-4 py-4 sm:px-6 flex justify-end gap-x-3' },
+    var children = _a.children, title = _a.title, primaryFooterAction = _a.primaryFooterAction, primaryHeader = _a.primaryHeader, secondaryFooterActions = _a.secondaryFooterActions, headerAction = _a.headerAction, dangerFooterAction = _a.dangerFooterAction;
+    var footerActionMarkup = primaryFooterAction || secondaryFooterActions || dangerFooterAction ? (react_1["default"].createElement("div", { className: 'bg-gray-100 px-4 py-4 sm:px-6 flex justify-end gap-x-3' },
         secondaryFooterActions && secondaryFooterActions.length === 1 && secondaryFooterActions[0].content && (react_1["default"].createElement(Button_1.PHXButton, { secondary: true, size: 'small', onClick: secondaryFooterActions[0].onClick }, secondaryFooterActions[0].content)),
-        primaryFooterAction && primaryFooterAction.content && (react_1["default"].createElement(Button_1.PHXButton, { primary: true, submit: primaryFooterAction.submit ? true : false, size: 'small', onClick: primaryFooterAction.onClick, disabled: primaryFooterAction.disabled }, primaryFooterAction.content)))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
-    var headerActionMarkup = primaryHeader ? (react_1["default"].createElement("div", { className: 'px-4 py-5 sm:px-6' },
-        react_1["default"].createElement("h3", { className: 'text-base font-semibold leading-6 text-gray-900' }, title))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
+        primaryFooterAction && primaryFooterAction.content && (react_1["default"].createElement(Button_1.PHXButton, { primary: true, submit: primaryFooterAction.submit ? true : false, size: 'small', onClick: primaryFooterAction.onClick, disabled: primaryFooterAction.disabled }, primaryFooterAction.content)),
+        dangerFooterAction && dangerFooterAction.content && (react_1["default"].createElement(Button_1.PHXButton, { danger2: true, submit: dangerFooterAction.submit ? true : false, size: 'small', onClick: dangerFooterAction.onClick }, dangerFooterAction.content)))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
+    var headerActionMarkup = primaryHeader ? (react_1["default"].createElement("div", { className: 'flex justify-between items-center px-4 py-4 sm:px-6' },
+        react_1["default"].createElement("h3", { className: 'text-base font-semibold leading-6 text-gray-900' }, title),
+        headerAction && (react_1["default"].createElement("button", { type: 'button', className: 'rounded-md p-0.5 bg-white text-gray-400 hover:bg-gray-100', onClick: headerAction.onClick },
+            react_1["default"].createElement("span", { className: 'sr-only' }, "Close"),
+            react_1["default"].createElement(solid_1.XMarkIcon, { className: 'h-5 w-5', "aria-hidden": 'true' }))))) : (react_1["default"].createElement(react_1["default"].Fragment, null));
     return (react_1["default"].createElement("div", { className: 'w-full' },
         react_1["default"].createElement("div", { className: 'mx-auto max-w-3xl px-0 lg:max-w-full' },
             react_1["default"].createElement("div", { className: 'divide-y divide-gray-200 overflow-hidden shadow-[0rem_0.0825rem_0rem_#00000012] rounded-lg bg-white border border-gray-200' },
                 headerActionMarkup,
-                react_1["default"].createElement("div", { className: 'px-4 py-5 sm:p-6' }, children),
+                react_1["default"].createElement("div", { className: 'px-4 py-4 sm:px-6' }, children),
                 footerActionMarkup))));
 };
 exports.PHXCard = PHXCard;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,8DAA+B;AAC/B,sEAAuC;AACvC,4DAA6B;AAE7B,oCAAqC;AAU9B,IAAM,OAAO,GAIhB,SAAS,IAAI,CAAC,EAA0F;QAAxF,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,mBAAmB,yBAAA,EAAE,aAAa,mBAAA,EAAE,sBAAsB,4BAAA;IAC7F,IAAM,kBAAkB,GACtB,mBAAmB,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAC9C,0CAAK,SAAS,EAAC,uDAAuD;QAEnE,sBAAsB,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CACrG,iCAAC,kBAAS,IAAC,SAAS,QAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,IACzE,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,CACxB,CACb;QAGA,mBAAmB,IAAI,mBAAmB,CAAC,OAAO,IAAI,CACrD,iCAAC,kBAAS,IACR,OAAO,QACP,MAAM,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACjD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,mBAAmB,CAAC,OAAO,EACpC,QAAQ,EAAE,mBAAmB,CAAC,QAAQ,IAErC,mBAAmB,CAAC,OAAO,CAClB,CACb,CACG,CACP,CAAC,CAAC,CAAC,CACF,mEAAK,CACN,CAAA;IAEH,IAAM,kBAAkB,GAAG,aAAa,CAAC,CAAC,CAAC,CACzC,0CAAK,SAAS,EAAC,mBAAmB;QAChC,yCAAI,SAAS,EAAC,iDAAiD,IAAE,KAAK,CAAM,CACxE,CACP,CAAC,CAAC,CAAC,CACF,mEAAK,CACN,CAAA;IAED,OAAO,CACL,0CAAK,SAAS,EAAC,QAAQ;QACrB,0CAAK,SAAS,EAAC,sCAAsC;YACnD,0CAAK,SAAS,EAAC,4HAA4H;gBACxI,kBAAkB;gBACnB,0CAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO;gBACjD,kBAAkB,CACf,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAnDY,QAAA,OAAO,WAmDnB;AAED,eAAO,CAAC,OAAO,GAAG,oBAAO,CAAA;AACzB,eAAO,CAAC,WAAW,GAAG,wBAAW,CAAA;AACjC,eAAO,CAAC,MAAM,GAAG,mBAAM,CAAA"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;AAAA,wDAAyB;AACzB,8DAA+B;AAC/B,sEAAuC;AACvC,4DAA6B;AAE7B,oCAAqC;AACrC,mDAAqD;AAY9C,IAAM,OAAO,GAIhB,SAAS,IAAI,CAAC,EAQN;QAPV,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,mBAAmB,yBAAA,EACnB,aAAa,mBAAA,EACb,sBAAsB,4BAAA,EACtB,YAAY,kBAAA,EACZ,kBAAkB,wBAAA;IAElB,IAAM,kBAAkB,GACtB,mBAAmB,IAAI,sBAAsB,IAAI,kBAAkB,CAAC,CAAC,CAAC,CACpE,0CAAK,SAAS,EAAC,wDAAwD;QAEpE,sBAAsB,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CACrG,iCAAC,kBAAS,IAAC,SAAS,QAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,IACzE,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,CACxB,CACb;QAGA,mBAAmB,IAAI,mBAAmB,CAAC,OAAO,IAAI,CACrD,iCAAC,kBAAS,IACR,OAAO,QACP,MAAM,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACjD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,mBAAmB,CAAC,OAAO,EACpC,QAAQ,EAAE,mBAAmB,CAAC,QAAQ,IAErC,mBAAmB,CAAC,OAAO,CAClB,CACb;QAGA,kBAAkB,IAAI,kBAAkB,CAAC,OAAO,IAAI,CACnD,iCAAC,kBAAS,IACR,OAAO,QACP,MAAM,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAChD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,kBAAkB,CAAC,OAAO,IAElC,kBAAkB,CAAC,OAAO,CACjB,CACb,CACG,CACP,CAAC,CAAC,CAAC,CACF,mEAAK,CACN,CAAA;IAEH,IAAM,kBAAkB,GAAG,aAAa,CAAC,CAAC,CAAC,CACzC,0CAAK,SAAS,EAAC,qDAAqD;QAClE,yCAAI,SAAS,EAAC,iDAAiD,IAAE,KAAK,CAAM;QAC3E,YAAY,IAAI,CACf,6CACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,2DAA2D,EACrE,OAAO,EAAE,YAAY,CAAC,OAAO;YAE7B,2CAAM,SAAS,EAAC,SAAS,YAAa;YACtC,iCAAC,iBAAS,IAAC,SAAS,EAAC,SAAS,iBAAa,MAAM,GAAG,CAC7C,CACV,CACG,CACP,CAAC,CAAC,CAAC,CACF,mEAAK,CACN,CAAA;IAED,OAAO,CACL,0CAAK,SAAS,EAAC,QAAQ;QACrB,0CAAK,SAAS,EAAC,sCAAsC;YACnD,0CAAK,SAAS,EAAC,4HAA4H;gBACxI,kBAAkB;gBACnB,0CAAK,SAAS,EAAC,mBAAmB,IAAE,QAAQ,CAAO;gBAClD,kBAAkB,CACf,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAjFY,QAAA,OAAO,WAiFnB;AAED,eAAO,CAAC,OAAO,GAAG,oBAAO,CAAA;AACzB,eAAO,CAAC,WAAW,GAAG,wBAAW,CAAA;AACjC,eAAO,CAAC,MAAM,GAAG,mBAAM,CAAA"}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface ModalProps {
+    show?: boolean;
+    title?: string;
+    primaryActionText?: string;
+    dangerActionText?: string;
+    children?: any;
+    onPrimaryClick?(): void;
+    onDangerClick?(): void;
+}
+export declare const PHXModal: ({ show, title, primaryActionText, dangerActionText, children, onPrimaryClick, onDangerClick, }: ModalProps) => JSX.Element;

package/dist/cjs/components/Modal/Modal.js

@@ -0,0 +1,29 @@
+"use strict";
+exports.__esModule = true;
+exports.PHXModal = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_2 = require("@headlessui/react");
+var Card_1 = require("../Card");
+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, onPrimaryClick = _a.onPrimaryClick, onDangerClick = _a.onDangerClick;
+    var _c = (0, react_1.useState)(false), open = _c[0], setOpen = _c[1];
+    (0, react_1.useEffect)(function () {
+        // @ts-ignore
+        setOpen(show);
+    }, [show]);
+    var handleClickCloseAction = function () {
+        setOpen(false);
+    };
+    return (react_1["default"].createElement(react_2.Transition.Root, { show: open, as: react_1.Fragment },
+        react_1["default"].createElement(react_2.Dialog, { as: 'div', className: 'relative z-10', onClose: setOpen },
+            react_1["default"].createElement(react_2.Transition.Child, { as: react_1.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_1["default"].createElement("div", { className: 'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity' })),
+            react_1["default"].createElement("div", { className: 'fixed inset-0 z-10 overflow-y-auto' },
+                react_1["default"].createElement("div", { className: 'flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0' },
+                    react_1["default"].createElement(react_2.Transition.Child, { as: react_1.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_1["default"].createElement(react_2.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_1["default"].createElement(Card_1.PHXCard, { primaryHeader: true, title: title, headerAction: { onClick: handleClickCloseAction }, secondaryFooterActions: [{ content: 'Hủy thay đổi', onClick: handleClickCloseAction }], primaryFooterAction: { content: primaryActionText, onClick: onPrimaryClick }, dangerFooterAction: { content: dangerActionText, onClick: onDangerClick } }, children))))))));
+};
+exports.PHXModal = PHXModal;
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":";;;;AAAA,qDAA4D;AAC5D,2CAAsD;AACtD,gCAAiC;AAY1B,IAAM,QAAQ,GAAG,UAAC,EAQZ;QAPX,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,yBAAyB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,gBAAgB,sBAAA,EAChB,QAAQ,cAAA,EACR,cAAc,oBAAA,EACd,aAAa,mBAAA;IAEP,IAAA,KAAkB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAA;IAEvC,IAAA,iBAAS,EAAC;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;IAChB,CAAC,CAAA;IAED,OAAO,CACL,iCAAC,kBAAU,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,gBAAQ;QACvC,iCAAC,cAAM,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,OAAO;YACzD,iCAAC,kBAAU,CAAC,KAAK,IACf,EAAE,EAAE,gBAAQ,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,0CAAK,SAAS,EAAC,4DAA4D,GAAG,CAC7D;YAEnB,0CAAK,SAAS,EAAC,oCAAoC;gBACjD,0CAAK,SAAS,EAAC,oFAAoF;oBACjG,iCAAC,kBAAU,CAAC,KAAK,IACf,EAAE,EAAE,gBAAQ,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,iCAAC,cAAM,CAAC,KAAK,IAAC,SAAS,EAAC,yHAAyH;4BAC/I,iCAAC,cAAO,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,EAC5E,kBAAkB,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAE,IAExE,QAAQ,CACD,CACG,CACE,CACf,CACF,CACC,CACO,CACnB,CAAA;AACH,CAAC,CAAA;AAhEY,QAAA,QAAQ,YAgEpB"}

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const ContentModal: {
+    (): JSX.Element;
+    propTypes: {};
+};
+export default ContentModal;

package/dist/cjs/demo/ContentModal.js

@@ -0,0 +1,15 @@
+"use strict";
+exports.__esModule = true;
+var tslib_1 = require("tslib");
+var react_1 = require("@headlessui/react");
+var react_2 = tslib_1.__importDefault(require("react"));
+var ContentModal = function () {
+    return (react_2["default"].createElement("div", { className: 'sm:flex sm:items-start' },
+        react_2["default"].createElement("div", { className: 'text-center sm:mt-0 sm:text-left' },
+            react_2["default"].createElement(react_1.Dialog.Title, { as: 'h3', className: 'text-base font-semibold leading-6 text-gray-900' }, "Deactivate account"),
+            react_2["default"].createElement("div", { className: 'mt-2' },
+                react_2["default"].createElement("p", { className: 'text-sm text-gray-500' }, "Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.")))));
+};
+ContentModal.propTypes = {};
+exports["default"] = ContentModal;
+//# sourceMappingURL=ContentModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentModal.js","sourceRoot":"","sources":["../../../src/demo/ContentModal.tsx"],"names":[],"mappings":";;;AAAA,2CAA0C;AAC1C,wDAAyB;AAEzB,IAAM,YAAY,GAAG;IACnB,OAAO,CACL,0CAAK,SAAS,EAAC,wBAAwB;QACrC,0CAAK,SAAS,EAAC,kCAAkC;YAC/C,iCAAC,cAAM,CAAC,KAAK,IAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAC,iDAAiD,yBAElE;YACf,0CAAK,SAAS,EAAC,MAAM;gBACnB,wCAAG,SAAS,EAAC,uBAAuB,6JAGhC,CACA,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,YAAY,CAAC,SAAS,GAAG,EAAE,CAAA;AAE3B,qBAAe,YAAY,CAAA"}

package/dist/cjs/index.d.ts

@@ -18,4 +18,5 @@ import PHXFuncGetLoggedInfo from './components/Func/getLoginInfo';
 import PHXClientQuery from './components/Func/clientQueryV2';
 import PHXClientMutation from './components/Func/clientMutationV2';
 import { PHXTextarea } from './components/Textarea';
-export { MyCounter, PHXButton, PHXCard, PHXSpinner, PHXMainWrap, PHXFormWrap, PHXHeaderBar, PHXTable, PHXInput, PHXSelect, PHXRadio, PHXCheckbox, PHXFormStep, PHXNotifications, PHXStep, PHXSkeletonLarge, PHXFuncGetLoggedInfo, PHXClientQuery, PHXClientMutation, PHXTextarea, };
+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, };

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-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.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;
 var tslib_1 = require("tslib");
 var Step_1 = require("./components/Step");
 exports.PHXStep = Step_1.PHXStep;
@@ -42,4 +42,6 @@ var clientMutationV2_1 = tslib_1.__importDefault(require("./components/Func/clie
 exports.PHXClientMutation = clientMutationV2_1["default"];
 var Textarea_1 = require("./components/Textarea");
 exports.PHXTextarea = Textarea_1.PHXTextarea;
+var Modal_1 = require("./components/Modal");
+exports.PHXModal = Modal_1.PHXModal;
 //# 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;AAoCzC,kBApCO,cAAO,CAoCP;AAnCT,iEAAwC;AAqBtC,oBArBK,gBAAS,CAqBL;AApBX,8CAA+C;AAqB7C,oBArBO,kBAAS,CAqBP;AApBX,0CAA2C;AAqBzC,kBArBO,cAAO,CAqBP;AApBT,gDAAiD;AAqB/C,qBArBO,oBAAU,CAqBP;AApBZ,kDAAmD;AAqBjD,sBArBO,sBAAW,CAqBP;AApBb,4CAA6C;AAuB3C,mBAvBO,gBAAQ,CAuBP;AAtBV,kDAAmD;AAoBjD,sBApBO,sBAAW,CAoBP;AAnBb,oDAAqD;AAoBnD,uBApBO,wBAAY,CAoBP;AAnBd,4CAA6C;AAqB3C,mBArBO,gBAAQ,CAqBP;AApBV,8CAA+C;AAqB7C,oBArBO,kBAAS,CAqBP;AApBX,4CAA6C;AAqB3C,mBArBO,gBAAQ,CAqBP;AApBV,kDAAmD;AAqBjD,sBArBO,sBAAW,CAqBP;AApBb,kDAAmD;AAqBjD,sBArBO,sBAAW,CAqBP;AApBb,4DAA6D;AAqB3D,2BArBO,gCAAgB,CAqBP;AApBlB,kDAAwD;AAsBtD,2BAtBO,2BAAgB,CAsBP;AArBlB,wFAAiE;AAsB/D,+BAtBK,yBAAoB,CAsBL;AArBtB,0FAA4D;AAsB1D,yBAtBK,0BAAc,CAsBL;AArBhB,gGAAkE;AAsBhE,4BAtBK,6BAAiB,CAsBL;AArBnB,kDAAmD;AAsBjD,sBAtBO,sBAAW,CAsBP"}
+{"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"}

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

@@ -8,7 +8,9 @@ export interface CardProps {
     children?: React.ReactNode;
     primaryFooterAction?: ComplexAction;
     primaryHeader?: boolean;
+    headerAction?: ComplexAction;
     secondaryFooterActions?: ComplexAction[];
+    dangerFooterAction?: ComplexAction;
 }
 export declare const PHXCard: React.FunctionComponent<CardProps> & {
     Section: typeof Section;

package/dist/esm/components/Card/Card.js

@@ -3,18 +3,23 @@ import Section from './Section';
 import WrapSection from './WrapSection';
 import Footer from './Footer';
 import { PHXButton } from '../Button';
+import { XMarkIcon } from '@heroicons/react/24/solid';
 export var PHXCard = function Card(_a) {
-    var children = _a.children, title = _a.title, primaryFooterAction = _a.primaryFooterAction, primaryHeader = _a.primaryHeader, secondaryFooterActions = _a.secondaryFooterActions;
-    var footerActionMarkup = primaryFooterAction || secondaryFooterActions ? (React.createElement("div", { className: 'bg-gray-50 px-4 py-4 sm:px-6 flex justify-end gap-x-3' },
+    var children = _a.children, title = _a.title, primaryFooterAction = _a.primaryFooterAction, primaryHeader = _a.primaryHeader, secondaryFooterActions = _a.secondaryFooterActions, headerAction = _a.headerAction, dangerFooterAction = _a.dangerFooterAction;
+    var footerActionMarkup = primaryFooterAction || secondaryFooterActions || dangerFooterAction ? (React.createElement("div", { className: 'bg-gray-100 px-4 py-4 sm:px-6 flex justify-end gap-x-3' },
         secondaryFooterActions && secondaryFooterActions.length === 1 && secondaryFooterActions[0].content && (React.createElement(PHXButton, { secondary: true, size: 'small', onClick: secondaryFooterActions[0].onClick }, secondaryFooterActions[0].content)),
-        primaryFooterAction && primaryFooterAction.content && (React.createElement(PHXButton, { primary: true, submit: primaryFooterAction.submit ? true : false, size: 'small', onClick: primaryFooterAction.onClick, disabled: primaryFooterAction.disabled }, primaryFooterAction.content)))) : (React.createElement(React.Fragment, null));
-    var headerActionMarkup = primaryHeader ? (React.createElement("div", { className: 'px-4 py-5 sm:px-6' },
-        React.createElement("h3", { className: 'text-base font-semibold leading-6 text-gray-900' }, title))) : (React.createElement(React.Fragment, null));
+        primaryFooterAction && primaryFooterAction.content && (React.createElement(PHXButton, { primary: true, submit: primaryFooterAction.submit ? true : false, size: 'small', onClick: primaryFooterAction.onClick, disabled: primaryFooterAction.disabled }, primaryFooterAction.content)),
+        dangerFooterAction && dangerFooterAction.content && (React.createElement(PHXButton, { danger2: true, submit: dangerFooterAction.submit ? true : false, size: 'small', onClick: dangerFooterAction.onClick }, dangerFooterAction.content)))) : (React.createElement(React.Fragment, null));
+    var headerActionMarkup = primaryHeader ? (React.createElement("div", { className: 'flex justify-between items-center px-4 py-4 sm:px-6' },
+        React.createElement("h3", { className: 'text-base font-semibold leading-6 text-gray-900' }, title),
+        headerAction && (React.createElement("button", { type: 'button', className: 'rounded-md p-0.5 bg-white text-gray-400 hover:bg-gray-100', onClick: headerAction.onClick },
+            React.createElement("span", { className: 'sr-only' }, "Close"),
+            React.createElement(XMarkIcon, { className: 'h-5 w-5', "aria-hidden": 'true' }))))) : (React.createElement(React.Fragment, null));
     return (React.createElement("div", { className: 'w-full' },
         React.createElement("div", { className: 'mx-auto max-w-3xl px-0 lg:max-w-full' },
             React.createElement("div", { className: 'divide-y divide-gray-200 overflow-hidden shadow-[0rem_0.0825rem_0rem_#00000012] rounded-lg bg-white border border-gray-200' },
                 headerActionMarkup,
-                React.createElement("div", { className: 'px-4 py-5 sm:p-6' }, children),
+                React.createElement("div", { className: 'px-4 py-4 sm:px-6' }, children),
                 footerActionMarkup))));
 };
 PHXCard.Section = Section;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,WAAW,MAAM,eAAe,CAAA;AACvC,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAUrC,MAAM,CAAC,IAAM,OAAO,GAIhB,SAAS,IAAI,CAAC,EAA0F;QAAxF,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,mBAAmB,yBAAA,EAAE,aAAa,mBAAA,EAAE,sBAAsB,4BAAA;IAC7F,IAAM,kBAAkB,GACtB,mBAAmB,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAC9C,6BAAK,SAAS,EAAC,uDAAuD;QAEnE,sBAAsB,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CACrG,oBAAC,SAAS,IAAC,SAAS,QAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,IACzE,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,CACxB,CACb;QAGA,mBAAmB,IAAI,mBAAmB,CAAC,OAAO,IAAI,CACrD,oBAAC,SAAS,IACR,OAAO,QACP,MAAM,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACjD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,mBAAmB,CAAC,OAAO,EACpC,QAAQ,EAAE,mBAAmB,CAAC,QAAQ,IAErC,mBAAmB,CAAC,OAAO,CAClB,CACb,CACG,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CAAA;IAEH,IAAM,kBAAkB,GAAG,aAAa,CAAC,CAAC,CAAC,CACzC,6BAAK,SAAS,EAAC,mBAAmB;QAChC,4BAAI,SAAS,EAAC,iDAAiD,IAAE,KAAK,CAAM,CACxE,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,QAAQ;QACrB,6BAAK,SAAS,EAAC,sCAAsC;YACnD,6BAAK,SAAS,EAAC,4HAA4H;gBACxI,kBAAkB;gBACnB,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO;gBACjD,kBAAkB,CACf,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,CAAC,OAAO,GAAG,OAAO,CAAA;AACzB,OAAO,CAAC,WAAW,GAAG,WAAW,CAAA;AACjC,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,WAAW,MAAM,eAAe,CAAA;AACvC,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAYrD,MAAM,CAAC,IAAM,OAAO,GAIhB,SAAS,IAAI,CAAC,EAQN;QAPV,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,mBAAmB,yBAAA,EACnB,aAAa,mBAAA,EACb,sBAAsB,4BAAA,EACtB,YAAY,kBAAA,EACZ,kBAAkB,wBAAA;IAElB,IAAM,kBAAkB,GACtB,mBAAmB,IAAI,sBAAsB,IAAI,kBAAkB,CAAC,CAAC,CAAC,CACpE,6BAAK,SAAS,EAAC,wDAAwD;QAEpE,sBAAsB,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,IAAI,CACrG,oBAAC,SAAS,IAAC,SAAS,QAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,IACzE,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,CACxB,CACb;QAGA,mBAAmB,IAAI,mBAAmB,CAAC,OAAO,IAAI,CACrD,oBAAC,SAAS,IACR,OAAO,QACP,MAAM,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACjD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,mBAAmB,CAAC,OAAO,EACpC,QAAQ,EAAE,mBAAmB,CAAC,QAAQ,IAErC,mBAAmB,CAAC,OAAO,CAClB,CACb;QAGA,kBAAkB,IAAI,kBAAkB,CAAC,OAAO,IAAI,CACnD,oBAAC,SAAS,IACR,OAAO,QACP,MAAM,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAChD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,kBAAkB,CAAC,OAAO,IAElC,kBAAkB,CAAC,OAAO,CACjB,CACb,CACG,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CAAA;IAEH,IAAM,kBAAkB,GAAG,aAAa,CAAC,CAAC,CAAC,CACzC,6BAAK,SAAS,EAAC,qDAAqD;QAClE,4BAAI,SAAS,EAAC,iDAAiD,IAAE,KAAK,CAAM;QAC3E,YAAY,IAAI,CACf,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,2DAA2D,EACrE,OAAO,EAAE,YAAY,CAAC,OAAO;YAE7B,8BAAM,SAAS,EAAC,SAAS,YAAa;YACtC,oBAAC,SAAS,IAAC,SAAS,EAAC,SAAS,iBAAa,MAAM,GAAG,CAC7C,CACV,CACG,CACP,CAAC,CAAC,CAAC,CACF,yCAAK,CACN,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,QAAQ;QACrB,6BAAK,SAAS,EAAC,sCAAsC;YACnD,6BAAK,SAAS,EAAC,4HAA4H;gBACxI,kBAAkB;gBACnB,6BAAK,SAAS,EAAC,mBAAmB,IAAE,QAAQ,CAAO;gBAClD,kBAAkB,CACf,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,CAAC,OAAO,GAAG,OAAO,CAAA;AACzB,OAAO,CAAC,WAAW,GAAG,WAAW,CAAA;AACjC,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA"}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface ModalProps {
+    show?: boolean;
+    title?: string;
+    primaryActionText?: string;
+    dangerActionText?: string;
+    children?: any;
+    onPrimaryClick?(): void;
+    onDangerClick?(): void;
+}
+export declare const PHXModal: ({ show, title, primaryActionText, dangerActionText, children, onPrimaryClick, onDangerClick, }: ModalProps) => JSX.Element;

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

@@ -0,0 +1,24 @@
+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, onPrimaryClick = _a.onPrimaryClick, onDangerClick = _a.onDangerClick;
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    useEffect(function () {
+        // @ts-ignore
+        setOpen(show);
+    }, [show]);
+    var handleClickCloseAction = function () {
+        setOpen(false);
+    };
+    return (React.createElement(Transition.Root, { show: open, as: Fragment },
+        React.createElement(Dialog, { as: 'div', className: 'relative z-10', onClose: setOpen },
+            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: '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, onClick: onPrimaryClick }, dangerFooterAction: { content: dangerActionText, onClick: onDangerClick } }, children))))))));
+};
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +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;AAYjC,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAC,EAQZ;QAPX,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,yBAAyB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,gBAAgB,sBAAA,EAChB,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;IAChB,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,OAAO;YACzD,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,EAC5E,kBAAkB,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAE,IAExE,QAAQ,CACD,CACG,CACE,CACf,CACF,CACC,CACO,CACnB,CAAA;AACH,CAAC,CAAA"}

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

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

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

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

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

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

package/dist/esm/demo/ContentModal.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const ContentModal: {
+    (): JSX.Element;
+    propTypes: {};
+};
+export default ContentModal;

package/dist/esm/demo/ContentModal.js

@@ -0,0 +1,12 @@
+import { Dialog } from '@headlessui/react';
+import React from 'react';
+var ContentModal = function () {
+    return (React.createElement("div", { className: 'sm:flex sm:items-start' },
+        React.createElement("div", { className: 'text-center sm:mt-0 sm:text-left' },
+            React.createElement(Dialog.Title, { as: 'h3', className: 'text-base font-semibold leading-6 text-gray-900' }, "Deactivate account"),
+            React.createElement("div", { className: 'mt-2' },
+                React.createElement("p", { className: 'text-sm text-gray-500' }, "Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.")))));
+};
+ContentModal.propTypes = {};
+export default ContentModal;
+//# sourceMappingURL=ContentModal.js.map

package/dist/esm/demo/ContentModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentModal.js","sourceRoot":"","sources":["../../../src/demo/ContentModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,IAAM,YAAY,GAAG;IACnB,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;QACrC,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,oBAAC,MAAM,CAAC,KAAK,IAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAC,iDAAiD,yBAElE;YACf,6BAAK,SAAS,EAAC,MAAM;gBACnB,2BAAG,SAAS,EAAC,uBAAuB,6JAGhC,CACA,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,YAAY,CAAC,SAAS,GAAG,EAAE,CAAA;AAE3B,eAAe,YAAY,CAAA"}

package/dist/esm/index.d.ts

@@ -18,4 +18,5 @@ import PHXFuncGetLoggedInfo from './components/Func/getLoginInfo';
 import PHXClientQuery from './components/Func/clientQueryV2';
 import PHXClientMutation from './components/Func/clientMutationV2';
 import { PHXTextarea } from './components/Textarea';
-export { MyCounter, PHXButton, PHXCard, PHXSpinner, PHXMainWrap, PHXFormWrap, PHXHeaderBar, PHXTable, PHXInput, PHXSelect, PHXRadio, PHXCheckbox, PHXFormStep, PHXNotifications, PHXStep, PHXSkeletonLarge, PHXFuncGetLoggedInfo, PHXClientQuery, PHXClientMutation, PHXTextarea, };
+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, };

package/dist/esm/index.js

@@ -18,5 +18,6 @@ import PHXFuncGetLoggedInfo from './components/Func/getLoginInfo';
 import PHXClientQuery from './components/Func/clientQueryV2';
 import PHXClientMutation from './components/Func/clientMutationV2';
 import { PHXTextarea } from './components/Textarea';
-export { MyCounter, PHXButton, PHXCard, PHXSpinner, PHXMainWrap, PHXFormWrap, PHXHeaderBar, PHXTable, PHXInput, PHXSelect, PHXRadio, PHXCheckbox, PHXFormStep, PHXNotifications, PHXStep, PHXSkeletonLarge, PHXFuncGetLoggedInfo, PHXClientQuery, PHXClientMutation, PHXTextarea, };
+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, };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,oBAAoB,MAAM,gCAAgC,CAAA;AACjE,OAAO,cAAc,MAAM,iCAAiC,CAAA;AAC5D,OAAO,iBAAiB,MAAM,oCAAoC,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEnD,OAAO,EACL,SAAS,EACT,SAAS,EACT,OAAO,EACP,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,iBAAiB,EACjB,WAAW,GACZ,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,oBAAoB,MAAM,gCAAgC,CAAA;AACjE,OAAO,cAAc,MAAM,iCAAiC,CAAA;AAC5D,OAAO,iBAAiB,MAAM,oCAAoC,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,EACL,SAAS,EACT,SAAS,EACT,OAAO,EACP,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,QAAQ,GACT,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phx-react",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "My first react typescript package",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",