nurseitaly-components 0.0.1

package/dist/common/AppDropzoneLocal/AppDropzoneBodyLocal.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import Dropzone from 'react-dropzone';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../basic';
+import './style.scss';
+function AppDropzoneBodyLocalInner({ onSuccess, onError, accept, onDrop, showConfirmButton = true, }, ref) {
+    const { t } = useTranslation('upload');
+    const [files, setFiles] = useState([]);
+    const [isUploading, setIsUploading] = useState(false);
+    const filesRef = useRef([]);
+    filesRef.current = files;
+    const upload = async () => {
+        const currentFiles = filesRef.current;
+        if (currentFiles.length === 0 || isUploading)
+            return;
+        setIsUploading(true);
+        try {
+            const results = await Promise.all(currentFiles.map(async (file) => ({
+                name: file.name,
+                content: await file.text(),
+            })));
+            onSuccess(results);
+        }
+        catch (err) {
+            onError?.(err);
+        }
+        finally {
+            setIsUploading(false);
+        }
+    };
+    useImperativeHandle(ref, () => ({
+        upload,
+    }));
+    const handleDrop = (acceptedFiles) => {
+        if (acceptedFiles.length === 0)
+            return;
+        setFiles((prev) => [...prev, ...acceptedFiles]);
+        onDrop?.();
+    };
+    const clearFiles = () => setFiles([]);
+    const removeAt = (index) => {
+        setFiles((prev) => prev.filter((_, i) => i !== index));
+    };
+    return (_jsxs("div", { className: "dropzone-container-local", children: [files.length === 0 && (_jsx(Dropzone, { onDrop: handleDrop, accept: accept, multiple: true, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone-local", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: t('label.dropzone') })] })) })), files.length > 0 && (_jsxs("div", { className: "uploaded-message-local", children: [_jsx("b", { children: t('label.uploaded.file') }), _jsx("ul", { className: "uploaded-file-list-local", children: files.map((file, index) => (_jsxs("li", { children: [_jsx("span", { children: file.name }), _jsx("button", { type: "button", className: "uploaded-file-remove-local", onClick: (e) => {
+                                        e.stopPropagation();
+                                        removeAt(index);
+                                    }, "aria-label": t('common:button.remove', {
+                                        defaultValue: 'Remove',
+                                    }), children: "\u00D7" })] }, `${file.name}-${file.size}-${index}`))) }), _jsx("button", { type: "button", className: "uploaded-clear-all-local", onClick: clearFiles, children: t('label.clear.all', { defaultValue: 'Clear all' }) }), _jsx("b", { children: t('label.confirm') })] })), files.length > 0 && showConfirmButton && (_jsx(Button, { onClick: () => {
+                    void upload();
+                }, text: t('common:button.confirm') }))] }));
+}
+const AppDropzoneBodyLocal = forwardRef(AppDropzoneBodyLocalInner);
+export default AppDropzoneBodyLocal;

package/dist/common/AppDropzoneLocal/AppDropzoneLocal.d.ts

@@ -0,0 +1,15 @@
+import type { UploadedFileLocal } from './UploadedFileLocal';
+type AppDropzoneLocalProps = {
+    onClose: () => void;
+    onSuccess: (files: UploadedFileLocal[]) => void;
+    onError?: (err: unknown) => void;
+    accept: Record<string, string[]>;
+    onDrop?: () => void;
+    title?: string;
+    alternativeButton?: {
+        title: string;
+        action: () => void;
+    };
+};
+export default function AppDropzoneLocal({ onClose, onSuccess, onError, accept, onDrop, title, alternativeButton, }: AppDropzoneLocalProps): import("react").JSX.Element;
+export {};

package/dist/common/AppDropzoneLocal/AppDropzoneLocal.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import AppModal from '../AppModal';
+import AppDropzoneBodyLocal from './AppDropzoneBodyLocal';
+export default function AppDropzoneLocal({ onClose, onSuccess, onError, accept, onDrop, title, alternativeButton, }) {
+    const { t } = useTranslation('upload');
+    const bodyRef = useRef(null);
+    const handleConfirm = () => {
+        void bodyRef.current?.upload();
+    };
+    return (_jsx(AppModal, { title: title || t('modal.title'), className: "modal-upload-local", close: onClose, confirm: handleConfirm, alternativeButton: alternativeButton, children: _jsx(AppDropzoneBodyLocal, { ref: bodyRef, onSuccess: onSuccess, onError: onError, accept: accept, onDrop: onDrop, showConfirmButton: false }) }));
+}

