@giro-ds/react 12.6.1 → 12.7.0

package/dist/index.cjs

@@ -3927,8 +3927,21 @@ function validatePartialDate(value, locale = 'pt-br') {
     }
     return 'incomplete';
 }
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+}
+function isDateInRange(date, minDate, maxDate) {
+    const day = startOfDay(date);
+    if (minDate && day < startOfDay(minDate)) {
+        return false;
+    }
+    if (maxDate && day > startOfDay(maxDate)) {
+        return false;
+    }
+    return true;
+}
 
-const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign = 'start', helperText, required = false, label, value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, 'data-testid': testId, scale = 1, id, className, style, ...rest }) => {
+const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign = 'start', helperText, required = false, label, value, defaultValue, onChange, disabled = false, error: externalError, minDate, maxDate, showCalendar = true, 'data-testid': testId, scale = 1, id, className, style, ...rest }) => {
     const fieldId = React.useId();
     const calendarId = `${fieldId}-calendar`;
     const containerStyle = { '--giro-scale': scale };
@@ -3937,31 +3950,40 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
     const [tempInputValue, setTempInputValue] = React.useState('');
     const [isEditing, setIsEditing] = React.useState(false);
     const [internalError, setInternalError] = React.useState('');
-    const [showCalendar, setShowCalendar] = React.useState(false);
+    const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
     const [currentDate, setCurrentDate] = React.useState(new Date());
     const wrapperRef = React.useRef(null);
     const currentSelectedDate = isControlled ? value : internalDate;
     const hasValidationError = !!(externalError || internalError);
     const displayValue = isEditing ? tempInputValue : (currentSelectedDate ? formatDate(currentSelectedDate, locale) : '');
-    const combinedHelperText = externalError && helperText
-        ? `${helperText} • ${externalError}`
-        : externalError || helperText || '';
+    const invalidDateMessage = locale === 'en-us' ? 'Invalid date' : 'Data inválida';
+    const outOfRangeMessage = locale === 'en-us' ? 'Date out of allowed range' : 'Data fora do intervalo permitido';
+    const internalErrorText = internalError === 'invalid'
+        ? invalidDateMessage
+        : internalError === 'range'
+            ? outOfRangeMessage
+            : '';
+    const combinedHelperText = internalErrorText
+        ? internalErrorText
+        : externalError && helperText
+            ? `${helperText} • ${externalError}`
+            : externalError || helperText || '';
     React.useEffect(() => {
         function handleClickOutside(event) {
             const target = event.target;
             const isInsideWrapper = wrapperRef.current?.contains(target);
             const isInsideCalendar = !!target.closest?.('[data-radix-popper-content-wrapper]');
             if (!isInsideWrapper && !isInsideCalendar) {
-                setShowCalendar(false);
+                setIsCalendarOpen(false);
             }
         }
-        if (showCalendar) {
+        if (isCalendarOpen) {
             document.addEventListener('mousedown', handleClickOutside);
         }
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
-    }, [showCalendar]);
+    }, [isCalendarOpen]);
     const handleDateChange = React.useCallback((newDate) => {
         if (!isControlled) {
             setInternalDate(newDate);
@@ -3975,36 +3997,43 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
         }
     }, [isControlled, onChange]);
     const handleIconClick = () => {
-        setShowCalendar((prev) => !prev);
+        if (!showCalendar)
+            return;
+        setIsCalendarOpen((prev) => !prev);
     };
     const handleKeyDown = (event) => {
         const { key } = event;
         if (key === 'Enter') {
-            if (showCalendar) {
+            if (isCalendarOpen) {
                 if (currentSelectedDate) {
-                    setShowCalendar(false);
+                    setIsCalendarOpen(false);
                     event.preventDefault();
                     return;
                 }
                 if (tempInputValue.length === 10 && isValidDateFormat(tempInputValue, locale)) {
                     const parsedDate = parseDate(tempInputValue, locale);
                     if (parsedDate && !isNaN(parsedDate.getTime())) {
+                        if (!isDateInRange(parsedDate, minDate, maxDate)) {
+                            setInternalError('range');
+                            event.preventDefault();
+                            return;
+                        }
                         handleDateChange(parsedDate);
-                        setShowCalendar(false);
+                        setIsCalendarOpen(false);
                         event.preventDefault();
                         return;
                     }
                 }
             }
-            else {
-                setShowCalendar(true);
+            else if (showCalendar) {
+                setIsCalendarOpen(true);
                 event.preventDefault();
                 return;
             }
         }
         if (key === 'Escape') {
-            if (showCalendar) {
-                setShowCalendar(false);
+            if (isCalendarOpen) {
+                setIsCalendarOpen(false);
                 event.preventDefault();
                 return;
             }
@@ -4020,12 +4049,12 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
         }
     };
     const handleDaySelect = (newSelectedDate) => {
-        setShowCalendar(false);
+        setIsCalendarOpen(false);
         handleDateChange(newSelectedDate);
     };
     const handleFocus = () => {
-        if (!disabled) {
-            setShowCalendar(true);
+        if (!disabled && showCalendar) {
+            setIsCalendarOpen(true);
         }
     };
     const handleTextFieldChange = (value) => {
@@ -4052,15 +4081,25 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
             if (maskedValue.length === 10) {
                 const parsedDate = parseDate(maskedValue, locale);
                 if (parsedDate) {
+                    if (!isDateInRange(parsedDate, minDate, maxDate)) {
+                        setInternalError('range');
+                        if (!isControlled)
+                            setInternalDate(null);
+                        onChange?.(null);
+                        return;
+                    }
                     handleDateChange(parsedDate);
                     setCurrentDate(parsedDate);
                 }
             }
         }
     };
-    return (jsxRuntime.jsx("div", { ref: wrapperRef, id: id, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsxRuntime.jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsxRuntime.jsx(TextField, { className: styles$h.textfieldContainer, type: "tel", icon: jsxRuntime.jsx(reactIcons.Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
+    return (jsxRuntime.jsx("div", { ref: wrapperRef, id: id, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsxRuntime.jsx(Popover, { open: showCalendar && isCalendarOpen, onOpenChange: (open) => {
+                if (showCalendar)
+                    setIsCalendarOpen(open);
+            }, asAnchor: true, trigger: jsxRuntime.jsx(TextField, { className: styles$h.textfieldContainer, type: "tel", icon: jsxRuntime.jsx(reactIcons.Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
                     handleTextFieldChange(String(e));
-                }, onKeyDown: handleKeyDown, onFocus: handleFocus, autoComplete: "off", value: displayValue, helperText: !externalError ? (helperText || undefined) : undefined, errorMessage: externalError ? combinedHelperText : undefined, error: hasValidationError ? true : undefined, maxLength: 10, required: required, label: label, disabled: disabled, scale: scale, id: fieldId, "data-testid": testId, placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', "aria-label": "Open calendar", "aria-expanded": showCalendar, "aria-controls": calendarId, "aria-invalid": hasValidationError, "aria-describedby": externalError ? undefined : (helperText ? `${fieldId}-help` : undefined) }), content: jsxRuntime.jsx(Calendar, { selected: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy', minDate: minDate, maxDate: maxDate, scale: scale, id: calendarId, onClear: () => {
+                }, onKeyDown: handleKeyDown, onFocus: handleFocus, autoComplete: "off", value: displayValue, helperText: !hasValidationError ? (helperText || undefined) : undefined, errorMessage: hasValidationError ? combinedHelperText : undefined, error: hasValidationError ? true : undefined, maxLength: 10, required: required, label: label, disabled: disabled, scale: scale, id: fieldId, "data-testid": testId, placeholder: locale === 'en-us' ? 'MM/DD/YYYY' : 'DD/MM/YYYY', "aria-label": "Open calendar", "aria-expanded": showCalendar && isCalendarOpen, "aria-controls": calendarId, "aria-invalid": hasValidationError, "aria-describedby": hasValidationError ? undefined : (helperText ? `${fieldId}-help` : undefined) }), content: jsxRuntime.jsx(Calendar, { selected: currentSelectedDate, currentDate: currentDate, onDateChange: setCurrentDate, onDaySelect: handleDaySelect, locale: locale, format: locale === 'en-us' ? 'mm/dd/yyyy' : 'dd/mm/yyyy', minDate: minDate, maxDate: maxDate, scale: scale, id: calendarId, onClear: () => {
                     handleDateChange(null);
                     setCurrentDate(new Date());
                 } }), side: calendarSide, align: calendarAlign, sideOffset: 8 }) }));
@@ -4071,7 +4110,7 @@ var styles$g = {"DialogOverlay":"Dialog-module__DialogOverlay___LEX2O","DialogCo
 
 const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, className, ...rest }) => (jsxRuntime.jsx(radixUi.AlertDialog.Root, { open: show, ...rest, children: jsxRuntime.jsxs(radixUi.AlertDialog.Portal, { children: [jsxRuntime.jsx(radixUi.AlertDialog.Overlay, { className: styles$g.DialogOverlay }), jsxRuntime.jsxs(radixUi.AlertDialog.Content, { className: clsx(styles$g.DialogContent, className), children: [jsxRuntime.jsx(radixUi.AlertDialog.Title, { className: styles$g.DialogTitle, children: title }), jsxRuntime.jsx(radixUi.AlertDialog.Description, { asChild: true, className: styles$g.DialogDescription, children: jsxRuntime.jsx("div", { children: bodyContent }) }), jsxRuntime.jsxs("div", { className: styles$g.DivButtons, children: [!!(textSecondaryAction && textSecondaryAction.trim()) && (jsxRuntime.jsx(radixUi.AlertDialog.Cancel, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "outlined", ...(onSecondaryAction && { onClick: onSecondaryAction }), children: textSecondaryAction }) })), jsxRuntime.jsx(radixUi.AlertDialog.Action, { asChild: true, children: jsxRuntime.jsx(Button, { variant: "filled", ...(onPrimaryAction && { onClick: onPrimaryAction }), children: textPrimaryAction }) })] })] })] }) }));
 
-var styles$f = {"drawerShadow":"Drawer-module__drawerShadow___0Z6iL","drawerShadow--visible":"Drawer-module__drawerShadow--visible___FspoH","drawerSidebar":"Drawer-module__drawerSidebar___cdyyb","drawerSidebar--open":"Drawer-module__drawerSidebar--open___ee2-Y","drawerSidebar--disabled":"Drawer-module__drawerSidebar--disabled___MYrBI","drawerTitleClose":"Drawer-module__drawerTitleClose___QzqN-","drawerTitle":"Drawer-module__drawerTitle___naMX0","drawerChildren":"Drawer-module__drawerChildren___xGdg9","drawerHeaderContent":"Drawer-module__drawerHeaderContent___NLSwj"};
+var styles$f = {"drawerShadow":"Drawer-module__drawerShadow___0Z6iL","drawerShadow--visible":"Drawer-module__drawerShadow--visible___FspoH","drawerSidebar":"Drawer-module__drawerSidebar___cdyyb","drawerSidebar--open":"Drawer-module__drawerSidebar--open___ee2-Y","drawerSidebar--disabled":"Drawer-module__drawerSidebar--disabled___MYrBI","drawerTitleClose":"Drawer-module__drawerTitleClose___QzqN-","drawerTitle":"Drawer-module__drawerTitle___naMX0","drawerChildren":"Drawer-module__drawerChildren___xGdg9","drawerHeaderContent":"Drawer-module__drawerHeaderContent___NLSwj","drawerFooter":"Drawer-module__drawerFooter___qGaC-"};
 
 const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClose, title = 'Título', isOpen = false, onOpen, className, id, disabled = false, onOverlayClick, closeOnOverlayClick = true, closeOnEscape = true, ...rest }) => {
     const internalClose = React.useCallback(() => {
@@ -4120,6 +4159,25 @@ const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClos
         event.stopPropagation();
         internalClose();
     };
+    const contentRef = React.useRef(null);
+    const [scrollbarWidth, setScrollbarWidth] = React.useState(0);
+    React.useEffect(() => {
+        const contentEl = contentRef.current;
+        if (!contentEl)
+            return;
+        const measureScrollbar = () => {
+            setScrollbarWidth(contentEl.offsetWidth - contentEl.clientWidth);
+        };
+        measureScrollbar();
+        const resizeObserver = new ResizeObserver(measureScrollbar);
+        resizeObserver.observe(contentEl);
+        const mutationObserver = new MutationObserver(measureScrollbar);
+        mutationObserver.observe(contentEl, { childList: true, subtree: true, characterData: true });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [isOpen, children]);
     return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: clsx(styles$f['drawerShadow'], {
                     [styles$f['drawerShadow--visible']]: isOpen,
                 }), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxRuntime.jsxs("div", { className: clsx(styles$f['drawerSidebar'], {
@@ -4127,7 +4185,8 @@ const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClos
                     [styles$f['drawerSidebar--disabled']]: disabled,
                 }, className), style: {
                     '--drawer-custom-width': customWidth,
-                }, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, ...rest, children: [jsxRuntime.jsxs("div", { className: styles$f.drawerTitleClose, children: [jsxRuntime.jsx("div", { className: styles$f.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsxRuntime.jsx("div", { className: styles$f.drawerHeaderContent, children: headerContent })), jsxRuntime.jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), jsxRuntime.jsx("div", { className: styles$f.drawerChildren, "data-testid": "drawer-content", children: children }), footer] })] }), document.body);
+                    '--drawer-scrollbar-width': `${scrollbarWidth}px`,
+                }, onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": id ? `${id}-title` : 'drawer-title', "aria-hidden": !isOpen, "data-testid": "drawer-panel", id: id, ...rest, children: [jsxRuntime.jsxs("div", { className: styles$f.drawerTitleClose, children: [jsxRuntime.jsx("div", { className: styles$f.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsxRuntime.jsx("div", { className: styles$f.drawerHeaderContent, children: headerContent })), jsxRuntime.jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsxRuntime.jsx(reactIcons.Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), jsxRuntime.jsx("div", { ref: contentRef, className: styles$f.drawerChildren, "data-testid": "drawer-content", children: children }), footer && (jsxRuntime.jsx("div", { className: styles$f.drawerFooter, children: footer }))] })] }), document.body);
 };
 
 var styles$e = {"container":"FileUpload-module__container___hFeKV","dropZone":"FileUpload-module__dropZone___716hF","disabled":"FileUpload-module__disabled___mwePo","alert":"FileUpload-module__alert___Dnzqc","dragging":"FileUpload-module__dragging___XZghy","emptyState":"FileUpload-module__emptyState___6Ll9D","uploadIcon":"FileUpload-module__uploadIcon___MkBLe","uploadText":"FileUpload-module__uploadText___VWc9g","alertIcon":"FileUpload-module__alertIcon___pTaMS","alertText":"FileUpload-module__alertText___sfV4z","fileList":"FileUpload-module__fileList___K6KQD","thumb":"FileUpload-module__thumb___eg59D","removeButton":"FileUpload-module__removeButton___jUFNv","thumbClip":"FileUpload-module__thumbClip___sP9wp","thumbImage":"FileUpload-module__thumbImage___Swxhd","thumbFile":"FileUpload-module__thumbFile___y7lg5","thumbFileName":"FileUpload-module__thumbFileName___LPSCX","helperText":"FileUpload-module__helperText___DzPqP","errorText":"FileUpload-module__errorText___cHd1Z"};
@@ -4966,11 +5025,12 @@ const Modal = ({ isOpen = false, onClose, title, children, headerContent, closeO
 
 var styles$8 = {"quantity":"Quantity-module__quantity___-vndR","quantityInput":"Quantity-module__quantityInput___xZG-v","disabled":"Quantity-module__disabled___X6p5l"};
 
-const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, decimalPlaces = 2, size = 'lg', id, valueIncrement = 1, scale = 1, className, style, inputSize, minValue = 0, maxValue = 9999, decrementAriaLabel = 'Decrease quantity', incrementAriaLabel = 'Increase quantity', inputAriaLabel = 'Quantity', ...rest }) => {
+const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, decimalPlaces = 2, decimalSeparator = ',', size = 'lg', id, valueIncrement = 1, scale = 1, className, style, inputSize, minValue = 0, maxValue = 9999, decrementAriaLabel = 'Decrease quantity', incrementAriaLabel = 'Increase quantity', inputAriaLabel = 'Quantity', ...rest }) => {
     const initialValue = Math.min(Math.max(value, minValue), maxValue);
     const [internalValue, setInternalValue] = React.useState(initialValue);
-    const [inputValue, setInputValue] = React.useState(decimal ? initialValue.toFixed(decimalPlaces) : String(initialValue));
+    const [inputValue, setInputValue] = React.useState(decimal ? initialValue.toFixed(decimalPlaces).replace('.', decimalSeparator) : String(initialValue));
     const inputRef = React.useRef(null);
+    const formatDecimalValue = React.useCallback((num) => num.toFixed(decimalPlaces).replace('.', decimalSeparator), [decimalPlaces, decimalSeparator]);
     const stepValue = valueIncrement !== undefined ? valueIncrement : decimal ? Math.pow(10, -decimalPlaces) : 1;
     const isMinValue = React.useMemo(() => internalValue <= minValue, [internalValue, minValue]);
     const isMaxValue = React.useMemo(() => internalValue >= maxValue, [internalValue, maxValue]);
@@ -4988,32 +5048,34 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
     React.useEffect(() => {
         const clamped = Math.min(Math.max(value, minValue), maxValue);
         setInternalValue(clamped);
-        setInputValue(decimal ? clamped.toFixed(decimalPlaces) : String(clamped));
-    }, [value, minValue, maxValue, decimal, decimalPlaces]);
+        setInputValue(decimal ? formatDecimalValue(clamped) : String(clamped));
+    }, [value, minValue, maxValue, decimal, formatDecimalValue]);
     const increment = React.useCallback(() => {
         if (disabled)
             return;
         const newValue = Math.min(maxValue, internalValue + stepValue);
         setInternalValue(newValue);
-        setInputValue(decimal ? newValue.toFixed(decimalPlaces) : String(newValue));
+        setInputValue(decimal ? formatDecimalValue(newValue) : String(newValue));
         onChange?.(newValue);
-    }, [disabled, internalValue, stepValue, decimal, decimalPlaces, onChange, maxValue]);
+    }, [disabled, internalValue, stepValue, decimal, formatDecimalValue, onChange, maxValue]);
     const decrement = React.useCallback(() => {
         if (disabled)
             return;
         const newValue = Math.max(minValue, internalValue - stepValue);
         setInternalValue(newValue);
-        setInputValue(decimal ? newValue.toFixed(decimalPlaces) : String(newValue));
+        setInputValue(decimal ? formatDecimalValue(newValue) : String(newValue));
         onChange?.(newValue);
-    }, [disabled, internalValue, stepValue, decimal, decimalPlaces, onChange, minValue]);
+    }, [disabled, internalValue, stepValue, decimal, formatDecimalValue, onChange, minValue]);
     const filterInput = React.useCallback((inputValue) => {
         if (decimal) {
-            let filtered = inputValue.replace(/[^\d.]/g, '');
-            const parts = filtered.split('.');
+            const escapedSeparator = decimalSeparator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const allowedCharsRegex = new RegExp(`[^\\d${escapedSeparator}]`, 'g');
+            let filtered = inputValue.replace(allowedCharsRegex, '');
+            const parts = filtered.split(decimalSeparator);
             if (parts.length > 2) {
-                filtered = parts[0] + '.' + parts.slice(1).join('');
+                filtered = parts[0] + decimalSeparator + parts.slice(1).join('');
             }
-            if (filtered.length > 1 && filtered.startsWith('0') && !filtered.startsWith('0.')) {
+            if (filtered.length > 1 && filtered.startsWith('0') && !filtered.startsWith(`0${decimalSeparator}`)) {
                 filtered = filtered.replace(/^0+/, '');
             }
             return filtered;
@@ -5025,22 +5087,22 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
             }
             return filtered || '0'; // Se ficar vazio, retorna '0'
         }
-    }, [decimal]);
+    }, [decimal, decimalSeparator]);
     const handleInputChange = React.useCallback((event) => {
         if (disabled)
             return;
         const rawValue = event.target.value;
         const filteredValue = filterInput(rawValue);
         setInputValue(filteredValue);
-        if (filteredValue === '' || filteredValue === '.') {
+        if (filteredValue === '' || filteredValue === decimalSeparator) {
             onChange?.(0);
             return;
         }
         if (decimal) {
-            if (filteredValue.endsWith('.')) {
+            if (filteredValue.endsWith(decimalSeparator)) {
                 return;
             }
-            const parsedValue = parseFloat(filteredValue);
+            const parsedValue = parseFloat(filteredValue.replace(decimalSeparator, '.'));
             if (!isNaN(parsedValue)) {
                 onChange?.(parsedValue);
             }
@@ -5052,36 +5114,36 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
                 onChange?.(validValue);
             }
         }
-    }, [disabled, decimal, filterInput, onChange, minValue, maxValue]);
+    }, [disabled, decimal, decimalSeparator, filterInput, onChange, minValue, maxValue]);
     const handleBlur = React.useCallback(() => {
         if (disabled)
             return;
         const currentValue = inputValue.trim();
         if (decimal) {
-            if (currentValue === '' || currentValue === '.') {
-                setInputValue(internalValue.toFixed(decimalPlaces));
+            if (currentValue === '' || currentValue === decimalSeparator) {
+                setInputValue(formatDecimalValue(internalValue));
                 return;
             }
-            if (currentValue.endsWith('.')) {
-                const baseValue = parseFloat(currentValue.slice(0, -1));
+            if (currentValue.endsWith(decimalSeparator)) {
+                const baseValue = parseFloat(currentValue.slice(0, -1).replace(decimalSeparator, '.'));
                 if (!isNaN(baseValue)) {
-                    const formattedValue = baseValue.toFixed(decimalPlaces);
+                    const formattedValue = formatDecimalValue(baseValue);
                     setInputValue(formattedValue);
                     setInternalValue(baseValue);
                     onChange?.(baseValue);
                 }
                 return;
             }
-            const parsedValue = parseFloat(currentValue);
+            const parsedValue = parseFloat(currentValue.replace(decimalSeparator, '.'));
             if (!isNaN(parsedValue)) {
                 const normalizedValue = Math.min(Math.max(parsedValue, minValue), maxValue);
-                const formattedValue = normalizedValue.toFixed(decimalPlaces);
+                const formattedValue = formatDecimalValue(normalizedValue);
                 setInputValue(formattedValue);
                 setInternalValue(normalizedValue);
                 onChange?.(normalizedValue);
             }
             else {
-                setInputValue(internalValue.toFixed(decimalPlaces));
+                setInputValue(formatDecimalValue(internalValue));
             }
         }
         else {
@@ -5100,7 +5162,7 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
                 onChange?.(normalizedValue);
             }
         }
-    }, [disabled, decimal, inputValue, decimalPlaces, internalValue, onChange, minValue, maxValue]);
+    }, [disabled, decimal, decimalSeparator, inputValue, formatDecimalValue, internalValue, onChange, minValue, maxValue]);
     const handleInputKeyDown = React.useCallback((e) => {
         if (disabled)
             return;
@@ -5122,14 +5184,14 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
             case 'Escape':
                 e.preventDefault();
                 if (inputRef.current) {
-                    setInputValue(decimal ? internalValue.toFixed(decimalPlaces) : String(internalValue));
+                    setInputValue(decimal ? formatDecimalValue(internalValue) : String(internalValue));
                     inputRef.current.blur();
                 }
                 break;
             case 'Home':
                 e.preventDefault();
                 setInternalValue(minValue);
-                setInputValue(decimal ? minValue.toFixed(decimalPlaces) : String(minValue));
+                setInputValue(decimal ? formatDecimalValue(minValue) : String(minValue));
                 onChange?.(minValue);
                 break;
             case 'End':
@@ -5141,7 +5203,7 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
                 }
                 break;
         }
