@taiv/ui 1.0.0

package/README.md

@@ -0,0 +1 @@
+# taiv-ui-toolkit

package/dist/components/Data/CheckboxTable.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface TableColumnProps {
+    label: string;
+    width?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    key: string;
+}
+interface CheckboxTableProps {
+    columns: TableColumnProps[];
+    data: Record<string, any>[];
+    className?: string;
+    onRowClick?: (row: Record<string, any>) => void;
+    title?: string;
+    subtitle?: string;
+    showColumnTitles?: boolean;
+    outlines?: boolean;
+}
+declare const CheckboxTable: ({ columns, data, className, onRowClick, title, subtitle, showColumnTitles, outlines, }: CheckboxTableProps) => import("react/jsx-runtime").JSX.Element;
+export { CheckboxTable };
+//# sourceMappingURL=CheckboxTable.d.ts.map

package/dist/components/Data/CheckboxTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxTable.d.ts","sourceRoot":"","sources":["../../../src/components/Data/CheckboxTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;CACb;AAED,UAAU,kBAAkB;IAC1B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,GAAI,wFASpB,kBAAkB,4CAuHpB,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Data/CheckboxTable.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMediaQuery } from '@mantine/hooks';
+import { Checkbox } from '../Inputs/Controls/Checkbox';
+import { Group } from '../Layout/Group';
+import { Box } from '../Layout/Box';
+import { Center } from '../Layout/Center';
+import { Stack } from '../Layout/Stack';
+import { Title } from '../Typography/Title';
+import { neutral } from '../../constants/colors';
+import { fontStyle } from '../../constants/font';
+const CheckboxTable = ({ columns, data, className = 'none', onRowClick, title, subtitle, showColumnTitles = false, outlines = false, }) => {
+    const isMobile = useMediaQuery('(max-width: 768px)');
+    const style = {
+        container: {
+            borderRadius: '8px',
+            border: `1px solid ${neutral[50]}`,
+            padding: '0.8rem',
+            backgroundColor: 'white',
+        },
+        header: {
+            padding: '1.6rem',
+            minWidth: '0',
+        },
+        columns: {
+            paddingTop: '1.6rem',
+            paddingLeft: '3.6rem',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+        },
+        column: {
+            justifyContent: isMobile ? 'flex-start' : 'center',
+            ...fontStyle['body'],
+            color: neutral[300],
+            padding: '0.8rem 1.6rem',
+            minWidth: '10rem',
+        },
+        tableBody: {
+            gap: isMobile ? '0.5rem' : '0.25rem',
+            minWidth: '0',
+        },
+        tableRow: {
+            padding: isMobile ? '0.8rem 1.6rem' : '0.4rem 3.2rem',
+            backgroundColor: '#FFFFFF',
+            minWidth: '0',
+            gap: isMobile ? '2.4rem' : '0',
+            ...(outlines && { borderTop: `1px solid ${neutral[50]}` }),
+        },
+        contentContainer: {
+            flex: 1,
+            flexDirection: (isMobile ? 'column' : 'row'),
+            gap: '0.25rem',
+            minWidth: 0,
+        },
+        item: {
+            justifyContent: isMobile ? 'flex-start' : 'space-between',
+            minWidth: isMobile ? '0' : '10rem',
+            ...fontStyle['body'],
+            fontWeight: 400,
+            color: neutral[200],
+        },
+    };
+    const renderColumnTitles = () => {
+        return (_jsx(Group, { style: style.columns, children: columns === null || columns === void 0 ? void 0 : columns.map((column, index) => (_jsx(Box, { style: {
+                    ...style.column,
+                    width: column.width || '100%',
+                    ...(column.className && { className: column.className }),
+                    ...(column.style && { ...column.style }),
+                }, children: column.label }, column.key))) }));
+    };
+    const renderRow = (row) => {
+        return (_jsxs(_Fragment, { children: [_jsx(Center, { mr: isMobile ? 0 : '3.2rem', ml: isMobile ? 0 : '-1.6rem', children: _jsx(Checkbox, { checked: row.checked, onChange: () => onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row) }) }), _jsx(Group, { style: style.contentContainer, children: columns === null || columns === void 0 ? void 0 : columns.map((column, index) => {
+                        const text = row[column.key] || '';
+                        const className = column.className || '';
+                        return (_jsx(Box, { style: {
+                                ...style.item,
+                                width: column.width || '100%',
+                                flex: isMobile ? 'none' : column.key === 'volume' ? '1 1 30rem' : '0 0 auto',
+                                minWidth: isMobile ? '0' : column.key === 'volume' ? '30rem' : '10rem',
+                                ...(className && { className }),
+                            }, children: text }, index));
+                    }) })] }));
+    };
+    return (_jsxs(Box, { style: style.container, children: [_jsxs(Stack, { style: style.header, children: [title && _jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Title, { variant: "cardSubheader", children: subtitle }), showColumnTitles && !isMobile && renderColumnTitles()] }), _jsx(Stack, { style: style.tableBody, children: data === null || data === void 0 ? void 0 : data.map((row, index) => (_jsx(Group, { style: style.tableRow, children: renderRow(row) }, index))) })] }));
+};
+export { CheckboxTable };