package/dist/common/AppDropzoneLocal/UploadedFileLocal.d.ts

@@ -0,0 +1,5 @@
+/** One text file selected in the dropzone, with UTF-8 content read client-side. */
+export interface UploadedFileLocal {
+    name: string;
+    content: string;
+}

package/dist/common/AppDropzoneLocal/UploadedFileLocal.js

@@ -0,0 +1 @@
+export {};

package/dist/common/AppDropzoneLocal/index.d.ts

@@ -0,0 +1,5 @@
+import AppDropzoneLocal from './AppDropzoneLocal';
+import AppDropzoneBodyLocal, { type AppDropzoneBodyLocalProps, type AppDropzoneBodyLocalRef } from './AppDropzoneBodyLocal';
+import type { UploadedFileLocal } from './UploadedFileLocal';
+export default AppDropzoneLocal;
+export { AppDropzoneBodyLocal, type AppDropzoneBodyLocalProps, type AppDropzoneBodyLocalRef, type UploadedFileLocal, };

package/dist/common/AppDropzoneLocal/index.js

@@ -0,0 +1,4 @@
+import AppDropzoneLocal from './AppDropzoneLocal';
+import AppDropzoneBodyLocal from './AppDropzoneBodyLocal';
+export default AppDropzoneLocal;
+export { AppDropzoneBodyLocal, };

package/dist/common/AppDropzoneLocal/style.scss

@@ -0,0 +1,75 @@
+.dropzone-container-local {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .dropzone-local {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    padding: var(--spacing-700);
+    border-radius: var(--radius-100);
+    border: 2px dashed var(--border-subtle-3);
+    background-color: var(--layer-layer-2);
+    cursor: pointer;
+  }
+
+  .preview-local {
+    margin: 0 auto;
+    width: 400px;
+    height: 400px;
+  }
+
+  .uploaded-message-local {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 16px;
+    text-align: center;
+    border: 1px solid var(--border-subtle-3);
+    border-radius: var(--radius-100);
+    padding: 16px;
+    margin-top: var(--spacing-400);
+  }
+
+  .uploaded-file-list-local {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    border: var(--border-default);
+    padding: 8px;
+    border-radius: var(--radius-100);
+
+    li {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 4px 0;
+    }
+  }
+
+  .uploaded-file-remove-local {
+    flex-shrink: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 1.25rem;
+    line-height: 1;
+    padding: 0 4px;
+    color: var(--text-secondary, inherit);
+  }
+
+  .uploaded-clear-all-local {
+    align-self: center;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    text-decoration: underline;
+    font: inherit;
+    color: var(--text-link, inherit);
+  }
+}

package/dist/common/AppForm/AppForm.d.ts

@@ -0,0 +1,16 @@
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import { SelectItem } from '../../basic';
+import { AppFormField } from './AppFormField';
+import './style.scss';
+type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
+    fields: AppFormField[];
+    form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+    prefix?: string;
+    onChangeFunctions?: Record<string, (v: string | number | boolean) => void>;
+    onBlurFunctions?: Record<string, () => void>;
+    runtimeOptions?: Record<string, any[]>;
+    runtimeLoadOptions?: Record<string, (query: string) => Promise<SelectItem[]>>;
+    twoColumns?: boolean;
+};
+export default function AppForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ fields, form, prefix, onChangeFunctions, onBlurFunctions, runtimeOptions, runtimeLoadOptions, twoColumns, }: Props<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
+export {};

