qlu-20-ui-library 1.10.15 → 1.10.17

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

@@ -6,7 +6,7 @@ interface DropDownButtonProps {
     width?: string;
     disabled?: boolean;
     dataCy?: string;
-    whiteListedRef?: React.RefObject<HTMLDivElement>;
+    whiteListedRef?: React.RefObject<HTMLDivElement | null>;
     isOpen?: boolean;
     handleOpen?: (isOpen: boolean) => void;
     customRootElem?: HTMLDivElement;

package/dist/types/components/Charts/AreaChart/AreaChart.js

@@ -65,7 +65,7 @@ function AreaChart({ values, valuesFormatter = formatterForUSD, xStepSize, yStep
                     },
                     label: function (context) {
                         const label = context.parsed.y;
-                        return formatterForUSD.format(label);
+                        return label ? formatterForUSD.format(label) : "$0";
                     },
                 },
                 bodyColor: "#FF8D4E",

package/dist/types/components/Charts/BarLineChart/BarLineChart.js

@@ -9,7 +9,7 @@ function BarLineChart({ values, view = "both", showLegend = true, valuesFormatte
     transformedValues.forEach((value) => {
         transformedLabels.push([value.key.split("\n")]);
     });
-    const maxValue = Math.max(...transformedValues.map(v => v.value));
+    const maxValue = Math.max(...transformedValues.map((v) => v.value));
     const minVisiblePercentage = 0.07;
     const options = {
         responsive: true,
@@ -107,12 +107,12 @@ function BarLineChart({ values, view = "both", showLegend = true, valuesFormatte
                         if (context.dataset.type === "bar") {
                             const barDataset = context.dataset;
                             const realValue = barDataset.realData?.[context.dataIndex] ?? context.parsed.y;
-                            return valuesFormatter.format(realValue);
+                            return realValue ? valuesFormatter.format(realValue) : "$0";
                         }
                         if (context.dataset.type === "line") {
                             const lineDataset = context.dataset;
                             const realValue = lineDataset.realData?.[context.dataIndex] ?? context.parsed.y;
-                            return valuesFormatter.format(realValue);
+                            return realValue ? valuesFormatter.format(realValue) : "$0";
                         }
                     },
                 },
@@ -146,13 +146,13 @@ function BarLineChart({ values, view = "both", showLegend = true, valuesFormatte
     };
     const lineData = {
         type: "line",
-        data: transformedValues.map(val => {
+        data: transformedValues.map((val) => {
             const actualValue = val.value;
             return actualValue < maxValue * minVisiblePercentage && actualValue !== 0
                 ? maxValue * minVisiblePercentage
                 : actualValue;
         }),
-        realData: transformedValues.map(val => val.value),
+        realData: transformedValues.map((val) => val.value),
         pointBackgroundColor: "#331C10",
         pointRadius: (context) => {
             if (startsFromZeroVariant) {
@@ -191,14 +191,14 @@ function BarLineChart({ values, view = "both", showLegend = true, valuesFormatte
     };
     const barData = {
         type: "bar",
-        data: transformedValues.map(val => {
+        data: transformedValues.map((val) => {
             const actualValue = val.value;
             // If the value is very small compared to max, boost it to minimum visible height
             return actualValue < maxValue * minVisiblePercentage && actualValue !== 0
                 ? maxValue * minVisiblePercentage
                 : actualValue;
         }),
-        realData: transformedValues.map(val => val.value),
+        realData: transformedValues.map((val) => val.value),
         label: "",
         borderWidth: 1,
         backgroundColor: (context) => {

package/dist/types/components/CreditsManagementDropdownButton/CreditsManagementDatePicker/CustomDayContent.js

@@ -4,15 +4,15 @@ import clsx from "clsx";
 const CustomDayContent = (props) => {
     const event = props.eventsData?.find((entry) => {
         const date = new Date(entry.date);
-        return (date.getDate() === props.date.getDate() &&
-            date.getMonth() === props.date.getMonth() &&
-            date.getFullYear() === props.date.getFullYear());
+        return (date.getDate() === props.day.date.getDate() &&
+            date.getMonth() === props.day.date.getMonth() &&
+            date.getFullYear() === props.day.date.getFullYear());
     });
-    const isDisabled = props.date.getTime() > new Date().getTime();
+    const isDisabled = props.day.date.getTime() > new Date().getTime();
     const dayCellClasses = clsx({
         "daypicker-day-cell-content": true,
         disabled: isDisabled,
     });
-    return (_jsx(Tooltip, { content: event?.name || "", toolTipPosition: "top", isDisabled: !event, children: _jsxs("span", { className: dayCellClasses, children: [props.date.getDate(), !!event && _jsx("span", { className: "event-dot" })] }) }));
+    return (_jsx(Tooltip, { content: event?.name || "", toolTipPosition: "top", isDisabled: !event, children: _jsxs("span", { className: dayCellClasses, children: [props.day.date.getDate(), !!event && _jsx("span", { className: "event-dot" })] }) }));
 };
 export default CustomDayContent;

package/dist/types/components/CreditsManagementDropdownButton/CreditsManagementDatePicker/index.js

@@ -26,14 +26,15 @@ function DatePicker({ onDateSelected, initialValue, eventsData, timezone, custom
         newDate.setMonth(selectedMonth.getMonth() + 1);
         setSelectedMonth(newDate);
     };
-    const formatCaption = (date) => {
-        const months = date.toLocaleString("en-US", { month: "long" });
-        return (_jsxs("div", { className: "datePicker-customCaption", children: [_jsx("span", { className: "datePicker-prevMonthArrow", onClick: handlePrevMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowLeft", iconSize: "32" }) }), months, " ", date.getFullYear(), _jsx("span", { className: "datePicker-nextMonthArrow", onClick: handleNextMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowRight", iconSize: "32" }) })] }));
-    };
     const formatWeekday = (date) => {
         const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
         return weekdays[date.getDay()];
     };
+    const CustomCaption = ({ calendarMonth, displayIndex, ...props }) => {
+        const displayMonth = calendarMonth.date;
+        const months = displayMonth.toLocaleString("en-US", { month: "long" });
+        return (_jsxs("div", { className: "datePicker-customCaption", ...props, children: [_jsx("span", { className: "datePicker-prevMonthArrow", onClick: handlePrevMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowLeft", iconSize: "32" }) }), months, " ", displayMonth.getFullYear(), _jsx("span", { className: "datePicker-nextMonthArrow", onClick: handleNextMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowRight", iconSize: "32" }) })] }));
+    };
     const [dropdownPosition, setDropdownPosition] = useState({ x: 0, y: 0, direction: "top" });
     const dropdownRef = useRef(null);
     const mainRef = useRef(null);
@@ -105,8 +106,9 @@ function DatePicker({ onDateSelected, initialValue, eventsData, timezone, custom
                                 setSelectedDate(props[0]);
                                 onDateSelected(props[0]);
                             }
-                        }, footer: footer, formatters: { formatCaption, formatWeekdayName: formatWeekday }, showOutsideDays: true, components: {
-                            DayContent: (props) => (_jsx(CustomDayContent, { date: props.date, displayMonth: props.displayMonth, eventsData: eventsData })),
+                        }, footer: footer, formatters: { formatWeekdayName: formatWeekday }, showOutsideDays: true, components: {
+                            MonthCaption: CustomCaption,
+                            Day: (props) => (_jsx(CustomDayContent, { day: props.day, modifiers: props.modifiers, eventsData: eventsData })),
                         }, classNames: { day: "datepicker-day-cell" } }) }), customRootElem || document.body)] }));
 }
 export default DatePicker;

package/dist/types/components/CreditsManagementDropdownButton/CreditsManagementDropdownButton/index.d.ts

@@ -7,7 +7,7 @@ interface DropDownButtonProps {
     width?: string;
     disabled?: boolean;
     dataCy?: string;
-    whiteListedRef?: React.RefObject<HTMLDivElement>;
+    whiteListedRef?: React.RefObject<HTMLDivElement | null>;
     isOpen?: boolean;
     handleOpen?: (isOpen: boolean) => void;
     customRootElem?: HTMLDivElement;

package/dist/types/components/DatePicker/CustomDayContent.js

@@ -3,10 +3,10 @@ import Tooltip from "../Tooltip";
 const CustomDayContent = (props) => {
     const event = props.eventsData?.find((entry) => {
         const date = new Date(entry.date);
-        return (date.getDate() === props.date.getDate() &&
-            date.getMonth() === props.date.getMonth() &&
-            date.getFullYear() === props.date.getFullYear());
+        return (date.getDate() === props.day.date.getDate() &&
+            date.getMonth() === props.day.date.getMonth() &&
+            date.getFullYear() === props.day.date.getFullYear());
     });
-    return (_jsx(Tooltip, { content: event?.name || "", toolTipPosition: "top", isDisabled: !event, children: _jsxs("span", { className: "daypicker-day-cell-content", children: [props.date.getDate(), !!event && _jsx("span", { className: "event-dot" })] }) }));
+    return (_jsx(Tooltip, { content: event?.name || "", toolTipPosition: "top", isDisabled: !event, children: _jsxs("span", { className: "daypicker-day-cell-content", children: [props.day.date.getDate(), !!event && _jsx("span", { className: "event-dot" })] }) }));
 };
 export default CustomDayContent;

package/dist/types/components/DatePicker/index.js

@@ -26,9 +26,10 @@ const DatePicker = ({ disabledUntil, disableWeekends = false, onDateSelected, in
         newDate.setMonth(selectedMonth.getMonth() + 1);
         setSelectedMonth(newDate);
     };
-    const formatCaption = (date) => {
-        const months = date.toLocaleString("en-US", { month: "long" });
-        return (_jsxs("div", { className: "datePicker-customCaption", children: [_jsx("span", { className: "datePicker-prevMonthArrow", onClick: handlePrevMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowLeft", iconSize: "32" }) }), months, " ", date.getFullYear(), _jsx("span", { className: "datePicker-nextMonthArrow", onClick: handleNextMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowRight", iconSize: "32" }) })] }));
+    const CustomCaption = ({ calendarMonth, displayIndex, ...props }) => {
+        const displayMonth = calendarMonth.date;
+        const months = displayMonth.toLocaleString("en-US", { month: "long" });
+        return (_jsxs("div", { className: "datePicker-customCaption", ...props, children: [_jsx("span", { className: "datePicker-prevMonthArrow", onClick: handlePrevMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowLeft", iconSize: "32" }) }), months, " ", displayMonth.getFullYear(), _jsx("span", { className: "datePicker-nextMonthArrow", onClick: handleNextMonthClick, children: _jsx(GetSvgIcon, { iconType: "arrowRight", iconSize: "32" }) })] }));
     };
     const formatWeekday = (date) => {
         const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
@@ -120,8 +121,9 @@ const DatePicker = ({ disabledUntil, disableWeekends = false, onDateSelected, in
                         }, selected: selectedDate, onSelect: (...props) => {
                             props?.[3]?.stopPropagation?.();
                             setSelectedDate(props[0]);
-                        }, footer: footer, formatters: { formatCaption, formatWeekdayName: formatWeekday }, showOutsideDays: true, components: {
-                            DayContent: (props) => (_jsx(CustomDayContent, { date: props.date, displayMonth: props.displayMonth, eventsData: eventsData })),
+                        }, footer: footer, formatters: { formatWeekdayName: formatWeekday }, showOutsideDays: true, components: {
+                            MonthCaption: CustomCaption,
+                            Day: (props) => (_jsx(CustomDayContent, { day: props.day, modifiers: props.modifiers, eventsData: eventsData })),
                         }, classNames: { day: "datepicker-day-cell" } }) }), customRootElem || rootElem.current)] }));
 };
 export default DatePicker;

package/dist/types/components/OTP/index.js

@@ -15,61 +15,84 @@ const OTPComponent = ({ length = 6, isDisable = false, error = false, onOTPChang
         });
     }, [inputValues]);
     //this function is to handle the onPaste event for an input field
