@apia/components 1.0.2 → 2.0.0

package/dist/components/buttons/useOtherTagButton.js

@@ -0,0 +1,38 @@
+import { getSpecificParent } from '@apia/util';
+import uniqueId from 'lodash-es/uniqueId';
+import React__default from 'react';
+
+function useOtherTagButton(props) {
+  const specificClass = React__default.useMemo(() => `otherTag${uniqueId()}`, []);
+  const actualOnClick = React__default.useCallback(
+    (ev) => {
+      props?.onClick?.(ev);
+    },
+    [props]
+  );
+  const actualOnKeyDown = React__default.useCallback(
+    (ev) => {
+      props?.onKeyDown?.(ev);
+      if (ev.code === "Enter" || ev.code === "Space") {
+        ev.preventDefault();
+        const button = getSpecificParent(
+          ev.target,
+          (current) => current.classList.contains(specificClass)
+        );
+        if (button)
+          button.click();
+      }
+    },
+    [props, specificClass]
+  );
+  return {
+    className: `${specificClass} ${props?.className ?? ""}`,
+    onClick: actualOnClick,
+    onKeyDown: actualOnKeyDown,
+    role: "button",
+    tabIndex: 0
+  };
+}
+
+export { useOtherTagButton };
+//# sourceMappingURL=useOtherTagButton.js.map

package/dist/components/buttons/useOtherTagButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOtherTagButton.js","sources":["../../../src/components/buttons/useOtherTagButton.ts"],"sourcesContent":["import { getSpecificParent } from '@apia/util';\nimport uniqueId from 'lodash-es/uniqueId';\nimport React from 'react';\n\n/**\n * Este hook está pensado para crear un botón utilizando un tag cualquiera.\n *\n * @example\n *\n * const buttonProps = useOtherTagButton(React.useMemo(()=>({\n *   onClick(ev) { console.log(ev.target) },\n *   onKeyDown(ev) { console.log(ev.code) }\n * }),[])\n *\n * return <div {...buttonProps}>Esto es un botón</div>\n */\nexport function useOtherTagButton(\n  props?: Partial<{\n    className?: string;\n    onClick: React.MouseEventHandler;\n    onKeyDown: React.KeyboardEventHandler;\n  }>,\n) {\n  const specificClass = React.useMemo(() => `otherTag${uniqueId()}`, []);\n\n  const actualOnClick = React.useCallback(\n    (ev: React.MouseEvent) => {\n      props?.onClick?.(ev);\n    },\n    [props],\n  );\n  const actualOnKeyDown = React.useCallback(\n    (ev: React.KeyboardEvent) => {\n      props?.onKeyDown?.(ev);\n      if (ev.code === 'Enter' || ev.code === 'Space') {\n        ev.preventDefault();\n        const button = getSpecificParent(ev.target as HTMLElement, (current) =>\n          current.classList.contains(specificClass),\n        );\n        if (button) button.click();\n      }\n    },\n    [props, specificClass],\n  );\n\n  return {\n    className: `${specificClass} ${props?.className ?? ''}`,\n    onClick: actualOnClick,\n    onKeyDown: actualOnKeyDown,\n    role: 'button',\n    tabIndex: 0,\n  };\n}\n"],"names":["React"],"mappings":";;;;AAgBO,SAAS,kBACd,KAKA,EAAA;AACA,EAAM,MAAA,aAAA,GAAgBA,eAAM,OAAQ,CAAA,MAAM,WAAW,QAAS,EAAC,CAAI,CAAA,EAAA,EAAE,CAAA,CAAA;AAErE,EAAA,MAAM,gBAAgBA,cAAM,CAAA,WAAA;AAAA,IAC1B,CAAC,EAAyB,KAAA;AACxB,MAAA,KAAA,EAAO,UAAU,EAAE,CAAA,CAAA;AAAA,KACrB;AAAA,IACA,CAAC,KAAK,CAAA;AAAA,GACR,CAAA;AACA,EAAA,MAAM,kBAAkBA,cAAM,CAAA,WAAA;AAAA,IAC5B,CAAC,EAA4B,KAAA;AAC3B,MAAA,KAAA,EAAO,YAAY,EAAE,CAAA,CAAA;AACrB,MAAA,IAAI,EAAG,CAAA,IAAA,KAAS,OAAW,IAAA,EAAA,CAAG,SAAS,OAAS,EAAA;AAC9C,QAAA,EAAA,CAAG,cAAe,EAAA,CAAA;AAClB,QAAA,MAAM,MAAS,GAAA,iBAAA;AAAA,UAAkB,EAAG,CAAA,MAAA;AAAA,UAAuB,CAAC,OAAA,KAC1D,OAAQ,CAAA,SAAA,CAAU,SAAS,aAAa,CAAA;AAAA,SAC1C,CAAA;AACA,QAAI,IAAA,MAAA;AAAQ,UAAA,MAAA,CAAO,KAAM,EAAA,CAAA;AAAA,OAC3B;AAAA,KACF;AAAA,IACA,CAAC,OAAO,aAAa,CAAA;AAAA,GACvB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,WAAW,CAAG,EAAA,aAAa,CAAI,CAAA,EAAA,KAAA,EAAO,aAAa,EAAE,CAAA,CAAA;AAAA,IACrD,OAAS,EAAA,aAAA;AAAA,IACT,SAAW,EAAA,eAAA;AAAA,IACX,IAAM,EAAA,QAAA;AAAA,IACN,QAAU,EAAA,CAAA;AAAA,GACZ,CAAA;AACF;;;;"}

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

