@apia/components 1.0.4 → 2.0.1

package/dist/components/forms/util/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../../src/components/forms/util/style.ts"],"sourcesContent":["import { ThemeUICSSObject } from '@apia/theme';\n\nexport const getFieldErrorStyles = (isValid: boolean): ThemeUICSSObject => {\n  return {\n    borderLeftStyle: !isValid ? 'solid' : null,\n    borderLeftWidth: !isValid ? '4px' : null,\n    borderLeftColor: !isValid ? 'danger' : undefined,\n  };\n};\n\nexport const getFieldTouchedStyles = (isTouched: boolean): ThemeUICSSObject => {\n  return {\n    borderStyle: isTouched ? 'solid' : null,\n    borderWidth: isTouched ? '1px' : null,\n    borderColor: isTouched ? 'orange' : undefined,\n  };\n};\n"],"names":[],"mappings":"AAEa,MAAA,mBAAA,GAAsB,CAAC,OAAuC,KAAA;AACzE,EAAO,OAAA;AAAA,IACL,eAAA,EAAiB,CAAC,OAAA,GAAU,OAAU,GAAA,IAAA;AAAA,IACtC,eAAA,EAAiB,CAAC,OAAA,GAAU,KAAQ,GAAA,IAAA;AAAA,IACpC,eAAA,EAAiB,CAAC,OAAA,GAAU,QAAW,GAAA,KAAA,CAAA;AAAA,GACzC,CAAA;AACF,EAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,SAAyC,KAAA;AAC7E,EAAO,OAAA;AAAA,IACL,WAAA,EAAa,YAAY,OAAU,GAAA,IAAA;AAAA,IACnC,WAAA,EAAa,YAAY,KAAQ,GAAA,IAAA;AAAA,IACjC,WAAA,EAAa,YAAY,QAAW,GAAA,KAAA,CAAA;AAAA,GACtC,CAAA;AACF;;;;"}

package/dist/components/importComponent.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ComponentType } from 'react';
+
+/**
+ * Permite importar un componente en forma dinámica con ruta relativa a
+ * /customComponents
+ */
+declare function importComponent<T = unknown>(path: string): React.LazyExoticComponent<ComponentType<T>>;
+
+export { importComponent };
+//# sourceMappingURL=importComponent.d.ts.map

package/dist/components/importComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"importComponent.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/importComponent.js

@@ -0,0 +1,25 @@
+import { jsx, Fragment } from '@apia/theme/jsx-runtime';
+import { lazy } from 'react';
+
+function importComponent(path) {
+  return lazy(() => {
+    return new Promise((resolve) => {
+      import(
+        /* webpackInclude: /\.tsx?$/ */
+        `/customComponents/${path}`
+      ).then((result) => {
+        resolve(result);
+      }).catch((error) => {
+        resolve({
+          default: () => {
+            console.error(error);
+            return /* @__PURE__ */ jsx(Fragment, { children: "Error" });
+          }
+        });
+      });
+    });
+  });
+}
+
+export { importComponent };
+//# sourceMappingURL=importComponent.js.map

package/dist/components/importComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"importComponent.js","sources":["../../src/components/importComponent.tsx"],"sourcesContent":["import { type ComponentType, lazy } from 'react';\n\n/**\n * Permite importar un componente en forma dinámica con ruta relativa a\n * /customComponents\n */\nexport function importComponent<T = unknown>(path: string) {\n  return lazy<ComponentType<T>>(() => {\n    return new Promise<{\n      default: ComponentType<T>;\n    }>((resolve) => {\n      import(/* webpackInclude: /\\.tsx?$/ */ `/customComponents/${path}`)\n        .then((result: { default: ComponentType<T> }) => {\n          resolve(result);\n        })\n        .catch((error: unknown) => {\n          resolve({\n            default: () => {\n              console.error(error);\n              return <>Error</>;\n            },\n          });\n        });\n    });\n  });\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,gBAA6B,IAAc,EAAA;AACzD,EAAA,OAAO,KAAuB,MAAM;AAClC,IAAO,OAAA,IAAI,OAER,CAAA,CAAC,OAAY,KAAA;AACd,MAAA;AAAA;AAAA,QAAuC,qBAAqB,IAAI,CAAA,CAAA;AAAA,OAC7D,CAAA,IAAA,CAAK,CAAC,MAA0C,KAAA;AAC/C,QAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,OACf,CAAA,CACA,KAAM,CAAA,CAAC,KAAmB,KAAA;AACzB,QAAQ,OAAA,CAAA;AAAA,UACN,SAAS,MAAM;AACb,YAAA,OAAA,CAAQ,MAAM,KAAK,CAAA,CAAA;AACnB,YAAA,uCAAS,QAAK,EAAA,OAAA,EAAA,CAAA,CAAA;AAAA,WAChB;AAAA,SACD,CAAA,CAAA;AAAA,OACF,CAAA,CAAA;AAAA,KACJ,CAAA,CAAA;AAAA,GACF,CAAA,CAAA;AACH;;;;"}

