@giro-ds/react 12.6.1 → 12.7.0

package/dist/index.d.ts

@@ -497,6 +497,8 @@ interface DatePickerProps extends ScalableProps {
     minDate?: Date;
     /** Data máxima selecionável */
     maxDate?: Date;
+    /** Define se o calendário pode ser aberto ao clicar/focar no campo */
+    showCalendar?: boolean;
     /** ID para testes automatizados */
     'data-testid'?: string;
 }
@@ -1001,6 +1003,8 @@ interface QuantityProps extends ScalableProps, Omit<React$1.HTMLAttributes<HTMLD
     size?: Size;
     /** Número de casas decimais permitidas */
     decimalPlaces?: number;
+    /** Caractere usado como separador decimal. Padrão: ',' */
+    decimalSeparator?: ',' | '.';
     /** Incremento/decremento ao clicar nos botões */
     valueIncrement?: number;
     /**

package/dist/index.esm.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { Avatar as Avatar$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, Popover as Popover$1, Label, AlertDialog, DropdownMenu, Dialog as Dialog$1, RadioGroup, Select as Select$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Toast as Toast$1, Switch as Switch$1, unstable_OneTimePasswordField } from 'radix-ui';
+import { Avatar as Avatar$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, Popover as Popover$1, Label, AlertDialog, DropdownMenu, Dialog as Dialog$1, RadioGroup, Select as Select$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Toast as Toast$1, Portal, Switch as Switch$1, unstable_OneTimePasswordField } from 'radix-ui';
 import * as React from 'react';
 import React__default, { useId, version, forwardRef as forwardRef$1, useMemo, createContext, useState, useContext, useRef, useCallback, useEffect, useLayoutEffect, createElement, memo, useReducer } from 'react';
 import { SpinnerIos16Regular, ChevronUp16Regular, ChevronLeft16Regular, ChevronRight16Regular, ChevronDown16Regular, Dismiss24Regular, Spacebar20Regular, ArrowImport20Regular, Emoji20Regular, ChevronDown20Regular, KeyboardShiftUppercase20Regular, KeyboardShift20Filled, KeyboardShift20Regular, Backspace20Regular, Info12Regular, Dismiss16Regular, Calendar16Regular, DocumentAdd24Regular, Warning24Regular, Document24Regular, FilterRegular, Search16Regular, ChevronDownRegular, ChevronRight16Filled, Subtract16Regular, Add16Regular, SearchInfo20Regular, ArrowSortUp16Regular, ArrowSortDown16Regular, ArrowSort16Regular, Info20Filled, CheckmarkCircle20Filled, Warning20Filled, Dismiss16Filled } from '@fluentui/react-icons';
 import { DayPicker } from 'react-day-picker';
-import { format, addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, eachYearOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, getISOWeek, getMonth, getYear, getWeek, isAfter, isBefore, isDate, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay, startOfISOWeek, startOfMonth, startOfWeek, startOfYear } from 'date-fns';
+import { format, addDays, addMonths, addWeeks, addYears, differenceInCalendarDays, differenceInCalendarMonths, eachMonthOfInterval, eachYearOfInterval, endOfISOWeek, endOfMonth, endOfWeek, endOfYear, getISOWeek, getMonth, getYear, getWeek, isAfter, isBefore, isDate, isSameDay, isSameMonth, isSameYear, max, min, setMonth, setYear, startOfDay as startOfDay$1, startOfISOWeek, startOfMonth, startOfWeek, startOfYear } from 'date-fns';
 import { createPortal } from 'react-dom';
 import Keyboard from 'react-simple-keyboard';
 import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
@@ -2513,7 +2513,7 @@ class DateLib {
         this.startOfDay = (date) => {
             return this.overrides?.startOfDay
                 ? this.overrides.startOfDay(date)
-                : startOfDay(date);
+                : startOfDay$1(date);
         };
         /**
          * Returns the start of the ISO week for the given date.
@@ -3908,8 +3908,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 = useId();
     const calendarId = `${fieldId}-calendar`;
     const containerStyle = { '--giro-scale': scale };
@@ -3918,31 +3931,40 @@ const DatePicker = ({ locale = 'pt-br', calendarSide = 'bottom', calendarAlign =
     const [tempInputValue, setTempInputValue] = useState('');
     const [isEditing, setIsEditing] = useState(false);
     const [internalError, setInternalError] = useState('');
-    const [showCalendar, setShowCalendar] = useState(false);
+    const [isCalendarOpen, setIsCalendarOpen] = useState(false);
     const [currentDate, setCurrentDate] = useState(new Date());
     const wrapperRef = 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 || '';
     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 = useCallback((newDate) => {
         if (!isControlled) {
             setInternalDate(newDate);
@@ -3956,36 +3978,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;
             }
@@ -4001,12 +4030,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) => {
@@ -4033,15 +4062,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 (jsx("div", { ref: wrapperRef, id: id, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsx(Popover, { open: showCalendar, onOpenChange: setShowCalendar, asAnchor: true, trigger: jsx(TextField$1, { className: styles$h.textfieldContainer, type: "tel", icon: jsx(Calendar16Regular, { onClick: !disabled ? handleIconClick : undefined, className: clsx(styles$h.datePickerIcon, disabled && styles$h.datePickerIconDisabled) }), onChange: (e) => {
+    return (jsx("div", { ref: wrapperRef, id: id, className: clsx(styles$h.datePicker, className), style: { ...containerStyle, ...style }, ...rest, children: jsx(Popover, { open: showCalendar && isCalendarOpen, onOpenChange: (open) => {
+                if (showCalendar)
+                    setIsCalendarOpen(open);
+            }, asAnchor: true, trigger: jsx(TextField$1, { className: styles$h.textfieldContainer, type: "tel", icon: jsx(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: 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: 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 }) }));
@@ -4052,7 +4091,7 @@ var styles$g = {"DialogOverlay":"Dialog-module__DialogOverlay___LEX2O","DialogCo
 
 const Dialog = ({ show = false, title, bodyContent, textPrimaryAction, textSecondaryAction, onPrimaryAction, onSecondaryAction, className, ...rest }) => (jsx(AlertDialog.Root, { open: show, ...rest, children: jsxs(AlertDialog.Portal, { children: [jsx(AlertDialog.Overlay, { className: styles$g.DialogOverlay }), jsxs(AlertDialog.Content, { className: clsx(styles$g.DialogContent, className), children: [jsx(AlertDialog.Title, { className: styles$g.DialogTitle, children: title }), jsx(AlertDialog.Description, { asChild: true, className: styles$g.DialogDescription, children: jsx("div", { children: bodyContent }) }), jsxs("div", { className: styles$g.DivButtons, children: [!!(textSecondaryAction && textSecondaryAction.trim()) && (jsx(AlertDialog.Cancel, { asChild: true, children: jsx(Button, { variant: "outlined", ...(onSecondaryAction && { onClick: onSecondaryAction }), children: textSecondaryAction }) })), jsx(AlertDialog.Action, { asChild: true, children: 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 = useCallback(() => {
@@ -4101,6 +4140,25 @@ const Drawer = ({ children, headerContent, footer, customWidth = '400px', onClos
         event.stopPropagation();
         internalClose();
     };
+    const contentRef = useRef(null);
+    const [scrollbarWidth, setScrollbarWidth] = useState(0);
+    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 createPortal(jsxs(Fragment, { children: [jsx("div", { className: clsx(styles$f['drawerShadow'], {
                     [styles$f['drawerShadow--visible']]: isOpen,
                 }), onClick: handleOverlayClick, role: "presentation", "aria-hidden": "true", "data-testid": "drawer-overlay" }), jsxs("div", { className: clsx(styles$f['drawerSidebar'], {
@@ -4108,7 +4166,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: [jsxs("div", { className: styles$f.drawerTitleClose, children: [jsx("div", { className: styles$f.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsx("div", { className: styles$f.drawerHeaderContent, children: headerContent })), jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), 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: [jsxs("div", { className: styles$f.drawerTitleClose, children: [jsx("div", { className: styles$f.drawerTitle, id: id ? `${id}-title` : 'drawer-title', children: title }), headerContent && (jsx("div", { className: styles$f.drawerHeaderContent, children: headerContent })), jsx(Button, { onClick: handleCloseClick, variant: 'outlined', iconOnly: true, icon: jsx(Dismiss16Regular, {}), size: 'lg', tooltipText: 'Fechar' })] }), jsx("div", { ref: contentRef, className: styles$f.drawerChildren, "data-testid": "drawer-content", children: children }), footer && (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"};
@@ -4947,11 +5006,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] = useState(initialValue);
-    const [inputValue, setInputValue] = useState(decimal ? initialValue.toFixed(decimalPlaces) : String(initialValue));
+    const [inputValue, setInputValue] = useState(decimal ? initialValue.toFixed(decimalPlaces).replace('.', decimalSeparator) : String(initialValue));
     const inputRef = useRef(null);
+    const formatDecimalValue = useCallback((num) => num.toFixed(decimalPlaces).replace('.', decimalSeparator), [decimalPlaces, decimalSeparator]);
     const stepValue = valueIncrement !== undefined ? valueIncrement : decimal ? Math.pow(10, -decimalPlaces) : 1;
     const isMinValue = useMemo(() => internalValue <= minValue, [internalValue, minValue]);
     const isMaxValue = useMemo(() => internalValue >= maxValue, [internalValue, maxValue]);
@@ -4969,32 +5029,34 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
     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 = 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 = 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 = 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;
@@ -5006,22 +5068,22 @@ const Quantity = ({ value = 0, onChange, disabled = false, decimal = false, deci
             }
             return filtered || '0'; // Se ficar vazio, retorna '0'
         }
-    }, [decimal]);
+    }, [decimal, decimalSeparator]);
     const handleInputChange = 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);
             }
@@ -5033,36 +5095,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 = 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 {
@@ -5081,7 +5143,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 = useCallback((e) => {
         if (disabled)
             return;
@@ -5103,14 +5165,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':
@@ -5122,7 +5184,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 = useId();
     const inputId = id || uniqueId;
@@ -6131,11 +6193,17 @@ ToastProvider.displayName = 'ToastProvider';
  */
 const ToastContainer = () => {
     const { toasts } = useToastContext();
+    const portalRef = React.useRef(null);
+    React.useEffect(() => {
+        if (toasts.length > 0 && portalRef.current) {
+            document.body.appendChild(portalRef.current);
+        }
+    }, [toasts.length]);
     return (jsxs(Toast$1.Provider, { swipeDirection: "left", children: [toasts.map((toast) => {
                 if (!toast.id)
                     return null;
                 return jsx(Toast, { id: toast.id, ...toast }, toast.id);
-            }), jsx(Toast$1.Viewport, { className: styles$2.toastViewport })] }));
+            }), jsx(Portal.Root, { ref: portalRef, children: jsx(Toast$1.Viewport, { className: styles$2.toastViewport }) })] }));
 };
 ToastContainer.displayName = 'ToastContainer';