@@ -0,0 +1,7 @@
+import React__default from 'react';
+import { ICollapsiblePanel } from './types.js';
+
+declare const CollapsiblePanel: React__default.ForwardRefExoticComponent<ICollapsiblePanel & React__default.RefAttributes<HTMLDivElement>>;
+
+export { CollapsiblePanel };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/collapsiblePanel/index.d.ts.map

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

package/dist/components/collapsiblePanel/index.js

@@ -0,0 +1,130 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import React__default from 'react';
+import { injectStyles, Box, getVariant, Button } from '@apia/theme';
+import uniqueId from 'lodash-es/uniqueId';
+import isFunction from 'lodash-es/isFunction';
+import { persistentStorage, useUpdateEffect, disableChildrenFocus, enableChildrenFocus, customEvents } from '@apia/util';
+import AnimateHeight from 'react-animate-height';
+import { styles } from './styles.js';
+import { Icon } from '@apia/icons';
+
+injectStyles("layout.common.components.collapsiblePanel", styles);
+const CollapsiblePanel = React__default.forwardRef(
+  ({
+    children,
+    className,
+    closedIcon = "ArrowDownThin",
+    collapsed,
+    defaultCollapsed,
+    disableChildrenFocus: disableChildrenFocus$1,
+    iconSize = "20px",
+    id,
+    onClose,
+    onOpen,
+    openIcon = "ArrowRightThin",
+    label,
+    rememberCollapsedState,
+    titleButtons,
+    minHeight = 0,
+    "aria-hidden": ariaHidden
+  }, outerRef) => {
+    const prefix = React__default.useMemo(() => id ? "" : uniqueId(), []);
+    const actualId = `${prefix}_${id ?? "collapsiblePanel"}`;
+    const [isCollapsed, setIsCollapsed] = React__default.useState(
+      rememberCollapsedState ? persistentStorage[`collapsiblePanel${actualId}`] ?? defaultCollapsed ?? collapsed : defaultCollapsed ?? collapsed ?? persistentStorage[`collapsiblePanel${actualId}`]
+    );
+    const [ref, setRef] = React__default.useState(null);
+    const callOnOpen = React__default.useCallback(
+      (updateState, ev) => {
+        const onOpenResult = onOpen ? onOpen(ev) : null;
+        if (onOpenResult) {
+          void onOpenResult.then((result) => {
+            if (result) {
+              if (updateState)
+                setIsCollapsed((current) => !current);
+            }
+          });
+        } else if (updateState)
+          setIsCollapsed((current) => !current);
+      },
+      [onOpen]
+    );
+    useUpdateEffect(() => {
+      if (collapsed !== void 0)
+        setIsCollapsed(collapsed);
+      if (collapsed === false)
+        callOnOpen(false);
+    }, [collapsed]);
+    useUpdateEffect(() => {
+      if (isCollapsed) {
+        if (onClose)
+          onClose();
+        persistentStorage[`collapsiblePanel${actualId}`] = true;
+        if (ref && disableChildrenFocus$1)
+          disableChildrenFocus(
+            ref.querySelector(".collapsiblePanel__content")
+          );
+      } else {
+        persistentStorage[`collapsiblePanel${actualId}`] = false;
+        if (ref && disableChildrenFocus$1)
+          enableChildrenFocus(
+            ref.querySelector(".collapsiblePanel__content")
+          );
+      }
+    }, [isCollapsed]);
+    React__default.useEffect(() => {
+      const handleCustomFocus = () => setIsCollapsed(false);
+      ref?.querySelector(".collapsiblePanel__content")?.addEventListener(customEvents.focus, handleCustomFocus);
+      return () => {
+        ref?.querySelector(".collapsiblePanel__content")?.removeEventListener(customEvents.focus, handleCustomFocus);
+      };
+    }, [id, isCollapsed, onClose, onOpen, ref]);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: `collapsiblePanel ${className ?? ""}`,
+        ...getVariant("layout.common.components.collapsiblePanel"),
+        ref: (el) => {
+          if (isFunction(outerRef))
+            outerRef(el);
+          setRef(el);
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Box, { className: "collapsiblePanel__label", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                ...getVariant("inherit"),
+                "aria-expanded": !isCollapsed,
+                onClick: (ev) => callOnOpen(true, ev),
+                type: "button",
+                className: "collapsiblePanel__label__button",
+                children: [
+                  isCollapsed ? /* @__PURE__ */ jsx(Icon, { title: "", icon: openIcon, size: iconSize }) : /* @__PURE__ */ jsx(Icon, { title: "", icon: closedIcon, size: iconSize }),
+                  /* @__PURE__ */ jsx("span", { className: "title", children: label })
+                ]
+              }
+            ),
+            titleButtons
+          ] }),
+          /* @__PURE__ */ jsx(
+            AnimateHeight,
+            {
+              id: actualId,
+              duration: 150,
+              height: isCollapsed ? minHeight : "auto",
+              sx: { "&>div": { display: "block " } },
+              "aria-hidden": ariaHidden ?? isCollapsed,
+              className: "collapsiblePanel__content",
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CollapsiblePanel.displayName = "CollapsiblePanel";
+
+export { CollapsiblePanel };
+//# sourceMappingURL=index.js.map

package/dist/components/collapsiblePanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/collapsiblePanel/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Button } from '@apia/theme';\nimport uniqueId from 'lodash-es/uniqueId';\nimport isFunction from 'lodash-es/isFunction';\nimport {\n  customEvents,\n  persistentStorage,\n  enableChildrenFocus,\n  disableChildrenFocus as disableChildrenFocusMethod,\n  useUpdateEffect,\n} from '@apia/util';\nimport { getVariant, injectStyles } from '@apia/theme';\nimport AnimateHeight from 'react-animate-height';\nimport { styles } from './styles';\nimport { ICollapsiblePanel } from './types';\nimport { Icon } from '@apia/icons';\n\ninjectStyles('layout.common.components.collapsiblePanel', styles);\n\nexport const CollapsiblePanel = React.forwardRef<\n  HTMLDivElement,\n  ICollapsiblePanel\n>(\n  (\n    {\n      children,\n      className,\n      closedIcon = 'ArrowDownThin',\n      collapsed,\n      defaultCollapsed,\n      disableChildrenFocus,\n      iconSize = '20px',\n      id,\n      onClose,\n      onOpen,\n      openIcon = 'ArrowRightThin',\n      label,\n      rememberCollapsedState,\n      titleButtons,\n      minHeight = 0,\n      'aria-hidden': ariaHidden,\n    },\n    outerRef,\n  ) => {\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    const prefix = React.useMemo(() => (id ? '' : uniqueId()), []);\n    const actualId = `${prefix}_${id ?? 'collapsiblePanel'}`;\n\n    const [isCollapsed, setIsCollapsed] = React.useState<boolean>(\n      rememberCollapsedState\n        ? ((persistentStorage[`collapsiblePanel${actualId}`] ??\n            defaultCollapsed ??\n            collapsed) as boolean)\n        : defaultCollapsed ??\n            collapsed ??\n            (persistentStorage[`collapsiblePanel${actualId}`] as boolean),\n    );\n\n    const [ref, setRef] = React.useState<HTMLDivElement | null>(null);\n\n    const callOnOpen = React.useCallback(\n      (updateState: unknown, ev?: React.MouseEvent) => {\n        const onOpenResult = onOpen ? onOpen(ev) : null;\n        if (onOpenResult) {\n          void onOpenResult.then((result) => {\n            if (result) if (updateState) setIsCollapsed((current) => !current);\n          });\n        } else if (updateState) setIsCollapsed((current) => !current);\n      },\n      [onOpen],\n    );\n\n    useUpdateEffect(() => {\n      if (collapsed !== undefined) setIsCollapsed(collapsed);\n      if (collapsed === false) callOnOpen(false);\n    }, [collapsed]);\n\n    useUpdateEffect(() => {\n      if (isCollapsed) {\n        if (onClose) onClose();\n        persistentStorage[`collapsiblePanel${actualId}`] = true;\n        if (ref && disableChildrenFocus)\n          disableChildrenFocusMethod(\n            ref.querySelector('.collapsiblePanel__content') as HTMLElement,\n          );\n      } else {\n        persistentStorage[`collapsiblePanel${actualId}`] = false;\n        if (ref && disableChildrenFocus)\n          enableChildrenFocus(\n            ref.querySelector('.collapsiblePanel__content') as HTMLElement,\n          );\n      }\n    }, [isCollapsed]);\n\n    React.useEffect(() => {\n      const handleCustomFocus = () => setIsCollapsed(false);\n      ref\n        ?.querySelector('.collapsiblePanel__content')\n        ?.addEventListener(customEvents.focus, handleCustomFocus);\n      return () => {\n        ref\n          ?.querySelector('.collapsiblePanel__content')\n          ?.removeEventListener(customEvents.focus, handleCustomFocus);\n      };\n    }, [id, isCollapsed, onClose, onOpen, ref]);\n\n    return (\n      <Box\n        className={`collapsiblePanel ${className ?? ''}`}\n        {...getVariant('layout.common.components.collapsiblePanel')}\n        ref={(el: HTMLDivElement) => {\n          if (isFunction(outerRef)) outerRef(el);\n          setRef(el);\n        }}\n      >\n        <Box className=\"collapsiblePanel__label\">\n          <Button\n            {...getVariant('inherit')}\n            aria-expanded={!isCollapsed}\n            onClick={(ev) => callOnOpen(true, ev)}\n            type=\"button\"\n            className=\"collapsiblePanel__label__button\"\n          >\n            {isCollapsed ? (\n              <Icon title=\"\" icon={openIcon} size={iconSize} />\n            ) : (\n              <Icon title=\"\" icon={closedIcon} size={iconSize} />\n            )}\n            <span className=\"title\">{label}</span>\n          </Button>\n          {titleButtons}\n        </Box>\n        <AnimateHeight\n          id={actualId}\n          duration={150}\n          height={isCollapsed ? minHeight : 'auto'}\n          sx={{ '&>div': { display: 'block ' } }}\n          aria-hidden={ariaHidden ?? isCollapsed}\n          className=\"collapsiblePanel__content\"\n        >\n          {children}\n        </AnimateHeight>\n      </Box>\n    );\n  },\n);\n\nCollapsiblePanel.displayName = 'CollapsiblePanel';\n"],"names":["React","disableChildrenFocus","disableChildrenFocusMethod"],"mappings":"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"}

package/dist/components/collapsiblePanel/styles.js

@@ -0,0 +1,4 @@
+const styles = {};
+
+export { styles };
+//# sourceMappingURL=styles.js.map

package/dist/components/collapsiblePanel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/collapsiblePanel/styles.ts"],"sourcesContent":["import { ThemeUICSSObject } from '@apia/theme';\n\nexport const styles: ThemeUICSSObject = {};\n"],"names":[],"mappings":"AAEO,MAAM,SAA2B;;;;"}

package/dist/components/collapsiblePanel/types.d.ts

@@ -0,0 +1,23 @@
+import { TIconType, TIconName } from '@apia/icons';
+
+interface ICollapsiblePanel {
+    'aria-hidden'?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    closedIcon?: TIconType | TIconName;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    disableChildrenFocus?: boolean;
+    iconSize?: string | number;
+    id?: string;
+    minHeight?: number;
+    onClose?: () => unknown;
+    onOpen?: (ev?: React.MouseEvent) => void | Promise<boolean>;
+    openIcon?: TIconType | TIconName;
+    label: React.ReactNode;
+    rememberCollapsedState?: boolean;
+    titleButtons?: React.ReactNode;
+}
+
+export type { ICollapsiblePanel };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/collapsiblePanel/types.d.ts.map

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

package/dist/components/dialogs/AlertModal.d.ts

@@ -0,0 +1,11 @@
+import * as React$1 from 'react';
+
+interface IAlert {
+    children: React.ReactNode;
+    onClose: () => void;
+    title?: string;
+}
+declare const AlertModal: ({ children, onClose, title }: IAlert) => React$1.JSX.Element;
+
+export { AlertModal, type IAlert };
+//# sourceMappingURL=AlertModal.d.ts.map

package/dist/components/dialogs/AlertModal.d.ts.map

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

package/dist/components/dialogs/AlertModal.js

@@ -0,0 +1,42 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import { Modal } from '../modals/Modal.js';
+import { Confirm } from '../modals/layout/Confirm.js';
+import { useModal } from '../modals/hooks/useModal.js';
+
+const AlertModal = ({ children, onClose, title }) => {
+  const { hide, ...modalProps } = useModal({
+    isDefaultOpen: true,
+    onExited: onClose
+  });
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      ...modalProps,
+      sx: useMemo(
+        () => ({
+          ".modal__content .confirm__content": {
+            overflow: "visible"
+          }
+        }),
+        []
+      ),
+      initialFocusGetter: useCallback((ref) => {
+        return ref?.querySelector(".confirm__confirmButton");
+      }, []),
+      title,
+      children: /* @__PURE__ */ jsx(
+        Confirm,
+        {
+          onConfirm: useCallback(() => {
+            hide();
+          }, [hide]),
+          children
+        }
+      )
+    }
+  );
+};
+
+export { AlertModal };
+//# sourceMappingURL=AlertModal.js.map