package/dist/common/AppForm/AppForm.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AsyncSelectField, CheckboxField, DatePickerField, SelectField, SelectMultipleField, SwitchField, TextField, } from '../../basic';
+import FormColorField from './FormColorField';
+import './style.scss';
+const convertList = (values, labelAttr, valueAttr) => {
+    if (!values)
+        return [];
+    let fields = [];
+    values.map((value) => {
+        fields = [...fields, { label: value[labelAttr], value: value[valueAttr] }];
+    });
+    return fields;
+};
+export default function AppForm({ fields, form, prefix, onChangeFunctions = {}, onBlurFunctions = {}, runtimeOptions = {}, runtimeLoadOptions = {}, twoColumns = false, }) {
+    const getOnChangeFn = (attr) => onChangeFunctions[attr];
+    const getOnBlurFn = (attr) => onBlurFunctions[attr];
+    const getOptions = (attr) => {
+        if (!runtimeOptions[attr])
+            return undefined;
+        return convertList(runtimeOptions[attr], 'name', 'uid');
+    };
+    return (_jsx("div", { className: `app-form-container ${twoColumns ? 'two-columns' : ''}`, children: fields.map((field) => {
+            const name = prefix ? `${prefix}.${field.attr}` : field.attr;
+            const handleChange = getOnChangeFn(field.attr);
+            if (field.type === 'autocomplete') {
+                const loadOptions = runtimeLoadOptions[field.attr];
+                if (!loadOptions)
+                    return null;
+                return (_jsx(AsyncSelectField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, multiple: field.multiple, freeSolo: field.freeSolo, minQueryLength: field.minQueryLength, loadOptions: loadOptions, placeholder: field.title, noOptionsText: field.translation, onChange: (_attr, value) => handleChange?.(value) }, name));
+            }
+            if (field.type === 'select') {
+                const selectOptions = getOptions(field.attr) || field.options || [];
+                const selectProps = {
+                    attr: name,
+                    label: field.name,
+                    createdForm: form,
+                    options: selectOptions,
+                    disabled: field.disabled,
+                    required: field.required,
+                    onChange: (value) => handleChange?.(value),
+                    showEndAdornment: false,
+                };
+                if (field.multiple) {
+                    return _jsx(SelectMultipleField, { ...selectProps }, name);
+                }
+                return _jsx(SelectField, { ...selectProps }, name);
+            }
+            if (field.type === 'check') {
+                return (_jsx(CheckboxField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled }, name));
+            }
+            if (field.type === 'switch') {
+                return (_jsx(SwitchField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, onChange: (value) => handleChange?.(value) }, name));
+            }
+            if (field.type === 'datepicker') {
+                const handleBlur = getOnBlurFn(field.attr);
+                return (_jsx(DatePickerField, { attr: name, label: field.size === 'small' ? undefined : field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (_attr, value) => handleChange?.(value), onBlur: handleBlur, height: field.size === 'small' ? '32px' : undefined }, name));
+            }
+            if (field.type === 'textarea') {
+                return (_jsx(TextField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), multiline: true, rows: field.rows, height: "100%", infoText: field.infoText, defaultEndAdornments: field.infoText ? ['info'] : ['close'] }, name));
+            }
+            if (field.type === 'color') {
+                return (_jsx(FormColorField, { attr: name, label: field.name, form: form, disabled: field.disabled, tooltipText: field.tooltipText, onChange: (value) => handleChange?.(value) }, name));
+            }
+            const handleBlur = getOnBlurFn(field.attr);
+            return (_jsx(TextField, { attr: name, label: field.size === 'small' ? undefined : field.name, placeholder: field.size === 'small' ? field.name : undefined, createdForm: form, mask: field.mask, blurMask: field.blurMask, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), height: field.size === 'small' ? '32px' : undefined, onBlur: handleBlur, infoText: field.infoText, defaultEndAdornments: field.infoText ? ['info'] : ['close'] }, name));
+        }) }));
+}

package/dist/common/AppForm/AppFormField.d.ts

@@ -0,0 +1,37 @@
+import { SelectItem } from '../../basic';
+export type SwitchFieldLabels = {
+    trueLabel: string;
+    falseLabel: string;
+    notAvailable: string;
+};
+/** Renders switch (boolean) values for read-only display — no ternary chains. */
+export declare function formatSwitchFieldValue(value: unknown, labels: SwitchFieldLabels): string;
+export type DisplayFunction = (value: any) => string;
+export type MaskFunction = (value: string, isBlur?: boolean) => string;
+export type AppFormField = {
+    attr: string;
+    name: string;
+    title?: string;
+    type: string;
+    required?: boolean;
+    disabled?: boolean;
+    options?: SelectItem[];
+    tooltip?: boolean;
+    tooltipText?: string;
+    infoText?: string;
+    multiple?: boolean;
+    freeSolo?: boolean;
+    minQueryLength?: number;
+    default?: string | boolean | number;
+    role?: string;
+    fn?: (value: any) => string | number;
+    translation?: string;
+    mask?: MaskFunction;
+    blurMask?: MaskFunction;
+    pattern?: string;
+    rows?: number;
+    size?: 'medium' | 'small';
+    display?: DisplayFunction;
+    copyToClipboard?: boolean;
+    truncate?: number;
+};

package/dist/common/AppForm/AppFormField.js