package/dist/components/loaders/LinearLoader.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+declare const LinearLoader: () => React.JSX.Element;
+
+export { LinearLoader as default };
+//# sourceMappingURL=LinearLoader.d.ts.map

package/dist/components/loaders/LinearLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearLoader.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/loaders/LinearLoader.js

@@ -0,0 +1,33 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { BarLoader } from 'react-spinners';
+import { useThemeUI, Box } from '@apia/theme';
+
+const LinearLoader = () => {
+  const theme = useThemeUI();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        "*": { height: "6.5px !important" }
+      },
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          sx: {
+            zIndex: "tooltip",
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0
+          },
+          className: "linearLoader",
+          children: /* @__PURE__ */ jsx(BarLoader, { width: "100%", color: theme.theme.palette.primary.main })
+        }
+      )
+    }
+  );
+};
+var LinearLoader$1 = LinearLoader;
+
+export { LinearLoader$1 as default };
+//# sourceMappingURL=LinearLoader.js.map

package/dist/components/loaders/LinearLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearLoader.js","sources":["../../../src/components/loaders/LinearLoader.tsx"],"sourcesContent":["import { BarLoader } from 'react-spinners';\nimport { Box, useThemeUI } from '@apia/theme';\n\nconst LinearLoader = () => {\n  const theme = useThemeUI();\n  return (\n    <Box\n      sx={{\n        '*': { height: '6.5px !important' },\n      }}\n    >\n      <Box\n        sx={{\n          zIndex: 'tooltip',\n          position: 'fixed',\n          top: 0,\n          left: 0,\n          right: 0,\n        }}\n        className=\"linearLoader\"\n      >\n        <BarLoader width=\"100%\" color={theme.theme.palette.primary.main} />\n      </Box>\n    </Box>\n  );\n};\n\nexport default LinearLoader;\n"],"names":[],"mappings":";;;;AAGA,MAAM,eAAe,MAAM;AACzB,EAAA,MAAM,QAAQ,UAAW,EAAA,CAAA;AACzB,EACE,uBAAA,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,GAAA,EAAK,EAAE,MAAA,EAAQ,kBAAmB,EAAA;AAAA,OACpC;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,MAAQ,EAAA,SAAA;AAAA,YACR,QAAU,EAAA,OAAA;AAAA,YACV,GAAK,EAAA,CAAA;AAAA,YACL,IAAM,EAAA,CAAA;AAAA,YACN,KAAO,EAAA,CAAA;AAAA,WACT;AAAA,UACA,SAAU,EAAA,cAAA;AAAA,UAEV,QAAA,kBAAA,GAAA,CAAC,aAAU,KAAM,EAAA,MAAA,EAAO,OAAO,KAAM,CAAA,KAAA,CAAM,OAAQ,CAAA,OAAA,CAAQ,IAAM,EAAA,CAAA;AAAA,SAAA;AAAA,OACnE;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAA,CAAA;AAEA,qBAAe,YAAA;;;;"}

package/dist/components/loaders/LoaderSpinner.d.ts

@@ -0,0 +1,10 @@
+import React__default from 'react';
+
+declare const LoaderSpinner: ((props: {
+    className?: string | undefined;
+}) => React__default.JSX.Element) & {
+    displayName: string;
+};
+
+export { LoaderSpinner as default };
+//# sourceMappingURL=LoaderSpinner.d.ts.map

package/dist/components/loaders/LoaderSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderSpinner.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/loaders/LoaderSpinner.js

@@ -0,0 +1,26 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { makeStyledComponent, Spinner, getVariant } from '@apia/theme';
+
+const styles = {
+  height: "iconmd",
+  width: "iconmd",
+  background: "palette.background.paper"
+};
+const LoaderSpinner = makeStyledComponent(
+  "LoaderSpinner",
+  "layout.common.components.loaderSpinner",
+  styles,
+  ({ className }) => {
+    return /* @__PURE__ */ jsx(
+      Spinner,
+      {
+        ...getVariant("layout.common.components.loaderSpinner"),
+        className
+      }
+    );
+  }
+);
+var LoaderSpinner$1 = LoaderSpinner;
+
+export { LoaderSpinner$1 as default, styles };
+//# sourceMappingURL=LoaderSpinner.js.map