package/dist/components/dialogs/AlertModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertModal.js","sources":["../../../src/components/dialogs/AlertModal.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport { Confirm, Modal, useModal } from '../modals';\n\nexport interface IAlert {\n  children: React.ReactNode;\n  onClose: () => void;\n  title?: string;\n}\n\nexport const AlertModal = ({ children, onClose, title }: IAlert) => {\n  const { hide, ...modalProps } = useModal({\n    isDefaultOpen: true,\n    onExited: onClose,\n  });\n\n  return (\n    <Modal\n      {...modalProps}\n      sx={useMemo(\n        () => ({\n          '.modal__content .confirm__content': {\n            overflow: 'visible',\n          },\n        }),\n        [],\n      )}\n      initialFocusGetter={useCallback((ref: HTMLElement) => {\n        return ref?.querySelector('.confirm__confirmButton') as HTMLElement;\n      }, [])}\n      title={title}\n    >\n      <Confirm\n        onConfirm={useCallback(() => {\n          hide();\n        }, [hide])}\n      >\n        {children}\n      </Confirm>\n    </Modal>\n  );\n};\n"],"names":[],"mappings":";;;;;;AASO,MAAM,aAAa,CAAC,EAAE,QAAU,EAAA,OAAA,EAAS,OAAoB,KAAA;AAClE,EAAA,MAAM,EAAE,IAAA,EAAM,GAAG,UAAA,KAAe,QAAS,CAAA;AAAA,IACvC,aAAe,EAAA,IAAA;AAAA,IACf,QAAU,EAAA,OAAA;AAAA,GACX,CAAA,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,EAAI,EAAA,OAAA;AAAA,QACF,OAAO;AAAA,UACL,mCAAqC,EAAA;AAAA,YACnC,QAAU,EAAA,SAAA;AAAA,WACZ;AAAA,SACF,CAAA;AAAA,QACA,EAAC;AAAA,OACH;AAAA,MACA,kBAAA,EAAoB,WAAY,CAAA,CAAC,GAAqB,KAAA;AACpD,QAAO,OAAA,GAAA,EAAK,cAAc,yBAAyB,CAAA,CAAA;AAAA,OACrD,EAAG,EAAE,CAAA;AAAA,MACL,KAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,YAAY,MAAM;AAC3B,YAAK,IAAA,EAAA,CAAA;AAAA,WACP,EAAG,CAAC,IAAI,CAAC,CAAA;AAAA,UAER,QAAA;AAAA,SAAA;AAAA,OACH;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/components/dialogs/ConfirmModal.d.ts