package/dist/components/Data/RemovableItemList.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface RemovableItemListProps {
+    items: React.ReactNode[];
+    onRemove?: (item: React.ReactNode, index: number) => void;
+    title?: string;
+    disabledIndices?: number[];
+}
+declare const RemovableItemList: ({ items, onRemove, title, disabledIndices }: RemovableItemListProps) => import("react/jsx-runtime").JSX.Element;
+export { RemovableItemList };
+//# sourceMappingURL=RemovableItemList.d.ts.map

package/dist/components/Data/RemovableItemList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RemovableItemList.d.ts","sourceRoot":"","sources":["../../../src/components/Data/RemovableItemList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,sBAAsB;IAC9B,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,QAAA,MAAM,iBAAiB,GAAI,6CAAkD,sBAAsB,4CAgElG,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/Data/RemovableItemList.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '@mantine/core';
+import { neutral, error } from '../../constants/colors';
+import { fontStyle } from '../../constants/font';
+import { Title } from '../Typography/Title';
+const RemovableItemList = ({ items, onRemove, title, disabledIndices = [] }) => {
+    const style = {
+        container: {
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: '8px',
+            width: '100%',
+            overflow: 'hidden',
+            border: `1px solid ${neutral[50]}`,
+        },
+        titleContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            padding: '1.2rem 1.6rem',
+            backgroundColor: neutral[50],
+        },
+        itemContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '1.2rem 1.6rem',
+        },
+        itemText: {
+            ...fontStyle['body'],
+            fontWeight: 400,
+        },
+    };
+    return (_jsxs(Box, { style: style.container, children: [title && (_jsx(Box, { style: style.titleContainer, children: _jsx(Title, { variant: "cardSubheader", weight: "semibold", children: title }) })), items === null || items === void 0 ? void 0 : items.map((item, index) => (_jsxs(Box, { style: {
+                    ...style.itemContainer,
+                    borderTop: index > 0 ? `1px solid ${neutral[50]}` : 'none',
+                }, children: [_jsx(Text, { style: style.itemText, children: item }), onRemove && (_jsx("i", { className: "fas fa-trash-alt", style: {
+                            opacity: disabledIndices.includes(index) ? 0.5 : 1,
+                            cursor: disabledIndices.includes(index) ? 'default' : 'pointer',
+                            color: disabledIndices.includes(index) ? neutral[200] : error[100],
+                            fontSize: '1.625rem',
+                            fontWeight: 100,
+                        }, onClick: () => !disabledIndices.includes(index) && onRemove(item, index) }))] }, index)))] }));
+};
+export { RemovableItemList };

package/dist/components/Info/Modals/ConfirmationModal.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { modalVariants } from './variants';
+export declare const useConfirmationModal: () => {
+    show: (options: {
+        variant?: Exclude<keyof typeof modalVariants, "error">;
+        title?: string;
+        message?: string;
+        confirmLabel?: string;
+        cancelLabel?: string;
+        icon?: React.ReactNode;
+        onConfirm?: () => void;
+        onCancel?: () => void;
+        size?: string | number;
+    }) => void;
+    close: (modalId: string) => void;
+    closeAll: () => void;
+};
+//# sourceMappingURL=ConfirmationModal.d.ts.map