@@ -0,0 +1,10 @@
+/** Renders switch (boolean) values for read-only display — no ternary chains. */
+export function formatSwitchFieldValue(value, labels) {
+    if (value === true) {
+        return labels.trueLabel;
+    }
+    if (value === false) {
+        return labels.falseLabel;
+    }
+    return labels.notAvailable;
+}

package/dist/common/AppForm/AppFormInfo.d.ts

@@ -0,0 +1,9 @@
+import { AppFormField } from './AppFormField';
+import './style.scss';
+type Props = {
+    fields: AppFormField[];
+    data: Record<string, any>;
+    prefix?: string;
+};
+export default function AppFormInfo({ fields, data }: Props): import("react").JSX.Element;
+export {};

package/dist/common/AppForm/AppFormInfo.js

@@ -0,0 +1,45 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { formatSwitchFieldValue } from './AppFormField';
+import './style.scss';
+import { Icon } from '../../basic';
+import UsabilityUtils from '../../functions/UsabilityUtils';
+function truncateValue(value, truncate, t) {
+    if (!value) {
+        return t('label.notavailable');
+    }
+    if (value.length <= truncate) {
+        return value;
+    }
+    return `${value.slice(0, truncate)}…`;
+}
+function getFieldDisplayContent(field, raw, t) {
+    if (field.truncate) {
+        return truncateValue(raw, field.truncate, t);
+    }
+    if (field.display) {
+        return field.display(raw);
+    }
+    if (field.fn) {
+        return field.fn(raw);
+    }
+    if (field.type === 'switch') {
+        return formatSwitchFieldValue(raw, {
+            trueLabel: t('generic.boolean.true'),
+            falseLabel: t('generic.boolean.false'),
+            notAvailable: t('label.notavailable'),
+        });
+    }
+    if (raw) {
+        return raw;
+    }
+    return t('label.notavailable');
+}
+export default function AppFormInfo({ fields, data }) {
+    const { t } = useTranslation('common');
+    return (_jsx("div", { className: "app-form-info-container", children: fields.map((field, idx) => {
+            return (_jsxs("div", { className: "item", ...(field.title && { title: field.title }), children: [_jsxs("span", { className: "label", children: [field.name, ":"] }), _jsx("span", { className: "value", children: getFieldDisplayContent(field, data[field.attr], t) }), field.copyToClipboard && (_jsx(Icon, { name: "content_copy", size: "small", className: "ds-copy-icon", filled: true, onClick: () => {
+                            UsabilityUtils.copy(data[field.attr]);
+                        } }))] }, idx));
+        }) }));
+}

package/dist/common/AppForm/FormColorField.d.ts

@@ -0,0 +1,12 @@
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import '../AppColorpicker/style.scss';
+type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
+    attr: string;
+    label: string;
+    form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+    disabled?: boolean;
+    tooltipText?: string;
+    onChange?: (value: string) => void;
+};
+export default function FormColorField<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ attr, label, form, disabled, tooltipText, onChange, }: Props<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
+export {};