@@ -0,0 +1,25 @@
+import { TApiaButtonType } from '../types.js';
+import { ReactNode, Ref } from 'react';
+
+interface IConfirm {
+    additionalButtons?: ReactNode;
+    additionalButtonsOnRight?: ReactNode;
+    cancelButtonText?: string;
+    children: ReactNode;
+    className?: string;
+    confirmButtonText?: string;
+    confirmButtonVariant?: TApiaButtonType;
+    contentRef?: Ref<HTMLDivElement>;
+    disabled?: boolean;
+    hideCancelButton?: boolean;
+    hideConfirmButton?: boolean;
+    isLoading?: boolean;
+    onConfirm?: () => unknown;
+    onCancel?: () => unknown;
+    title?: string;
+    variant?: string;
+}
+declare const ConfirmModal: ({ onConfirm, onCancel, title, ...props }: IConfirm) => JSX.Element;
+
+export { ConfirmModal, type IConfirm };
+//# sourceMappingURL=ConfirmModal.d.ts.map

package/dist/components/dialogs/ConfirmModal.d.ts.map

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

package/dist/components/dialogs/ConfirmModal.js

@@ -0,0 +1,45 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { useRef, useCallback } from 'react';
+import { Confirm } from '../modals/layout/Confirm.js';
+import { useModal } from '../modals/hooks/useModal.js';
+import { Modal } from '../modals/Modal.js';
+
+const ConfirmModal = ({
+  onConfirm,
+  onCancel,
+  title,
+  ...props
+}) => {
+  const hasConfirmed = useRef(false);
+  const { hide, ...modalProps } = useModal({
+    isDefaultOpen: true,
+    onExited: () => {
+      if (hasConfirmed.current)
+        onConfirm?.();
+      else
+        onCancel?.();
+    }
+  });
+  const handleCancel = useCallback(() => {
+    hide();
+  }, [hide]);
+  const handleConfirm = useCallback(() => {
+    hasConfirmed.current = true;
+    hide();
+  }, [hide]);
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      ...modalProps,
+      initialFocusGetter: useCallback(
+        (current) => current.querySelector(".confirm__confirmButton"),
+        []
+      ),
+      title,
+      children: /* @__PURE__ */ jsx(Confirm, { ...props, onCancel: handleCancel, onConfirm: handleConfirm })
+    }
+  );
+};
+
+export { ConfirmModal };
+//# sourceMappingURL=ConfirmModal.js.map