-    }, [disabled, increment, decrement, decimal, decimalPlaces, onChange, internalValue, minValue, maxValue]);
+    }, [disabled, increment, decrement, decimal, formatDecimalValue, onChange, internalValue, minValue, maxValue]);
     const inputSizeValue = inputSize !== undefined ? inputSize : Math.max(1, inputValue.length);
     const uniqueId = React.useId();
     const inputId = id || uniqueId;
@@ -6150,11 +6212,17 @@ ToastProvider.displayName = 'ToastProvider';
  */
 const ToastContainer = () => {
     const { toasts } = useToastContext();
+    const portalRef = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+        if (toasts.length > 0 && portalRef.current) {
+            document.body.appendChild(portalRef.current);
+        }
+    }, [toasts.length]);
     return (jsxRuntime.jsxs(radixUi.Toast.Provider, { swipeDirection: "left", children: [toasts.map((toast) => {
                 if (!toast.id)
                     return null;
                 return jsxRuntime.jsx(Toast, { id: toast.id, ...toast }, toast.id);
-            }), jsxRuntime.jsx(radixUi.Toast.Viewport, { className: styles$2.toastViewport })] }));
+            }), jsxRuntime.jsx(radixUi.Portal.Root, { ref: portalRef, children: jsxRuntime.jsx(radixUi.Toast.Viewport, { className: styles$2.toastViewport }) })] }));
 };
 ToastContainer.displayName = 'ToastContainer';