package/dist/components/Info/Modals/ConfirmationModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Modals/ConfirmationModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAI3C,eAAO,MAAM,oBAAoB;oBACR;QACrB,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,OAAO,aAAa,EAAE,OAAO,CAAC,CAAC;QACvD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB;qBAkGuB,MAAM;;CAa/B,CAAC"}

package/dist/components/Info/Modals/ConfirmationModal.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { modals } from '@mantine/modals';
+import { neutral } from '../../../constants/colors';
+import { Title } from '../../Typography/Title';
+import { Stack } from '../../Layout/Stack';
+import { Center } from '../../Layout/Center';
+import { modalVariants } from './variants';
+import { Button } from '../../Inputs/Buttons/Button';
+import { Group } from '../../Layout/Group';
+export const useConfirmationModal = () => {
+    const show = (options) => {
+        const { variant = 'confirm', title, message, confirmLabel, cancelLabel, icon, onConfirm, onCancel, size = '40rem', } = options;
+        const handleConfirm = () => {
+            if (onConfirm)
+                onConfirm();
+            modals.closeAll();
+        };
+        const handleCancel = () => {
+            if (onCancel)
+                onCancel();
+            modals.closeAll();
+        };
+        const selectedVariant = modalVariants[variant];
+        const iconContainer = {
+            width: '4.2rem',
+            height: '4.2rem',
+            borderRadius: '50%',
+            backgroundColor: selectedVariant.iconBackgroundColor,
+            border: `2px solid ${selectedVariant.iconColor}`,
+        };
+        const modalIcon = icon || (_jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '2rem' } }));
+        const ConfirmModalContent = () => {
+            return (_jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "2rem", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: "1.5rem", align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), _jsxs(Stack, { gap: "0.25rem", align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title || selectedVariant.title }), _jsx(Title, { variant: "cardSubheader", align: "center", children: message || selectedVariant.message })] })] }), _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Group, { gap: "1rem", align: "center", children: [_jsx(Button, { onClick: handleCancel, variant: "secondary", children: cancelLabel || selectedVariant.cancelLabel }), _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: confirmLabel || selectedVariant.confirmLabel })] }) })] }) }));
+        };
+        modals.open({
+            children: _jsx(ConfirmModalContent, {}),
+            size,
+            styles: {
+                content: {
+                    borderRadius: '8px',
+                    border: `1px solid ${neutral[50]}`,
+                    boxShadow: '0px 0px 19px 0px #00000040',
+                },
+                header: {
+                    padding: '0.8rem',
+                },
+                close: {
+                    borderRadius: '16px',
+                    backgroundColor: neutral[50],
+                    width: '1.8rem',
+                    height: '1.8rem',
+                    '&:hover': {
+                        backgroundColor: neutral[50],
+                    },
+                    '&:active': {
+                        transform: 'none',
+                    },
+                },
+                body: {
+                    padding: '0 3.2rem 1.6rem 3.2rem',
+                },
+            },
+        });
+    };
+    const close = (modalId) => {
+        modals.close(modalId);
+    };
+    const closeAll = () => {
+        modals.closeAll();
+    };
+    return {
+        show,
+        close,
+        closeAll,
+    };
+};

package/dist/components/Info/Modals/InfoModal.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { modalVariants } from './variants';
+export declare const useInfoModal: () => {
+    show: (options: {
+        variant?: keyof typeof modalVariants;
+        title?: string;
+        message?: string;
+        icon?: React.ReactNode;
+        onConfirm?: () => void;
+        size?: string | number;
+    }) => void;
+    close: (modalId: string) => void;
+    closeAll: () => void;
+};
+//# sourceMappingURL=InfoModal.d.ts.map

package/dist/components/Info/Modals/InfoModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoModal.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Modals/InfoModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG3C,eAAO,MAAM,YAAY;oBACA;QACrB,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;QACrC,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;QACvB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACxB;qBA8EuB,MAAM;;CAa/B,CAAC"}