-    const handlePaste = (event) => {
+    const handlePaste = (index, event) => {
+        event.preventDefault();
         const pastedText = event.clipboardData?.getData("text") || "";
-        setOtp(pastedText);
-        // Update the input values character by character
-        const characters = pastedText.split("");
-        characters.slice(0, 6).forEach((char, index) => {
-            if (inputRefs.current[index]) {
-                inputRefs.current[index].value = char;
-                setInputValues((prevValues) => {
-                    const updatedValues = [...prevValues];
-                    updatedValues[index] = char;
-                    return updatedValues;
-                });
+        // Filter to only numeric characters
+        const numericOnly = pastedText.replace(/\D/g, "");
+        const characters = numericOnly.split("").slice(0, length - index);
+        // Update input values and field values starting from the current index
+        const updatedInputValues = [...inputValues];
+        const updatedFieldValues = [...fieldValues];
+        characters.forEach((char, charIndex) => {
+            const targetIndex = index + charIndex;
+            if (targetIndex < length) {
+                updatedInputValues[targetIndex] = char;
+                updatedFieldValues[targetIndex] = char;
+                if (inputRefs.current[targetIndex]) {
+                    inputRefs.current[targetIndex].value = char;
+                }
             }
         });
-    };
-    const handlePasteChange = (event, index) => {
-        const updatedValues = [...inputValues];
-        updatedValues[index] = event.target.value;
-        setInputValues(updatedValues);
-    };
-    //sending cursor to last field after pasting OTP
-    useEffect(() => {
-        if (inputRefs.current[5] && inputRefs.current[5].value !== "") {
-            inputRefs.current[5].focus();
+        // Clear remaining fields after the pasted content
+        const endIndex = Math.min(index + characters.length, length);
+        for (let i = endIndex; i < length; i++) {
+            updatedInputValues[i] = "";
+            updatedFieldValues[i] = "";
+            if (inputRefs.current[i]) {
+                inputRefs.current[i].value = "";
+            }
+        }
+        setInputValues(updatedInputValues);
+        setFieldValues(updatedFieldValues);
+        const completeOTP = updatedFieldValues.join("");
+        setOtp(completeOTP);
+        // Trigger completion callback if all fields are filled
+        if (updatedFieldValues.every((val) => val !== "") && onOTPComplete) {
+            onOTPComplete(completeOTP);
         }
-        else if (inputRefs.current[0].value == "") {
-            inputRefs.current[0].focus();
+        // Focus the last filled field or next empty field
+        const nextEmptyIndex = updatedFieldValues.findIndex((val) => val === "");
+        const focusIndex = nextEmptyIndex === -1 ? length - 1 : Math.min(nextEmptyIndex, length - 1);
+        if (inputRefs.current[focusIndex]) {
+            inputRefs.current[focusIndex].focus();
         }
-    }, [inputValues[5]]);
+    };
     const handleInput = (index, event) => {
         const value = event.target.value;
+        // Extract only the last character if multiple characters are entered
+        const lastChar = value.slice(-1);
         if (value.length === 0) {
+            // Clear the field
             event.target.value = "";
-            setOtp((prev) => prev.slice(0, index) + prev.slice(index + 1));
-            setFieldValues((prev) => {
+            setInputValues((prev) => {
                 const updatedValues = [...prev];
                 updatedValues[index] = "";
                 return updatedValues;
             });
-        }
-        else if (/^\d$/.test(value)) {
-            event.target.value = value;
-            setOtp((prev) => prev.slice(0, index) + value + prev.slice(index + 1));
             setFieldValues((prev) => {
                 const updatedValues = [...prev];
-                updatedValues[index] = value;
+                updatedValues[index] = "";
                 return updatedValues;
             });
-            if (fieldValues.filter((val) => val !== "").length + 1 === length &&
-                onOTPComplete) {
-                fieldValues[index] = value;
-                const completeOTP = fieldValues.join("");
+            setOtp((prev) => prev.slice(0, index) + prev.slice(index + 1));
+        }
+        else if (/^\d$/.test(lastChar)) {
+            // Only allow numeric input
+            event.target.value = lastChar;
+            const updatedInputValues = [...inputValues];
+            const updatedFieldValues = [...fieldValues];
+            updatedInputValues[index] = lastChar;
+            updatedFieldValues[index] = lastChar;
+            setInputValues(updatedInputValues);
+            setFieldValues(updatedFieldValues);
+            const completeOTP = updatedFieldValues.join("");
+            setOtp(completeOTP);
+            // Check if OTP is complete and trigger callback
+            if (updatedFieldValues.every((val) => val !== "") && onOTPComplete) {
                 onOTPComplete(completeOTP);
             }
+            // Move to next field if not the last one
             if (index < length - 1) {
                 inputRefs.current[index + 1].focus();
             }
@@ -77,30 +100,45 @@ const OTPComponent = ({ length = 6, isDisable = false, error = false, onOTPChang
                 event.target.blur();
             }
         }
+        else {
+            // Invalid input - reset to previous value
+            event.target.value = inputValues[index] || "";
+        }
     };
     const handleBackspace = (index, event) => {
-        if (event.key === "Backspace" &&
-            index > 0 &&
-            event.currentTarget.value === "") {
-            event.preventDefault();
-            event.currentTarget.value = "";
-            setOtp((prev) => prev.slice(0, index - 1) + prev.slice(index));
-            setFieldValues((prev) => {
-                const updatedValues = [...prev];
-                updatedValues[index - 1] = "";
-                return updatedValues;
-            });
-            inputRefs.current[index - 1].focus();
+        if (event.key === "Backspace") {
+            if (event.currentTarget.value === "" && index > 0) {
+                // If current field is empty, move to previous and clear it
+                event.preventDefault();
+                const updatedInputValues = [...inputValues];
+                const updatedFieldValues = [...fieldValues];
+                updatedInputValues[index - 1] = "";
+                updatedFieldValues[index - 1] = "";
+                setInputValues(updatedInputValues);
+                setFieldValues(updatedFieldValues);
+                setOtp((prev) => prev.slice(0, index - 1) + prev.slice(index));
+                if (inputRefs.current[index - 1]) {
+                    inputRefs.current[index - 1].value = "";
+                    inputRefs.current[index - 1].focus();
+                }
+            }
+            // If current field has value, let the default behavior clear it
+            // The handleInput will handle the state update
         }
     };
+    const handleClick = (event) => {
+        // Select all text when clicking on an input for easy clearing
+        event.currentTarget.select();
+    };
+    const handleFocus = (event) => {
+        // Select all text on focus for easy clearing
+        event.currentTarget.select();
+    };
     useEffect(() => {
         if (onOTPChange) {
             onOTPChange(otp);
         }
     }, [otp]);
-    return (_jsx("div", { className: "otp-container", children: Array.from({ length }).map((_, index) => (_jsx("input", { autoComplete: "off", disabled: isDisable, type: "text", maxLength: 1, className: `otp-box ${error ? "error" : ""}`, ref: (ref) => (inputRefs.current[index] = ref), onChange: (event) => {
-                handleInput(index, event);
-                handlePasteChange(event, index);
-            }, onKeyDown: (event) => handleBackspace(index, event), onPaste: index === 0 ? handlePaste : undefined }, index))) }));
+    return (_jsx("div", { className: "otp-container", children: Array.from({ length }).map((_, index) => (_jsx("input", { autoComplete: "off", disabled: isDisable, type: "text", inputMode: "numeric", pattern: "[0-9]*", maxLength: 1, className: `otp-box ${error ? "error" : ""}`, ref: (ref) => (inputRefs.current[index] = ref), onChange: (event) => handleInput(index, event), onKeyDown: (event) => handleBackspace(index, event), onClick: handleClick, onFocus: handleFocus, onPaste: (event) => handlePaste(index, event) }, index))) }));
 };
 export default OTPComponent;

package/dist/types/components/ToggleComponent/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
+import clsx from "clsx";
 import "./style.scss";
 const ToggleComponent = ({ initialState, onClick, sizeVariant = "base", isDisabled = false, dataCy, }) => {
     const [isOn, setIsOn] = useState(initialState);
@@ -12,6 +13,6 @@ const ToggleComponent = ({ initialState, onClick, sizeVariant = "base", isDisabl
         setIsOn(!isOn);
         onClick();
     };
-    return (_jsx("div", { className: `${sizeVariant === "sm" ? "smSizeToggle" : "toggle"} ${isOn ? "on" : "off"}`, onClick: handleToggle, "data-cy": dataCy, children: _jsx("div", { className: sizeVariant === "sm" ? "smSizeToggle-switch" : "toggle-switch" }) }));
+    return (_jsx("div", { className: clsx(sizeVariant === "sm" ? "smSizeToggle" : "toggle", isOn ? "on" : "off", isDisabled && "disabled"), onClick: handleToggle, "data-cy": dataCy, children: _jsx("div", { className: sizeVariant === "sm" ? "smSizeToggle-switch" : "toggle-switch" }) }));
 };
 export default ToggleComponent;

package/dist/types/stories/OTP.stories.d.ts

@@ -1,5 +1,5 @@
-import type { StoryObj, Meta } from '@storybook/react-vite';
-import OTPComponent from '../components/OTP';
+import type { StoryObj, Meta } from "@storybook/react-vite";
+import OTPComponent from "../components/OTP";
 declare const meta: Meta<typeof OTPComponent>;
 export default meta;
 type OTPComponentProps = StoryObj<typeof OTPComponent>;

package/dist/types/stories/OTP.stories.js

@@ -1,7 +1,17 @@
-import OTPComponent from '../components/OTP';
+import OTPComponent from "../components/OTP";
+// Mock function to replace @storybook/test fn() for Storybook 9.x compatibility
+const fn = () => {
+    const spy = (...args) => {
+        spy.calls.push(args);
+        spy.callCount++;
+    };
+    spy.calls = [];
+    spy.callCount = 0;
+    return spy;
+};
 const meta = {
     title: "Input/OTPInputField",
-    component: OTPComponent
+    component: OTPComponent,
 };
 export default meta;
 export const NavBar = {
@@ -9,6 +19,7 @@ export const NavBar = {
         length: 6,
         error: false,
         isDisable: false,
-        onOTPComplete: (value) => alert(value)
+        onOTPChange: fn(),
+        onOTPComplete: (value) => alert(value),
     },
 };

package/dist/types/stories/ToggleComponent.stories.d.ts

@@ -1,5 +1,5 @@
-import type { StoryObj, Meta } from '@storybook/react-vite';
-import ToggleComponent from '../components/ToggleComponent';
+import type { StoryObj, Meta } from "@storybook/react-vite";
+import ToggleComponent from "../components/ToggleComponent";
 declare const meta: Meta<typeof ToggleComponent>;
 export default meta;
 type ToggleComponentProps = StoryObj<typeof ToggleComponent>;

package/dist/types/stories/ToggleComponent.stories.js

@@ -1,9 +1,11 @@
-import ToggleComponent from '../components/ToggleComponent';
+import ToggleComponent from "../components/ToggleComponent";
 const meta = {
-    title: 'Button/ToggleComponent',
+    title: "Button/ToggleComponent",
     component: ToggleComponent,
 };
 export default meta;
 export const Primary = {
-    args: {},
+    args: {
+        isDisabled: true,
+    },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qlu-20-ui-library",
-  "version": "1.10.15",
+  "version": "1.10.17",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -36,22 +36,22 @@
     "chart.js": "^4.3.0",
     "react-chartjs-2": "^5.2.0",
     "react-datepicker": "^7.5.0",
-    "react-day-picker": "^8.8.1",
+    "react-day-picker": "^9.11.3",
     "react-flags-select": "^2.2.3",
-    "react-loader-spinner": "^6.1.6",
+    "react-loader-spinner": "^8.0.0",
     "react-modal": "^3.16.3",
     "react-table": "^7.8.0",
-    "react-toastify": "^10.0.6",
-    "react-tooltip": "^5.28.0",
-    "recharts": "^2.13.3",
+    "react-toastify": "^11.0.5",
+    "react-tooltip": "^5.30.0",
+    "recharts": "^2.15.0",
     "sass": "^1.89.2",
     "tiptap-extension-font-size": "^1.2.0",
     "uuid": "^11.0.3",
     "vite-plugin-dts": "^2.3.0"
   },
   "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.5",