dhre-component-lib 0.1.6 → 0.1.7

package/dist/components/InputTextField/InputTextField.test.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import CustomInputField from './InputTextField';
+import { INPUT_TYPES } from '../Enum';
+const renderWithProps = (props = {}) => {
+    const defaultProps = {
+        label: 'Test Label',
+        value: 'Test Value',
+        type: INPUT_TYPES.TEXT,
+        placeholder: 'Enter text...',
+        onChange: jest.fn(),
+        className: 'custom-input-wrapper',
+        inputClassName: 'custom-input',
+        labelClassName: 'custom-label',
+        error: '',
+        errorClassName: 'custom-error',
+        id: 'test-input-field',
+        ...props
+    };
+    return render(React.createElement(CustomInputField, { ...defaultProps }));
+};
+describe('CustomInputField Component', () => {
+    // it('renders without crashing', () => {
+    //   renderWithProps();
+    //   // Check if the label correctly associates with the input by using the id
+    //   const input = screen.getByLabelText('Test Label');
+    //   expect(input).toBeInTheDocument();
+    // });
+    it('renders the label correctly', () => {
+        renderWithProps();
+        expect(screen.getByText('Test Label')).toHaveClass('custom-label');
+    });
+    it('renders the input with the correct value', () => {
+        renderWithProps();
+        expect(screen.getByDisplayValue('Test Value')).toHaveClass('custom-input');
+    });
+    it('calls the onChange handler when input value changes', () => {
+        const mockOnChange = jest.fn();
+        renderWithProps({ onChange: mockOnChange });
+        const input = screen.getByDisplayValue('Test Value');
+        fireEvent.change(input, { target: { value: 'New Value' } });
+        expect(mockOnChange).toHaveBeenCalledTimes(1);
+    });
+    it('displays the error message correctly', () => {
+        renderWithProps({ error: 'Error message' });
+        expect(screen.getByText('Error message')).toHaveClass('custom-error');
+    });
+    it('renders the input with the correct type', () => {
+        renderWithProps({ type: INPUT_TYPES.EMAIL });
+        expect(screen.getByPlaceholderText('Enter text...')).toHaveAttribute('type', INPUT_TYPES.EMAIL);
+    });
+    // it('applies the passed className to the wrapper div', () => {
+    //   renderWithProps();
+    //   // Check the class name of the wrapper div
+    //   const wrapper = screen.getByLabelText('Test Label').parentElement?.parentElement;
+    //   expect(wrapper).toHaveClass('custom-input-wrapper');
+    // });
+    it('applies additional props to the input field', () => {
+        renderWithProps();
+        expect(screen.getByPlaceholderText('Enter text...')).toBeInTheDocument();
+    });
+});
+describe('CustomInputField Component - Default Values', () => {
+    it('renders the input field with default value when value prop is not provided', () => {
+        render(React.createElement(CustomInputField, { label: "Test Label", type: INPUT_TYPES.TEXT, value: "", onChange: jest.fn() }));
+        expect(screen.getByPlaceholderText('')).toHaveValue('');
+    });
+    it('renders the input field with default type when type prop is not provided', () => {
+        render(React.createElement(CustomInputField, { label: "Test Label", value: "Test Value", type: INPUT_TYPES.TEXT, onChange: jest.fn() }));
+        expect(screen.getByDisplayValue('Test Value')).toHaveAttribute('type', INPUT_TYPES.TEXT);
+    });
+    it('renders the input field with default placeholder when placeholder prop is not provided', () => {
+        render(React.createElement(CustomInputField, { label: "Test Label", value: "Test Value", type: INPUT_TYPES.TEXT, onChange: jest.fn() }));
+        expect(screen.getByDisplayValue('Test Value')).toHaveAttribute('placeholder', '');
+    });
+    // it('applies default class names if className, inputClassName, or labelClassName are not provided', () => {
+    //   render(<CustomInputField label="Test Label" value="Test Value" type={INPUT_TYPES.TEXT} onChange={jest.fn()} />);
+    //   // Get the label element
+    //   const label = screen.getByText('Test Label');
+    //   const input = screen.getByDisplayValue('Test Value');
+    //   // Get the parent wrapper div
+    //   const wrapper = label.closest('div');
+    //   // Check if the wrapper div has default class names or no class names
+    //   if (wrapper) {
+    //     // Expect no additional class names or specific default class names
+    //     expect(wrapper).toHaveClass('default-wrapper-class'); // Replace with actual default class
+    //   }
+    //   // Check if the input field has default input class names or no class names
+    //   expect(input).toHaveClass('default-input-class'); // Replace with actual default class
+    //   // Check if the label has default label class names or no class names
+    //   expect(label).toHaveClass('default-label-class'); // Replace with actual default class
+    // });
+    it('does not render the error message if error prop is not provided', () => {
+        render(React.createElement(CustomInputField, { label: "Test Label", value: "Test Value", type: INPUT_TYPES.TEXT, onChange: jest.fn() }));
+        const errorMessage = screen.queryByText('Error message');
+        expect(errorMessage).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1 @@
+export { default } from "./InputTextField";

package/dist/components/InputTextField/index.js

@@ -0,0 +1 @@
+export { default } from "./InputTextField";

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface LinkProps {
+    href: string;
+    target?: string;
+    rel?: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const Link: React.FC<LinkProps>;
+export default Link;

package/dist/components/Link/Link.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LINK_TARGET } from '../Enum';
+const Link = ({ href, target = LINK_TARGET.Self, rel, className = '', children, ...rest }) => {
+    return (React.createElement("a", { href: href, target: target, rel: rel, className: className, ...rest }, children));
+};
+export default Link;

package/dist/components/Link/Link.test.d.ts

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

package/dist/components/Link/Link.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Link from './Link';
+import { LINK_TARGET } from '../Enum';
+describe('Link Component', () => {
+    const defaultProps = {
+        href: 'https://example.com',
+        target: LINK_TARGET.Self,
+        rel: 'noopener noreferrer',
+        className: 'custom-link',
+        children: 'Click here',
+    };
+    it('renders the link with the correct href', () => {
+        render(React.createElement(Link, { ...defaultProps }));
+        expect(screen.getByText('Click here')).toHaveAttribute('href', 'https://example.com');
+    });
+    it('renders the link with the correct target attribute', () => {
+        render(React.createElement(Link, { ...defaultProps }));
+        expect(screen.getByText('Click here')).toHaveAttribute('target', LINK_TARGET.Self);
+    });
+    it('renders the link with the correct rel attribute', () => {
+        render(React.createElement(Link, { ...defaultProps }));
+        expect(screen.getByText('Click here')).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+    it('renders the link with the correct className', () => {
+        render(React.createElement(Link, { ...defaultProps }));
+        expect(screen.getByText('Click here')).toHaveClass('custom-link');
+    });
+    it('renders the link with the correct children', () => {
+        render(React.createElement(Link, { ...defaultProps }));
+        expect(screen.getByText('Click here')).toBeInTheDocument();
+    });
+    it('renders with default target when not specified', () => {
+        const propsWithoutTarget = {
+            href: defaultProps.href,
+            rel: defaultProps.rel,
+            className: defaultProps.className,
+            children: defaultProps.children,
+        };
+        render(React.createElement(Link, { ...propsWithoutTarget }));
+        expect(screen.getByText('Click here')).toHaveAttribute('target', LINK_TARGET.Self);
+    });
+    it('applies additional props to the link element', () => {
+        render(React.createElement(Link, { ...defaultProps, "data-testid": "custom-link" }));
+        expect(screen.getByTestId('custom-link')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1 @@
+export { default } from "./Link";

package/dist/components/Link/index.js

@@ -0,0 +1 @@
+export { default } from "./Link";

package/dist/components/Map/Directions.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface GetDirectionActionProps {
+    title: string;
+    titleClasses?: string;
+    location: string;
+    locationClasses?: string;
+    hours: string;
+    hoursClasses?: string;
+    directionsLink: string;
+    buttonName?: string;
+}
+declare const GetDirectionAction: React.FC<GetDirectionActionProps>;
+export default GetDirectionAction;

package/dist/components/Map/Directions.js

@@ -0,0 +1,9 @@
+import React from 'react';
+const GetDirectionAction = ({ title, titleClasses, location, locationClasses, hours, hoursClasses, directionsLink, buttonName = 'Get Directions', }) => {
+    return (React.createElement("div", { className: "direction-action-container" },
+        React.createElement("h3", { className: titleClasses }, title),
+        React.createElement("p", { className: locationClasses }, location),
+        React.createElement("p", { className: hoursClasses }, hours),
+        React.createElement("a", { href: directionsLink, target: "_blank", rel: "noopener noreferrer", className: "directions-link" }, buttonName)));
+};
+export default GetDirectionAction;

package/dist/components/Map/GoogleMap.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface MapComponentProps {
+    containerClassName?: string;
+    zoom?: number;
+    mapOptions?: google.maps.MapOptions;
+    radius?: number;
+    googleMapsUrls: string[];
+    buttonText: string;
+    buttonClassName: string;
+}
+declare const MapComponent: React.FC<MapComponentProps>;
+export default MapComponent;

package/dist/components/Map/GoogleMap.js

@@ -0,0 +1,104 @@
+import React, { useState, useRef, useEffect } from "react";
+import { GoogleMap, Marker, Circle, DirectionsRenderer, } from "@react-google-maps/api";
+import { useGoogleMapsLoader } from "./GoogleMapsLoader";
+import styles from './GoogleMap.module.scss';
+const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOptions = {
+    zoomControl: true,
+    tilt: 0,
+    gestureHandling: "auto",
+    mapTypeId: "roadmap",
+}, radius = 5000, googleMapsUrls, buttonText, buttonClassName, }) => {
+    const [location, setLocation] = useState(null);
+    const [mapVisible, setMapVisible] = useState(false);
+    const [directionsResponse, setDirectionsResponse] = useState(null);
+    const mapRef = useRef(null);
+    const directionsService = useRef(null);
+    const directionsRenderer = useRef(null);
+    const handleLocationRequest = () => {
+        if ("geolocation" in navigator) {
+            navigator.geolocation.getCurrentPosition(({ coords }) => {
+                const { latitude, longitude } = coords;
+                setLocation({ latitude, longitude });
+                setMapVisible(true);
+            }, () => {
+                alert("Failed to get location. Please try again.");
+            });
+        }
+        else {
+            alert("Geolocation is not supported by this browser.");
+        }
+    };
+    const handleMarkerClick = (lat, lng) => {
+        if (location) {
+            const directionsServiceInstance = directionsService.current || new google.maps.DirectionsService();
+            const directionsRendererInstance = directionsRenderer.current || new google.maps.DirectionsRenderer();
+            if (!directionsService.current)
+                directionsService.current = directionsServiceInstance;
+            if (!directionsRenderer.current)
+                directionsRenderer.current = directionsRendererInstance;
+            const directionsRequest = {
+                origin: { lat: location.latitude, lng: location.longitude },
+                destination: { lat, lng },
+                travelMode: google.maps.TravelMode.DRIVING,
+            };
+            directionsService.current.route(directionsRequest, (result, status) => {
+                if (status === google.maps.DirectionsStatus.OK) {
+                    setDirectionsResponse(result);
+                    if (mapRef.current && directionsRenderer.current) {
+                        directionsRenderer.current.setMap(mapRef.current);
+                        directionsRenderer.current.setDirections(result);
+                    }
+                }
+                else {
+                    alert("Failed to get directions. Please try again.");
+                }
+            });
+        }
+    };
+    const extractCoordinatesFromUrl = (url) => {
+        const regex = /@(-?\d+\.\d+),(-?\d+\.\d+)/;
+        const match = url.match(regex);
+        if (match) {
+            return {
+                lat: parseFloat(match[1]),
+                lng: parseFloat(match[2]),
+            };
+        }
+        return null;
+    };
+    const { isLoaded } = useGoogleMapsLoader();
+    useEffect(() => { }, [isLoaded]);
+    useEffect(() => { }, [mapVisible]);
+    if (!isLoaded) {
+        return React.createElement("div", null, "Loading map...");
+    }
+    if (mapVisible && location) {
+        return (React.createElement("div", { className: containerClassName },
+            React.createElement("button", { onClick: handleLocationRequest, className: buttonClassName }, buttonText),
+            React.createElement(GoogleMap, { mapContainerStyle: styles.mapContainerStyle, center: { lat: location.latitude, lng: location.longitude }, zoom: zoom, options: mapOptions, onLoad: (map) => {
+                    mapRef.current = map;
+                    directionsRenderer.current = new google.maps.DirectionsRenderer();
+                    directionsRenderer.current.setMap(map);
+                } },
+                React.createElement(Marker, { position: { lat: location.latitude, lng: location.longitude }, icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png" }),
+                React.createElement(Circle, { center: { lat: location.latitude, lng: location.longitude }, radius: radius, options: {
+                        strokeColor: "#FF0000",
+                        strokeOpacity: 0.8,
+                        strokeWeight: 2,
+                        fillColor: "#FF0000",
+                        fillOpacity: 0,
+                    } }),
+                googleMapsUrls.map((url, index) => {
+                    const coord = extractCoordinatesFromUrl(url);
+                    if (!coord)
+                        return null;
+                    return (React.createElement(Marker, { key: index, position: { lat: coord.lat, lng: coord.lng }, title: `Sample Location ${index + 1}`, icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png", onClick: () => handleMarkerClick(coord.lat, coord.lng) }));
+                }),
+                directionsResponse && (React.createElement(DirectionsRenderer, { directions: directionsResponse, options: { suppressMarkers: true } })))));
+    }
+    else {
+        return (React.createElement("div", { className: containerClassName },
+            React.createElement("button", { onClick: handleLocationRequest, className: buttonClassName }, buttonText)));
+    }
+};
+export default MapComponent;

package/dist/components/Map/GoogleMapsLoader.d.ts

@@ -0,0 +1,4 @@
+export declare const useGoogleMapsLoader: () => {
+    isLoaded: boolean;
+    loadError: Error | undefined;
+};

package/dist/components/Map/GoogleMapsLoader.js

@@ -0,0 +1,10 @@
+import { useJsApiLoader } from '@react-google-maps/api';
+const GOOGLE_MAPS_API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAP_API; // Ensure you are using environment variable
+export const useGoogleMapsLoader = () => {
+    return useJsApiLoader({
+        googleMapsApiKey: GOOGLE_MAPS_API_KEY, // Replace with your API key
+        libraries: ['places', 'drawing', 'geometry'], // Include all libraries you need
+        language: 'en',
+        region: 'US',
+    });
+};

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

@@ -0,0 +1,3 @@
+export { default as Directions } from "./Directions";
+export { default as GoogleMap } from "./GoogleMap";
+import "./GoogleMap.module.scss";

package/dist/components/Map/index.js

@@ -0,0 +1,3 @@
+export { default as Directions } from "./Directions";
+export { default as GoogleMap } from "./GoogleMap";
+import "./GoogleMap.module.scss";

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

@@ -0,0 +1,10 @@
+import React from "react";
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    modalOverlayClassname?: string;
+    modalContentClassname?: string;
+}
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/components/Modal/Modal.js

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from './Modal.module.scss';
+const Modal = ({ isOpen, onClose, children, modalOverlayClassname = '', modalContentClassname = '' }) => {
+    if (!isOpen)
+        return null;
+    const handleOverlayClick = (event) => {
+        if (event.target === event.currentTarget) {
+            onClose();
+        }
+    };
+    return (React.createElement("button", { className: `${styles.modalOverlay} ${modalOverlayClassname}`, onClick: handleOverlayClick },
+        React.createElement("div", { className: `${styles.modalContent} ${modalContentClassname}` }, children)));
+};
+export default Modal;

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

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

package/dist/components/Modal/Modal.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Modal from './Modal';
+describe('Modal Component', () => {
+    const onCloseMock = jest.fn();
+    const modalContentText = 'This is the modal content';
+    const renderModal = (isOpen, modalOverlayClassname, modalContentClassname) => {
+        render(React.createElement(Modal, { isOpen: isOpen, onClose: onCloseMock, modalOverlayClassname: modalOverlayClassname, modalContentClassname: modalContentClassname },
+            React.createElement("div", null, modalContentText)));
+    };
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('renders the modal when isOpen is true', () => {
+        renderModal(true);
+        expect(screen.getByText(modalContentText)).toBeInTheDocument();
+    });
+    it('does not render the modal when isOpen is false', () => {
+        renderModal(false);
+        expect(screen.queryByText(modalContentText)).not.toBeInTheDocument();
+    });
+    it('calls onClose when clicking on the overlay', () => {
+        renderModal(true);
+        const overlay = screen.getByText(modalContentText).closest('button');
+        fireEvent.click(overlay);
+        expect(onCloseMock).toHaveBeenCalled();
+    });
+    it('does not call onClose when clicking inside the modal content', () => {
+        renderModal(true);
+        const modalContent = screen.getByText(modalContentText);
+        fireEvent.click(modalContent);
+        expect(onCloseMock).not.toHaveBeenCalled();
+    });
+    it('applies the provided modalOverlayClassname', () => {
+        const overlayClass = 'customOverlayClass';
+        renderModal(true, overlayClass);
+        const overlay = screen.getByText(modalContentText).closest('button');
+        expect(overlay).toHaveClass(overlayClass);
+    });
+    it('applies the provided modalContentClassname', () => {
+        const contentClass = 'customContentClass';
+        renderModal(true, undefined, contentClass);
+        const modalContent = screen.getByText(modalContentText);
+        expect(modalContent.parentElement).toHaveClass(contentClass);
+    });
+    it('does not render modal when isOpen is false, even if modalOverlayClassname and modalContentClassname are provided', () => {
+        const overlayClass = 'customOverlayClass';
+        const contentClass = 'customContentClass';
+        renderModal(false, overlayClass, contentClass);
+        expect(screen.queryByText(modalContentText)).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,2 @@
+export { default } from "./Modal";
+import "./Modal.module.scss";

package/dist/components/Modal/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Modal";
+import "./Modal.module.scss";

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import './Notification.module.scss';
+export interface NotificationProps {
+    message: string;
+    severity?: 'error' | 'warning' | 'info' | 'success';
+    autoHideDuration?: number;
+    onClose?: (event: React.SyntheticEvent<any> | Event, reason?: string) => void;
+}
+declare const Notification: React.FC<NotificationProps>;
+export default Notification;

package/dist/components/Notification/Notification.js

@@ -0,0 +1,21 @@
+import React, { useEffect } from "react";
+import './Notification.module.scss';
+const Notification = ({ message, severity = 'info', autoHideDuration = 6000, onClose, }) => {
+    useEffect(() => {
+        if (autoHideDuration && onClose) {
+            const timer = setTimeout(() => {
+                onClose(new Event('timeout'), 'timeout');
+            }, autoHideDuration);
+            return () => clearTimeout(timer);
+        }
+    }, [autoHideDuration, onClose]);
+    const handleClose = (event, reason) => {
+        if (onClose) {
+            onClose(event, reason);
+        }
+    };
+    return (React.createElement("div", { className: `notification ${severity}`, onClick: (e) => handleClose(e), role: "alert" },
+        React.createElement("div", { className: "notification-message" }, message),
+        React.createElement("button", { className: "close-button", onClick: (e) => handleClose(e, 'close'), "aria-label": "Close notification" }, "\u00D7")));
+};
+export default Notification;

package/dist/components/Notification/Notification.test.d.ts

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

package/dist/components/Notification/Notification.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import Notification from './Notification';
+describe('Notification Component', () => {
+    const defaultProps = {
+        message: 'Test Message',
+        severity: 'info',
+        autoHideDuration: 6000,
+        onClose: jest.fn(),
+    };
+    const renderNotification = (props = {}) => {
+        return render(React.createElement(Notification, { ...defaultProps, ...props }));
+    };
+    test('renders notification with the correct message', () => {
+        render(React.createElement(Notification, { message: "Test Message", severity: "info" }));
+        // Check if the element exists by querying it
+        const notificationElement = screen.getByText('Test Message');
+        expect(notificationElement).not.toBeNull(); // Equivalent to `toBeInTheDocument`
+        // Alternatively, check for the presence of the role or className
+        const alertElement = screen.getByRole('alert');
+        expect(alertElement.className).toContain('info'); // Check if className includes "info"
+    });
+    test('calls onClose when the notification is clicked', () => {
+        const onClose = jest.fn();
+        renderNotification({ onClose });
+        fireEvent.click(screen.getByRole('alert'));
+        expect(onClose).toHaveBeenCalled();
+    });
+    test('calls onClose when the close button is clicked', () => {
+        const onClose = jest.fn();
+        renderNotification({ onClose });
+        fireEvent.click(screen.getByLabelText('Close notification'));
+        expect(onClose).toHaveBeenCalledWith(expect.anything(), 'close');
+    });
+    test('calls onClose after autoHideDuration expires', async () => {
+        const onClose = jest.fn();
+        renderNotification({ onClose, autoHideDuration: 1000 });
+        await waitFor(() => expect(onClose).toHaveBeenCalledWith(expect.anything(), 'timeout'), { timeout: 1500 });
+    });
+});

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

@@ -0,0 +1,2 @@
+export { default } from "./Notification";
+import "./Notification.module.scss";

package/dist/components/Notification/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Notification";
+import "./Notification.module.scss";

package/dist/components/OtpInput/OtpInput.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./OtpInput.module.scss";
+interface OTPInputProps {
+    length?: number;
+    onChange: (otp: string) => void;
+    autoFocus?: boolean;
+    onResend: () => void;
+    resendDelay?: number;
+    error?: boolean;
+    errorText?: string;
+    resendText: string;
+}
+declare const OTPInput: React.FC<OTPInputProps>;
+export default OTPInput;

package/dist/components/OtpInput/OtpInput.js

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+import "./OtpInput.module.scss";
+const OTPInput = ({ length = 4, onChange, autoFocus = false, onResend, resendDelay = 60, error = false, errorText, resendText, }) => {
+    const [otp, setOtp] = useState(Array(length).fill(""));
+    const [timer, setTimer] = useState(resendDelay);
+    const [isComplete, setIsComplete] = useState(false);
+    useEffect(() => {
+        const countdown = setInterval(() => {
+            setTimer((prevTimer) => (prevTimer > 0 ? prevTimer - 1 : 0));
+        }, 1000);
+        return () => clearInterval(countdown);
+    }, []);
+    const handleChange = (value, index) => {
+        if (isNaN(Number(value)))
+            return;
+        const newOtp = [...otp];
+        newOtp[index] = value;
+        setOtp(newOtp);
+        onChange(newOtp.join(""));
+        if (value && index < length - 1) {
+            const nextInput = document.getElementById(`otp-input-${index + 1}`);
+            if (nextInput) {
+                nextInput.focus();
+            }
+        }
+    };
+    const handleKeyDown = (e, index) => {
+        if (e.key === "Backspace" && !otp[index] && index > 0) {
+            const prevInput = document.getElementById(`otp-input-${index - 1}`);
+            if (prevInput) {
+                prevInput.focus();
+            }
+        }
+    };
+    const handleResendClick = () => {
+        onResend();
+        setOtp(Array(length).fill(""));
+        setTimer(resendDelay);
+        setIsComplete(false);
+    };
+    useEffect(() => {
+        setIsComplete(otp.every((digit) => digit !== ""));
+    }, [otp]);
+    useEffect(() => {
+        if (error) {
+            setTimer(0);
+        }
+    }, [error]);
+    function getReadableStatus() {
+        if (error) {
+            return "#EB0542";
+        }
+        return isComplete ? "#00B578" : "#A7A7A7";
+    }
+    return (React.createElement("div", { className: "otpMainContainer" },
+        React.createElement("div", { className: "otpInputDiv" }, Array(length)
+            .fill("")
+            .map((_, index) => (React.createElement("input", { key: index, type: "text", id: `otp-input-${index}`, value: otp[index], "data-testid": `otp-input-${index}`, role: "textbox", onChange: (e) => handleChange(e.target.value, index), onKeyDown: (e) => handleKeyDown(e, index), maxLength: 1, style: { border: `1px solid ${getReadableStatus()}` }, className: "otpInput", autoFocus: autoFocus && index === 0 })))),
+        React.createElement("div", { className: "resendContainer" },
+            error ? (React.createElement("div", { className: "errorText" }, errorText)) : (React.createElement("div", { className: "timerText" }, timer > 0 ? `00:${timer} secs` : "")),
+            React.createElement("button", { onClick: handleResendClick, disabled: timer > 0, style: {
+                    border: "none",
+                    background: "none",
+                    cursor: timer > 0 ? "not-allowed" : "pointer",
+                } },
+                React.createElement("div", { className: "resendText" }, resendText)))));
+};
+export default OTPInput;

package/dist/components/OtpInput/OtpInput.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';