package/dist/components/Info/Modals/InfoModal.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { modals } from '@mantine/modals';
+import { neutral } from '../../../constants/colors';
+import { Title } from '../../Typography/Title';
+import { Stack } from '../../Layout/Stack';
+import { Center } from '../../Layout/Center';
+import { modalVariants } from './variants';
+import { Button } from '../../Inputs/Buttons/Button';
+export const useInfoModal = () => {
+    const show = (options) => {
+        const { variant = 'info', title, message, icon, onConfirm, size = '35rem' } = options;
+        const handleConfirm = () => {
+            if (onConfirm)
+                onConfirm();
+            modals.closeAll();
+        };
+        const selectedVariant = modalVariants[variant];
+        const iconContainer = {
+            width: '4.2rem',
+            height: '4.2rem',
+            borderRadius: '50%',
+            backgroundColor: selectedVariant.iconBackgroundColor,
+            border: `2px solid ${selectedVariant.iconColor}`,
+        };
+        const modalIcon = icon || (_jsx("i", { className: selectedVariant.icon, style: { color: selectedVariant.iconColor, fontSize: '2rem' } }));
+        const InfoModalContent = () => {
+            return (_jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "2rem", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: "1.5rem", align: "center", children: [_jsx(Center, { style: iconContainer, children: modalIcon }), _jsxs(Stack, { gap: "0.25rem", align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title || selectedVariant.title }), _jsx(Title, { variant: "cardSubheader", align: "center", children: message || selectedVariant.message })] })] }), _jsx(Center, { h: "100%", w: "100%", children: _jsx(Button, { onClick: handleConfirm, variant: selectedVariant.buttonVariant, children: "OK" }) })] }) }));
+        };
+        modals.open({
+            children: _jsx(InfoModalContent, {}),
+            size,
+            styles: {
+                content: {
+                    borderRadius: '8px',
+                    border: `1px solid ${neutral[50]}`,
+                    boxShadow: '0px 0px 19px 0px #00000040',
+                },
+                header: {
+                    padding: '0.8rem',
+                },
+                close: {
+                    borderRadius: '16px',
+                    backgroundColor: neutral[50],
+                    width: '1.8rem',
+                    height: '1.8rem',
+                    '&:hover': {
+                        backgroundColor: neutral[50],
+                    },
+                    '&:active': {
+                        transform: 'none',
+                    },
+                },
+                body: {
+                    padding: '0 3.2rem 1.6rem 3.2rem',
+                },
+            },
+        });
+    };
+    const close = (modalId) => {
+        modals.close(modalId);
+    };
+    const closeAll = () => {
+        modals.closeAll();
+    };
+    return {
+        show,
+        close,
+        closeAll,
+    };
+};

package/dist/components/Info/Modals/Modal.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ModalProps {
+    opened: boolean;
+    onClose: () => void;
+    icon?: React.ReactNode;
+    title: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    width?: string | number;
+}
+export declare const Modal: ({ opened, onClose, icon, title, subtitle, children, width }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Info/Modals/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Modals/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,UAAU;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,KAAK,GAAI,6DAAuE,UAAU,4CAoEtG,CAAC"}

package/dist/components/Info/Modals/Modal.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal as MantineModal } from '@mantine/core';
+import { neutral } from '../../../constants/colors';
+import { Title } from '../../Typography/Title';
+import { Stack } from '../../Layout/Stack';
+import { Center } from '../../Layout/Center';
+export const Modal = ({ opened, onClose, icon, title, subtitle, children, width = '40rem' }) => {
+    return (_jsx(MantineModal, { opened: opened, onClose: onClose, centered: true, radius: '16px', overlayProps: {
+            opacity: 0,
+            blur: 4,
+        }, size: width, transitionProps: {
+            transition: 'pop',
+            duration: 200,
+        }, closeButtonProps: {
+            style: {
+                borderRadius: '16px',
+                backgroundColor: neutral[50],
+                width: '1.8rem',
+                height: '1.8rem',
+            },
+        }, styles: {
+            content: {
+                borderRadius: '8px',
+                border: `1px solid ${neutral[50]}`,
+                boxShadow: '0px 0px 19px 0px #00000040',
+            },
+            header: {
+                padding: '0.8rem',
+            },
+            close: {
+                '&:hover': {
+                    backgroundColor: neutral[50],
+                },
+                '&:active': {
+                    transform: 'none',
+                },
+            },
+            body: {
+                padding: '0 3.2rem 1.6rem 3.2rem',
+            },
+        }, children: _jsx(Center, { h: "100%", w: "100%", children: _jsxs(Stack, { gap: "2rem", h: "100%", w: "100%", align: "center", children: [_jsxs(Stack, { gap: "1.5rem", align: "center", children: [icon, _jsxs(Stack, { gap: "0.25rem", align: "center", children: [_jsx(Title, { variant: "cardHeader", align: "center", children: title }), subtitle && (_jsx(Title, { variant: "cardSubheader", align: "center", children: subtitle }))] })] }), _jsx(Center, { h: "100%", w: "100%", children: children })] }) }) }));
+};

