dhre-component-lib 0.2.2 → 0.2.4

package/dist/components/Badge/Badge.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import './Badge.module.scss';
 export interface BadgeProps {
     content: string | number;
     badgeClassName?: string;

package/dist/components/BreadCrumb/BreadCrumb.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import './Breadcrumb.module.scss';
 export interface BreadcrumbItem {
     label: string;
     handleClick?: () => void;

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import './Button.module.scss';
 export interface ButtonProps {
     label: string;
     variant: 'text' | 'outlined' | 'contained';

package/dist/components/CircularProgress/CircularProgress.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import './CircularProgress.module.scss';
 export interface CircularProgressProps {
     value?: number;
     variant?: 'determinate' | 'indeterminate';

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

@@ -1,4 +1,5 @@
 import React from "react";
+import './GoogleMap.module.scss';
 export interface MapComponentProps {
     containerClassName?: string;
     zoom?: number;

package/dist/components/PdfView/PdfView.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import './PdfView.module.scss';
 export interface PdfViewerProps {
     content: string;
     contentType?: string;

package/dist/components/Tag/Tag.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import "./Tag.module.scss";
 export interface TagProps {
     content: string | number;
     tagClassName?: string;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import './Tooltip.module.scss';
 export interface TooltipProps {
     content: string;
     tooltipClassName: string;

package/dist/index.d.ts

@@ -1,15 +1,166 @@
-export { default as Button } from "./components/Button";
-export { default as Avatar } from "./components/Avatar";
-export { default as Badge } from "./components/Badge";
-export { default as BreadCrumb } from "./components/BreadCrumb";
-export { default as Checkbox } from "./components/Checkbox";
-export { default as CircularProgress } from "./components/CircularProgress";
-export { default as Divider } from "./components/Divider";
-export { default as Link } from "./components/Link";
-export { default as Progress } from "./components/Progress";
-export { default as RadioButton } from "./components/RadioButton";
-export { default as InputTextField } from "./components/InputTextField";
-export { default } from "./components/PdfView";
-export { default as Directions } from "./components/Map/Directions";
-export { default as GoogleMap } from "./components/Map/GoogleMap";
-export { default as OtpInput } from "./components/OtpInput/OtpInput";
+import React from 'react';
+
+interface ButtonProps {
+    label: string;
+    variant: 'text' | 'outlined' | 'contained';
+    color: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+    size: 'small' | 'medium' | 'large';
+    handleClick: () => void;
+}
+declare const Button: React.FC<ButtonProps>;
+
+interface AvatarProps {
+    src: string;
+    alt: string;
+    imgClassName: string;
+    handleClick?: () => void;
+}
+declare const Avatar: React.FC<AvatarProps>;
+
+interface BadgeProps {
+    content: string | number;
+    badgeClassName?: string;
+    handleClick?: () => void;
+}
+declare const Badge: React.FC<BadgeProps>;
+
+interface BreadcrumbItem {
+    label: string;
+    handleClick?: () => void;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    breadcrumbClassName: string;
+    itemClassName?: string;
+    separator?: string;
+    separatorClassName?: string;
+}
+declare const Breadcrumb: React.FC<BreadcrumbProps>;
+
+interface CustomCheckboxProps {
+    label?: string;
+    checked?: boolean;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    className?: string;
+    checkboxClassName?: string;
+    labelClassName?: string;
+}
+declare const CustomCheckbox: React.FC<CustomCheckboxProps>;
+
+interface CircularProgressProps {
+    value?: number;
+    variant?: 'determinate' | 'indeterminate';
+    color?: 'primary' | 'secondary' | 'error' | 'success' | 'info' | 'warning';
+    thickness?: number;
+    size?: number | string;
+}
+declare const CircularProgress: React.FC<CircularProgressProps>;
+
+interface CustomDividerProps {
+    orientation?: string;
+    className?: string;
+    dividerClassName?: string;
+}
+declare const CustomDivider: React.FC<CustomDividerProps>;
+
+interface LinkProps {
+    href: string;
+    target?: string;
+    rel?: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+declare const Link: React.FC<LinkProps>;
+
+interface ProgressProps {
+    value: number;
+    max: number;
+    className?: string;
+    barContainerClassName?: string;
+    barClassName?: string;
+    labelClassName?: string;
+    label?: string;
+}
+declare const Progress: React.FC<ProgressProps>;
+
+interface RadioButtonProps {
+    name: string;
+    value: string;
+    checked?: boolean;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    id?: string;
+    [key: string]: any;
+}
+declare const CustomRadioButton: React.FC<RadioButtonProps>;
+
+interface CustomInputFieldProps {
+    label?: string;
+    value?: string;
+    type?: string;
+    placeholder?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    className?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    error?: string;
+    errorClassName?: string;
+    id?: string;
+}
+declare const CustomInputField: React.FC<CustomInputFieldProps>;
+
+interface PdfViewerProps {
+    content: string;
+    contentType?: string;
+    buttonText?: string;
+    loadingText?: string;
+    errorText?: string;
+    cleanUpDelay?: number;
+    buttonVariant?: "text" | "outlined" | "contained";
+    buttonColor?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
+    buttonSize?: "small" | "medium" | "large";
+    showLoadingSpinner?: boolean;
+    spinnerSize?: number;
+    spinnerColor?: "inherit" | "primary" | "secondary";
+    className?: string;
+}
+declare const PdfView: React.FC<PdfViewerProps>;
+
+interface GetDirectionActionProps {
+    title: string;
+    titleClasses?: string;
+    location: string;
+    locationClasses?: string;
+    hours: string;
+    hoursClasses?: string;
+    directionsLink: string;
+    buttonName?: string;
+}
+declare const GetDirectionAction: React.FC<GetDirectionActionProps>;
+
+interface MapComponentProps {
+    containerClassName?: string;
+    zoom?: number;
+    mapOptions?: google.maps.MapOptions;
+    radius?: number;
+    googleMapsUrls: string[];
+    buttonText: string;
+    buttonClassName: string;
+}
+declare const MapComponent: React.FC<MapComponentProps>;
+
+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 { Avatar, Badge, Breadcrumb as BreadCrumb, Button, CustomCheckbox as Checkbox, CircularProgress, GetDirectionAction as Directions, CustomDivider as Divider, MapComponent as GoogleMap, CustomInputField as InputTextField, Link, OTPInput as OtpInput, Progress, CustomRadioButton as RadioButton, PdfView as default };

package/dist/index.esm.js

@@ -3,10 +3,13 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import { createPortal } from 'react-dom';
 
-var styles$5 = {};
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css$6 = ".button {\n  padding: 8px 16px;\n  font-size: 14px;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n.button.text {\n  background-color: transparent;\n  color: inherit;\n}\n.button.outlined {\n  background-color: transparent;\n  border: 2px solid currentColor;\n}\n.button.contained {\n  background-color: currentColor;\n  color: #fff;\n}\n.button.contained.primary:hover {\n  background-color: #1565c0;\n}\n.button.contained.secondary:hover {\n  background-color: #7b1fa2;\n}\n.button.contained.success:hover {\n  background-color: #388e3c;\n}\n.button.contained.error:hover {\n  background-color: #d32f2f;\n}\n.button.contained.warning:hover {\n  background-color: #f57c00;\n}\n.button.contained.info:hover {\n  background-color: #1976d2;\n}\n.button.primary {\n  color: #1976d2;\n}\n.button.secondary {\n  color: #9c27b0;\n}\n.button.success {\n  color: #4caf50;\n}\n.button.error {\n  color: #f44336;\n}\n.button.warning {\n  color: yellow;\n}";
+n(css$6,{});
 
 const Button = ({ label, variant, color, size, handleClick, }) => {
-    return (React.createElement("button", { onClick: handleClick, className: `${styles$5.button} ${styles$5[variant]} ${styles$5[color]} ${styles$5[size]}` }, label));
+    return (React.createElement("button", { onClick: handleClick, className: `${'button'} ${variant} ${color} ${size}` }, label));
 };
 
 const Avatar = ({ src, alt, imgClassName, handleClick, }) => {
@@ -14,18 +17,20 @@ const Avatar = ({ src, alt, imgClassName, handleClick, }) => {
         React.createElement("img", { src: src, alt: alt, className: imgClassName })));
 };
 
-var styles$4 = {};
+var css$5 = ".badge {\n  display: inline-block;\n  padding: 6px 12px;\n  background-color: red;\n  color: white;\n  border-radius: 12px;\n  font-size: 14px;\n  text-align: center;\n  cursor: pointer;\n}\n.badge:hover {\n  background-color: darkred;\n}";
+n(css$5,{});
 
 const Badge = ({ content, badgeClassName, handleClick, }) => {
-    return (React.createElement("button", { onClick: handleClick, className: `${styles$4.badge} ${badgeClassName}` }, content));
+    return (React.createElement("button", { onClick: handleClick, className: `${'badge'} ${badgeClassName}` }, content));
 };
 
-var styles$3 = {};
+var css$4 = ".breadcrumb {\n  display: flex;\n  align-items: center;\n  font-size: 16px;\n}\n\n.breadcrumbItem {\n  color: blue;\n  cursor: pointer;\n  margin-right: 8px;\n}\n.breadcrumbItem:hover {\n  text-decoration: underline;\n}\n\n.separator {\n  margin: 0 8px;\n  color: grey;\n}";
+n(css$4,{});
 
 const Breadcrumb = ({ items, breadcrumbClassName, itemClassName, separator = "/", separatorClassName, }) => {
-    return (React.createElement("nav", { className: `${styles$3.breadcrumb} ${breadcrumbClassName}` }, items.map((item, index) => (React.createElement(React.Fragment, { key: index },
-        React.createElement("button", { className: `${styles$3.breadcrumbItem} ${itemClassName}`, onClick: item.handleClick }, item.label),
-        index < items.length - 1 && (React.createElement("span", { className: `${styles$3.separator} ${separatorClassName}` }, separator)))))));
+    return (React.createElement("nav", { className: `${'breadcrumb'} ${breadcrumbClassName}` }, items.map((item, index) => (React.createElement(React.Fragment, { key: index },
+        React.createElement("button", { className: `${'breadcrumbItem'} ${itemClassName}`, onClick: item.handleClick }, item.label),
+        index < items.length - 1 && (React.createElement("span", { className: `${'separator'} ${separatorClassName}` }, separator)))))));
 };
 
 const CustomCheckbox = ({ label, checked = false, onChange, className = '', checkboxClassName = '', labelClassName = '', ...rest }) => {
@@ -34,14 +39,15 @@ const CustomCheckbox = ({ label, checked = false, onChange, className = '', chec
         label && React.createElement("label", { className: labelClassName }, label)));
 };
 
-var styles$2 = {};
+var css$3 = ".spinner {\n  border-style: solid;\n  border-radius: 50%;\n  border-color: transparent;\n  border-top-color: currentColor;\n  animation: spin 1s linear infinite;\n}\n\n.spinner.primary {\n  color: #007bff;\n}\n\n.spinner.secondary {\n  color: #6c757d;\n}\n\n.spinner.error {\n  color: #dc3545;\n}\n\n.spinner.success {\n  color: #28a745;\n}\n\n.spinner.info {\n  color: #17a2b8;\n}\n\n.spinner.warning {\n  color: #ffc107;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}";
+n(css$3,{});
 
 const CircularProgress = ({ value = 0, variant = 'indeterminate', color = 'primary', thickness = 4, size = 100, }) => {
     const isDeterminate = variant === 'determinate';
     const rotationStyle = isDeterminate
         ? { transform: `rotate(${(value / 100) * 360}deg)` }
         : {};
-    return (React.createElement("div", { className: `${styles$2.spinner} ${styles$2[color]}`, style: {
+    return (React.createElement("div", { className: `${'spinner'} ${color}`, style: {
             width: typeof size === 'number' ? `${size}px` : size,
             height: typeof size === 'number' ? `${size}px` : size,
             borderWidth: `${thickness}px`,
@@ -97,7 +103,8 @@ const CustomInputField = ({ label, value = '', type = INPUT_TYPES.TEXT, placehol
         error && React.createElement("div", { className: errorClassName }, error)));
 };
 
-var styles$1 = {};
+var css$2 = ".container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n\n.spinner {\n  border: 2px solid transparent;\n  border-radius: 50%;\n  border-top: 2px solid currentColor;\n  animation: spin 1s linear infinite;\n}\n\n.spinnerInner {\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n}\n\n.errorText {\n  color: red;\n}\n\n.button {\n  padding: 8px 16px;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 16px;\n}\n.button-text {\n  background: none;\n}\n.button-outlined {\n  border: 1px solid currentColor;\n}\n.button-contained {\n  background-color: currentColor;\n  color: white;\n}\n.button-primary {\n  color: blue;\n}\n.button-secondary {\n  color: gray;\n}\n.button-small {\n  font-size: 12px;\n}\n.button-medium {\n  font-size: 16px;\n}\n.button-large {\n  font-size: 20px;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}";
+n(css$2,{});
 
 const PdfView = ({ content, contentType = "application/pdf", buttonText = "View PDF", loadingText = "Loading...", errorText = "Failed to load PDF", cleanUpDelay = 1000, buttonVariant = "contained", buttonColor = "primary", buttonSize = "medium", showLoadingSpinner = false, spinnerSize = 24, spinnerColor = "primary", className = "", }) => {
     const [isLoading, setIsLoading] = React.useState(false);
@@ -142,16 +149,16 @@ const PdfView = ({ content, contentType = "application/pdf", buttonText = "View
         }
     };
     const buttonClass = `
-    ${styles$1.button} 
-    ${styles$1[`button${buttonVariant.charAt(0).toUpperCase() + buttonVariant.slice(1)}`]} 
-    ${styles$1[`button${buttonColor.charAt(0).toUpperCase() + buttonColor.slice(1)}`]} 
-    ${styles$1[`button${buttonSize.charAt(0).toUpperCase() + buttonSize.slice(1)}`]}
+    ${'button'} 
+    ${`button${buttonVariant.charAt(0).toUpperCase() + buttonVariant.slice(1)}`} 
+    ${`button${buttonColor.charAt(0).toUpperCase() + buttonColor.slice(1)}`} 
+    ${`button${buttonSize.charAt(0).toUpperCase() + buttonSize.slice(1)}`}
   `;
-    const spinnerClass = `${styles$1.spinner} ${styles$1.spinnerInner}`;
-    return (React.createElement("div", { className: `${styles$1.container} ${className}` },
+    const spinnerClass = `${'spinner'} ${'spinnerInner'}`;
+    return (React.createElement("div", { className: `${'container'} ${className}` },
         isLoading && showLoadingSpinner && (React.createElement("div", { "data-testid": "spinnertest", className: spinnerClass, style: { width: spinnerSize, height: spinnerSize, borderColor: spinnerColor } },
-            React.createElement("div", { className: styles$1.spinnerInner }))),
-        isError && React.createElement("p", { className: styles$1.errorText }, errorMsg),
+            React.createElement("div", { className: 'spinnerInner' }))),
+        isError && React.createElement("p", { className: 'errorText' }, errorMsg),
         !isLoading && !isError && (React.createElement("button", { onClick: handleViewPdf, className: buttonClass }, buttonText)),
         isLoading && !showLoadingSpinner && React.createElement("p", null, loadingText)));
 };
@@ -9151,7 +9158,8 @@ const useGoogleMapsLoader = () => {
     });
 };
 
-var styles = {};
+var css$1 = ".mapContainerStyle {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}";
+n(css$1,{});
 
 const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOptions = {
     zoomControl: true,
@@ -9226,7 +9234,7 @@ const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOpti
     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) => {
+            React.createElement(GoogleMap, { mapContainerClassName: "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);
@@ -9253,6 +9261,9 @@ const MapComponent = ({ containerClassName = "map-container", zoom = 18, mapOpti
     }
 };
 
+var css = ".otpMainContainer {\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin: 10px;\n  width: 343px;\n}\n\n.otpInputDiv {\n  flex-direction: row;\n  gap: 12px;\n  display: flex;\n}\n\n.otpInput {\n  width: 76px;\n  height: 48px;\n  text-align: center;\n  font-size: 18px;\n  font-weight: 400;\n  border-radius: 8px;\n}\n\n.resendContainer {\n  display: flex;\n  flex-direction: row;\n  margin-top: 10px;\n  justify-content: space-between;\n}\n\n.errorText {\n  color: #EB0542;\n  font-weight: 400;\n  font-size: 14px;\n}\n\n.timerText {\n  color: #A7A7A7;\n  font-weight: 400;\n  font-size: 14px;\n}\n\n.resendText {\n  color: #A7A7A7;\n  font-weight: 700;\n  font-size: 14px;\n}";
+n(css,{});
+
 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);