package/dist/components/loaders/LoaderSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderSpinner.js","sources":["../../../src/components/loaders/LoaderSpinner.tsx"],"sourcesContent":["import { getVariant, makeStyledComponent } from '@apia/theme';\nimport React from 'react';\nimport { Spinner } from '@apia/theme';\nimport { ThemeUICSSObject } from '@apia/theme';\n\nexport const styles: ThemeUICSSObject = {\n  height: 'iconmd',\n  width: 'iconmd',\n  background: 'palette.background.paper',\n};\n\nconst LoaderSpinner = makeStyledComponent(\n  'LoaderSpinner',\n  'layout.common.components.loaderSpinner',\n  styles,\n  ({ className }: { className?: string }) => {\n    return (\n      <Spinner\n        {...getVariant('layout.common.components.loaderSpinner')}\n        className={className}\n      />\n    );\n  },\n);\n\nexport default LoaderSpinner;\n"],"names":[],"mappings":";;;AAKO,MAAM,MAA2B,GAAA;AAAA,EACtC,MAAQ,EAAA,QAAA;AAAA,EACR,KAAO,EAAA,QAAA;AAAA,EACP,UAAY,EAAA,0BAAA;AACd,EAAA;AAEA,MAAM,aAAgB,GAAA,mBAAA;AAAA,EACpB,eAAA;AAAA,EACA,wCAAA;AAAA,EACA,MAAA;AAAA,EACA,CAAC,EAAE,SAAA,EAAwC,KAAA;AACzC,IACE,uBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACE,GAAG,WAAW,wCAAwC,CAAA;AAAA,QACvD,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,CAAA,CAAA;AAEA,sBAAe,aAAA;;;;"}

package/dist/components/loaders/ProgressBar.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+interface IProgressBar {
+    id: string;
+    progress?: number;
+    loading?: boolean;
+}
+declare const ProgressBar: FC<IProgressBar>;
+
+export { type IProgressBar, ProgressBar as default };
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/components/loaders/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/loaders/ProgressBar.js

@@ -0,0 +1,39 @@
+import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
+import { Label, Progress, getVariant } from '@apia/theme';
+
+const ProgressBar = ({
+  id,
+  progress = 0,
+  loading = false
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Label,
+      {
+        htmlFor: id,
+        sx: {
+          display: loading ? "block" : "none",
+          m: "0px"
+        },
+        children: `${progress}%`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Progress,
+      {
+        id,
+        max: 100,
+        value: progress,
+        ...getVariant("styles.progress"),
+        sx: {
+          display: loading ? "block" : "none"
+        },
+        children: `${progress}%`
+      }
+    )
+  ] });
+};
+var ProgressBar$1 = ProgressBar;
+
+export { ProgressBar$1 as default };
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/loaders/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/loaders/ProgressBar.tsx"],"sourcesContent":["import { getVariant } from '@apia/theme';\nimport { FC } from 'react';\nimport { Progress, Label } from '@apia/theme';\n\nexport interface IProgressBar {\n  id: string;\n  progress?: number;\n  loading?: boolean;\n}\n\nconst ProgressBar: FC<IProgressBar> = ({\n  id,\n  progress = 0,\n  loading = false,\n}) => {\n  return (\n    <>\n      <Label\n        htmlFor={id}\n        sx={{\n          display: loading ? 'block' : 'none',\n          m: '0px',\n        }}\n      >\n        {`${progress}%`}\n      </Label>\n      <Progress\n        id={id}\n        max={100}\n        value={progress}\n        {...getVariant('styles.progress')}\n        sx={{\n          display: loading ? 'block' : 'none',\n        }}\n      >\n        {`${progress}%`}\n      </Progress>\n    </>\n  );\n};\n\nexport default ProgressBar;\n"],"names":[],"mappings":";;;AAUA,MAAM,cAAgC,CAAC;AAAA,EACrC,EAAA;AAAA,EACA,QAAW,GAAA,CAAA;AAAA,EACX,OAAU,GAAA,KAAA;AACZ,CAAM,KAAA;AACJ,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,EAAA;AAAA,QACT,EAAI,EAAA;AAAA,UACF,OAAA,EAAS,UAAU,OAAU,GAAA,MAAA;AAAA,UAC7B,CAAG,EAAA,KAAA;AAAA,SACL;AAAA,QAEC,aAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KACd;AAAA,oBACA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,GAAK,EAAA,GAAA;AAAA,QACL,KAAO,EAAA,QAAA;AAAA,QACN,GAAG,WAAW,iBAAiB,CAAA;AAAA,QAChC,EAAI,EAAA;AAAA,UACF,OAAA,EAAS,UAAU,OAAU,GAAA,MAAA;AAAA,SAC/B;AAAA,QAEC,aAAG,QAAQ,CAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KACd;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,oBAAe,WAAA;;;;"}

package/dist/components/modals/CalendarModal.d.ts

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { TModal } from './Modal.js';
+
+interface ICalendarModal extends TModal {
+    handleClickDay: (date: Date) => void;
+    onCancel: () => void;
+    calValue?: Date;
+    locale: string;
+}
+declare const CalendarModal: React__default.ForwardRefExoticComponent<ICalendarModal & React__default.RefAttributes<HTMLDivElement>>;
+
+export { CalendarModal, type ICalendarModal };
+//# sourceMappingURL=CalendarModal.d.ts.map

package/dist/components/modals/CalendarModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarModal.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/modals/CalendarModal.js