package/dist/components/Info/Modals/ModalProvider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ModalProvider: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalProvider.d.ts.map

package/dist/components/Info/Modals/ModalProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Modals/ModalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4CAkBxE,CAAC"}

package/dist/components/Info/Modals/ModalProvider.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ModalsProvider } from '@mantine/modals';
+export const ModalProvider = ({ children }) => {
+    return (_jsx(ModalsProvider, { modalProps: {
+            centered: true,
+            overlayProps: {
+                opacity: 0,
+                blur: 4,
+            },
+            transitionProps: {
+                transition: 'pop',
+                duration: 200,
+            },
+        }, children: children }));
+};

package/dist/components/Info/Modals/variants.d.ts

@@ -0,0 +1,63 @@
+export declare const modalVariants: {
+    readonly confirm: {
+        readonly title: "Are you sure?";
+        readonly message: "This action cannot be undone.";
+        readonly confirmLabel: "OK";
+        readonly cancelLabel: "Cancel";
+        readonly buttonVariant: "primary";
+        readonly icon: "fas fa-circle-question";
+        readonly iconColor: "#00A6F4";
+        readonly iconBackgroundColor: "#BDEAFF";
+    };
+    readonly info: {
+        readonly title: "Info";
+        readonly message: "This action cannot be undone.";
+        readonly confirmLabel: "OK";
+        readonly cancelLabel: "Cancel";
+        readonly buttonVariant: "primary";
+        readonly icon: "fas fa-circle-info";
+        readonly iconColor: "#00A6F4";
+        readonly iconBackgroundColor: "#BDEAFF";
+    };
+    readonly success: {
+        readonly title: "Success";
+        readonly message: "Operation completed successfully!";
+        readonly confirmLabel: "OK";
+        readonly cancelLabel: "Cancel";
+        readonly buttonVariant: "success";
+        readonly icon: "fas fa-circle-check";
+        readonly iconColor: "#00A63E";
+        readonly iconBackgroundColor: "#E6F4E7";
+    };
+    readonly error: {
+        readonly title: "Oops!";
+        readonly message: "An error occurred and your changes were not saved. Please try again.";
+        readonly confirmLabel: "OK";
+        readonly cancelLabel: "Cancel";
+        readonly buttonVariant: "cancel";
+        readonly icon: "fas fa-circle-exclamation";
+        readonly iconColor: "#FB2C36";
+        readonly iconBackgroundColor: "#FFD7D9";
+    };
+    readonly warning: {
+        readonly title: "Warning";
+        readonly message: "This action cannot be undone. Are you sure?";
+        readonly confirmLabel: "Yes, proceed";
+        readonly cancelLabel: "Cancel";
+        readonly buttonVariant: "warning";
+        readonly icon: "fas fa-triangle-exclamation";
+        readonly iconColor: "#FE9A00";
+        readonly iconBackgroundColor: "#FFE5B4";
+    };
+    readonly cancel: {
+        readonly title: "Delete Item";
+        readonly message: "Are you sure you want to delete this item? This action cannot be undone.";
+        readonly confirmLabel: "Delete";
+        readonly cancelLabel: "Cancel";
+        readonly buttonVariant: "cancel";
+        readonly icon: "fas fa-trash-can";
+        readonly iconColor: "#FB2C36";
+        readonly iconBackgroundColor: "#FFD7D9";
+    };
+};
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/Info/Modals/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Modals/variants.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DhB,CAAC"}

package/dist/components/Info/Modals/variants.js