package/dist/common/AppForm/FormColorField.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon, Tooltip } from '../../basic';
+import '../AppColorpicker/style.scss';
+const defaultColor = '#FFFFFF';
+export default function FormColorField({ attr, label, form, disabled, tooltipText, onChange, }) {
+    const fieldName = attr;
+    const { t } = useTranslation('common');
+    const formValue = form.watch(fieldName);
+    const [openColor, setOpenColor] = useState(false);
+    const [color, setColor] = useState(defaultColor);
+    useEffect(() => {
+        setColor(formValue || defaultColor);
+    }, [formValue]);
+    const handleConfirm = () => {
+        form.setValue(fieldName, color, { shouldDirty: true });
+        onChange?.(color);
+        setOpenColor(false);
+    };
+    return (_jsxs("div", { className: "form-color-field", children: [_jsxs("div", { className: "form-color-field-label", children: [_jsx("span", { children: label }), tooltipText && (_jsx(Tooltip, { title: tooltipText, children: _jsx("span", { children: _jsx(Icon, { name: "help", className: "info", size: "x-small" }) }) }))] }), _jsxs("div", { className: "color-picker-container", children: [_jsx("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => !disabled && setOpenColor(!openColor), onKeyDown: () => !disabled && setOpenColor(!openColor), role: "link", "aria-label": "open color picker", tabIndex: disabled ? -1 : 0 }), openColor && !disabled && (_jsxs(_Fragment, { children: [_jsx(HexColorPicker, { color: color, onChange: setColor }), _jsxs("div", { className: "buttons", children: [_jsx(Button, { text: t('button.confirm'), onClick: handleConfirm, size: "x-small" }), _jsx(Button, { text: t('button.cancel'), onClick: () => setOpenColor(false), color: "danger", size: "x-small" })] })] }))] })] }));
+}

package/dist/common/AppForm/index.d.ts

@@ -0,0 +1,2 @@
+import AppFormInfo from './AppFormInfo';
+export default AppFormInfo;

package/dist/common/AppForm/index.js

@@ -0,0 +1,2 @@
+import AppFormInfo from './AppFormInfo';
+export default AppFormInfo;

package/dist/common/AppForm/style.scss

@@ -0,0 +1,60 @@
+.app-form-info-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    &.full-width {
+      grid-column: 1 / -1;
+    }
+
+    .label {
+      @include label-medium-2;
+      color: var(--text-primary);
+    }
+
+    .value {
+      @include body-medium-1;
+      color: var(--text-secondary);
+    }
+
+    > .ds-copy-icon {
+      color: var(--icon-primary);
+      cursor: pointer;
+    }
+  }
+}
+
+.app-form-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &.two-columns {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+  }
+}
+
+.form-color-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100);
+
+  .form-color-field-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-50);
+    @include label-medium-2;
+    color: var(--text-primary);
+
+    .info {
+      color: var(--icon-primary);
+    }
+  }
+}

package/dist/common/AppLoading/AppLoading.d.ts

@@ -0,0 +1,7 @@
+import './style.scss';
+type Props = {
+    className?: string;
+    pageLoading?: boolean;
+};
+export default function AppLoading({ className, pageLoading, }: Props): import("react").JSX.Element;
+export {};

package/dist/common/AppLoading/AppLoading.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import ReactLoading from 'react-loading';
+import './style.scss';
+export default function AppLoading({ className = '', pageLoading = false, }) {
+    const containerClassName = cx('loading-container', { 'page-loading': pageLoading }, className);
+    return (_jsx("div", { className: containerClassName, children: _jsx(ReactLoading, { type: "spinningBubbles", color: "blue", height: 50, width: 50 }) }));
+}

package/dist/common/AppLoading/index.d.ts

@@ -0,0 +1,2 @@
+import AppLoading from './AppLoading';
+export default AppLoading;

package/dist/common/AppLoading/index.js

@@ -0,0 +1,2 @@
+import AppLoading from './AppLoading';
+export default AppLoading;

package/dist/common/AppLoading/style.scss

@@ -0,0 +1,5 @@
+.loading-container {
+  &.page-loading {
+    margin: 10% auto 0;
+  }
+}

package/dist/common/AppModal/AppModal.d.ts

@@ -0,0 +1,27 @@
+import './style.scss';
+type Props = {
+    children: React.ReactNode;
+    title: string;
+    close: () => void;
+    confirm?: () => void;
+    cancel?: () => void;
+    subtitle?: string;
+    className?: string;
+    disableConfirm?: boolean;
+    hideFooter?: boolean;
+    disableCancel?: boolean;
+    disableClose?: boolean;
+    disableEscapeClose?: boolean;
+    confirmLabel?: string;
+    closeLabel?: string;
+    onEntered?: () => void;
+    alternativeButton?: {
+        title: string;
+        action: () => void;
+    };
+    alternativeOptions?: React.ReactNode;
+    hideBackdrop?: boolean;
+    disableBackdropClose?: boolean;
+};
+export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableEscapeClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, hideBackdrop, alternativeOptions, disableBackdropClose, }: Props): import("react").JSX.Element;
+export {};

