digitinary-ui 1.0.4 → 1.0.6

package/dist/components/DateRange/DateRange.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import moment from 'moment';
+import Date from '../Date';
+import Button from '../Button';
+import SelectGroup from '../SelectGroup';
+import Input from '../Input';
+import styles from './dateRange.module.scss';
+import ClearField from '../../icons/ClearField';
+import CalendarIcon from '../../icons/Calendar';
+import CloseIcon from '../../icons/CloseIcon';
+import { Duration, Size } from '../../types';
+import { optionEmptyState } from '../../constants';
+const DateRange = ({ id, label, helperText, errorMsg, success, disabled, value, onChange, size = 'medium', clearable = true, hideMoreDateOptions = false, showTimePicker = true, acceptSameDay = false, maxStartDate, minStartDate, maxEndDate, minEndDate, labels = {
+    month: 'This Month',
+    day: 'This Day',
+    Apply: 'Apply',
+    week: 'This Week',
+    Select: 'Select',
+    Last: 'Last',
+    Start_Date: 'Start Date',
+    End_Date: 'End Date',
+    Selected_Date: 'Selected Date',
+}, className = '', dataId, }) => {
+    const defaultDateTimeFormat = acceptSameDay ? 'DD MMM YYYY' : 'DD MMM YYYY HH:mm:ss';
+    const [showDateRange, setShowDateRange] = useState(false);
+    const [thisSelected, setThisSelected] = useState();
+    const [selectedByType, setSelectedByType] = useState({
+        numberOf: '',
+        duration: null,
+    });
+    const [selectedByRange, setSelectedByRange] = useState({
+        start: '',
+        end: '',
+    });
+    const datepickerRef = useRef(null);
+    const getByThis = (selected) => {
+        const startCurrentMonth = moment().startOf('month').format(defaultDateTimeFormat);
+        const endCurrentMonth = moment().endOf('month').format(defaultDateTimeFormat);
+        const currentMonth = `${startCurrentMonth}  -  ${endCurrentMonth}`;
+        const startCurrentWeek = moment().startOf('week').format(defaultDateTimeFormat);
+        const endCurrentWeek = moment().endOf('week').format(defaultDateTimeFormat);
+        const currentWeek = `${startCurrentWeek}  -  ${endCurrentWeek}`;
+        const startCurrentDay = moment().startOf('day').format(defaultDateTimeFormat);
+        const endCurrentDay = moment().endOf('day').format(defaultDateTimeFormat);
+        const currentDay = `${startCurrentDay}  -  ${endCurrentDay}`;
+        setSelectedByType({
+            numberOf: '',
+            duration: {
+                label: '',
+                value: '',
+            },
+        });
+        setSelectedByRange({ start: '', end: '' });
+        setThisSelected(selected);
+        switch (selected) {
+            case 'month':
+                hideRange();
+                return onChange(currentMonth);
+            case 'week':
+                hideRange();
+                return onChange(currentWeek);
+            case 'day':
+                hideRange();
+                return onChange(currentDay);
+            default:
+        }
+    };
+    const getByType = (selected) => {
+        if (selectedByType?.duration?.value) {
+            const lastByMonths = `${moment()
+                .subtract(Number(selectedByType.numberOf), selectedByType.duration.value)
+                .format(defaultDateTimeFormat)}  -  ${moment().format(defaultDateTimeFormat)}`;
+            const lastByWeeks = `${moment()
+                .clone()
+                .subtract(Number(selectedByType.numberOf), selectedByType.duration.value)
+                .format(defaultDateTimeFormat)}  -  ${moment().format(defaultDateTimeFormat)}`;
+            const lastByDays = `${moment()
+                .subtract(Number(selectedByType.numberOf), selectedByType.duration.value)
+                .format(defaultDateTimeFormat)}  -  ${moment().format(defaultDateTimeFormat)}`;
+            const lastByHours = `${moment()
+                .subtract(Number(selectedByType.numberOf), selectedByType.duration.value)
+                .format(defaultDateTimeFormat)}  -  ${moment().format(defaultDateTimeFormat)}`;
+            switch (selected?.value) {
+                case 'months':
+                    hideRange();
+                    return onChange(lastByMonths);
+                case 'weeks':
+                    hideRange();
+                    return onChange(lastByWeeks);
+                case 'days':
+                    hideRange();
+                    return onChange(lastByDays);
+                case 'hours':
+                    hideRange();
+                    return onChange(lastByHours);
+                default:
+            }
+        }
+    };
+    function handleDisabled(obj) {
+        return Object.values(obj).every((value) => value);
+    }
+    const showHideRange = () => setShowDateRange(!showDateRange);
+    const hideRange = () => setShowDateRange(false);
+    const handleInputChange = (value) => {
+        if (value !== null) {
+            const valueStr = value.toString();
+            const regex = /^\d+$/;
+            if (regex.test(valueStr) || valueStr.length === 0) {
+                setSelectedByType((prev) => ({ ...prev, numberOf: value }));
+            }
+        }
+        else {
+            setSelectedByType({ ...selectedByType, numberOf: '' });
+        }
+    };
+    const handleSelectChange = (duration) => {
+        setSelectedByType((prev) => ({ ...prev, duration }));
+    };
+    const handleRangeStart = (startDate) => setSelectedByRange((prev) => ({ ...prev, start: startDate === null ? '' : startDate }));
+    const handleRangeEnd = (endDate) => setSelectedByRange((prev) => ({ ...prev, end: endDate === null ? '' : endDate }));
+    const handleFilterByType = () => {
+        getByType(selectedByType.duration);
+        setSelectedByRange({ start: '', end: '' });
+        setThisSelected('');
+    };
+    const handleFilterByRange = () => {
+        onChange(`${moment(selectedByRange.start).format(defaultDateTimeFormat)}  -  ${moment(selectedByRange.end).format(defaultDateTimeFormat)}`);
+        setSelectedByType({ numberOf: '', duration: optionEmptyState });
+        setThisSelected('');
+        hideRange();
+    };
+    useEffect(() => {
+        function handleClickOutside(event) {
+            const target = event.target;
+            if (datepickerRef.current &&
+                target &&
+                !datepickerRef.current.contains(target) &&
+                !(target.matches && target.matches(`#${id ?? 'date-id'}`))) {
+                hideRange();
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [datepickerRef]);
+    const closeDateRange = (e) => {
+        if (e.key === 'Escape') {
+            hideRange();
+        }
+    };
+    useEffect(() => {
+        window.addEventListener('keydown', closeDateRange);
+        return () => {
+            window.removeEventListener('keydown', closeDateRange);
+        };
+    }, []);
+    useEffect(() => {
+        if (value === '') {
+            setSelectedByRange({ start: '', end: '' });
+            setThisSelected('');
+            setSelectedByType({ numberOf: '', duration: optionEmptyState });
+        }
+    }, [value]);
+    return (_jsxs("div", { className: `${styles.dateRangeContainer} ${className}`, children: [label && (_jsx("label", { htmlFor: id, "data-id": `${String(dataId ?? label)
+                    ?.toUpperCase()
+                    ?.replaceAll(' ', '_')}_FIELD_LABEL_ID`, className: styles.dateRangeLabel, children: label })), _jsxs("div", { className: styles.dateRangeInputContainer, ref: datepickerRef, children: [_jsxs("div", { className: `${styles.dateIconsContainer} ${disabled ? styles.disabled : ''} ${styles[size]} ${errorMsg ? styles.error : ''} ${success ? styles.success : ''} ${!value ? styles.placeholder : ''}`, onClick: showHideRange, "data-id": "DATE_RANGE_FIELD", children: [_jsx("input", { id: id ?? 'date-id', value: value, placeholder: "DD MM YYYY 00:00:00 - DD MM YYYY 00:00:00", type: "text", className: styles.dateRangeInput, autoComplete: "off", disabled: disabled, onKeyDown: (e) => {
+                                    if (e.key === 'Enter') {
+                                        setShowDateRange(!showDateRange);
+                                    }
+                                } }), _jsxs("div", { className: `${styles.iconsContainer} ${disabled ? styles.disabled : ''}`, "data-id": "DATE_ICON", children: [clearable && value && (_jsx(ClearField, { width: '1rem', height: '1rem', className: styles.dateClearIcon, onClick: (e) => {
+                                            e.stopPropagation();
+                                            onChange('');
+                                            setShowDateRange(false);
+                                        }, "data-id": "CLEAR_ICON_DATE_RANGE_FIELD" })), _jsx(CalendarIcon, { width: '1.5rem', height: '1.5rem', className: `${styles.calendarIcon} ${value ? styles.contentActive : ''}` })] }), helperText && _jsx("span", { className: styles.dateRangeHelper, children: helperText }), errorMsg && _jsx("span", { className: styles.dateRangeError, children: errorMsg })] }), _jsxs("div", { className: `${styles.dateRangeModal} ${showDateRange ? styles.appear : styles.disappear}`, children: [_jsxs("div", { className: styles.title, children: [_jsx("span", { "data-id": "SELECTED_DATE_LABEL", children: labels?.Selected_Date }), _jsx("div", { className: styles.dropdownCloseIcon, "data-id": "CLOSE_ICON", onClick: hideRange, children: _jsx(CloseIcon, { width: '1.5rem', height: '1.5rem' }) })] }), !hideMoreDateOptions && (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${styles.section} ${styles.sectionBtn}`, children: [_jsx(Button, { variant: "outlined", color: "primary", id: "month", size: Size.Medium, onClick: () => getByThis('month'), onKeyDown: (e) => {
+                                                    if (e.key === 'Enter' || e.key === ' ') {
+                                                        getByThis('month');
+                                                        e.preventDefault();
+                                                    }
+                                                }, active: thisSelected === 'month', type: "button", "data-id": "THIS_MONTH", children: labels?.month }), _jsx(Button, { variant: "outlined", color: "primary", id: "week", size: Size.Medium, onClick: () => getByThis('week'), onKeyDown: (e) => {
+                                                    if (e.key === 'Enter' || e.key === ' ') {
+                                                        getByThis('week');
+                                                        e.preventDefault();
+                                                    }
+                                                }, active: thisSelected === 'week', type: "button", "data-id": "THIS_WEEK", children: labels?.week }), _jsx(Button, { variant: "outlined", color: "primary", id: "day", size: Size.Medium, onClick: () => getByThis('day'), onKeyDown: (e) => {
+                                                    if (e.key === 'Enter' || e.key === ' ') {
+                                                        getByThis('day');
+                                                        e.preventDefault();
+                                                    }
+                                                }, active: thisSelected === 'day', type: "button", "data-id": "THIS_DAY", children: labels?.day })] }), _jsxs("form", { className: styles.section, children: [_jsx(Input, { size: Size.Medium, "data-id": "LAST_FILED", type: "text", placeholder: labels?.Last, value: selectedByType.numberOf, onChange: (value) => handleInputChange(value), clearable: true }), _jsx(SelectGroup, { size: Size.Medium, dataId: "SELECT_DROP_DOWN_LIST", placeholder: labels?.Select, options: [
+                                                    {
+                                                        list: [
+                                                            { label: 'Hours', value: Duration.Hours },
+                                                            { label: 'Days', value: Duration.Days },
+                                                            { label: 'Weeks', value: Duration.Weeks },
+                                                            { label: 'Months', value: Duration.Months },
+                                                        ],
+                                                    },
+                                                ], value: selectedByType.duration, onChange: (value) => handleSelectChange(value), isMultiple: false, withSearch: false }), _jsx(Button, { variant: "outlined", color: "primary", size: Size.Large, "data-id": "APPLY_BUTTON", onClick: handleFilterByType, disabled: !handleDisabled({
+                                                    ...selectedByType,
+                                                    duration: selectedByType.duration?.value,
+                                                }), fullWidth: true, type: "button", children: labels?.Apply })] })] })), _jsxs("div", { className: `${!hideMoreDateOptions ? styles.section : styles.sectionWithoutGrid}`, children: [_jsx(Date, { size: "medium", placeholder: "DD MM YYYY 00:00:00", id: "start", label: labels?.Start_Date, timePicker: showTimePicker, isEndDay: false, selectedEndDate: selectedByRange.end, disabledDay: selectedByRange.start, value: selectedByRange.start, onChange: handleRangeStart, minDate: minStartDate, maxDate: maxStartDate }), _jsx(Date, { size: "medium", placeholder: "DD MM YYYY 23:59:59", id: "end", disabledDay: selectedByRange.start, label: labels?.End_Date, timePicker: showTimePicker, isEndDay: true, acceptSameDay: acceptSameDay, value: selectedByRange.end, onChange: handleRangeEnd, minDate: minEndDate, maxDate: maxEndDate }), _jsx(Button, { variant: "outlined", color: "primary", "data-id": "APPLY_DATE_BUTTON", size: Size.Large, onClick: handleFilterByRange, disabled: !handleDisabled(selectedByRange) ||
+                                            (!acceptSameDay &&
+                                                moment(selectedByRange.start).isSameOrAfter(moment(selectedByRange.end))), fullWidth: true, type: "button", children: labels?.Apply })] })] })] })] }));
+};
+export default DateRange;

package/dist/components/DateRange/index.js

@@ -0,0 +1 @@
+export { default } from './DateRange';

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import styles from './dialog.module.scss';
+const Dialog = ({ open, onClose, header, content, footer, position, size, disableOverlay = false, disableBackdropClick = false, fullWidth = true, dataId, scroll = 'root', className = '', }) => {
+    const dialogRef = useRef(null);
+    const container = useRef(null);
+    const overlayClickHandler = () => {
+        if (!disableBackdropClick) {
+            if (dialogRef.current) {
+                dialogRef.current.remove();
+            }
+            if (onClose) {
+                onClose();
+            }
+        }
+    };
+    const onContentWrapperClickHandler = (e) => {
+        e.stopPropagation();
+        if (!disableOverlay) {
+            overlayClickHandler();
+        }
+    };
+    const onDialogContentClickHandler = (e) => {
+        e.stopPropagation();
+    };
+    useEffect(() => {
+        if (container.current && open) {
+            container.current.focus();
+        }
+        else {
+            document.getElementById('main-container')?.focus();
+        }
+    }, [open]);
+    return (_jsx(_Fragment, { children: open && (_jsxs("div", { id: styles.dialogContainer, className: className, children: [!disableOverlay && (_jsx("div", { className: `${styles.overlay} ${open ? styles.open : ''}`, role: "button", tabIndex: 0, onClick: overlayClickHandler, ref: dialogRef })), _jsx("div", { className: `${styles.rootContentWrapper} ${styles[position] || styles.center}`, role: "button", tabIndex: 0, onClick: onContentWrapperClickHandler, children: _jsx("div", { className: `${styles.dialogContentWrapper} ${!fullWidth && size ? styles[size] : styles.xs} ${fullWidth ? styles.fullwidth : ''} ${scroll ? `${styles.scroll}-${scroll}` : styles.scrollRoot} ${position || 'center'}`, role: "button", tabIndex: 0, onClick: onDialogContentClickHandler, ref: container, children: _jsxs("div", { "data-id": "DIALOG_CONTAINER_ID", "aria-label": 'custom-dialog', className: `${styles.dialogContentRoot} ${fullWidth ? styles.fullwidth : ''}`, children: [header && _jsx("div", { className: styles.dialogHeader, children: header }), content ? (_jsx("div", { className: styles.dialogContent, children: content })) : (_jsx("div", { className: styles.dialogContent })), footer && _jsx("div", { className: styles.dialogFooter, children: footer })] }) }) })] })) }));
+};
+export default Dialog;

package/dist/components/Dialog/index.js

@@ -0,0 +1 @@
+export { default } from './Dialog';

package/dist/components/HelperText/HelperText.js

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './helperText.module.scss';
+const HelperText = ({ className = '', type = 'default', text }) => {
+    return _jsxs("span", { className: `${styles.helperText} ${className} ${styles[type]}`, children: [" ", text, " "] });
+};
+export default HelperText;

package/dist/components/HelperText/index.js

@@ -0,0 +1 @@
+export { default } from './HelperText';

package/dist/components/Input/Input.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Label from '../Label';
+import HelperText from '../HelperText';
+import style from './input.module.scss';
+import ClearField from '../../icons/ClearField';
+import ShowPasswordIcon from '../../icons/ShowPasswordIcon';
+import HidePasswordIcon from '../../icons/HidePasswordIcon';
+import { Size } from '../../types';
+const Input = ({ type = 'text', value = '', onChange, placeholder, label, disabled = false, errorMsg = '', helperText, fullWidth = false, size = Size.Medium, startAdornment, endAdornment, blurText = false, required = false, clearable = true, className, autoComplete = 'off', direction = 'ltr', onKeyDown, onPaste, ...props }) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const toggleShowPassword = (event) => {
+        event && event.stopPropagation();
+        setShowPassword(!showPassword);
+    };
+    const handleChange = (event) => {
+        const value = event.target.value;
+        onChange(value);
+    };
+    const handleClear = () => {
+        if (clearable) {
+            onChange('');
+        }
+    };
+    const handleIconKeyDown = (event, action) => {
+        if (event.key === 'Enter') {
+            action();
+        }
+    };
+    const getInputType = () => {
+        if (type === 'password') {
+            return showPassword ? 'text' : 'password';
+        }
+        return type;
+    };
+    return (_jsxs("div", { className: `${style.inputContainer} ${fullWidth ? style.fullWidth : ''} ${style[size]} ${className}`, children: [label && _jsx(Label, { required: required, label: label }), _jsxs("div", { className: `${style.inputWrapper} ${errorMsg ? style.error : ''} ${disabled ? style.inputWrapperDisabled : ''}`, dir: direction, children: [_jsxs("div", { className: `${style.innerInputContainer} ${disabled ? style.disabledInnerInput : ''}`, children: [startAdornment && _jsx("div", { className: style.adornment, children: startAdornment }), _jsx("input", { type: getInputType(), "data-id": `${String(label)?.toUpperCase()?.replaceAll(' ', '_')}_INPUT_ID`, value: value ?? '', onChange: handleChange, placeholder: placeholder, disabled: disabled, className: `${style.input} ${errorMsg ? style.inputError : ''} ${blurText && value ? style.blurredInput : ''} ${disabled ? style.disabled : ''}`, "aria-invalid": !!errorMsg, onKeyDown: onKeyDown, onPaste: onPaste, autoComplete: autoComplete, ...props })] }), _jsxs("div", { className: style.endIconsContainer, children: [clearable && value && !disabled && (_jsx("div", { className: style.clearIconContainer, onClick: handleClear, tabIndex: 0, onKeyDown: (event) => handleIconKeyDown(event, handleClear), "aria-label": "Clear text", children: _jsx(ClearField, { width: '1rem', height: '1rem', className: style.clearIcon, "data-id": "CLEAR_ICON_INPUT_FIELD" }) })), endAdornment && _jsx("div", { className: style.adornment, children: endAdornment }), type === 'password' && (_jsx("div", { className: style.adornment, onClick: toggleShowPassword, tabIndex: 0, onKeyDown: (event) => handleIconKeyDown(event, toggleShowPassword), "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? (_jsx(ShowPasswordIcon, { className: `${style.icon} ${disabled ? style.disabled : style.enabled}`, width: '1.125rem', height: '1.125rem', "data-id": "EYE_ICON_ID" })) : (_jsx(HidePasswordIcon, { className: `${style.icon} ${disabled ? style.disabled : style.enabled}`, width: '1.125rem', height: '1.125rem', "data-id": "EYE_ICON_ID" })) }))] })] }), (helperText || errorMsg) && (_jsx(HelperText, { type: errorMsg ? 'error' : 'default', text: errorMsg ? errorMsg : helperText || '' }))] }));
+};
+export default Input;

package/dist/components/Input/index.js

@@ -0,0 +1 @@
+export { default } from './Input';

package/dist/components/Label/Label.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './label.module.scss';
+const Label = ({ className = '', required, label }) => {
+    return (_jsx("div", { className: `${styles.labelContainer} ${className}`, children: label && (_jsxs("span", { className: styles.label, "data-id": `${String(label)?.replaceAll(' ', '_')}_LABEL_ID`, children: [label, required ? _jsx("span", { className: styles.starRequire, children: "*" }) : ''] })) }));
+};
+export default Label;

package/dist/components/Label/index.js

@@ -0,0 +1 @@
+export { default } from './Label';

package/dist/components/Overlay/Overlay.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './overlay.module.scss';
+const Overlay = ({ children, className, open = true }) => {
+    if (!open)
+        return null;
+    return _jsx("div", { className: `${styles.overlayContainer} ${className}`, children: children });
+};
+export default Overlay;

package/dist/components/Overlay/index.js

@@ -0,0 +1 @@
+export { default } from './Overlay';

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './pagination.module.scss';
+import Button from '../Button/Button';
+import DoubleRightArrow from '../../icons/DoubleRightArrow';
+import DoubleLeftArrow from '../../icons/DoubleLeftArrow';
+import ArrowRight from '../../icons/ArrowRight';
+import ExcelIcon from '../../icons/ExcelIcon';
+import PdfIcon from '../../icons/PdfIcon';
+import ArrowLeft from '../../icons/ArrowLeft';
+const Pagination = ({ page, setPage, count, totalElement, disabledExportExcelBtn, disabledExportPdfBtn, excelExport, showPageCount = true, showExportButtons = true, disabledNextButton = false, removeFirstLastButtons = false, pageSize = 10, labels = {
+    currentPage: 'Showing on page',
+    to: 'to',
+}, className = '', }) => {
+    const pageNumbers = Array.from({ length: count }, (_, i) => i + 1);
+    const maxPagesToShow = 5;
+    const firstPageToShow = Math.max(1, page - Math.floor(maxPagesToShow / 2));
+    const lastPageToShow = Math.min(count, firstPageToShow + maxPagesToShow - 1);
+    const visiblePageNumbers = pageNumbers.slice(firstPageToShow - 1, lastPageToShow);
+    return (_jsxs("div", { className: `${styles.paginationContainer} ${className}`, "data-id": "PAGINATION_BAR", children: [showExportButtons && (_jsxs("div", { className: styles.exportSection, children: [_jsx("div", { className: styles.exportContainer, children: _jsx(Button, { variant: "outlined", "data-id": "EXPORT_TO_EXCEL", startIcon: _jsx(ExcelIcon, { width: '1rem', height: '1rem' }), disabled: disabledExportExcelBtn, onClick: excelExport, className: styles.exportButton, children: "Export Excel" }) }), _jsx("div", { className: styles.exportContainer, children: _jsx(Button, { variant: "outlined", "data-id": "EXPORT_TO_PDF", startIcon: _jsx(PdfIcon, { width: '1rem', height: '1rem' }), disabled: disabledExportPdfBtn, className: styles.exportButton, children: "Export PDF" }) })] })), !disabledExportExcelBtn && !disabledExportPdfBtn && (_jsxs("span", { className: styles.descriptionPages, "data-id": "DESCRIPTION_PAGES", children: [_jsxs("span", { children: [labels['currentPage'], " ", page, " - ", page * pageSize - (pageSize - 1), " ", labels.to] }), _jsx("span", { className: styles.numberEdit, children: page === count ? totalElement : page * pageSize })] })), _jsxs("div", { className: styles.pagesNavigationContainer, children: [!removeFirstLastButtons && (_jsx("div", { className: `${styles.buttonContainer} ${Boolean(page === 1) ? styles.disabled : styles.active}`, children: _jsx(Button, { disabled: Boolean(page === 1), className: Boolean(page === 1) ? styles.disabled : '', variant: "outlined", onClick: () => setPage(0), "data-id": "FIRST_RECORD_BUTTON", children: _jsx(DoubleLeftArrow, { height: '1.125rem', width: '1.125rem' }) }) })), _jsx("div", { className: `${styles.buttonContainer} ${Boolean(page === 1) ? styles.disabled : styles.active}`, children: _jsx(Button, { disabled: Boolean(page === 1), variant: "outlined", "data-id": "PREVIOUS_BUTTON", onClick: () => {
+                                setPage((prev) => prev - 1);
+                            }, className: Boolean(page === 1) ? styles.disabled : '', children: _jsx(ArrowLeft, { height: '0.75rem', width: '0.75rem' }) }) }), showPageCount &&
+                        visiblePageNumbers?.map((pageNumber, index) => (_jsx("div", { className: styles.buttonContainer, children: _jsx("span", { className: pageNumber === page ? styles.selected : '', children: _jsx("div", { className: `${styles.buttonContainer} ${styles.paginationNums}`, children: _jsx(Button, { disabled: pageNumber === page, variant: "outlined", "data-id": `PAGE_${pageNumber}`, onClick: () => setPage(pageNumber - 1), children: pageNumber }, pageNumber) }) }) }, index))), _jsx("div", { className: `${styles.buttonContainer} ${page === count || count === 0 || disabledNextButton ? styles.disabled : styles.active}`, children: _jsx(Button, { disabled: page === count || count === 0 || disabledNextButton, className: page === count || count === 0 || disabledNextButton ? styles.disabled : '', variant: "outlined", "data-id": "NEXT_BUTTON", onClick: () => {
+                                totalElement !== 0 && setPage((prev) => prev + 1);
+                            }, children: _jsx(ArrowRight, { height: '0.75rem', width: '0.75rem' }) }) }), !removeFirstLastButtons && (_jsx("div", { className: `${styles.buttonContainer} ${page === count || count === 0 ? styles.disabled : styles.active}`, children: _jsx(Button, { disabled: page === count || count === 0, className: page === count || count === 0 ? styles.disabled : '', variant: "outlined", "data-id": "LAST_RECORD_BUTTON", onClick: () => setPage(count - 1), children: _jsx(DoubleRightArrow, { height: '1.125rem', width: '1.125rem' }) }) }))] })] }));
+};
+export default Pagination;

package/dist/components/Pagination/index.js

@@ -0,0 +1 @@
+export { default } from './Pagination';

package/dist/components/Radio/Radio.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styles from './radio.module.scss';
+import { Position, Size } from '../../types';
+const Radio = forwardRef(({ name, size = Size.Medium, checked = false, onChange, disabled, label, labelPosition = Position.End, color = 'default', className, }, ref) => {
+    return (_jsxs("div", { className: `${styles.radioContainer} ${styles[labelPosition]} ${styles[size]} ${className}`, children: [_jsx("input", { className: `${styles.radioInput} ${styles[color]}`, type: "radio", "data-id": `${label?.toUpperCase().replaceAll(' ', '_')}_BUTTON`, name: name, disabled: disabled, checked: checked, "aria-checked": checked, onClick: onChange, ref: ref }), _jsx("div", { className: `${styles.label} ${disabled ? styles.disabledLabel : ''}`, onClick: onChange, children: label })] }));
+});
+export default Radio;

package/dist/components/Radio/index.js

@@ -0,0 +1 @@
+export { default } from './Radio';

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,14 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import Radio from '../Radio';
+import styles from './radioGroup.module.scss';
+import { Position, Size } from '../../types';
+const RadioGroup = ({ name, options, onChange, size = Size.Medium, labelPosition = Position.End, color = 'default', label, defaultValue, direction = 'horizontal', gap = '10px', className = '', }) => {
+    const [selectedValue, setSelectedValue] = useState(defaultValue);
+    const handleChange = (value) => {
+        onChange(value);
+        setSelectedValue(value);
+    };
+    return (_jsxs("div", { className: styles.radioGroupContainer, children: [_jsxs("div", { className: styles.radioGroupLabel, children: [_jsxs("span", { children: [" ", label] }), _jsx("span", { className: styles.requiredStar, children: "*" })] }), _jsx("div", { className: `${styles.radioGroupList} ${styles[direction]} ${className}`, style: { gap: gap }, children: options.map((option) => (_jsx(Radio, { name: name, checked: option.value === selectedValue, onChange: () => handleChange(option.value), disabled: option.disabled, label: option.label, size: size, labelPosition: labelPosition, color: color }, option.value))) })] }));
+};
+export default RadioGroup;

package/dist/components/RadioGroup/index.js

@@ -0,0 +1 @@
+export { default } from './RadioGroup';