@@ -0,0 +1,63 @@
+import { primary, error, success, warning } from '../../../constants/colors';
+export const modalVariants = {
+    confirm: {
+        title: 'Are you sure?',
+        message: 'This action cannot be undone.',
+        confirmLabel: 'OK',
+        cancelLabel: 'Cancel',
+        buttonVariant: 'primary',
+        icon: 'fas fa-circle-question',
+        iconColor: primary[200],
+        iconBackgroundColor: primary[50],
+    },
+    info: {
+        title: 'Info',
+        message: 'This action cannot be undone.',
+        confirmLabel: 'OK',
+        cancelLabel: 'Cancel',
+        buttonVariant: 'primary',
+        icon: 'fas fa-circle-info',
+        iconColor: primary[200],
+        iconBackgroundColor: primary[50],
+    },
+    success: {
+        title: 'Success',
+        message: 'Operation completed successfully!',
+        confirmLabel: 'OK',
+        cancelLabel: 'Cancel',
+        buttonVariant: 'success',
+        icon: 'fas fa-circle-check',
+        iconColor: success[200],
+        iconBackgroundColor: success[50],
+    },
+    error: {
+        title: 'Oops!',
+        message: 'An error occurred and your changes were not saved. Please try again.',
+        confirmLabel: 'OK',
+        cancelLabel: 'Cancel',
+        buttonVariant: 'cancel',
+        icon: 'fas fa-circle-exclamation',
+        iconColor: error[100],
+        iconBackgroundColor: error[50],
+    },
+    warning: {
+        title: 'Warning',
+        message: 'This action cannot be undone. Are you sure?',
+        confirmLabel: 'Yes, proceed',
+        cancelLabel: 'Cancel',
+        buttonVariant: 'warning',
+        icon: 'fas fa-triangle-exclamation',
+        iconColor: warning[100],
+        iconBackgroundColor: warning[50],
+    },
+    cancel: {
+        title: 'Delete Item',
+        message: 'Are you sure you want to delete this item? This action cannot be undone.',
+        confirmLabel: 'Delete',
+        cancelLabel: 'Cancel',
+        buttonVariant: 'cancel',
+        icon: 'fas fa-trash-can',
+        iconColor: error[100],
+        iconBackgroundColor: error[50],
+    },
+};

package/dist/components/Info/Notifications/NotificationProvider.d.ts

@@ -0,0 +1,2 @@
+export declare const NotificationProvider: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NotificationProvider.d.ts.map

package/dist/components/Info/Notifications/NotificationProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Info/Notifications/NotificationProvider.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB,+CA0ChC,CAAC"}

package/dist/components/Info/Notifications/NotificationProvider.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Notifications } from '@mantine/notifications';
+import { createStyles } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import { neutral } from '../../../constants/colors';
+export const NotificationProvider = () => {
+    const isMobile = useMediaQuery('(max-width: 768px)');
+    const { classes } = createStyles(() => ({
+        root: {
+            '& .mantine-Notification-root': {
+                backgroundColor: 'white',
+                padding: '1.2rem 1.6rem',
+                minHeight: 'auto',
+                borderRadius: '0 8px 8px 0',
+            },
+            '& .mantine-Notification-title': {
+                fontSize: '1.5rem',
+                fontWeight: 500,
+                fontFamily: 'Poppins, sans-serif !important',
+                color: neutral[300],
+            },
+            '& .mantine-Notification-description': {
+                fontSize: '1.25rem',
+                color: neutral[200],
+                fontFamily: 'Poppins, sans-serif !important',
+                lineHeight: 1.4,
+            },
+            '& .mantine-Notification-icon': {
+                marginRight: '1.5rem',
+                marginLeft: '0.75rem',
+                fontSize: '2rem',
+                backgroundColor: 'transparent !important',
+            },
+            '& .mantine-Notification-icon > div': {
+                backgroundColor: 'transparent !important',
+                width: 'auto !important',
+                height: 'auto !important',
+                borderRadius: '0 !important',
+                display: 'flex !important',
+                alignItems: 'center !important',
+                justifyContent: 'center !important',
+            },
+        },
+    }))();
+    return _jsx(Notifications, { position: "top-right", className: classes.root, containerWidth: isMobile ? '100%' : 400 });
+};