package/dist/components/dialogs/ConfirmModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmModal.js","sources":["../../../src/components/dialogs/ConfirmModal.tsx"],"sourcesContent":["import { Modal, useModal } from '../modals';\nimport { TApiaButtonType } from '../types';\nimport { ReactNode, Ref, useCallback, useRef } from 'react';\nimport { Confirm } from '../modals/layout/Confirm';\n\nexport interface IConfirm {\n  additionalButtons?: ReactNode;\n  additionalButtonsOnRight?: ReactNode;\n  cancelButtonText?: string;\n  children: ReactNode;\n  className?: string;\n  confirmButtonText?: string;\n  confirmButtonVariant?: TApiaButtonType;\n  contentRef?: Ref<HTMLDivElement>;\n  disabled?: boolean;\n  hideCancelButton?: boolean;\n  hideConfirmButton?: boolean;\n  isLoading?: boolean;\n  onConfirm?: () => unknown;\n  onCancel?: () => unknown;\n  title?: string;\n  variant?: string;\n}\n\nexport const ConfirmModal = ({\n  onConfirm,\n  onCancel,\n  title,\n  ...props\n}: IConfirm): JSX.Element => {\n  const hasConfirmed = useRef(false);\n\n  const { hide, ...modalProps } = useModal({\n    isDefaultOpen: true,\n    onExited: () => {\n      if (hasConfirmed.current) onConfirm?.();\n      else onCancel?.();\n    },\n  });\n\n  const handleCancel = useCallback(() => {\n    hide();\n  }, [hide]);\n\n  const handleConfirm = useCallback(() => {\n    hasConfirmed.current = true;\n    hide();\n  }, [hide]);\n\n  return (\n    <Modal\n      {...modalProps}\n      initialFocusGetter={useCallback(\n        (current: HTMLElement) =>\n          current.querySelector<HTMLElement>('.confirm__confirmButton'),\n        [],\n      )}\n      title={title}\n    >\n      <Confirm {...props} onCancel={handleCancel} onConfirm={handleConfirm} />\n    </Modal>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAwBO,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,KAAA;AACL,CAA6B,KAAA;AAC3B,EAAM,MAAA,YAAA,GAAe,OAAO,KAAK,CAAA,CAAA;AAEjC,EAAA,MAAM,EAAE,IAAA,EAAM,GAAG,UAAA,KAAe,QAAS,CAAA;AAAA,IACvC,aAAe,EAAA,IAAA;AAAA,IACf,UAAU,MAAM;AACd,MAAA,IAAI,YAAa,CAAA,OAAA;AAAS,QAAY,SAAA,IAAA,CAAA;AAAA;AACjC,QAAW,QAAA,IAAA,CAAA;AAAA,KAClB;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAK,IAAA,EAAA,CAAA;AAAA,GACP,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,YAAA,CAAa,OAAU,GAAA,IAAA,CAAA;AACvB,IAAK,IAAA,EAAA,CAAA;AAAA,GACP,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,kBAAoB,EAAA,WAAA;AAAA,QAClB,CAAC,OAAA,KACC,OAAQ,CAAA,aAAA,CAA2B,yBAAyB,CAAA;AAAA,QAC9D,EAAC;AAAA,OACH;AAAA,MACA,KAAA;AAAA,MAEA,8BAAC,OAAS,EAAA,EAAA,GAAG,OAAO,QAAU,EAAA,YAAA,EAAc,WAAW,aAAe,EAAA,CAAA;AAAA,KAAA;AAAA,GACxE,CAAA;AAEJ;;;;"}

package/dist/components/forms/Captcha.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from 'react';
+
+declare const Captcha: ({ name, imageUrl, onChange, value, className, }: {
+    name: string;
+    className?: string | undefined;
+    imageUrl: string;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    value: string;
+}) => React$1.JSX.Element;
+
+export { Captcha };
+//# sourceMappingURL=Captcha.d.ts.map

package/dist/components/forms/Captcha.d.ts.map

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

package/dist/components/forms/Captcha.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from '@apia/theme/jsx-runtime';
+import { Flex, getVariant, Image, Input } from '@apia/theme';
+import { useState } from 'react';
+import { getLabel } from '@apia/util';
+import { IconButton } from './buttons/IconButton.js';
+
+const Captcha = ({
+  name,
+  imageUrl,
+  onChange,
+  value,
+  className
+}) => {
+  const [imgSrc, setImgSrc] = useState(`${imageUrl}?t=${Date.now()}`);
+  const handleSyncClick = () => {
+    setImgSrc(`${imageUrl}?t=${Date.now()}`);
+  };
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      sx: {
+        flexDirection: "column"
+      },
+      className: "captcha__field",
+      ...getVariant("layout.common.forms.captcha"),
+      children: [
+        /* @__PURE__ */ jsx(Flex, { className: "captcha__imageContainer", children: /* @__PURE__ */ jsx(Image, { alt: "", src: imgSrc }) }),
+        /* @__PURE__ */ jsxs(Flex, { className: `captcha__inputContainer ${className ?? ""}`, children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              autoComplete: "off",
+              name,
+              onChange,
+              value
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { className: "captcha__buttons", children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                icon: "Refresh",
+                type: "button",
+                "aria-label": getLabel("lblCaptchaActivateAudio").text,
+                onClick: handleSyncClick
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                icon: "Volume",
+                type: "button",
+                "aria-label": getLabel("lblCaptchaActivateAudio").text,
+                onClick: () => {
+                }
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+export { Captcha };
+//# sourceMappingURL=Captcha.js.map

package/dist/components/forms/Captcha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Captcha.js","sources":["../../../src/components/forms/Captcha.tsx"],"sourcesContent":["import { Flex, Image, Input } from '@apia/theme';\nimport { useState } from 'react';\nimport { IconButton } from './buttons';\nimport { getVariant } from '@apia/theme';\nimport { getLabel } from '@apia/util';\n\nexport const Captcha = ({\n  name,\n  imageUrl,\n  onChange,\n  value,\n  className,\n}: {\n  name: string;\n  className?: string;\n  imageUrl: string;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  value: string;\n}) => {\n  const [imgSrc, setImgSrc] = useState<string>(`${imageUrl}?t=${Date.now()}`);\n\n  const handleSyncClick = () => {\n    // IMG reload\n    setImgSrc(`${imageUrl}?t=${Date.now()}`);\n  };\n\n  return (\n    <Flex\n      sx={{\n        flexDirection: 'column',\n      }}\n      className=\"captcha__field\"\n      {...getVariant('layout.common.forms.captcha')}\n    >\n      <Flex className=\"captcha__imageContainer\">\n        <Image alt=\"\" src={imgSrc} />\n      </Flex>\n      <Flex className={`captcha__inputContainer ${className ?? ''}`}>\n        <Input\n          autoComplete=\"off\"\n          name={name}\n          onChange={onChange}\n          value={value}\n        />\n\n        <Flex className=\"captcha__buttons\">\n          <IconButton\n            icon=\"Refresh\"\n            type=\"button\"\n            aria-label={getLabel('lblCaptchaActivateAudio').text}\n            onClick={handleSyncClick}\n          ></IconButton>\n          <IconButton\n            icon=\"Volume\"\n            type=\"button\"\n            aria-label={getLabel('lblCaptchaActivateAudio').text}\n            onClick={() => {}}\n          ></IconButton>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAMO,MAAM,UAAU,CAAC;AAAA,EACtB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AACF,CAMM,KAAA;AACJ,EAAM,MAAA,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,QAAA,CAAiB,CAAG,EAAA,QAAQ,CAAM,GAAA,EAAA,IAAA,CAAK,GAAI,EAAC,CAAE,CAAA,CAAA,CAAA;AAE1E,EAAA,MAAM,kBAAkB,MAAM;AAE5B,IAAA,SAAA,CAAU,GAAG,QAAQ,CAAA,GAAA,EAAM,IAAK,CAAA,GAAA,EAAK,CAAE,CAAA,CAAA,CAAA;AAAA,GACzC,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,aAAe,EAAA,QAAA;AAAA,OACjB;AAAA,MACA,SAAU,EAAA,gBAAA;AAAA,MACT,GAAG,WAAW,6BAA6B,CAAA;AAAA,MAE5C,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA,EAAK,WAAU,yBACd,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAM,GAAI,EAAA,EAAA,EAAG,GAAK,EAAA,MAAA,EAAQ,CAC7B,EAAA,CAAA;AAAA,6BACC,IAAK,EAAA,EAAA,SAAA,EAAW,CAA2B,wBAAA,EAAA,SAAA,IAAa,EAAE,CACzD,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,YAAa,EAAA,KAAA;AAAA,cACb,IAAA;AAAA,cACA,QAAA;AAAA,cACA,KAAA;AAAA,aAAA;AAAA,WACF;AAAA,0BAEA,IAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAU,kBACd,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,IAAK,EAAA,SAAA;AAAA,gBACL,IAAK,EAAA,QAAA;AAAA,gBACL,YAAA,EAAY,QAAS,CAAA,yBAAyB,CAAE,CAAA,IAAA;AAAA,gBAChD,OAAS,EAAA,eAAA;AAAA,eAAA;AAAA,aACV;AAAA,4BACD,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,IAAK,EAAA,QAAA;AAAA,gBACL,IAAK,EAAA,QAAA;AAAA,gBACL,YAAA,EAAY,QAAS,CAAA,yBAAyB,CAAE,CAAA,IAAA;AAAA,gBAChD,SAAS,MAAM;AAAA,iBAAC;AAAA,eAAA;AAAA,aACjB;AAAA,WACH,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}

package/dist/components/forms/Checkbox.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ChangeEventHandler } from 'react';
+import { ButtonProps } from '@apia/theme';
+import { TModify } from '@apia/util';
+
+type TCheckbox = TModify<ButtonProps, {
+    background?: string;
+    checked?: boolean;
+    color?: string;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    native?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    readOnly?: boolean;
+    required?: boolean;
+    type?: string;
+}>;
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<TCheckbox, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Checkbox, type TCheckbox };
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/forms/Checkbox.d.ts.map

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

package/dist/components/forms/Checkbox.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
+import { Button, getVariant, Input } from '@apia/theme';
+import { useUpdateEffect, getSpecificParent } from '@apia/util';
+import { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
+import { Icon } from '@apia/icons';
+
+const Checkbox = forwardRef(
+  ({
+    onChange,
+    required,
+    disabled,
+    readOnly,
+    name,
+    native,
+    indeterminate,
+    ...props
+  }, ref) => {
+    const [isChecked, setIsChecked] = useState(
+      props.defaultChecked ?? props.checked ?? false
+    );
+    const checkbox = useRef(null);
+    useUpdateEffect(
+      () => setIsChecked(props.checked ?? false),
+      [props.checked]
+    );
+    const sx = useMemo(
+      () => ({
+        bg: props.background ?? void 0,
+        color: props.color ?? void 0,
+        '&[aria-checked="false"]': {
+          bg: props.background ?? void 0,
+          color: "transparent"
+        }
+      }),
+      [props.background, props.color]
+    );
+    useEffect(() => {
+      if (checkbox.current && indeterminate !== void 0)
+        checkbox.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const nativeSx = useMemo(
+      () => ({ variant: "forms.checkbox" }),
+      []
+    );
+    return native ? (
+      // eslint-disable-next-line react/forbid-elements
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          onClick: props.onClick,
+          "aria-checked": isChecked,
+          sx: nativeSx,
+          ref: checkbox,
+          disabled,
+          name,
+          checked: isChecked,
+          onChange: (ev) => {
+            if (props.checked === void 0)
+              setIsChecked(ev.target.checked);
+            if (onChange)
+              onChange(ev);
+          },
+          required,
+          className: ` ${props.className ?? ""} nativeCheckbox `,
+          ...props
+        }
+      )
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...props,
+          onClick: (ev) => {
+            if (readOnly) {
+              return;
+            }
+            if (getSpecificParent(
+              ev.target,
+              (current) => current.type === "button"
+            )) {
+              if (props.onClick)
+                props.onClick(ev);
+              checkbox.current?.click();
+            }
+          },
+          type: "button",
+          ...getVariant("forms.customCheckbox"),
+          role: "checkbox",
+          "aria-checked": isChecked,
+          sx,
+          ref,
+          disabled,
+          children: /* @__PURE__ */ jsx(Icon, { title: "", name: "Check", size: "32px" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "checkbox",
+          sx: { display: "none" },
+          ref: checkbox,
+          onClick: (ev) => {
+            ev.stopPropagation();
+          },
+          name,
+          checked: isChecked,
+          onChange: (ev) => {
+            if (props.checked === void 0)
+              setIsChecked(ev.target.checked);
+            if (onChange)
+              onChange(ev);
+          },
+          required,
+          disabled
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/forms/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/forms/Checkbox.tsx"],"sourcesContent":["import {\n  Button,\n  ButtonProps,\n  Input,\n  InputProps,\n  ThemeUIStyleObject,\n} from '@apia/theme';\nimport { TModify, getSpecificParent, useUpdateEffect } from '@apia/util';\nimport {\n  ChangeEventHandler,\n  forwardRef,\n  MouseEventHandler,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { getVariant } from '@apia/theme';\nimport { Icon } from '@apia/icons';\n\nexport type TCheckbox = TModify<\n  ButtonProps,\n  {\n    background?: string;\n    checked?: boolean;\n    color?: string;\n    defaultChecked?: boolean;\n    indeterminate?: boolean;\n    native?: boolean;\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    readOnly?: boolean;\n    required?: boolean;\n    type?: string;\n  }\n>;\n\nexport const Checkbox = forwardRef<HTMLButtonElement, TCheckbox>(\n  (\n    {\n      onChange,\n      required,\n      disabled,\n      readOnly,\n      name,\n      native,\n      indeterminate,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isChecked, setIsChecked] = useState(\n      props.defaultChecked ?? props.checked ?? false,\n    );\n\n    const checkbox = useRef<HTMLInputElement>(null);\n\n    useUpdateEffect(\n      () => setIsChecked(props.checked ?? false),\n      [props.checked],\n    );\n\n    const sx = useMemo(\n      () => ({\n        bg: props.background ?? undefined,\n        color: props.color ?? undefined,\n        '&[aria-checked=\"false\"]': {\n          bg: props.background ?? undefined,\n          color: 'transparent',\n        },\n      }),\n      [props.background, props.color],\n    );\n\n    useEffect(() => {\n      if (checkbox.current && indeterminate !== undefined)\n        checkbox.current.indeterminate = indeterminate;\n    }, [indeterminate]);\n\n    const nativeSx = useMemo(\n      () => ({ variant: 'forms.checkbox' } as ThemeUIStyleObject),\n      [],\n    );\n\n    return native ? (\n      // eslint-disable-next-line react/forbid-elements\n      <input\n        type=\"checkbox\"\n        onClick={props.onClick as unknown as MouseEventHandler}\n        aria-checked={isChecked}\n        sx={nativeSx}\n        ref={checkbox}\n        disabled={disabled}\n        name={name}\n        checked={isChecked}\n        onChange={(ev) => {\n          if (props.checked === undefined) setIsChecked(ev.target.checked);\n          if (onChange) onChange(ev);\n        }}\n        required={required}\n        className={` ${props.className ?? ''} nativeCheckbox `}\n        {...(props as unknown as InputProps)}\n      />\n    ) : (\n      <>\n        <Button\n          {...props}\n          onClick={(ev) => {\n            if (readOnly) {\n              return;\n            }\n            if (\n              getSpecificParent(\n                ev.target as HTMLElement,\n                (current) => (current as HTMLInputElement).type === 'button',\n              )\n            ) {\n              if (props.onClick) props.onClick(ev);\n              checkbox.current?.click();\n            }\n          }}\n          type=\"button\"\n          {...getVariant('forms.customCheckbox')}\n          role=\"checkbox\"\n          aria-checked={isChecked}\n          sx={sx}\n          ref={ref}\n          disabled={disabled}\n        >\n          <Icon title=\"\" name=\"Check\" size=\"32px\" />\n        </Button>\n        <Input\n          type=\"checkbox\"\n          sx={{ display: 'none' }}\n          ref={checkbox}\n          onClick={(ev) => {\n            ev.stopPropagation();\n          }}\n          name={name}\n          checked={isChecked}\n          onChange={(ev) => {\n            if (props.checked === undefined) setIsChecked(ev.target.checked);\n            if (onChange) onChange(ev);\n          }}\n          required={required}\n          disabled={disabled}\n        />\n      </>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"names":[],"mappings":"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"}