package/dist/common/AppModal/AppModal.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Fade, Modal } from '@mui/material';
+import cx from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon } from '../../basic';
+import './style.scss';
+import { useEffect } from 'react';
+import { attachCloseToEscape, stopEventPropagation } from './AppModalUtils';
+export default function AppModal({ children, title, subtitle, className, close, confirm, disableConfirm, hideFooter, disableClose, disableEscapeClose, disableCancel, confirmLabel, closeLabel, cancel, onEntered, alternativeButton, hideBackdrop, alternativeOptions, disableBackdropClose, }) {
+    const { t } = useTranslation('common');
+    const getClassNames = cx('modal-container', className);
+    useEffect(() => {
+        if (disableEscapeClose)
+            return;
+        return attachCloseToEscape(close);
+    }, [close, disableEscapeClose]);
+    return (_jsx(Modal, { open: true, disableEnforceFocus: true, disableAutoFocus: true, disableRestoreFocus: true, hideBackdrop: hideBackdrop, disableEscapeKeyDown: !!disableEscapeClose, onClose: (event, reason) => {
+            stopEventPropagation(event);
+            if (disableBackdropClose && reason === 'backdropClick')
+                return;
+            if (disableClose)
+                return;
+            close();
+        }, children: _jsx(Fade, { in: true, onEntered: () => onEntered && onEntered(), children: _jsxs(Box, { className: getClassNames, sx: style, children: [_jsxs("div", { className: "header", children: [_jsxs("div", { className: "titles", children: [_jsx("span", { className: "title", children: title }), subtitle && _jsx("span", { className: "subtitle", children: subtitle })] }), !disableClose && (_jsx(Icon, { name: "close", onClick: (e) => {
+                                    stopEventPropagation(e);
+                                    close();
+                                }, className: "pointer" }))] }), _jsx("div", { className: "body", children: children }), !hideFooter ? (_jsxs("div", { className: "footer", children: [alternativeOptions && alternativeOptions, alternativeButton && (_jsx(Button, { className: "alternative", color: "white", onClick: alternativeButton.action, text: alternativeButton.title })), !disableCancel && (_jsx(Button, { onClick: (e) => {
+                                    stopEventPropagation(e);
+                                    (cancel || close)();
+                                }, text: closeLabel || t('button.cancel'), mode: "tonal" })), confirm && (_jsx(Button, { onClick: confirm, disabled: disableConfirm, text: confirmLabel || t('button.confirm') }))] })) : null] }) }) }));
+}
+const style = {
+    position: 'absolute',
+    top: '40%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '50%',
+    maxWidth: '1080px',
+    borderRadius: 'var(--radius-200)',
+    boxShadow: 24,
+    bgcolor: 'var(--background-default)',
+};

package/dist/common/AppModal/AppModalConfirm.d.ts

@@ -0,0 +1,15 @@
+import './style.scss';
+type Props = {
+    title: string;
+    subtitle: string | React.ReactNode;
+    onClose?: () => void;
+    onConfirm: () => void;
+    closeLabel?: string;
+    confirmLabel?: string;
+    disableClose?: boolean;
+    disableEscapeClose?: boolean;
+    disableBackdropClose?: boolean;
+    confirmDisabled?: boolean;
+};
+export default function AppModalConfirm({ title, subtitle, onClose, onConfirm, closeLabel, confirmLabel, confirmDisabled, disableClose, disableEscapeClose, disableBackdropClose, }: Props): import("react").JSX.Element;
+export {};

package/dist/common/AppModal/AppModalConfirm.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Modal } from '@mui/material';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon } from '../../basic';
+import './style.scss';
+import { attachCloseToEscape, stopEventPropagation } from './AppModalUtils';
+export default function AppModalConfirm({ title, subtitle, onClose, onConfirm, closeLabel, confirmLabel, confirmDisabled, disableClose, disableEscapeClose, disableBackdropClose, }) {
+    const { t } = useTranslation('common');
+    useEffect(() => {
+        if (!onClose || disableEscapeClose)
+            return;
+        return attachCloseToEscape(onClose);
+    }, [onClose, disableEscapeClose]);
+    return (_jsx(Modal, { open: true, disableEscapeKeyDown: !onClose || !!disableEscapeClose, onClose: (event, reason) => {
+            stopEventPropagation(event);
+            if (!onClose || disableClose)
+                return;
+            if (disableBackdropClose && reason === 'backdropClick')
+                return;
+            onClose();
+        }, children: _jsxs(Box, { className: "modal-container modal-confirm", sx: style, children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: "warning", size: "large", filled: true }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "subtitle", children: subtitle })] })] }), _jsxs("div", { className: "footer", children: [onClose && (_jsx(Button, { onClick: (e) => {
+                                stopEventPropagation(e);
+                                onClose();
+                            }, text: closeLabel || t('button.cancel'), mode: "tonal" })), _jsx(Button, { onClick: onConfirm, text: confirmLabel || t('button.confirm'), disabled: confirmDisabled })] })] }) }));
+}
+const style = {
+    position: 'absolute',
+    top: '40%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '30%',
+    maxWidth: '580px',
+    borderRadius: 'var(--radius-200)',
+    boxShadow: 24,
+    bgcolor: 'var(--background-default)',
+};