@@ -0,0 +1,43 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import React__default, { lazy, Suspense } from 'react';
+import { Modal } from './Modal.js';
+
+const CalendarModal = React__default.forwardRef(
+  ({ handleClickDay, onCancel, calValue, locale, size, ...props }, ref) => {
+    const Calendar = lazy(
+      () => import('react-calendar')
+    );
+    return /* @__PURE__ */ jsx(
+      Modal,
+      {
+        noHeader: true,
+        size: size ?? "cal",
+        shouldCloseOnEsc: true,
+        shouldCloseOnOverlayClick: true,
+        ref,
+        ...props,
+        initialFocusGetter: (modalRef) => {
+          return modalRef?.querySelector(
+            ".react-calendar__tile--active"
+          );
+        },
+        children: /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            onClickDay: handleClickDay,
+            locale,
+            value: calValue ?? /* @__PURE__ */ new Date(),
+            nextLabel: "\u203A",
+            next2Label: "\xBB",
+            prevLabel: "\u2039",
+            prev2Label: "\xAB"
+          }
+        ) })
+      }
+    );
+  }
+);
+CalendarModal.displayName = "CalendarModal";
+
+export { CalendarModal };
+//# sourceMappingURL=CalendarModal.js.map

package/dist/components/modals/CalendarModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarModal.js","sources":["../../../src/components/modals/CalendarModal.tsx"],"sourcesContent":["import React, { ComponentType, FC, Suspense, lazy } from 'react';\nimport { Modal, TModal } from './Modal';\n\nexport interface ICalendarModal extends TModal {\n  handleClickDay: (date: Date) => void;\n  onCancel: () => void;\n  calValue?: Date;\n  locale: string;\n}\n\nexport const CalendarModal = React.forwardRef<HTMLDivElement, ICalendarModal>(\n  ({ handleClickDay, onCancel, calValue, locale, size, ...props }, ref) => {\n    const Calendar = lazy(\n      () =>\n        import('react-calendar') as unknown as Promise<{\n          default: ComponentType<any>;\n        }>,\n    );\n    return (\n      <Modal\n        noHeader\n        size={size ?? 'cal'}\n        shouldCloseOnEsc\n        shouldCloseOnOverlayClick\n        ref={ref}\n        {...props}\n        initialFocusGetter={(modalRef) => {\n          return modalRef?.querySelector(\n            '.react-calendar__tile--active',\n          ) as HTMLElement;\n        }}\n      >\n        <Suspense fallback={null}>\n          <Calendar\n            onClickDay={handleClickDay}\n            locale={locale}\n            value={calValue ?? new Date()}\n            nextLabel=\"›\"\n            next2Label=\"»\"\n            prevLabel=\"‹\"\n            prev2Label=\"«\"\n          />\n        </Suspense>\n      </Modal>\n    );\n  },\n);\n\nCalendarModal.displayName = 'CalendarModal';\n"],"names":["React"],"mappings":";;;;AAUO,MAAM,gBAAgBA,cAAM,CAAA,UAAA;AAAA,EACjC,CAAC,EAAE,cAAA,EAAgB,QAAU,EAAA,QAAA,EAAU,QAAQ,IAAM,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AACvE,IAAA,MAAM,QAAW,GAAA,IAAA;AAAA,MACf,MACE,OAAO,gBAAgB,CAAA;AAAA,KAG3B,CAAA;AACA,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAA,IAAA;AAAA,QACR,MAAM,IAAQ,IAAA,KAAA;AAAA,QACd,gBAAgB,EAAA,IAAA;AAAA,QAChB,yBAAyB,EAAA,IAAA;AAAA,QACzB,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,kBAAA,EAAoB,CAAC,QAAa,KAAA;AAChC,UAAA,OAAO,QAAU,EAAA,aAAA;AAAA,YACf,+BAAA;AAAA,WACF,CAAA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,QAAA,EAAU,IAClB,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,UAAY,EAAA,cAAA;AAAA,YACZ,MAAA;AAAA,YACA,KAAA,EAAO,QAAY,oBAAA,IAAI,IAAK,EAAA;AAAA,YAC5B,SAAU,EAAA,QAAA;AAAA,YACV,UAAW,EAAA,MAAA;AAAA,YACX,SAAU,EAAA,QAAA;AAAA,YACV,UAAW,EAAA,MAAA;AAAA,WAAA;AAAA,SAEf,EAAA,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}

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

@@ -0,0 +1,160 @@
+import React__default from 'react';
+import { IOnFocusConfiguration, TFocusRetriever } from '@apia/util';
+import { TModalSize } from '../types.js';
+import { IDialogHeader } from './layout/DialogHeader.js';
+
+type TModal = {
+    animationDuration?: number;
+    /**
+     * Si esta variable está en true, el modal se comportará más como una ventana
+     * que como un modal
+     */
+    draggable?: boolean;
+    children?: React__default.ReactNode;
+    className?: string;
+    id?: string;
+    initialFocusConfiguration?: IOnFocusConfiguration;
+    /**
+     * Este retriever será pasado al método focus.on para realizar el foco en el
+     * elemento inicial del modal.
+     *
+     * @see focus
+     */
+    initialFocusGetter?: (modalInnerRef: HTMLElement) => ReturnType<TFocusRetriever>;
+    /**
+     * Si se pasa un ref, el modal hará foco sobre el elemento una vez que haya
+     * abierto.
+     */
+    initialFocusRef?: React__default.RefObject<unknown>;
+    /**
+     * Controla el estado del modal, indicando a la transición de apertura o
+     * cierre que debe comenzar, dependiendo de si cambia a true o false
+     * respectivamente.
+     */
+    isOpen?: boolean;
+    maxWidth?: number | string;
+    /**
+     * Permite pasar un componente React que se mostrará a la derecha del título,
+     * con el fin de incorporar botones en el header del modal.
+     */
+    NavBar?: React__default.ReactNode;
+    noFocus?: boolean;
+    noHeader?: boolean;
+    /**
+     * Permite definir un callback que será llamado solamente cuando el modal se
+     * cierre por medio del click en el overlay, al presionar escape o mediante
+     * el botón cerrar del header (La X).
+     */
+    onClose?: () => void;
+    /**
+     * Este método recibe el evento del mousedown utilizado para controllar el dragstart. Si el usuario devuelve false, el drag no será realizado.
+     */
+    onDragStart?: (ev: MouseEvent) => boolean;
+    /**
+     * Permite definir un callback que será llamado siempre que el modal se
+     * cierre, una vez que la animación haya terminado.
+     */
+    onExited?: () => unknown;
+    /**
+     * Al pasar un Portal, el modal se abrirá dentro de éste y no directamente en
+     * la posición actual dentro del árbol de componentes. Normalmente, este
+     * Portal es pasado automáticamente por el hook useModal (No el de la
+     * librería, sino el nuestro).
+     *
+     * @see useModal
+     */
+    Portal?: React__default.FC<{
+        children: React__default.ReactNode;
+    }>;
+    /**
+     * Si es true, el modal será cerrado al presionar escape.
+     */
+    shouldCloseOnEsc?: boolean;
+    /**
+     * Si es true, el modal será cerrado al hacer clic en el overlay.
+     */
+    shouldCloseOnOverlayClick?: boolean;
+    size?: TModalSize;
+    stretch?: boolean;
+    title?: string;
+    variant?: string;
+} & Pick<IDialogHeader, 'hideCloseButton'>;
+declare const Modal: React__default.ForwardRefExoticComponent<{
+    animationDuration?: number | undefined;
+    /**
+     * Si esta variable está en true, el modal se comportará más como una ventana
+     * que como un modal
+     */
+    draggable?: boolean | undefined;
+    children?: React__default.ReactNode;
+    className?: string | undefined;
+    id?: string | undefined;
+    initialFocusConfiguration?: IOnFocusConfiguration | undefined;
+    /**
+     * Este retriever será pasado al método focus.on para realizar el foco en el
+     * elemento inicial del modal.
+     *
+     * @see focus
+     */
+    initialFocusGetter?: ((modalInnerRef: HTMLElement) => ReturnType<TFocusRetriever>) | undefined;
+    /**
+     * Si se pasa un ref, el modal hará foco sobre el elemento una vez que haya
+     * abierto.
+     */
+    initialFocusRef?: React__default.RefObject<unknown> | undefined;
+    /**
+     * Controla el estado del modal, indicando a la transición de apertura o
+     * cierre que debe comenzar, dependiendo de si cambia a true o false
+     * respectivamente.
+     */
+    isOpen?: boolean | undefined;
+    maxWidth?: string | number | undefined;
+    /**
+     * Permite pasar un componente React que se mostrará a la derecha del título,
+     * con el fin de incorporar botones en el header del modal.
+     */
+    NavBar?: React__default.ReactNode;
+    noFocus?: boolean | undefined;
+    noHeader?: boolean | undefined;
+    /**
+     * Permite definir un callback que será llamado solamente cuando el modal se
+     * cierre por medio del click en el overlay, al presionar escape o mediante
+     * el botón cerrar del header (La X).
+     */
+    onClose?: (() => void) | undefined;
+    /**
+     * Este método recibe el evento del mousedown utilizado para controllar el dragstart. Si el usuario devuelve false, el drag no será realizado.
+     */
+    onDragStart?: ((ev: MouseEvent) => boolean) | undefined;
+    /**
+     * Permite definir un callback que será llamado siempre que el modal se
+     * cierre, una vez que la animación haya terminado.
+     */
+    onExited?: (() => unknown) | undefined;
+    /**
+     * Al pasar un Portal, el modal se abrirá dentro de éste y no directamente en
+     * la posición actual dentro del árbol de componentes. Normalmente, este
+     * Portal es pasado automáticamente por el hook useModal (No el de la
+     * librería, sino el nuestro).
+     *
+     * @see useModal
+     */
+    Portal?: React__default.FC<{
+        children: React__default.ReactNode;
+    }> | undefined;
+    /**
+     * Si es true, el modal será cerrado al presionar escape.
+     */
+    shouldCloseOnEsc?: boolean | undefined;
+    /**
+     * Si es true, el modal será cerrado al hacer clic en el overlay.
+     */
+    shouldCloseOnOverlayClick?: boolean | undefined;
+    size?: TModalSize | undefined;
+    stretch?: boolean | undefined;
+    title?: string | undefined;
+    variant?: string | undefined;
+} & Pick<IDialogHeader, "hideCloseButton"> & React__default.RefAttributes<HTMLDivElement>>;
+
+export { Modal, type TModal };
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/modals/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/modals/Modal.js

@@ -0,0 +1,17 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { forwardRef } from 'react';
+import { WindowModal } from './WindowModal.js';
+import { StaticModal } from './StaticModal.js';
+
+const Modal = forwardRef(
+  (props, ref) => {
+    if (props.draggable) {
+      return /* @__PURE__ */ jsx(WindowModal, { ...props, ref });
+    }
+    return /* @__PURE__ */ jsx(StaticModal, { ...props, ref });
+  }
+);
+Modal.displayName = "Modal";
+
+export { Modal };
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../src/components/modals/Modal.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { IOnFocusConfiguration, TFocusRetriever } from '@apia/util';\nimport { TModalSize } from '../types';\nimport { IDialogHeader } from './layout/DialogHeader';\nimport { WindowModal } from './WindowModal';\nimport { StaticModal } from './StaticModal';\n\nexport type TModal = {\n  animationDuration?: number;\n  /**\n   * Si esta variable está en true, el modal se comportará más como una ventana\n   * que como un modal\n   */\n  draggable?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  id?: string;\n  initialFocusConfiguration?: IOnFocusConfiguration;\n  /**\n   * Este retriever será pasado al método focus.on para realizar el foco en el\n   * elemento inicial del modal.\n   *\n   * @see focus\n   */\n  initialFocusGetter?: (\n    modalInnerRef: HTMLElement,\n  ) => ReturnType<TFocusRetriever>;\n  /**\n   * Si se pasa un ref, el modal hará foco sobre el elemento una vez que haya\n   * abierto.\n   */\n  initialFocusRef?: React.RefObject<unknown>;\n  /**\n   * Controla el estado del modal, indicando a la transición de apertura o\n   * cierre que debe comenzar, dependiendo de si cambia a true o false\n   * respectivamente.\n   */\n  isOpen?: boolean;\n  maxWidth?: number | string;\n  /**\n   * Permite pasar un componente React que se mostrará a la derecha del título,\n   * con el fin de incorporar botones en el header del modal.\n   */\n  NavBar?: React.ReactNode;\n  noFocus?: boolean;\n  noHeader?: boolean;\n  /**\n   * Permite definir un callback que será llamado solamente cuando el modal se\n   * cierre por medio del click en el overlay, al presionar escape o mediante\n   * el botón cerrar del header (La X).\n   */\n  onClose?: () => void;\n  /**\n   * Este método recibe el evento del mousedown utilizado para controllar el dragstart. Si el usuario devuelve false, el drag no será realizado.\n   */\n  onDragStart?: (ev: MouseEvent) => boolean;\n  /**\n   * Permite definir un callback que será llamado siempre que el modal se\n   * cierre, una vez que la animación haya terminado.\n   */\n  onExited?: () => unknown;\n  /**\n   * Al pasar un Portal, el modal se abrirá dentro de éste y no directamente en\n   * la posición actual dentro del árbol de componentes. Normalmente, este\n   * Portal es pasado automáticamente por el hook useModal (No el de la\n   * librería, sino el nuestro).\n   *\n   * @see useModal\n   */\n  Portal?: React.FC<{\n    children: React.ReactNode;\n  }>;\n  /**\n   * Si es true, el modal será cerrado al presionar escape.\n   */\n  shouldCloseOnEsc?: boolean;\n  /**\n   * Si es true, el modal será cerrado al hacer clic en el overlay.\n   */\n  shouldCloseOnOverlayClick?: boolean;\n  size?: TModalSize;\n  stretch?: boolean;\n  title?: string;\n  variant?: string;\n} & Pick<IDialogHeader, 'hideCloseButton'>;\n\nexport const Modal = forwardRef(\n  (props: TModal, ref: React.Ref<HTMLDivElement>) => {\n    if (props.draggable) {\n      return <WindowModal {...props} ref={ref} />;\n    }\n    return <StaticModal {...props} ref={ref} />;\n  },\n);\n\nModal.displayName = 'Modal';\n"],"names":[],"mappings":";;;;;AAsFO,MAAM,KAAQ,GAAA,UAAA;AAAA,EACnB,CAAC,OAAe,GAAmC,KAAA;AACjD,IAAA,IAAI,MAAM,SAAW,EAAA;AACnB,MAAA,uBAAQ,GAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA,CAAA;AAAA,KAC3C;AACA,IAAA,uBAAQ,GAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAU,EAAA,CAAA,CAAA;AAAA,GAC3C;AACF,EAAA;AAEA,KAAA,CAAM,WAAc,GAAA,OAAA;;;;"}

package/dist/components/modals/ModalContext.d.ts

@@ -0,0 +1,9 @@
+type TModalContext = {
+    changeTitle: (newTitle: string) => void;
+    close: () => unknown;
+    descriptionId: string;
+};
+declare function useModalContext(): TModalContext;
+
+export { type TModalContext, useModalContext };
+//# sourceMappingURL=ModalContext.d.ts.map

package/dist/components/modals/ModalContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/modals/ModalContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const ModalContext = createContext(null);
+function useModalContext() {
+  const context = useContext(ModalContext);
+  if (!context)
+    throw new Error("There is no ModalContext");
+  return context;
+}
+
+export { ModalContext, useModalContext };
+//# sourceMappingURL=ModalContext.js.map

package/dist/components/modals/ModalContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.js","sources":["../../../src/components/modals/ModalContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport type TModalContext = {\n  changeTitle: (newTitle: string) => void;\n  close: () => unknown;\n  descriptionId: string;\n};\n\nexport const ModalContext = createContext<TModalContext | null>(null);\n\nexport function useModalContext() {\n  const context = useContext(ModalContext);\n\n  if (!context) throw new Error('There is no ModalContext');\n\n  return context;\n}\n"],"names":[],"mappings":";;AAQa,MAAA,YAAA,GAAe,cAAoC,IAAI,EAAA;AAE7D,SAAS,eAAkB,GAAA;AAChC,EAAM,MAAA,OAAA,GAAU,WAAW,YAAY,CAAA,CAAA;AAEvC,EAAA,IAAI,CAAC,OAAA;AAAS,IAAM,MAAA,IAAI,MAAM,0BAA0B,CAAA,CAAA;AAExD,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}

package/dist/components/modals/Overlay.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { BoxProps } from '@apia/theme';
+
+interface IOverlay extends BoxProps {
+    children: React.ReactNode;
+    className?: string;
+    onOverlayClicked: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Permite pasar un callback que será llamado una vez que el overlay termine
+     * de cerrarse.
+     */
+    onExited: () => void;
+    isOpen?: boolean;
+    shouldAvoidInitialFocusTrap?: boolean;
+    stretch?: boolean;
+    transitionDuration?: number;
+}
+declare const Overlay: React.ForwardRefExoticComponent<IOverlay & React.RefAttributes<unknown>>;
+
+export { type IOverlay, Overlay };
+//# sourceMappingURL=Overlay.d.ts.map

package/dist/components/modals/Overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/modals/Overlay.js

@@ -0,0 +1,75 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import * as React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { Box, getVariant } from '@apia/theme';
+import ReactFocusLock from 'react-focus-lock';
+import { useCombinedRefs } from '@apia/util';
+import { useBodyScrollLock } from '../../hooks/useBodyScrollLock.js';
+
+const Overlay = React.forwardRef(
+  ({
+    children,
+    className = "",
+    onExited,
+    onOverlayClicked,
+    isOpen: open = false,
+    shouldAvoidInitialFocusTrap,
+    stretch,
+    transitionDuration = 150,
+    ...props
+  }, ref) => {
+    const innerRef = React.useRef(null);
+    const assignRefs = useCombinedRefs(innerRef, ref);
+    useBodyScrollLock(open);
+    return /* @__PURE__ */ jsx(
+      CSSTransition,
+      {
+        in: open,
+        timeout: transitionDuration,
+        onExited,
+        classNames: "overlayAnimation",
+        appear: true,
+        nodeRef: innerRef,
+        unmountOnExit: true,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: `${className} overlay`,
+            ref: assignRefs,
+            ...props,
+            "data-type": "overlay",
+            role: "presentation",
+            onClick: React.useCallback(
+              (ev) => {
+                if (ev.target === innerRef.current)
+                  onOverlayClicked(ev);
+              },
+              [onOverlayClicked]
+            ),
+            ...getVariant(
+              props.variant ?? `layout.common.modals.overlay${stretch ? "--stretch" : ""}`
+            ),
+            children: /* @__PURE__ */ jsx(
+              ReactFocusLock,
+              {
+                autoFocus: shouldAvoidInitialFocusTrap ? false : void 0,
+                returnFocus: false,
+                crossFrame: false,
+                whiteList: (el) => {
+                  return !el.closest(
+                    '[role="menu"], .modal__variantWrapper, .filter'
+                  );
+                },
+                children
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+Overlay.displayName = "Overlay";
+
+export { Overlay };
+//# sourceMappingURL=Overlay.js.map

package/dist/components/modals/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sources":["../../../src/components/modals/Overlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { Box, BoxProps } from '@apia/theme';\nimport ReactFocusLock from 'react-focus-lock';\nimport { getVariant } from '@apia/theme';\nimport { useCombinedRefs } from '@apia/util';\nimport { useBodyScrollLock } from '../../hooks';\n\nexport interface IOverlay extends BoxProps {\n  children: React.ReactNode;\n  className?: string;\n  onOverlayClicked: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /**\n   * Permite pasar un callback que será llamado una vez que el overlay termine\n   * de cerrarse.\n   */\n  onExited: () => void;\n  isOpen?: boolean;\n  shouldAvoidInitialFocusTrap?: boolean;\n  stretch?: boolean;\n  transitionDuration?: number;\n}\n\nexport const Overlay = React.forwardRef<unknown, IOverlay>(\n  (\n    {\n      children,\n      className = '',\n      onExited,\n      onOverlayClicked,\n      isOpen: open = false,\n      shouldAvoidInitialFocusTrap,\n      stretch,\n      transitionDuration = 150,\n      ...props\n    },\n    ref,\n  ) => {\n    const innerRef = React.useRef<HTMLDivElement>(null);\n    const assignRefs = useCombinedRefs(innerRef, ref);\n    useBodyScrollLock(open);\n    return (\n      <CSSTransition\n        in={open}\n        timeout={transitionDuration}\n        onExited={onExited}\n        classNames=\"overlayAnimation\"\n        appear\n        nodeRef={innerRef}\n        unmountOnExit\n      >\n        <Box\n          className={`${className} overlay`}\n          ref={assignRefs}\n          {...props}\n          data-type=\"overlay\"\n          role=\"presentation\"\n          onClick={React.useCallback(\n            (ev: React.MouseEvent<HTMLDivElement>) => {\n              if (ev.target === innerRef.current) onOverlayClicked(ev);\n            },\n            [onOverlayClicked],\n          )}\n          {...getVariant(\n            props.variant ??\n              `layout.common.modals.overlay${stretch ? '--stretch' : ''}`,\n          )}\n        >\n          <ReactFocusLock\n            autoFocus={shouldAvoidInitialFocusTrap ? false : undefined}\n            returnFocus={false}\n            crossFrame={false}\n            whiteList={(el) => {\n              return !el.closest(\n                '[role=\"menu\"], .modal__variantWrapper, .filter',\n              );\n            }}\n          >\n            {children}\n          </ReactFocusLock>\n        </Box>\n      </CSSTransition>\n    );\n  },\n);\n\nOverlay.displayName = 'Overlay';\n"],"names":[],"mappings":";;;;;;;;AAuBO,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,EAAA;AAAA,IACZ,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAQ,IAAO,GAAA,KAAA;AAAA,IACf,2BAAA;AAAA,IACA,OAAA;AAAA,IACA,kBAAqB,GAAA,GAAA;AAAA,IACrB,GAAG,KAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,MAAA,CAAuB,IAAI,CAAA,CAAA;AAClD,IAAM,MAAA,UAAA,GAAa,eAAgB,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAChD,IAAA,iBAAA,CAAkB,IAAI,CAAA,CAAA;AACtB,IACE,uBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA,IAAA;AAAA,QACJ,OAAS,EAAA,kBAAA;AAAA,QACT,QAAA;AAAA,QACA,UAAW,EAAA,kBAAA;AAAA,QACX,MAAM,EAAA,IAAA;AAAA,QACN,OAAS,EAAA,QAAA;AAAA,QACT,aAAa,EAAA,IAAA;AAAA,QAEb,QAAA,kBAAA,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,YACvB,GAAK,EAAA,UAAA;AAAA,YACJ,GAAG,KAAA;AAAA,YACJ,WAAU,EAAA,SAAA;AAAA,YACV,IAAK,EAAA,cAAA;AAAA,YACL,SAAS,KAAM,CAAA,WAAA;AAAA,cACb,CAAC,EAAyC,KAAA;AACxC,gBAAI,IAAA,EAAA,CAAG,WAAW,QAAS,CAAA,OAAA;AAAS,kBAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AAAA,eACzD;AAAA,cACA,CAAC,gBAAgB,CAAA;AAAA,aACnB;AAAA,YACC,GAAG,UAAA;AAAA,cACF,KAAM,CAAA,OAAA,IACJ,CAA+B,4BAAA,EAAA,OAAA,GAAU,cAAc,EAAE,CAAA,CAAA;AAAA,aAC7D;AAAA,YAEA,QAAA,kBAAA,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,8BAA8B,KAAQ,GAAA,KAAA,CAAA;AAAA,gBACjD,WAAa,EAAA,KAAA;AAAA,gBACb,UAAY,EAAA,KAAA;AAAA,gBACZ,SAAA,EAAW,CAAC,EAAO,KAAA;AACjB,kBAAA,OAAO,CAAC,EAAG,CAAA,OAAA;AAAA,oBACT,gDAAA;AAAA,mBACF,CAAA;AAAA,iBACF;AAAA,gBAEC,QAAA;AAAA,eAAA;AAAA,aACH;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,OAAA,CAAQ,WAAc,GAAA,SAAA;;;;"}