@consumidor-positivo/aurora 0.3.0 → 0.4.0

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

@@ -1,12 +1,15 @@
 
 type ModalLayout = 'default' | 'centralized';
-type ModalProps = {
+type ModalLayoutMobile = 'default' | 'centralized' | 'full-screen';
+export type ModalProps = {
     isOpen: boolean;
     onClose?: () => void;
     headerContent?: React.ReactNode | string | JSX.Element | JSX.Element[];
     content?: React.ReactNode | string | JSX.Element | JSX.Element[];
-    layoutMobile?: ModalLayout;
+    layoutMobile?: ModalLayoutMobile;
     layoutDesktop?: ModalLayout;
+    mobileModalTitle?: string;
+    handleHelpInfo?: () => void;
 };
-export declare const Modal: ({ isOpen, onClose, headerContent, content, layoutMobile, layoutDesktop, }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Modal: ({ isOpen, onClose, headerContent, content, layoutMobile, layoutDesktop, mobileModalTitle, handleHelpInfo, }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -2,26 +2,41 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c as classNames } from "../../index-BXRA68j0.js";
 import "../Icon/index.es.js";
 import { IconX } from "../icons/IconX/index.es.js";
-import { W as When } from "../../react-if.esm-CoCMV6iA.js";
+import { SubHeader } from "../SubHeader/index.es.js";
+import { I as If, T as Then, W as When, E as Else } from "../../react-if.esm-CoCMV6iA.js";
+import { i as isMobile } from "../../isMobile-RyKhTreE.js";
 import './styles.css';const Modal = ({
   isOpen,
   onClose,
   headerContent,
   content,
   layoutMobile = "default",
-  layoutDesktop = "default"
+  layoutDesktop = "default",
+  mobileModalTitle = "Título",
+  handleHelpInfo
 }) => {
   if (!isOpen) return null;
   const modalClasses = classNames("au-modal", {
     "au-modal--is-open": isOpen,
+    "au-modal--mobile-full-screen": layoutMobile === "full-screen",
     "au-modal--mobile-centralized": layoutMobile === "centralized",
     "au-modal--desktop-centralized": layoutDesktop === "centralized"
   });
   return /* @__PURE__ */ jsx("div", { className: modalClasses, children: /* @__PURE__ */ jsxs("div", { className: "au-modal__container", children: [
-    /* @__PURE__ */ jsxs("div", { className: "au-modal__header", children: [
-      /* @__PURE__ */ jsx(When, { condition: !!onClose, children: /* @__PURE__ */ jsx("button", { className: "au-modal__header-close", onClick: onClose, children: /* @__PURE__ */ jsx(IconX, {}) }) }),
-      headerContent
-    ] }),
+    /* @__PURE__ */ jsx("div", { className: "au-modal__header", children: /* @__PURE__ */ jsxs(If, { condition: layoutMobile !== "full-screen" || !isMobile(), children: [
+      /* @__PURE__ */ jsxs(Then, { children: [
+        /* @__PURE__ */ jsx(When, { condition: !!onClose, children: /* @__PURE__ */ jsx("button", { className: "au-modal__header-close", onClick: onClose, children: /* @__PURE__ */ jsx(IconX, {}) }) }),
+        headerContent
+      ] }),
+      /* @__PURE__ */ jsx(Else, { children: /* @__PURE__ */ jsx(When, { condition: !!onClose, children: /* @__PURE__ */ jsx(
+        SubHeader,
+        {
+          title: mobileModalTitle,
+          handleReturn: onClose,
+          handleHelpInfo
+        }
+      ) }) })
+    ] }) }),
     /* @__PURE__ */ jsx("div", { className: "au-modal__content", children: content })
   ] }) });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../lib/components/Modal/index.tsx"],"sourcesContent":["import { IconX } from '@components/icons'\nimport classNames from 'classnames'\nimport { If } from '../misc'\n\nimport './styles.scss'\n\ntype ModalLayout = 'default' | 'centralized'\n\ntype ModalProps = {\n  isOpen: boolean\n  onClose?: () => void\n  headerContent?: React.ReactNode | string | JSX.Element | JSX.Element[]\n  content?: React.ReactNode | string | JSX.Element | JSX.Element[]\n  layoutMobile?: ModalLayout\n  layoutDesktop?: ModalLayout\n}\n\nexport const Modal = ({\n  isOpen,\n  onClose,\n  headerContent,\n  content,\n  layoutMobile = 'default',\n  layoutDesktop = 'default',\n}: ModalProps) => {\n  if (!isOpen) return null\n\n  const modalClasses = classNames('au-modal', {\n    'au-modal--is-open': isOpen,\n    'au-modal--mobile-centralized': layoutMobile === 'centralized',\n    'au-modal--desktop-centralized': layoutDesktop === 'centralized',\n  })\n\n  return (\n    <div className={modalClasses}>\n      <div className=\"au-modal__container\">\n        <div className=\"au-modal__header\">\n          <If condition={!!onClose}>\n          <button className=\"au-modal__header-close\" onClick={onClose}>\n            <IconX />\n          </button>\n          </If>\n          {headerContent}\n        </div>\n        <div className=\"au-modal__content\">{content}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["If"],"mappings":";;;;;AAiBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,gBAAgB;AAClB,MAAkB;AACZ,MAAA,CAAC,OAAe,QAAA;AAEd,QAAA,eAAe,WAAW,YAAY;AAAA,IAC1C,qBAAqB;AAAA,IACrB,gCAAgC,iBAAiB;AAAA,IACjD,iCAAiC,kBAAkB;AAAA,EAAA,CACpD;AAED,6BACG,OAAI,EAAA,WAAW,cACd,UAAC,qBAAA,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAC,qBAAA,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,oBAACA,MAAG,EAAA,WAAW,CAAC,CAAC,SACjB,UAAC,oBAAA,UAAA,EAAO,WAAU,0BAAyB,SAAS,SAClD,UAAC,oBAAA,OAAA,CAAA,CAAM,EACT,CAAA,GACA;AAAA,MACC;AAAA,IAAA,GACH;AAAA,IACC,oBAAA,OAAA,EAAI,WAAU,qBAAqB,UAAQ,SAAA;AAAA,EAAA,EAC9C,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"index.es.js","sources":["../../../lib/components/Modal/index.tsx"],"sourcesContent":["import { IconX } from '@components/icons'\nimport { SubHeader } from '@components/SubHeader'\nimport classNames from 'classnames'\nimport { If, IfElse, Then, Else } from '../misc'\n\nimport { isMobile } from '@core/utils/isMobile'\n\nimport './styles.scss'\n\ntype ModalLayout = 'default' | 'centralized'\ntype ModalLayoutMobile = 'default' | 'centralized' | 'full-screen'\n\nexport type ModalProps = {\n  isOpen: boolean\n  onClose?: () => void\n  headerContent?: React.ReactNode | string | JSX.Element | JSX.Element[]\n  content?: React.ReactNode | string | JSX.Element | JSX.Element[]\n  layoutMobile?: ModalLayoutMobile\n  layoutDesktop?: ModalLayout\n  mobileModalTitle?: string\n  handleHelpInfo?: () => void\n}\n\nexport const Modal = ({\n  isOpen,\n  onClose,\n  headerContent,\n  content,\n  layoutMobile = 'default',\n  layoutDesktop = 'default',\n  mobileModalTitle = 'Título',\n  handleHelpInfo,\n}: ModalProps) => {\n  if (!isOpen) return null\n\n  const modalClasses = classNames('au-modal', {\n    'au-modal--is-open': isOpen,\n    'au-modal--mobile-full-screen': layoutMobile === 'full-screen',\n    'au-modal--mobile-centralized': layoutMobile === 'centralized',\n    'au-modal--desktop-centralized': layoutDesktop === 'centralized',\n  })\n\n  return (\n    <div className={modalClasses}>\n      <div className=\"au-modal__container\">\n        <div className=\"au-modal__header\">\n          <IfElse condition={layoutMobile !== 'full-screen' || !isMobile()}>\n            <Then>\n              <If condition={!!onClose}>\n                <button className=\"au-modal__header-close\" onClick={onClose}>\n                  <IconX />\n                </button>\n              </If>\n              {headerContent}\n            </Then>\n            <Else>\n              <If condition={!!onClose}>\n                <SubHeader\n                  title={mobileModalTitle}\n                  handleReturn={onClose!}\n                  handleHelpInfo={handleHelpInfo}\n                />\n              </If>\n            </Else>\n          </IfElse>\n        </div>\n        <div className=\"au-modal__content\">{content}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["IfElse","If"],"mappings":";;;;;;;AAuBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB;AACF,MAAkB;AACZ,MAAA,CAAC,OAAe,QAAA;AAEd,QAAA,eAAe,WAAW,YAAY;AAAA,IAC1C,qBAAqB;AAAA,IACrB,gCAAgC,iBAAiB;AAAA,IACjD,gCAAgC,iBAAiB;AAAA,IACjD,iCAAiC,kBAAkB;AAAA,EAAA,CACpD;AAED,6BACG,OAAI,EAAA,WAAW,cACd,UAAC,qBAAA,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAC,oBAAA,OAAA,EAAI,WAAU,oBACb,UAAC,qBAAAA,IAAA,EAAO,WAAW,iBAAiB,iBAAiB,CAAC,SAAA,GACpD,UAAA;AAAA,MAAA,qBAAC,MACC,EAAA,UAAA;AAAA,QAAA,oBAACC,MAAG,EAAA,WAAW,CAAC,CAAC,SACf,UAAC,oBAAA,UAAA,EAAO,WAAU,0BAAyB,SAAS,SAClD,UAAC,oBAAA,OAAA,CAAA,CAAM,EACT,CAAA,GACF;AAAA,QACC;AAAA,MAAA,GACH;AAAA,0BACC,MACC,EAAA,UAAA,oBAACA,QAAG,WAAW,CAAC,CAAC,SACf,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,cAAc;AAAA,UACd;AAAA,QAAA;AAAA,SAEJ,EACF,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,IACC,oBAAA,OAAA,EAAI,WAAU,qBAAqB,UAAQ,SAAA;AAAA,EAAA,EAC9C,CAAA,EACF,CAAA;AAEJ;"}

package/dist/components/Modal/styles.css

@@ -1 +1 @@
-.au-modal{height:100vh;width:100vw;position:fixed;top:0;left:0;bottom:0;right:0;background-color:#16181dcc;opacity:0;visibility:hidden;pointer-events:none;transition:all .3s ease;z-index:5}@keyframes slideInY{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInX{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideCentralized{0%{transform:translate(-50%,calc(100% + 12px))}to{transform:translate(-50%,-50%)}}.au-modal--is-open{opacity:1;visibility:visible;pointer-events:all}.au-modal--is-open .au-modal__container{animation:slideInY .3s ease forwards}.au-modal--is-open.au-modal--mobile-centralized .au-modal__container{animation:slideCentralized .3s ease forwards}@media (min-width: 600px){.au-modal--is-open.au-modal--desktop-centralized .au-modal__container{animation:slideCentralized .3s ease forwards}.au-modal--is-open:not(.au-modal--desktop-centralized) .au-modal__container{animation:slideInX .3s ease forwards}}.au-modal__container{background-color:#fff;border-radius:16px 16px 0 0;padding:16px;position:fixed;z-index:6;bottom:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px;width:100%;max-height:90vh}.au-modal.au-modal--mobile-centralized .au-modal__container{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;width:90%;max-width:500px;height:min-content;border-radius:16px;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.au-modal:not(.au-modal--desktop-centralized) .au-modal__container{border-radius:16px 0 0 16px;box-shadow:0 24px 56px #7686ad14,0 12px 12px #0048db0a;top:0;right:0;bottom:auto;left:auto;margin:0;height:100vh;height:100dvh;max-width:414px;max-height:100vh}.au-modal.au-modal--desktop-centralized .au-modal__container{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;display:flex;max-width:500px;gap:16px;height:min-content;flex-direction:column;border-radius:16px}}.au-modal__header{position:relative}.au-modal__header-close{background-color:transparent;border:none;cursor:pointer;display:flex;justify-content:end;width:100%}.au-modal__content{height:calc(100% - 150px);overflow-y:auto;flex:1}.au-modal__content::-webkit-scrollbar{width:16px}.au-modal__content::-webkit-scrollbar-track{background:#f4f7fb;border-radius:32px}.au-modal__content::-webkit-scrollbar-thumb{background:#0048db;border-radius:8px;border:4px solid #f4f7fb}.au-modal__content::-webkit-scrollbar-thumb:hover{background:#1737a4;transition:all .3s ease}
+.au-modal{height:100vh;width:100vw;position:fixed;top:0;left:0;bottom:0;right:0;background-color:#16181dcc;opacity:0;visibility:hidden;pointer-events:none;transition:all .3s ease;z-index:5}@keyframes slideInY{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideInX{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideCentralized{0%{transform:translate(-50%,calc(100% + 12px))}to{transform:translate(-50%,-50%)}}.au-modal--is-open{opacity:1;visibility:visible;pointer-events:all}.au-modal--is-open .au-modal__container{animation:slideInY .3s ease forwards}.au-modal--is-open.au-modal--mobile-centralized .au-modal__container{animation:slideCentralized .3s ease forwards}.au-modal--is-open.au-modal--mobile-full-screen .au-modal__container{animation:none}@media (min-width: 600px){.au-modal--is-open.au-modal--desktop-centralized .au-modal__container{animation:slideCentralized .3s ease forwards}.au-modal--is-open:not(.au-modal--desktop-centralized) .au-modal__container{animation:slideInX .3s ease forwards}}.au-modal__container{background-color:#fff;border-radius:16px 16px 0 0;padding:16px;position:fixed;z-index:6;bottom:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px;width:100%;max-height:90vh}.au-modal.au-modal--mobile-centralized .au-modal__container{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;width:90%;max-width:500px;height:min-content;border-radius:16px;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.au-modal:not(.au-modal--desktop-centralized) .au-modal__container{border-radius:16px 0 0 16px;box-shadow:0 24px 56px #7686ad14,0 12px 12px #0048db0a;top:0;right:0;bottom:auto;left:auto;margin:0;height:100vh;height:100dvh;max-width:414px;max-height:100vh}.au-modal.au-modal--desktop-centralized .au-modal__container{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;display:flex;max-width:500px;gap:16px;height:min-content;flex-direction:column;border-radius:16px}}@media (max-width: 599px){.au-modal--mobile-full-screen .au-modal__container{gap:0;padding:0;height:100vh;max-height:none;border-radius:0}.au-modal--mobile-full-screen .au-modal__content{padding:16px}}.au-modal__header{position:relative}.au-modal__header-close{background-color:transparent;border:none;cursor:pointer;display:flex;justify-content:end;width:100%}.au-modal__content{height:calc(100% - 150px);overflow-y:auto;flex:1}.au-modal__content::-webkit-scrollbar{width:16px}.au-modal__content::-webkit-scrollbar-track{background:#f4f7fb;border-radius:32px}.au-modal__content::-webkit-scrollbar-thumb{background:#0048db;border-radius:8px;border:4px solid #f4f7fb}.au-modal__content::-webkit-scrollbar-thumb:hover{background:#1737a4;transition:all .3s ease}

package/dist/components/Tabs/styles.css

@@ -1 +1 @@
-.au-tabs--type-2{border-bottom:1px solid #e2e4e9}.au-tabs__container{display:flex;flex-direction:column}@media (min-width: 600px){.au-tabs__container{flex-direction:row;align-items:center;justify-content:space-between}}.au-tabs__left-panel{display:flex;align-items:center;gap:8px}.au-tabs__label{display:none}@media (min-width: 600px){.au-tabs__label{display:unset}}.au-tabs__btns{display:flex;position:relative;white-space:nowrap;overflow-x:scroll;margin-bottom:20px}.au-tabs__btns::-webkit-scrollbar{display:none}@media (min-width: 600px){.au-tabs__btns{overflow:unset;margin-bottom:0}}.au-tabs__btns-option{cursor:pointer;line-height:20px;color:#454a54;font-size:14px;font-family:Lexend Deca,sans-serif;padding:8px 16px;position:relative;transition:all .3s ease}.au-tabs__btns-option--active{color:#0048db;font-weight:700}.au-tabs__btns-indicator{position:absolute;bottom:-1px;left:0;height:2px;background-color:#0048db;transition:all .3s cubic-bezier(.4,0,.2,1)}.au-tabs__children{margin-top:24px}@media (min-width: 600px){.au-tabs__children{margin-top:32px}}
+.au-tabs--type-2{border-bottom:1px solid #e2e4e9}.au-tabs--type-2 .au-tabs__btns{margin-bottom:0}.au-tabs__container{display:flex;flex-direction:column}@media (min-width: 600px){.au-tabs__container{flex-direction:row;align-items:center;justify-content:space-between}}.au-tabs__left-panel{display:flex;align-items:center;gap:8px}.au-tabs__label{display:none}@media (min-width: 600px){.au-tabs__label{display:unset}}.au-tabs__btns{display:flex;position:relative;white-space:nowrap;overflow-x:scroll;margin-bottom:20px}.au-tabs__btns::-webkit-scrollbar{display:none}@media (min-width: 600px){.au-tabs__btns{overflow:unset;margin-bottom:0}}.au-tabs__btns-option{cursor:pointer;line-height:20px;color:#454a54;font-size:14px;font-family:Lexend Deca,sans-serif;padding:8px 16px;position:relative;transition:all .3s ease}.au-tabs__btns-option--active{color:#0048db;font-weight:700}.au-tabs__btns-indicator{position:absolute;bottom:-1px;left:0;height:2px;background-color:#0048db;transition:all .3s cubic-bezier(.4,0,.2,1)}.au-tabs__children{margin-top:24px}@media (min-width: 600px){.au-tabs__children{margin-top:32px}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@consumidor-positivo/aurora",
   "private": false,
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "./dist/main.es.js",
   "modules": "./dist/main.es.js",