@mantine/core 9.5.2 → 9.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/_virtual/_rolldown/runtime.cjs +1 -1
- package/cjs/components/Accordion/Accordion.cjs.map +1 -1
- package/cjs/components/Accordion/Accordion.module.cjs.map +1 -1
- package/cjs/components/Accordion/AccordionChevron.cjs.map +1 -1
- package/cjs/components/Accordion/AccordionControl/AccordionControl.cjs.map +1 -1
- package/cjs/components/Accordion/AccordionItem/AccordionItem.cjs.map +1 -1
- package/cjs/components/Accordion/AccordionPanel/AccordionPanel.cjs.map +1 -1
- package/cjs/components/ActionBar/ActionBar.cjs +94 -0
- package/cjs/components/ActionBar/ActionBar.cjs.map +1 -0
- package/cjs/components/ActionBar/ActionBar.context.cjs +8 -0
- package/cjs/components/ActionBar/ActionBar.context.cjs.map +1 -0
- package/cjs/components/ActionBar/ActionBar.module.cjs +10 -0
- package/cjs/components/ActionBar/ActionBar.module.cjs.map +1 -0
- package/cjs/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.cjs +33 -0
- package/cjs/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.cjs.map +1 -0
- package/cjs/components/ActionBar/ActionBarDivider/ActionBarDivider.cjs +30 -0
- package/cjs/components/ActionBar/ActionBarDivider/ActionBarDivider.cjs.map +1 -0
- package/cjs/components/ActionIcon/ActionIcon.cjs.map +1 -1
- package/cjs/components/ActionIcon/ActionIconGroup/ActionIconGroup.cjs +16 -15
- package/cjs/components/ActionIcon/ActionIconGroup/ActionIconGroup.cjs.map +1 -1
- package/cjs/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.cjs +15 -14
- package/cjs/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.cjs.map +1 -1
- package/cjs/components/Affix/Affix.cjs.map +1 -1
- package/cjs/components/Alert/Alert.cjs.map +1 -1
- package/cjs/components/Anchor/Anchor.cjs.map +1 -1
- package/cjs/components/AngleSlider/AngleSlider.cjs +5 -4
- package/cjs/components/AngleSlider/AngleSlider.cjs.map +1 -1
- package/cjs/components/AppShell/AppShell.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellAside/AppShellAside.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellFooter/AppShellFooter.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellHeader/AppShellHeader.cjs.map +1 -1
- package/cjs/components/AppShell/AppShellMain/AppShellMain.cjs +2 -1
- package/cjs/components/AppShell/AppShellMain/AppShellMain.cjs.map +1 -1
- package/cjs/components/AppShell/use-resizing/use-resizing.cjs.map +1 -1
- package/cjs/components/AspectRatio/AspectRatio.cjs +14 -13
- package/cjs/components/AspectRatio/AspectRatio.cjs.map +1 -1
- package/cjs/components/Autocomplete/Autocomplete.cjs.map +1 -1
- package/cjs/components/Avatar/Avatar.cjs.map +1 -1
- package/cjs/components/Avatar/AvatarGroup/AvatarGroup.cjs.map +1 -1
- package/cjs/components/Avatar/AvatarPlaceholderIcon.cjs.map +1 -1
- package/cjs/components/BackgroundImage/BackgroundImage.cjs +14 -13
- package/cjs/components/BackgroundImage/BackgroundImage.cjs.map +1 -1
- package/cjs/components/Badge/Badge.cjs.map +1 -1
- package/cjs/components/Blockquote/Blockquote.cjs +6 -5
- package/cjs/components/Blockquote/Blockquote.cjs.map +1 -1
- package/cjs/components/Breadcrumbs/Breadcrumbs.cjs.map +1 -1
- package/cjs/components/Burger/Burger.cjs.map +1 -1
- package/cjs/components/Button/Button.cjs.map +1 -1
- package/cjs/components/Button/ButtonGroup/ButtonGroup.cjs +16 -15
- package/cjs/components/Button/ButtonGroup/ButtonGroup.cjs.map +1 -1
- package/cjs/components/Button/ButtonGroupSection/ButtonGroupSection.cjs +15 -14
- package/cjs/components/Button/ButtonGroupSection/ButtonGroupSection.cjs.map +1 -1
- package/cjs/components/Card/Card.cjs.map +1 -1
- package/cjs/components/Cascader/Cascader.cjs +5 -4
- package/cjs/components/Cascader/Cascader.cjs.map +1 -1
- package/cjs/components/Cascader/CascaderColumns.cjs +2 -1
- package/cjs/components/Cascader/CascaderColumns.cjs.map +1 -1
- package/cjs/components/Cascader/get-cascader-columns.cjs.map +1 -1
- package/cjs/components/Cascader/use-cascader-safe-area.cjs.map +1 -1
- package/cjs/components/Cascader/use-cascader.cjs.map +1 -1
- package/cjs/components/Checkbox/CheckIcon.cjs +6 -5
- package/cjs/components/Checkbox/CheckIcon.cjs.map +1 -1
- package/cjs/components/Checkbox/Checkbox.cjs +1 -1
- package/cjs/components/Checkbox/Checkbox.cjs.map +1 -1
- package/cjs/components/Checkbox/CheckboxCard/CheckboxCard.cjs +2 -1
- package/cjs/components/Checkbox/CheckboxCard/CheckboxCard.cjs.map +1 -1
- package/cjs/components/Checkbox/CheckboxGroup/CheckboxGroup.cjs.map +1 -1
- package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs.map +1 -1
- package/cjs/components/Chip/Chip.cjs.map +1 -1
- package/cjs/components/Chip/ChipGroup/ChipGroup.cjs.map +1 -1
- package/cjs/components/CloseButton/CloseButton.cjs.map +1 -1
- package/cjs/components/CloseButton/CloseIcon.cjs.map +1 -1
- package/cjs/components/Collapse/Collapse.cjs.map +1 -1
- package/cjs/components/ColorInput/ColorInput.cjs.map +1 -1
- package/cjs/components/ColorInput/EyeDropperIcon.cjs.map +1 -1
- package/cjs/components/ColorPicker/ColorPicker.cjs.map +1 -1
- package/cjs/components/ColorPicker/ColorPicker.context.cjs.map +1 -1
- package/cjs/components/ColorPicker/ColorSlider/ColorSlider.cjs +4 -6
- package/cjs/components/ColorPicker/ColorSlider/ColorSlider.cjs.map +1 -1
- package/cjs/components/ColorPicker/Saturation/Saturation.cjs +4 -6
- package/cjs/components/ColorPicker/Saturation/Saturation.cjs.map +1 -1
- package/cjs/components/ColorPicker/Swatches/Swatches.cjs.map +1 -1
- package/cjs/components/ColorSwatch/ColorSwatch.cjs.map +1 -1
- package/cjs/components/Combobox/Combobox.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxChevron/ComboboxChevron.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxEmpty/ComboboxEmpty.cjs +2 -1
- package/cjs/components/Combobox/ComboboxEmpty/ComboboxEmpty.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs +10 -9
- package/cjs/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxFooter/ComboboxFooter.cjs +2 -1
- package/cjs/components/Combobox/ComboboxFooter/ComboboxFooter.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxGroup/ComboboxGroup.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxHeader/ComboboxHeader.cjs +2 -1
- package/cjs/components/Combobox/ComboboxHeader/ComboboxHeader.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxOption/ComboboxOption.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxOptions/ComboboxOptions.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxSearch/ComboboxSearch.cjs.map +1 -1
- package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs +10 -9
- package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs.map +1 -1
- package/cjs/components/Combobox/OptionsDropdown/OptionsDropdown.cjs.map +1 -1
- package/cjs/components/Combobox/OptionsDropdown/default-options-filter.cjs.map +1 -1
- package/cjs/components/Combobox/use-combobox/get-index/get-index.cjs.map +1 -1
- package/cjs/components/Combobox/use-combobox/get-index/get-virtualized-index.cjs.map +1 -1
- package/cjs/components/Combobox/use-combobox/use-combobox.cjs.map +1 -1
- package/cjs/components/Combobox/use-combobox/use-virtualized-combobox.cjs.map +1 -1
- package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs.map +1 -1
- package/cjs/components/Combobox/use-pills-reorder/use-pills-reorder.cjs.map +1 -1
- package/cjs/components/ComboboxPopover/ComboboxPopover.cjs.map +1 -1
- package/cjs/components/ComboboxPopover/ComboboxPopoverTarget.cjs +13 -12
- package/cjs/components/ComboboxPopover/ComboboxPopoverTarget.cjs.map +1 -1
- package/cjs/components/CopyButton/CopyButton.cjs.map +1 -1
- package/cjs/components/DataList/DataList.cjs.map +1 -1
- package/cjs/components/Dialog/Dialog.cjs.map +1 -1
- package/cjs/components/Divider/Divider.cjs.map +1 -1
- package/cjs/components/Drawer/Drawer.cjs +2 -1
- package/cjs/components/Drawer/Drawer.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerBody.cjs +2 -1
- package/cjs/components/Drawer/DrawerBody.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerCloseButton.cjs +2 -1
- package/cjs/components/Drawer/DrawerCloseButton.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerContent.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerHeader.cjs +2 -1
- package/cjs/components/Drawer/DrawerHeader.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerOverlay.cjs +2 -1
- package/cjs/components/Drawer/DrawerOverlay.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerRoot.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerStack.cjs +3 -1
- package/cjs/components/Drawer/DrawerStack.cjs.map +1 -1
- package/cjs/components/Drawer/DrawerTitle.cjs +2 -1
- package/cjs/components/Drawer/DrawerTitle.cjs.map +1 -1
- package/cjs/components/EmptyState/EmptyState.cjs.map +1 -1
- package/cjs/components/EmptyState/EmptyStateActions/EmptyStateActions.cjs +2 -1
- package/cjs/components/EmptyState/EmptyStateActions/EmptyStateActions.cjs.map +1 -1
- package/cjs/components/EmptyState/EmptyStateDescription/EmptyStateDescription.cjs +2 -1
- package/cjs/components/EmptyState/EmptyStateDescription/EmptyStateDescription.cjs.map +1 -1
- package/cjs/components/Fieldset/Fieldset.cjs.map +1 -1
- package/cjs/components/FileButton/FileButton.cjs.map +1 -1
- package/cjs/components/FileInput/FileInput.cjs.map +1 -1
- package/cjs/components/FloatingIndicator/FloatingIndicator.cjs.map +1 -1
- package/cjs/components/FloatingIndicator/use-floating-indicator.cjs.map +1 -1
- package/cjs/components/FloatingWindow/FloatingWindow.cjs.map +1 -1
- package/cjs/components/FloatingWindow/FloatingWindowResizeHandle.cjs.map +1 -1
- package/cjs/components/FocusTrap/FocusTrap.cjs +2 -1
- package/cjs/components/FocusTrap/FocusTrap.cjs.map +1 -1
- package/cjs/components/Grid/Grid.cjs.map +1 -1
- package/cjs/components/Grid/GridCol/GridCol.cjs.map +1 -1
- package/cjs/components/Group/Group.cjs +16 -14
- package/cjs/components/Group/Group.cjs.map +1 -1
- package/cjs/components/Highlight/Highlight.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCard.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCardDropdown/HoverCardDropdown.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCardGroup/HoverCardGroup.cjs.map +1 -1
- package/cjs/components/HoverCard/HoverCardTarget/HoverCardTarget.cjs.map +1 -1
- package/cjs/components/HoverCard/use-hover-card.cjs.map +1 -1
- package/cjs/components/Image/Image.cjs.map +1 -1
- package/cjs/components/Indicator/Indicator.cjs.map +1 -1
- package/cjs/components/Input/Input.cjs +3 -3
- package/cjs/components/Input/Input.cjs.map +1 -1
- package/cjs/components/Input/Input.context.cjs.map +1 -1
- package/cjs/components/Input/InputClearButton/InputClearButton.cjs.map +1 -1
- package/cjs/components/Input/InputClearSection/InputClearSection.cjs.map +1 -1
- package/cjs/components/Input/InputDescription/InputDescription.cjs +2 -1
- package/cjs/components/Input/InputDescription/InputDescription.cjs.map +1 -1
- package/cjs/components/Input/InputError/InputError.cjs +2 -1
- package/cjs/components/Input/InputError/InputError.cjs.map +1 -1
- package/cjs/components/Input/InputLabel/InputLabel.cjs.map +1 -1
- package/cjs/components/Input/InputPlaceholder/InputPlaceholder.cjs +13 -12
- package/cjs/components/Input/InputPlaceholder/InputPlaceholder.cjs.map +1 -1
- package/cjs/components/Input/InputSuccess/InputSuccess.cjs +2 -1
- package/cjs/components/Input/InputSuccess/InputSuccess.cjs.map +1 -1
- package/cjs/components/Input/InputWrapper/InputWrapper.cjs.map +1 -1
- package/cjs/components/Input/InputWrapper.context.cjs.map +1 -1
- package/cjs/components/InputBase/InputBase.cjs.map +1 -1
- package/cjs/components/JsonInput/JsonInput.cjs.map +1 -1
- package/cjs/components/Kbd/Kbd.cjs +14 -13
- package/cjs/components/Kbd/Kbd.cjs.map +1 -1
- package/cjs/components/List/List.cjs.map +1 -1
- package/cjs/components/List/ListItem/ListItem.cjs.map +1 -1
- package/cjs/components/Loader/loaders/Bars.cjs.map +1 -1
- package/cjs/components/Loader/loaders/Dots.cjs.map +1 -1
- package/cjs/components/Loader/loaders/Oval.cjs.map +1 -1
- package/cjs/components/LoadingOverlay/LoadingOverlay.cjs.map +1 -1
- package/cjs/components/Mark/Mark.cjs +14 -13
- package/cjs/components/Mark/Mark.cjs.map +1 -1
- package/cjs/components/Marquee/Marquee.cjs.map +1 -1
- package/cjs/components/MaskInput/MaskInput.cjs +3 -2
- package/cjs/components/MaskInput/MaskInput.cjs.map +1 -1
- package/cjs/components/MaskInput/use-mask-input-props.cjs.map +1 -1
- package/cjs/components/Menu/Menu.cjs.map +1 -1
- package/cjs/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.cjs +4 -3
- package/cjs/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.cjs.map +1 -1
- package/cjs/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.context.cjs.map +1 -1
- package/cjs/components/Menu/MenuCheckboxItem/MenuCheckboxItem.cjs +2 -1
- package/cjs/components/Menu/MenuCheckboxItem/MenuCheckboxItem.cjs.map +1 -1
- package/cjs/components/Menu/MenuContextMenu/MenuContextMenu.cjs +3 -2
- package/cjs/components/Menu/MenuContextMenu/MenuContextMenu.cjs.map +1 -1
- package/cjs/components/Menu/MenuDivider/MenuDivider.cjs +2 -1
- package/cjs/components/Menu/MenuDivider/MenuDivider.cjs.map +1 -1
- package/cjs/components/Menu/MenuDropdown/MenuDropdown.cjs.map +1 -1
- package/cjs/components/Menu/MenuItem/MenuItem.cjs.map +1 -1
- package/cjs/components/Menu/MenuLabel/MenuLabel.cjs +2 -1
- package/cjs/components/Menu/MenuLabel/MenuLabel.cjs.map +1 -1
- package/cjs/components/Menu/MenuRadioGroup/MenuRadioGroup.cjs.map +1 -1
- package/cjs/components/Menu/MenuRadioGroup/MenuRadioGroup.context.cjs.map +1 -1
- package/cjs/components/Menu/MenuRadioItem/MenuRadioItem.cjs +2 -1
- package/cjs/components/Menu/MenuRadioItem/MenuRadioItem.cjs.map +1 -1
- package/cjs/components/Menu/MenuSearch/MenuSearch.cjs.map +1 -1
- package/cjs/components/Menu/MenuSelectableItem/MenuSelectableItem.cjs.map +1 -1
- package/cjs/components/Menu/MenuSub/MenuSub.cjs +1 -1
- package/cjs/components/Menu/MenuSub/MenuSub.cjs.map +1 -1
- package/cjs/components/Menu/MenuSub/MenuSub.context.cjs.map +1 -1
- package/cjs/components/Menu/MenuSubDropdown/MenuSubDropdown.cjs.map +1 -1
- package/cjs/components/Menu/MenuSubItem/MenuSubItem.cjs.map +1 -1
- package/cjs/components/Menu/MenuTarget/MenuTarget.cjs.map +1 -1
- package/cjs/components/Menu/use-menu-type-ahead.cjs.map +1 -1
- package/cjs/components/Menubar/Menubar.cjs.map +1 -1
- package/cjs/components/Menubar/MenubarMenu/MenubarMenu.cjs.map +1 -1
- package/cjs/components/Menubar/MenubarTarget/MenubarTarget.cjs.map +1 -1
- package/cjs/components/Modal/Modal.cjs +2 -1
- package/cjs/components/Modal/Modal.cjs.map +1 -1
- package/cjs/components/Modal/ModalBody.cjs +2 -1
- package/cjs/components/Modal/ModalBody.cjs.map +1 -1
- package/cjs/components/Modal/ModalCloseButton.cjs +2 -1
- package/cjs/components/Modal/ModalCloseButton.cjs.map +1 -1
- package/cjs/components/Modal/ModalContent.cjs.map +1 -1
- package/cjs/components/Modal/ModalHeader.cjs +2 -1
- package/cjs/components/Modal/ModalHeader.cjs.map +1 -1
- package/cjs/components/Modal/ModalOverlay.cjs +2 -1
- package/cjs/components/Modal/ModalOverlay.cjs.map +1 -1
- package/cjs/components/Modal/ModalRoot.cjs.map +1 -1
- package/cjs/components/Modal/ModalStack.cjs +3 -1
- package/cjs/components/Modal/ModalStack.cjs.map +1 -1
- package/cjs/components/Modal/ModalTitle.cjs +2 -1
- package/cjs/components/Modal/ModalTitle.cjs.map +1 -1
- package/cjs/components/Modal/use-modals-stack.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBase.cjs +3 -2
- package/cjs/components/ModalBase/ModalBase.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBaseBody.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBaseCloseButton.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBaseContent.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBaseHeader.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBaseOverlay.cjs.map +1 -1
- package/cjs/components/ModalBase/ModalBaseTitle.cjs.map +1 -1
- package/cjs/components/ModalBase/use-lock-scroll.cjs.map +1 -1
- package/cjs/components/ModalBase/use-modal.cjs +9 -3
- package/cjs/components/ModalBase/use-modal.cjs.map +1 -1
- package/cjs/components/MultiSelect/MultiSelect.cjs.map +1 -1
- package/cjs/components/NativeSelect/NativeSelect.cjs.map +1 -1
- package/cjs/components/NativeSelect/NativeSelectOption.cjs.map +1 -1
- package/cjs/components/NavLink/NavLink.cjs.map +1 -1
- package/cjs/components/Notification/Notification.cjs +3 -3
- package/cjs/components/Notification/Notification.cjs.map +1 -1
- package/cjs/components/NumberInput/NumberInput.cjs +5 -3
- package/cjs/components/NumberInput/NumberInput.cjs.map +1 -1
- package/cjs/components/NumberInput/NumberInputChevron.cjs.map +1 -1
- package/cjs/components/OverflowList/OverflowList.cjs +4 -2
- package/cjs/components/OverflowList/OverflowList.cjs.map +1 -1
- package/cjs/components/OverflowList/use-dimensions.cjs +9 -9
- package/cjs/components/OverflowList/use-dimensions.cjs.map +1 -1
- package/cjs/components/Overlay/Overlay.cjs +14 -13
- package/cjs/components/Overlay/Overlay.cjs.map +1 -1
- package/cjs/components/Pagination/Pagination.cjs +2 -1
- package/cjs/components/Pagination/Pagination.cjs.map +1 -1
- package/cjs/components/Pagination/Pagination.icons.cjs.map +1 -1
- package/cjs/components/Pagination/PaginationDots/PaginationDots.cjs +2 -1
- package/cjs/components/Pagination/PaginationDots/PaginationDots.cjs.map +1 -1
- package/cjs/components/Pagination/PaginationEdges/PaginationEdges.cjs.map +1 -1
- package/cjs/components/Pagination/PaginationItems/PaginationItems.cjs +3 -2
- package/cjs/components/Pagination/PaginationItems/PaginationItems.cjs.map +1 -1
- package/cjs/components/Pagination/PaginationLabel/PaginationLabel.cjs.map +1 -1
- package/cjs/components/Pagination/PaginationRoot/PaginationRoot.cjs.map +1 -1
- package/cjs/components/Paper/Paper.cjs +1 -1
- package/cjs/components/Paper/Paper.cjs.map +1 -1
- package/cjs/components/PasswordInput/PasswordInput.cjs.map +1 -1
- package/cjs/components/PasswordInput/PasswordToggleIcon.cjs.map +1 -1
- package/cjs/components/Pill/Pill.cjs.map +1 -1
- package/cjs/components/Pill/PillGroup/PillGroup.cjs.map +1 -1
- package/cjs/components/PillsInput/PillsInput.cjs.map +1 -1
- package/cjs/components/PillsInput/PillsInput.context.cjs.map +1 -1
- package/cjs/components/PillsInput/PillsInputField/PillsInputField.cjs.map +1 -1
- package/cjs/components/PinInput/PinInput.cjs +6 -5
- package/cjs/components/PinInput/PinInput.cjs.map +1 -1
- package/cjs/components/Popover/Popover.cjs.map +1 -1
- package/cjs/components/Popover/PopoverContextMenu/PopoverContextMenu.cjs +3 -2
- package/cjs/components/Popover/PopoverContextMenu/PopoverContextMenu.cjs.map +1 -1
- package/cjs/components/Popover/PopoverDropdown/PopoverDropdown.cjs.map +1 -1
- package/cjs/components/Popover/PopoverTarget/PopoverTarget.cjs.map +1 -1
- package/cjs/components/Popover/use-popover.cjs +23 -13
- package/cjs/components/Popover/use-popover.cjs.map +1 -1
- package/cjs/components/Portal/Portal.cjs.map +1 -1
- package/cjs/components/Progress/Progress.cjs.map +1 -1
- package/cjs/components/Progress/ProgressLabel/ProgressLabel.cjs +2 -1
- package/cjs/components/Progress/ProgressLabel/ProgressLabel.cjs.map +1 -1
- package/cjs/components/Progress/ProgressRoot/ProgressRoot.cjs.map +1 -1
- package/cjs/components/Radio/Radio.cjs.map +1 -1
- package/cjs/components/Radio/RadioCard/RadioCard.cjs.map +1 -1
- package/cjs/components/Radio/RadioGroup/RadioGroup.cjs.map +1 -1
- package/cjs/components/Radio/RadioIcon.cjs.map +1 -1
- package/cjs/components/Radio/RadioIndicator/RadioIndicator.cjs.map +1 -1
- package/cjs/components/Rating/Rating.cjs +6 -3
- package/cjs/components/Rating/Rating.cjs.map +1 -1
- package/cjs/components/Rating/RatingItem/RatingItem.cjs.map +1 -1
- package/cjs/components/Rating/StarSymbol/StarIcon.cjs.map +1 -1
- package/cjs/components/Rating/StarSymbol/StarSymbol.cjs +2 -1
- package/cjs/components/Rating/StarSymbol/StarSymbol.cjs.map +1 -1
- package/cjs/components/RingProgress/Curve/Curve.cjs.map +1 -1
- package/cjs/components/RingProgress/RingProgress.cjs.map +1 -1
- package/cjs/components/RollingNumber/DigitColumn.cjs.map +1 -1
- package/cjs/components/RollingNumber/RollingNumber.cjs +12 -10
- package/cjs/components/RollingNumber/RollingNumber.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollArea.cjs +8 -6
- package/cjs/components/ScrollArea/ScrollArea.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaCorner/ScrollAreaCorner.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarAuto.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarHover.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarScroll.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollbarX.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollbarY.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.cjs.map +1 -1
- package/cjs/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.cjs.map +1 -1
- package/cjs/components/ScrollArea/use-resize-observer.cjs.map +1 -1
- package/cjs/components/Scroller/Scroller.cjs.map +1 -1
- package/cjs/components/SegmentedControl/SegmentedControl.cjs +12 -1
- package/cjs/components/SegmentedControl/SegmentedControl.cjs.map +1 -1
- package/cjs/components/Select/Select.cjs.map +1 -1
- package/cjs/components/SemiCircleProgress/SemiCircleProgress.cjs.map +1 -1
- package/cjs/components/SimpleGrid/SimpleGrid.cjs.map +1 -1
- package/cjs/components/SimpleGrid/SimpleGridVariables.cjs +10 -8
- package/cjs/components/SimpleGrid/SimpleGridVariables.cjs.map +1 -1
- package/cjs/components/Skeleton/Skeleton.cjs +14 -13
- package/cjs/components/Skeleton/Skeleton.cjs.map +1 -1
- package/cjs/components/Slider/Marks/Marks.cjs +3 -2
- package/cjs/components/Slider/Marks/Marks.cjs.map +1 -1
- package/cjs/components/Slider/RangeSlider/RangeSlider.cjs +20 -11
- package/cjs/components/Slider/RangeSlider/RangeSlider.cjs.map +1 -1
- package/cjs/components/Slider/Slider/Slider.cjs +6 -6
- package/cjs/components/Slider/Slider/Slider.cjs.map +1 -1
- package/cjs/components/Slider/Thumb/Thumb.cjs.map +1 -1
- package/cjs/components/Slider/Track/Track.cjs.map +1 -1
- package/cjs/components/Splitter/GripIcon.cjs.map +1 -1
- package/cjs/components/Splitter/Splitter.cjs +8 -7
- package/cjs/components/Splitter/Splitter.cjs.map +1 -1
- package/cjs/components/Spoiler/Spoiler.cjs.map +1 -1
- package/cjs/components/Stack/Stack.cjs +14 -13
- package/cjs/components/Stack/Stack.cjs.map +1 -1
- package/cjs/components/Stepper/Stepper.cjs +6 -3
- package/cjs/components/Stepper/Stepper.cjs.map +1 -1
- package/cjs/components/Stepper/Stepper.context.cjs.map +1 -1
- package/cjs/components/Stepper/Stepper.module.cjs.map +1 -1
- package/cjs/components/Stepper/StepperStep/StepperStep.cjs +3 -2
- package/cjs/components/Stepper/StepperStep/StepperStep.cjs.map +1 -1
- package/cjs/components/Switch/Switch.cjs.map +1 -1
- package/cjs/components/Switch/SwitchGroup/SwitchGroup.cjs.map +1 -1
- package/cjs/components/Table/Table.cjs +2 -2
- package/cjs/components/Table/Table.cjs.map +1 -1
- package/cjs/components/Table/TableScrollContainer.cjs.map +1 -1
- package/cjs/components/TableOfContents/TableOfContents.cjs.map +1 -1
- package/cjs/components/Tabs/Tabs.cjs.map +1 -1
- package/cjs/components/Tabs/TabsPanel/TabsPanel.cjs.map +1 -1
- package/cjs/components/Tabs/TabsTab/TabsTab.cjs.map +1 -1
- package/cjs/components/TagsInput/TagsInput.cjs.map +1 -1
- package/cjs/components/Text/Text.cjs +18 -17
- package/cjs/components/Text/Text.cjs.map +1 -1
- package/cjs/components/TextInput/TextInput.cjs +6 -5
- package/cjs/components/TextInput/TextInput.cjs.map +1 -1
- package/cjs/components/Textarea/Autosize.cjs +8 -2
- package/cjs/components/Textarea/Autosize.cjs.map +1 -1
- package/cjs/components/ThemeIcon/ThemeIcon.cjs +14 -13
- package/cjs/components/ThemeIcon/ThemeIcon.cjs.map +1 -1
- package/cjs/components/Timeline/Timeline.cjs.map +1 -1
- package/cjs/components/Timeline/TimelineItem/TimelineItem.cjs.map +1 -1
- package/cjs/components/Title/Title.cjs +1 -1
- package/cjs/components/Title/Title.cjs.map +1 -1
- package/cjs/components/Tooltip/Tooltip.cjs.map +1 -1
- package/cjs/components/Tooltip/TooltipFloating/TooltipFloating.cjs.map +1 -1
- package/cjs/components/Tooltip/TooltipFloating/use-floating-tooltip.cjs.map +1 -1
- package/cjs/components/Tooltip/TooltipGroup/TooltipGroup.cjs.map +1 -1
- package/cjs/components/Tooltip/use-tooltip.cjs.map +1 -1
- package/cjs/components/Transition/Transition.cjs.map +1 -1
- package/cjs/components/Transition/use-transition.cjs.map +1 -1
- package/cjs/components/Tree/FlatTreeNode.cjs.map +1 -1
- package/cjs/components/Tree/Tree.cjs +2 -1
- package/cjs/components/Tree/Tree.cjs.map +1 -1
- package/cjs/components/Tree/TreeNode.cjs.map +1 -1
- package/cjs/components/Tree/use-tree-node-drag-drop.cjs.map +1 -1
- package/cjs/components/Tree/use-tree.cjs.map +1 -1
- package/cjs/components/TreeSelect/TreeSelect.cjs +11 -9
- package/cjs/components/TreeSelect/TreeSelect.cjs.map +1 -1
- package/cjs/components/TreeSelect/TreeSelectOption.cjs.map +1 -1
- package/cjs/components/Typography/Typography.cjs +12 -11
- package/cjs/components/Typography/Typography.cjs.map +1 -1
- package/cjs/components/Typography/Typography.module.cjs.map +1 -1
- package/cjs/components/UnstyledButton/UnstyledButton.cjs +12 -11
- package/cjs/components/UnstyledButton/UnstyledButton.cjs.map +1 -1
- package/cjs/components/VisuallyHidden/VisuallyHidden.cjs +12 -11
- package/cjs/components/VisuallyHidden/VisuallyHidden.cjs.map +1 -1
- package/cjs/core/Box/Box.cjs.map +1 -1
- package/cjs/core/Box/use-random-classname/use-random-classname.cjs.map +1 -1
- package/cjs/core/DirectionProvider/DirectionProvider.cjs +3 -2
- package/cjs/core/DirectionProvider/DirectionProvider.cjs.map +1 -1
- package/cjs/core/InlineStyles/InlineStyles.cjs.map +1 -1
- package/cjs/core/MantineProvider/Mantine.context.cjs.map +1 -1
- package/cjs/core/MantineProvider/MantineCssVariables/MantineCssVariables.cjs +4 -2
- package/cjs/core/MantineProvider/MantineCssVariables/MantineCssVariables.cjs.map +1 -1
- package/cjs/core/MantineProvider/MantineProvider.cjs +3 -3
- package/cjs/core/MantineProvider/MantineProvider.cjs.map +1 -1
- package/cjs/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs.map +1 -1
- package/cjs/core/MantineProvider/color-functions/get-contrast-color/get-contrast-color.cjs.map +1 -1
- package/cjs/core/MantineProvider/merge-mantine-theme/merge-mantine-theme.cjs.map +1 -1
- package/cjs/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.cjs.map +1 -1
- package/cjs/core/MantineProvider/use-mantine-color-scheme/use-mantine-color-scheme.cjs +2 -1
- package/cjs/core/MantineProvider/use-mantine-color-scheme/use-mantine-color-scheme.cjs.map +1 -1
- package/cjs/core/MantineProvider/use-mantine-color-scheme/use-provider-color-scheme.cjs.map +1 -1
- package/cjs/core/MantineProvider/use-matches/use-matches.cjs.map +1 -1
- package/cjs/core/styles-api/use-styles/get-class-name/get-class-name.cjs.map +1 -1
- package/cjs/core/styles-api/use-styles/get-class-name/get-global-class-names/get-global-class-names.cjs.map +1 -1
- package/cjs/core/styles-api/use-styles/get-class-name/resolve-class-names/resolve-class-names.cjs.map +1 -1
- package/cjs/core/utils/create-safe-context/create-safe-context.cjs.map +1 -1
- package/cjs/core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.cjs +0 -1
- package/cjs/core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.cjs.map +1 -1
- package/cjs/core/utils/deep-merge/deep-merge.cjs +4 -3
- package/cjs/core/utils/deep-merge/deep-merge.cjs.map +1 -1
- package/cjs/core/utils/use-hovered/use-hovered.cjs.map +1 -1
- package/cjs/index.cjs +6 -0
- package/cjs/utils/Floating/use-context-menu-handlers.cjs.map +1 -1
- package/cjs/utils/Floating/use-delayed-hover.cjs.map +1 -1
- package/cjs/utils/InlineInput/InlineInput.cjs.map +1 -1
- package/cjs/utils/InputsGroupFieldset/InputsGroupFieldset.cjs.map +1 -1
- package/esm/components/Accordion/Accordion.mjs.map +1 -1
- package/esm/components/Accordion/Accordion.module.mjs.map +1 -1
- package/esm/components/Accordion/AccordionChevron.mjs.map +1 -1
- package/esm/components/Accordion/AccordionControl/AccordionControl.mjs.map +1 -1
- package/esm/components/Accordion/AccordionItem/AccordionItem.mjs.map +1 -1
- package/esm/components/Accordion/AccordionPanel/AccordionPanel.mjs.map +1 -1
- package/esm/components/ActionBar/ActionBar.context.mjs +8 -0
- package/esm/components/ActionBar/ActionBar.context.mjs.map +1 -0
- package/esm/components/ActionBar/ActionBar.mjs +94 -0
- package/esm/components/ActionBar/ActionBar.mjs.map +1 -0
- package/esm/components/ActionBar/ActionBar.module.mjs +10 -0
- package/esm/components/ActionBar/ActionBar.module.mjs.map +1 -0
- package/esm/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.mjs +33 -0
- package/esm/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.mjs.map +1 -0
- package/esm/components/ActionBar/ActionBarDivider/ActionBarDivider.mjs +30 -0
- package/esm/components/ActionBar/ActionBarDivider/ActionBarDivider.mjs.map +1 -0
- package/esm/components/ActionIcon/ActionIcon.mjs.map +1 -1
- package/esm/components/ActionIcon/ActionIconGroup/ActionIconGroup.mjs +16 -15
- package/esm/components/ActionIcon/ActionIconGroup/ActionIconGroup.mjs.map +1 -1
- package/esm/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.mjs +15 -14
- package/esm/components/ActionIcon/ActionIconGroupSection/ActionIconGroupSection.mjs.map +1 -1
- package/esm/components/Affix/Affix.mjs.map +1 -1
- package/esm/components/Alert/Alert.mjs.map +1 -1
- package/esm/components/AngleSlider/AngleSlider.mjs +5 -4
- package/esm/components/AngleSlider/AngleSlider.mjs.map +1 -1
- package/esm/components/AppShell/AppShell.mjs.map +1 -1
- package/esm/components/AppShell/AppShellMain/AppShellMain.mjs +2 -1
- package/esm/components/AppShell/AppShellMain/AppShellMain.mjs.map +1 -1
- package/esm/components/AspectRatio/AspectRatio.mjs +14 -13
- package/esm/components/AspectRatio/AspectRatio.mjs.map +1 -1
- package/esm/components/Autocomplete/Autocomplete.mjs.map +1 -1
- package/esm/components/Avatar/Avatar.mjs.map +1 -1
- package/esm/components/Avatar/AvatarGroup/AvatarGroup.mjs.map +1 -1
- package/esm/components/Avatar/AvatarPlaceholderIcon.mjs.map +1 -1
- package/esm/components/BackgroundImage/BackgroundImage.mjs +14 -13
- package/esm/components/BackgroundImage/BackgroundImage.mjs.map +1 -1
- package/esm/components/Badge/Badge.mjs.map +1 -1
- package/esm/components/Blockquote/Blockquote.mjs +6 -5
- package/esm/components/Blockquote/Blockquote.mjs.map +1 -1
- package/esm/components/Breadcrumbs/Breadcrumbs.mjs.map +1 -1
- package/esm/components/Burger/Burger.mjs.map +1 -1
- package/esm/components/Button/Button.mjs.map +1 -1
- package/esm/components/Button/ButtonGroup/ButtonGroup.mjs +16 -15
- package/esm/components/Button/ButtonGroup/ButtonGroup.mjs.map +1 -1
- package/esm/components/Button/ButtonGroupSection/ButtonGroupSection.mjs +15 -14
- package/esm/components/Button/ButtonGroupSection/ButtonGroupSection.mjs.map +1 -1
- package/esm/components/Card/Card.mjs.map +1 -1
- package/esm/components/Cascader/Cascader.mjs +5 -4
- package/esm/components/Cascader/Cascader.mjs.map +1 -1
- package/esm/components/Cascader/CascaderColumns.mjs +2 -1
- package/esm/components/Cascader/CascaderColumns.mjs.map +1 -1
- package/esm/components/Cascader/get-cascader-columns.mjs.map +1 -1
- package/esm/components/Checkbox/CheckIcon.mjs +6 -5
- package/esm/components/Checkbox/CheckIcon.mjs.map +1 -1
- package/esm/components/Checkbox/Checkbox.mjs +1 -1
- package/esm/components/Checkbox/Checkbox.mjs.map +1 -1
- package/esm/components/Checkbox/CheckboxCard/CheckboxCard.mjs +2 -1
- package/esm/components/Checkbox/CheckboxCard/CheckboxCard.mjs.map +1 -1
- package/esm/components/Checkbox/CheckboxGroup/CheckboxGroup.mjs.map +1 -1
- package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs.map +1 -1
- package/esm/components/Chip/Chip.mjs.map +1 -1
- package/esm/components/CloseButton/CloseButton.mjs.map +1 -1
- package/esm/components/CloseButton/CloseIcon.mjs.map +1 -1
- package/esm/components/Collapse/Collapse.mjs.map +1 -1
- package/esm/components/ColorInput/ColorInput.mjs.map +1 -1
- package/esm/components/ColorInput/EyeDropperIcon.mjs.map +1 -1
- package/esm/components/ColorPicker/ColorPicker.mjs.map +1 -1
- package/esm/components/ColorPicker/ColorSlider/ColorSlider.mjs +4 -6
- package/esm/components/ColorPicker/ColorSlider/ColorSlider.mjs.map +1 -1
- package/esm/components/ColorPicker/Saturation/Saturation.mjs +4 -6
- package/esm/components/ColorPicker/Saturation/Saturation.mjs.map +1 -1
- package/esm/components/ColorPicker/Swatches/Swatches.mjs.map +1 -1
- package/esm/components/ColorSwatch/ColorSwatch.mjs.map +1 -1
- package/esm/components/Combobox/Combobox.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxChevron/ComboboxChevron.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxEmpty/ComboboxEmpty.mjs +2 -1
- package/esm/components/Combobox/ComboboxEmpty/ComboboxEmpty.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs +10 -9
- package/esm/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxFooter/ComboboxFooter.mjs +2 -1
- package/esm/components/Combobox/ComboboxFooter/ComboboxFooter.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxGroup/ComboboxGroup.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxHeader/ComboboxHeader.mjs +2 -1
- package/esm/components/Combobox/ComboboxHeader/ComboboxHeader.mjs.map +1 -1
- package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs +10 -9
- package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs.map +1 -1
- package/esm/components/Combobox/OptionsDropdown/OptionsDropdown.mjs.map +1 -1
- package/esm/components/Combobox/OptionsDropdown/default-options-filter.mjs.map +1 -1
- package/esm/components/Combobox/use-combobox/get-index/get-index.mjs.map +1 -1
- package/esm/components/Combobox/use-combobox/get-index/get-virtualized-index.mjs.map +1 -1
- package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs.map +1 -1
- package/esm/components/ComboboxPopover/ComboboxPopover.mjs.map +1 -1
- package/esm/components/ComboboxPopover/ComboboxPopoverTarget.mjs +13 -12
- package/esm/components/ComboboxPopover/ComboboxPopoverTarget.mjs.map +1 -1
- package/esm/components/DataList/DataList.mjs.map +1 -1
- package/esm/components/Dialog/Dialog.mjs.map +1 -1
- package/esm/components/Divider/Divider.mjs.map +1 -1
- package/esm/components/Drawer/Drawer.mjs +2 -1
- package/esm/components/Drawer/Drawer.mjs.map +1 -1
- package/esm/components/Drawer/DrawerBody.mjs +2 -1
- package/esm/components/Drawer/DrawerBody.mjs.map +1 -1
- package/esm/components/Drawer/DrawerCloseButton.mjs +2 -1
- package/esm/components/Drawer/DrawerCloseButton.mjs.map +1 -1
- package/esm/components/Drawer/DrawerContent.mjs.map +1 -1
- package/esm/components/Drawer/DrawerHeader.mjs +2 -1
- package/esm/components/Drawer/DrawerHeader.mjs.map +1 -1
- package/esm/components/Drawer/DrawerOverlay.mjs +2 -1
- package/esm/components/Drawer/DrawerOverlay.mjs.map +1 -1
- package/esm/components/Drawer/DrawerRoot.mjs.map +1 -1
- package/esm/components/Drawer/DrawerStack.mjs +3 -1
- package/esm/components/Drawer/DrawerStack.mjs.map +1 -1
- package/esm/components/Drawer/DrawerTitle.mjs +2 -1
- package/esm/components/Drawer/DrawerTitle.mjs.map +1 -1
- package/esm/components/EmptyState/EmptyState.mjs.map +1 -1
- package/esm/components/EmptyState/EmptyStateActions/EmptyStateActions.mjs +2 -1
- package/esm/components/EmptyState/EmptyStateActions/EmptyStateActions.mjs.map +1 -1
- package/esm/components/EmptyState/EmptyStateDescription/EmptyStateDescription.mjs +2 -1
- package/esm/components/EmptyState/EmptyStateDescription/EmptyStateDescription.mjs.map +1 -1
- package/esm/components/Fieldset/Fieldset.mjs.map +1 -1
- package/esm/components/FileInput/FileInput.mjs.map +1 -1
- package/esm/components/FloatingWindow/FloatingWindow.mjs.map +1 -1
- package/esm/components/FocusTrap/FocusTrap.mjs +2 -1
- package/esm/components/FocusTrap/FocusTrap.mjs.map +1 -1
- package/esm/components/Grid/Grid.mjs.map +1 -1
- package/esm/components/Group/Group.mjs +16 -14
- package/esm/components/Group/Group.mjs.map +1 -1
- package/esm/components/Highlight/Highlight.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCard.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCardGroup/HoverCardGroup.mjs.map +1 -1
- package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs.map +1 -1
- package/esm/components/Indicator/Indicator.mjs.map +1 -1
- package/esm/components/Input/Input.mjs +3 -3
- package/esm/components/Input/Input.mjs.map +1 -1
- package/esm/components/Input/InputClearSection/InputClearSection.mjs.map +1 -1
- package/esm/components/Input/InputDescription/InputDescription.mjs +2 -1
- package/esm/components/Input/InputDescription/InputDescription.mjs.map +1 -1
- package/esm/components/Input/InputError/InputError.mjs +2 -1
- package/esm/components/Input/InputError/InputError.mjs.map +1 -1
- package/esm/components/Input/InputLabel/InputLabel.mjs.map +1 -1
- package/esm/components/Input/InputPlaceholder/InputPlaceholder.mjs +13 -12
- package/esm/components/Input/InputPlaceholder/InputPlaceholder.mjs.map +1 -1
- package/esm/components/Input/InputSuccess/InputSuccess.mjs +2 -1
- package/esm/components/Input/InputSuccess/InputSuccess.mjs.map +1 -1
- package/esm/components/Input/InputWrapper/InputWrapper.mjs.map +1 -1
- package/esm/components/InputBase/InputBase.mjs.map +1 -1
- package/esm/components/Kbd/Kbd.mjs +14 -13
- package/esm/components/Kbd/Kbd.mjs.map +1 -1
- package/esm/components/List/List.mjs.map +1 -1
- package/esm/components/List/ListItem/ListItem.mjs.map +1 -1
- package/esm/components/Loader/loaders/Bars.mjs.map +1 -1
- package/esm/components/Loader/loaders/Dots.mjs.map +1 -1
- package/esm/components/LoadingOverlay/LoadingOverlay.mjs.map +1 -1
- package/esm/components/Mark/Mark.mjs +14 -13
- package/esm/components/Mark/Mark.mjs.map +1 -1
- package/esm/components/Marquee/Marquee.mjs.map +1 -1
- package/esm/components/MaskInput/MaskInput.mjs +3 -2
- package/esm/components/MaskInput/MaskInput.mjs.map +1 -1
- package/esm/components/Menu/Menu.mjs.map +1 -1
- package/esm/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.mjs +4 -3
- package/esm/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.mjs.map +1 -1
- package/esm/components/Menu/MenuCheckboxItem/MenuCheckboxItem.mjs +2 -1
- package/esm/components/Menu/MenuCheckboxItem/MenuCheckboxItem.mjs.map +1 -1
- package/esm/components/Menu/MenuContextMenu/MenuContextMenu.mjs +3 -2
- package/esm/components/Menu/MenuContextMenu/MenuContextMenu.mjs.map +1 -1
- package/esm/components/Menu/MenuDivider/MenuDivider.mjs +2 -1
- package/esm/components/Menu/MenuDivider/MenuDivider.mjs.map +1 -1
- package/esm/components/Menu/MenuDropdown/MenuDropdown.mjs.map +1 -1
- package/esm/components/Menu/MenuItem/MenuItem.mjs.map +1 -1
- package/esm/components/Menu/MenuLabel/MenuLabel.mjs +2 -1
- package/esm/components/Menu/MenuLabel/MenuLabel.mjs.map +1 -1
- package/esm/components/Menu/MenuRadioItem/MenuRadioItem.mjs +2 -1
- package/esm/components/Menu/MenuRadioItem/MenuRadioItem.mjs.map +1 -1
- package/esm/components/Menu/MenuSelectableItem/MenuSelectableItem.mjs.map +1 -1
- package/esm/components/Menu/MenuSub/MenuSub.mjs +1 -1
- package/esm/components/Menu/MenuSub/MenuSub.mjs.map +1 -1
- package/esm/components/Menu/MenuSubItem/MenuSubItem.mjs.map +1 -1
- package/esm/components/Menu/MenuTarget/MenuTarget.mjs.map +1 -1
- package/esm/components/Menubar/Menubar.mjs.map +1 -1
- package/esm/components/Menubar/MenubarMenu/MenubarMenu.mjs.map +1 -1
- package/esm/components/Menubar/MenubarTarget/MenubarTarget.mjs.map +1 -1
- package/esm/components/Modal/Modal.mjs +2 -1
- package/esm/components/Modal/Modal.mjs.map +1 -1
- package/esm/components/Modal/ModalBody.mjs +2 -1
- package/esm/components/Modal/ModalBody.mjs.map +1 -1
- package/esm/components/Modal/ModalCloseButton.mjs +2 -1
- package/esm/components/Modal/ModalCloseButton.mjs.map +1 -1
- package/esm/components/Modal/ModalContent.mjs.map +1 -1
- package/esm/components/Modal/ModalHeader.mjs +2 -1
- package/esm/components/Modal/ModalHeader.mjs.map +1 -1
- package/esm/components/Modal/ModalOverlay.mjs +2 -1
- package/esm/components/Modal/ModalOverlay.mjs.map +1 -1
- package/esm/components/Modal/ModalRoot.mjs.map +1 -1
- package/esm/components/Modal/ModalStack.mjs +3 -1
- package/esm/components/Modal/ModalStack.mjs.map +1 -1
- package/esm/components/Modal/ModalTitle.mjs +2 -1
- package/esm/components/Modal/ModalTitle.mjs.map +1 -1
- package/esm/components/ModalBase/ModalBase.mjs +3 -2
- package/esm/components/ModalBase/ModalBase.mjs.map +1 -1
- package/esm/components/ModalBase/ModalBaseContent.mjs.map +1 -1
- package/esm/components/ModalBase/ModalBaseOverlay.mjs.map +1 -1
- package/esm/components/ModalBase/use-modal.mjs +9 -3
- package/esm/components/ModalBase/use-modal.mjs.map +1 -1
- package/esm/components/MultiSelect/MultiSelect.mjs.map +1 -1
- package/esm/components/NativeSelect/NativeSelect.mjs.map +1 -1
- package/esm/components/NativeSelect/NativeSelectOption.mjs.map +1 -1
- package/esm/components/NavLink/NavLink.mjs.map +1 -1
- package/esm/components/Notification/Notification.mjs +3 -3
- package/esm/components/Notification/Notification.mjs.map +1 -1
- package/esm/components/NumberInput/NumberInput.mjs +5 -3
- package/esm/components/NumberInput/NumberInput.mjs.map +1 -1
- package/esm/components/NumberInput/NumberInputChevron.mjs.map +1 -1
- package/esm/components/OverflowList/OverflowList.mjs +4 -2
- package/esm/components/OverflowList/OverflowList.mjs.map +1 -1
- package/esm/components/OverflowList/use-dimensions.mjs +9 -9
- package/esm/components/OverflowList/use-dimensions.mjs.map +1 -1
- package/esm/components/Overlay/Overlay.mjs +14 -13
- package/esm/components/Overlay/Overlay.mjs.map +1 -1
- package/esm/components/Pagination/Pagination.icons.mjs.map +1 -1
- package/esm/components/Pagination/Pagination.mjs +2 -1
- package/esm/components/Pagination/Pagination.mjs.map +1 -1
- package/esm/components/Pagination/PaginationDots/PaginationDots.mjs +2 -1
- package/esm/components/Pagination/PaginationDots/PaginationDots.mjs.map +1 -1
- package/esm/components/Pagination/PaginationEdges/PaginationEdges.mjs.map +1 -1
- package/esm/components/Pagination/PaginationItems/PaginationItems.mjs +3 -2
- package/esm/components/Pagination/PaginationItems/PaginationItems.mjs.map +1 -1
- package/esm/components/Pagination/PaginationLabel/PaginationLabel.mjs.map +1 -1
- package/esm/components/Pagination/PaginationRoot/PaginationRoot.mjs.map +1 -1
- package/esm/components/Paper/Paper.mjs +1 -1
- package/esm/components/Paper/Paper.mjs.map +1 -1
- package/esm/components/PasswordInput/PasswordInput.mjs.map +1 -1
- package/esm/components/PasswordInput/PasswordToggleIcon.mjs.map +1 -1
- package/esm/components/Pill/Pill.mjs.map +1 -1
- package/esm/components/Pill/PillGroup/PillGroup.mjs.map +1 -1
- package/esm/components/PillsInput/PillsInput.mjs.map +1 -1
- package/esm/components/PinInput/PinInput.mjs +6 -5
- package/esm/components/PinInput/PinInput.mjs.map +1 -1
- package/esm/components/Popover/Popover.mjs.map +1 -1
- package/esm/components/Popover/PopoverContextMenu/PopoverContextMenu.mjs +3 -2
- package/esm/components/Popover/PopoverContextMenu/PopoverContextMenu.mjs.map +1 -1
- package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs.map +1 -1
- package/esm/components/Popover/use-popover.mjs +23 -13
- package/esm/components/Popover/use-popover.mjs.map +1 -1
- package/esm/components/Progress/Progress.mjs.map +1 -1
- package/esm/components/Progress/ProgressLabel/ProgressLabel.mjs +2 -1
- package/esm/components/Progress/ProgressLabel/ProgressLabel.mjs.map +1 -1
- package/esm/components/Progress/ProgressRoot/ProgressRoot.mjs.map +1 -1
- package/esm/components/Radio/Radio.mjs.map +1 -1
- package/esm/components/Radio/RadioCard/RadioCard.mjs.map +1 -1
- package/esm/components/Radio/RadioGroup/RadioGroup.mjs.map +1 -1
- package/esm/components/Radio/RadioIcon.mjs.map +1 -1
- package/esm/components/Radio/RadioIndicator/RadioIndicator.mjs.map +1 -1
- package/esm/components/Rating/Rating.mjs +6 -3
- package/esm/components/Rating/Rating.mjs.map +1 -1
- package/esm/components/Rating/RatingItem/RatingItem.mjs.map +1 -1
- package/esm/components/Rating/StarSymbol/StarIcon.mjs.map +1 -1
- package/esm/components/Rating/StarSymbol/StarSymbol.mjs +2 -1
- package/esm/components/Rating/StarSymbol/StarSymbol.mjs.map +1 -1
- package/esm/components/RingProgress/Curve/Curve.mjs.map +1 -1
- package/esm/components/RingProgress/RingProgress.mjs.map +1 -1
- package/esm/components/RollingNumber/DigitColumn.mjs.map +1 -1
- package/esm/components/RollingNumber/RollingNumber.mjs +12 -10
- package/esm/components/RollingNumber/RollingNumber.mjs.map +1 -1
- package/esm/components/ScrollArea/ScrollArea.mjs +8 -6
- package/esm/components/ScrollArea/ScrollArea.mjs.map +1 -1
- package/esm/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.mjs.map +1 -1
- package/esm/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.mjs.map +1 -1
- package/esm/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.mjs.map +1 -1
- package/esm/components/Scroller/Scroller.mjs.map +1 -1
- package/esm/components/SegmentedControl/SegmentedControl.mjs +12 -1
- package/esm/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
- package/esm/components/Select/Select.mjs.map +1 -1
- package/esm/components/SemiCircleProgress/SemiCircleProgress.mjs.map +1 -1
- package/esm/components/SimpleGrid/SimpleGrid.mjs.map +1 -1
- package/esm/components/SimpleGrid/SimpleGridVariables.mjs +10 -8
- package/esm/components/SimpleGrid/SimpleGridVariables.mjs.map +1 -1
- package/esm/components/Skeleton/Skeleton.mjs +14 -13
- package/esm/components/Skeleton/Skeleton.mjs.map +1 -1
- package/esm/components/Slider/Marks/Marks.mjs +3 -2
- package/esm/components/Slider/Marks/Marks.mjs.map +1 -1
- package/esm/components/Slider/RangeSlider/RangeSlider.mjs +20 -11
- package/esm/components/Slider/RangeSlider/RangeSlider.mjs.map +1 -1
- package/esm/components/Slider/Slider/Slider.mjs +6 -6
- package/esm/components/Slider/Slider/Slider.mjs.map +1 -1
- package/esm/components/Slider/Thumb/Thumb.mjs.map +1 -1
- package/esm/components/Slider/Track/Track.mjs.map +1 -1
- package/esm/components/Splitter/GripIcon.mjs.map +1 -1
- package/esm/components/Splitter/Splitter.mjs +8 -7
- package/esm/components/Splitter/Splitter.mjs.map +1 -1
- package/esm/components/Spoiler/Spoiler.mjs.map +1 -1
- package/esm/components/Stack/Stack.mjs +14 -13
- package/esm/components/Stack/Stack.mjs.map +1 -1
- package/esm/components/Stepper/Stepper.context.mjs.map +1 -1
- package/esm/components/Stepper/Stepper.mjs +6 -3
- package/esm/components/Stepper/Stepper.mjs.map +1 -1
- package/esm/components/Stepper/Stepper.module.mjs.map +1 -1
- package/esm/components/Stepper/StepperStep/StepperStep.mjs +3 -2
- package/esm/components/Stepper/StepperStep/StepperStep.mjs.map +1 -1
- package/esm/components/Switch/Switch.mjs.map +1 -1
- package/esm/components/Switch/SwitchGroup/SwitchGroup.mjs.map +1 -1
- package/esm/components/Table/Table.mjs +2 -2
- package/esm/components/Table/Table.mjs.map +1 -1
- package/esm/components/Table/TableScrollContainer.mjs.map +1 -1
- package/esm/components/TableOfContents/TableOfContents.mjs.map +1 -1
- package/esm/components/Tabs/Tabs.mjs.map +1 -1
- package/esm/components/Tabs/TabsPanel/TabsPanel.mjs.map +1 -1
- package/esm/components/Tabs/TabsTab/TabsTab.mjs.map +1 -1
- package/esm/components/TagsInput/TagsInput.mjs.map +1 -1
- package/esm/components/Text/Text.mjs +18 -17
- package/esm/components/Text/Text.mjs.map +1 -1
- package/esm/components/TextInput/TextInput.mjs +6 -5
- package/esm/components/TextInput/TextInput.mjs.map +1 -1
- package/esm/components/Textarea/Autosize.mjs +9 -3
- package/esm/components/Textarea/Autosize.mjs.map +1 -1
- package/esm/components/ThemeIcon/ThemeIcon.mjs +14 -13
- package/esm/components/ThemeIcon/ThemeIcon.mjs.map +1 -1
- package/esm/components/Timeline/Timeline.mjs.map +1 -1
- package/esm/components/Timeline/TimelineItem/TimelineItem.mjs.map +1 -1
- package/esm/components/Title/Title.mjs +1 -1
- package/esm/components/Title/Title.mjs.map +1 -1
- package/esm/components/Tooltip/Tooltip.mjs.map +1 -1
- package/esm/components/Tooltip/TooltipFloating/TooltipFloating.mjs.map +1 -1
- package/esm/components/Tooltip/TooltipGroup/TooltipGroup.mjs.map +1 -1
- package/esm/components/Transition/Transition.mjs.map +1 -1
- package/esm/components/Tree/FlatTreeNode.mjs.map +1 -1
- package/esm/components/Tree/Tree.mjs +2 -1
- package/esm/components/Tree/Tree.mjs.map +1 -1
- package/esm/components/Tree/TreeNode.mjs.map +1 -1
- package/esm/components/Tree/use-tree.mjs.map +1 -1
- package/esm/components/TreeSelect/TreeSelect.mjs +11 -9
- package/esm/components/TreeSelect/TreeSelect.mjs.map +1 -1
- package/esm/components/TreeSelect/TreeSelectOption.mjs.map +1 -1
- package/esm/components/Typography/Typography.mjs +12 -11
- package/esm/components/Typography/Typography.mjs.map +1 -1
- package/esm/components/Typography/Typography.module.mjs.map +1 -1
- package/esm/components/UnstyledButton/UnstyledButton.mjs +12 -11
- package/esm/components/UnstyledButton/UnstyledButton.mjs.map +1 -1
- package/esm/components/VisuallyHidden/VisuallyHidden.mjs +12 -11
- package/esm/components/VisuallyHidden/VisuallyHidden.mjs.map +1 -1
- package/esm/core/DirectionProvider/DirectionProvider.mjs +3 -2
- package/esm/core/DirectionProvider/DirectionProvider.mjs.map +1 -1
- package/esm/core/InlineStyles/InlineStyles.mjs.map +1 -1
- package/esm/core/MantineProvider/MantineCssVariables/MantineCssVariables.mjs +4 -2
- package/esm/core/MantineProvider/MantineCssVariables/MantineCssVariables.mjs.map +1 -1
- package/esm/core/MantineProvider/MantineProvider.mjs +3 -3
- package/esm/core/MantineProvider/MantineProvider.mjs.map +1 -1
- package/esm/core/MantineProvider/color-functions/get-contrast-color/get-contrast-color.mjs.map +1 -1
- package/esm/core/MantineProvider/merge-mantine-theme/merge-mantine-theme.mjs.map +1 -1
- package/esm/core/MantineProvider/use-mantine-color-scheme/use-mantine-color-scheme.mjs +2 -1
- package/esm/core/MantineProvider/use-mantine-color-scheme/use-mantine-color-scheme.mjs.map +1 -1
- package/esm/core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.mjs +0 -1
- package/esm/core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.mjs.map +1 -1
- package/esm/core/utils/deep-merge/deep-merge.mjs +4 -3
- package/esm/core/utils/deep-merge/deep-merge.mjs.map +1 -1
- package/esm/index.mjs +4 -1
- package/esm/utils/InlineInput/InlineInput.mjs.map +1 -1
- package/lib/components/Accordion/Accordion.d.ts +1 -1
- package/lib/components/Accordion/AccordionChevron.d.ts +1 -1
- package/lib/components/ActionBar/ActionBar.context.d.ts +8 -0
- package/lib/components/ActionBar/ActionBar.d.ts +44 -0
- package/lib/components/ActionBar/ActionBarCloseButton/ActionBarCloseButton.d.ts +22 -0
- package/lib/components/ActionBar/ActionBarDivider/ActionBarDivider.d.ts +16 -0
- package/lib/components/ActionBar/index.d.ts +17 -0
- package/lib/components/AppShell/AppShellMediaStyles/AppShellMediaStyles.d.ts +1 -1
- package/lib/components/Avatar/AvatarPlaceholderIcon.d.ts +1 -1
- package/lib/components/Cascader/CascaderColumns.d.ts +1 -1
- package/lib/components/Checkbox/CheckIcon.d.ts +2 -2
- package/lib/components/CloseButton/CloseIcon.d.ts +1 -1
- package/lib/components/ColorInput/EyeDropperIcon.d.ts +1 -1
- package/lib/components/ColorPicker/Saturation/Saturation.d.ts +1 -1
- package/lib/components/ColorPicker/Swatches/Swatches.d.ts +1 -1
- package/lib/components/ColorPicker/Thumb/Thumb.d.ts +1 -1
- package/lib/components/Combobox/Combobox.d.ts +1 -1
- package/lib/components/Combobox/ComboboxClearButton/ComboboxClearButton.d.ts +1 -1
- package/lib/components/Combobox/ComboboxHiddenInput/ComboboxHiddenInput.d.ts +1 -1
- package/lib/components/Combobox/OptionsDropdown/OptionsDropdown.d.ts +1 -1
- package/lib/components/CopyButton/CopyButton.d.ts +1 -1
- package/lib/components/Drawer/DrawerStack.d.ts +2 -1
- package/lib/components/FocusTrap/FocusTrap.d.ts +1 -1
- package/lib/components/Grid/GridCol/GridColVariables.d.ts +1 -1
- package/lib/components/Grid/GridVariables.d.ts +1 -1
- package/lib/components/HoverCard/HoverCard.d.ts +1 -1
- package/lib/components/HoverCard/HoverCardDropdown/HoverCardDropdown.d.ts +1 -1
- package/lib/components/HoverCard/HoverCardGroup/HoverCardGroup.d.ts +1 -1
- package/lib/components/HoverCard/HoverCardTarget/HoverCardTarget.d.ts +1 -1
- package/lib/components/Input/InputClearSection/InputClearSection.d.ts +1 -1
- package/lib/components/Input/index.d.ts +1 -1
- package/lib/components/Menu/Menu.d.ts +1 -1
- package/lib/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.d.ts +1 -1
- package/lib/components/Menu/MenuRadioGroup/MenuRadioGroup.d.ts +1 -1
- package/lib/components/Menu/MenuSelectableItem/MenuSelectableItem.d.ts +1 -1
- package/lib/components/Menu/MenuSub/MenuSub.d.ts +4 -2
- package/lib/components/Menu/MenuSubTarget/MenuSubTarget.d.ts +1 -1
- package/lib/components/Menu/MenuTarget/MenuTarget.d.ts +1 -1
- package/lib/components/Menubar/MenubarDropdown/MenubarDropdown.d.ts +1 -1
- package/lib/components/Menubar/MenubarMenu/MenubarMenu.d.ts +1 -1
- package/lib/components/Menubar/MenubarTarget/MenubarTarget.d.ts +1 -1
- package/lib/components/Modal/ModalStack.d.ts +2 -1
- package/lib/components/ModalBase/ModalBase.d.ts +2 -1
- package/lib/components/ModalBase/ModalBaseBody.d.ts +1 -1
- package/lib/components/ModalBase/ModalBaseCloseButton.d.ts +1 -1
- package/lib/components/ModalBase/ModalBaseContent.d.ts +1 -1
- package/lib/components/ModalBase/ModalBaseHeader.d.ts +1 -1
- package/lib/components/ModalBase/ModalBaseOverlay.d.ts +1 -1
- package/lib/components/ModalBase/ModalBaseTitle.d.ts +1 -1
- package/lib/components/ModalBase/NativeScrollArea.d.ts +1 -1
- package/lib/components/ModalBase/use-modal.d.ts +2 -1
- package/lib/components/NativeSelect/NativeSelectOption.d.ts +1 -1
- package/lib/components/NumberFormatter/NumberFormatter.d.ts +1 -1
- package/lib/components/NumberInput/NumberInputChevron.d.ts +1 -1
- package/lib/components/Pagination/Pagination.icons.d.ts +5 -5
- package/lib/components/Pagination/PaginationItems/PaginationItems.d.ts +1 -1
- package/lib/components/PasswordInput/PasswordToggleIcon.d.ts +1 -1
- package/lib/components/Popover/Popover.d.ts +2 -2
- package/lib/components/Progress/Progress.d.ts +1 -1
- package/lib/components/Radio/RadioIcon.d.ts +1 -1
- package/lib/components/Rating/RatingItem/RatingItem.d.ts +1 -1
- package/lib/components/Rating/StarSymbol/StarIcon.d.ts +1 -1
- package/lib/components/Rating/StarSymbol/StarSymbol.d.ts +1 -1
- package/lib/components/RingProgress/Curve/Curve.d.ts +1 -1
- package/lib/components/RollingNumber/DigitColumn.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaCorner/ScrollAreaCorner.d.ts +2 -2
- package/lib/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbar.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarAuto.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarHover.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarScroll.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollbarX.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaScrollbar/ScrollbarY.d.ts +1 -1
- package/lib/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.d.ts +2 -2
- package/lib/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.d.ts +1 -1
- package/lib/components/SimpleGrid/SimpleGridVariables.d.ts +2 -2
- package/lib/components/Slider/Marks/Marks.d.ts +1 -1
- package/lib/components/Slider/SliderRoot/SliderRoot.d.ts +1 -1
- package/lib/components/Slider/Thumb/Thumb.d.ts +1 -1
- package/lib/components/Slider/Track/Track.d.ts +1 -1
- package/lib/components/Splitter/GripIcon.d.ts +2 -2
- package/lib/components/Stepper/Stepper.context.d.ts +1 -0
- package/lib/components/Stepper/Stepper.d.ts +3 -1
- package/lib/components/Table/TableDataRenderer.d.ts +1 -1
- package/lib/components/Textarea/Autosize.d.ts +1 -1
- package/lib/components/Tooltip/TooltipGroup/TooltipGroup.d.ts +1 -1
- package/lib/components/Transition/Transition.d.ts +1 -1
- package/lib/components/Tree/FlatTreeNode.d.ts +1 -1
- package/lib/components/Tree/Tree.d.ts +1 -1
- package/lib/components/Tree/TreeNode.d.ts +1 -1
- package/lib/components/TreeSelect/TreeSelectOption.d.ts +1 -1
- package/lib/components/index.d.ts +1 -0
- package/lib/core/DirectionProvider/DirectionProvider.d.ts +1 -1
- package/lib/core/InlineStyles/InlineStyles.d.ts +1 -1
- package/lib/core/MantineProvider/ColorSchemeScript/ColorSchemeScript.d.ts +1 -1
- package/lib/core/MantineProvider/MantineClasses/MantineClasses.d.ts +1 -1
- package/lib/core/MantineProvider/MantineCssVariables/MantineCssVariables.d.ts +1 -1
- package/lib/core/MantineProvider/MantineProvider.d.ts +5 -5
- package/lib/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.d.ts +1 -1
- package/lib/utils/Floating/FloatingArrow/FloatingArrow.d.ts +1 -1
- package/lib/utils/InlineInput/InlineInput.d.ts +1 -1
- package/lib/utils/InputsGroupFieldset/InputsGroupFieldset.d.ts +1 -1
- package/package.json +5 -5
- package/styles/Accordion.css +4 -2
- package/styles/Accordion.layer.css +4 -2
- package/styles/ActionBar.css +13 -0
- package/styles/ActionBar.layer.css +14 -0
- package/styles/Stepper.css +30 -0
- package/styles/Stepper.layer.css +30 -0
- package/styles/Typography.css +59 -0
- package/styles/Typography.layer.css +59 -0
- package/styles.css +148 -43
- package/styles.layer.css +148 -43
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.mjs","names":["useId"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useClickOutside, useId } from '@mantine/hooks';\nimport {\n createVarsResolver,\n ElementProps,\n ExtendComponent,\n Factory,\n getDefaultZIndex,\n getRadius,\n getShadow,\n MantineRadius,\n MantineShadow,\n StylesApiProps,\n useDirection,\n useMantineEnv,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n ArrowPosition,\n FloatingAxesOffsets,\n FloatingPosition,\n FloatingStrategy,\n getFloatingPosition,\n} from '../../utils/Floating';\nimport { Overlay, OverlayProps } from '../Overlay';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { Transition, TransitionOverride } from '../Transition';\nimport { PopoverContextProvider, PopoverContextValue } from './Popover.context';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\nimport {\n PopoverContextMenu,\n PopoverContextMenuProps,\n} from './PopoverContextMenu/PopoverContextMenu';\nimport { PopoverDropdown, PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';\nimport { PopoverTarget, PopoverTargetProps } from './PopoverTarget/PopoverTarget';\nimport { usePopover } from './use-popover';\nimport classes from './Popover.module.css';\n\nexport type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';\nexport type PopoverCssVariables = {\n dropdown: '--popover-radius' | '--popover-shadow';\n};\n\nexport interface __PopoverProps {\n /** Dropdown position relative to the target element @default 'bottom' */\n position?: FloatingPosition;\n\n /** Offset of the dropdown element @default 8 */\n offset?: number | FloatingAxesOffsets;\n\n /** Called when dropdown position changes */\n onPositionChange?: (position: FloatingPosition) => void;\n\n /** Called when dropdown closes */\n onClose?: () => void;\n\n /** Called when the popover is dismissed by clicking outside or by pressing escape */\n onDismiss?: () => void;\n\n /** Called when dropdown opens */\n onOpen?: () => void;\n\n /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */\n keepMounted?: boolean;\n\n /**\n * Controls how the dropdown is hidden when `keepMounted` is set:\n * `'activity'` – hidden with React 19 `Activity` component,\n * `'display-none'` – hidden with `display: none` styles\n * @default 'activity'\n */\n keepMountedMode?: 'activity' | 'display-none';\n\n /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */\n transitionProps?: TransitionOverride;\n\n /** Called when exit transition ends */\n onExitTransitionEnd?: () => void;\n\n /** Called when enter transition ends */\n onEnterTransitionEnd?: () => void;\n\n /** Dropdown width, or `'target'` to make dropdown width the same as target element @default 'max-content' */\n width?: PopoverWidth;\n\n /** Floating ui middlewares to configure position handling @default { flip: true, shift: true, inline: false } */\n middlewares?: PopoverMiddlewares;\n\n /** Determines whether component should have an arrow @default false */\n withArrow?: boolean;\n\n /** Determines whether the overlay should be displayed when the dropdown is opened @default false */\n withOverlay?: boolean;\n\n /** Props passed down to `Overlay` component */\n overlayProps?: OverlayProps & ElementProps<'div'>;\n\n /** Arrow size in px @default 7 */\n arrowSize?: number;\n\n /** Arrow offset in px @default 5 */\n arrowOffset?: number;\n\n /** Arrow `border-radius` in px @default 0 */\n arrowRadius?: number;\n\n /** Arrow position */\n arrowPosition?: ArrowPosition;\n\n /** Determines whether dropdown should be rendered within the `Portal` @default true */\n withinPortal?: boolean;\n\n /** Props to pass down to the `Portal` when `withinPortal` is true */\n portalProps?: BasePortalProps;\n\n /** Dropdown `z-index` @default 300 */\n zIndex?: string | number;\n\n /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */\n shadow?: MantineShadow;\n\n /** If set, popover dropdown will not be rendered */\n disabled?: boolean;\n\n /** Determines whether focus should be automatically returned to control when dropdown closes @default false */\n returnFocus?: boolean;\n\n /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n floatingStrategy?: FloatingStrategy;\n\n /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */\n hideDetached?: boolean;\n\n /** If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. @default true */\n preventPositionChangeWhenVisible?: boolean;\n}\n\nexport interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {\n __staticSelector?: string;\n\n /** `Popover.Target` and `Popover.Dropdown` components */\n children?: React.ReactNode;\n\n /** Initial opened state for uncontrolled component */\n defaultOpened?: boolean;\n\n /** Controlled dropdown opened state */\n opened?: boolean;\n\n /** Called with current state when dropdown opens or closes */\n onChange?: (opened: boolean) => void;\n\n /** Determines whether dropdown should be closed on outside clicks @default true */\n closeOnClickOutside?: boolean;\n\n /** Events that trigger outside clicks */\n clickOutsideEvents?: string[];\n\n /** Determines whether focus should be trapped within dropdown @default false */\n trapFocus?: boolean;\n\n /** Determines whether dropdown should be closed when `Escape` key is pressed @default true */\n closeOnEscape?: boolean;\n\n /** Id base to create accessibility connections */\n id?: string;\n\n /** Determines whether dropdown and target elements should have accessible roles @default true */\n withRoles?: boolean;\n}\n\nexport type PopoverFactory = Factory<{\n props: PopoverProps;\n stylesNames: PopoverStylesNames;\n vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n position: 'bottom',\n offset: 8,\n transitionProps: { transition: 'fade', duration: 150 },\n middlewares: { flip: true, shift: true, inline: false },\n arrowSize: 7,\n arrowOffset: 5,\n arrowRadius: 0,\n arrowPosition: 'side',\n closeOnClickOutside: true,\n withinPortal: true,\n closeOnEscape: true,\n trapFocus: false,\n withRoles: true,\n returnFocus: false,\n withOverlay: false,\n hideDetached: true,\n preventPositionChangeWhenVisible: true,\n clickOutsideEvents: ['mousedown', 'touchstart'],\n zIndex: getDefaultZIndex('popover'),\n __staticSelector: 'Popover',\n width: 'max-content',\n} satisfies Partial<PopoverProps>;\n\nconst varsResolver = createVarsResolver<PopoverFactory>((_, { radius, shadow }) => ({\n dropdown: {\n '--popover-radius': radius === undefined ? undefined : getRadius(radius),\n '--popover-shadow': getShadow(shadow),\n },\n}));\n\nexport function Popover(_props: PopoverProps) {\n const props = useProps('Popover', defaultProps, _props);\n const {\n children,\n position,\n offset,\n onPositionChange,\n opened,\n transitionProps,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n width,\n middlewares,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n unstyled,\n classNames,\n styles,\n closeOnClickOutside,\n withinPortal,\n portalProps,\n closeOnEscape,\n clickOutsideEvents,\n trapFocus,\n onClose,\n onDismiss,\n onOpen,\n onChange,\n zIndex,\n radius,\n shadow,\n id,\n defaultOpened,\n __staticSelector,\n withRoles,\n disabled,\n returnFocus,\n variant,\n keepMounted,\n keepMountedMode,\n vars,\n floatingStrategy,\n withOverlay,\n overlayProps,\n hideDetached,\n attributes,\n preventPositionChangeWhenVisible,\n ...others\n } = props;\n\n const getStyles = useStyles<PopoverFactory>({\n name: __staticSelector,\n props,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'dropdown',\n vars,\n varsResolver,\n });\n\n const { resolvedStyles } = useResolvedStylesApi<PopoverFactory>({ classNames, styles, props });\n\n const arrowRef = useRef<HTMLDivElement | null>(null);\n const [targetNode, setTargetNode] = useState<HTMLElement | null>(null);\n const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);\n const { dir } = useDirection();\n const env = useMantineEnv();\n\n const uid = useId(id);\n const popover = usePopover({\n middlewares,\n width,\n position: getFloatingPosition(dir, position),\n offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n arrowRef,\n arrowOffset,\n onPositionChange,\n opened,\n defaultOpened,\n onChange,\n onOpen,\n onClose,\n onDismiss,\n strategy: floatingStrategy,\n disabled,\n preventPositionChangeWhenVisible,\n keepMounted,\n });\n\n useClickOutside(\n () => {\n if (closeOnClickOutside) {\n popover.onClose();\n onDismiss?.();\n }\n },\n clickOutsideEvents,\n [targetNode, dropdownNode]\n );\n\n const reference = useCallback(\n (node: HTMLElement) => {\n setTargetNode(node);\n popover.floating.refs.setReference(node);\n },\n [popover.floating.refs.setReference]\n );\n\n const floating = useCallback(\n (node: HTMLElement) => {\n setDropdownNode(node);\n popover.floating.refs.setFloating(node);\n },\n [popover.floating.refs.setFloating]\n );\n\n const onExited = useCallback(() => {\n transitionProps?.onExited?.();\n onExitTransitionEnd?.();\n popover.resetLockedPlacement();\n }, [transitionProps?.onExited, onExitTransitionEnd, popover.resetLockedPlacement]);\n\n const onEntered = useCallback(() => {\n transitionProps?.onEntered?.();\n onEnterTransitionEnd?.();\n }, [transitionProps?.onEntered, onEnterTransitionEnd]);\n\n return (\n <PopoverContextProvider\n value={{\n returnFocus,\n disabled,\n controlled: popover.controlled,\n reference,\n floating,\n x: popover.floating.x,\n y: popover.floating.y,\n arrowX: popover.floating?.middlewareData?.arrow?.x,\n arrowY: popover.floating?.middlewareData?.arrow?.y,\n opened: popover.opened,\n arrowRef,\n transitionProps: { ...transitionProps, onExited, onEntered },\n width,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n placement: popover.floating.placement,\n trapFocus,\n withinPortal,\n portalProps,\n zIndex,\n radius,\n shadow,\n closeOnEscape,\n onDismiss,\n onClose: popover.onClose,\n onToggle: popover.onToggle,\n getTargetId: () => uid,\n getDropdownId: () => `${uid}-dropdown`,\n withRoles,\n targetProps: others,\n __staticSelector,\n classNames,\n styles,\n unstyled,\n variant,\n keepMounted,\n keepMountedMode,\n getStyles,\n resolvedStyles,\n floatingStrategy,\n referenceHidden:\n hideDetached && env !== 'test'\n ? popover.floating.middlewareData.hide?.referenceHidden\n : false,\n }}\n >\n {children}\n {withOverlay && (\n <Transition\n transition=\"fade\"\n mounted={popover.opened}\n duration={transitionProps?.duration || 250}\n exitDuration={transitionProps?.exitDuration || 250}\n >\n {(transitionStyles) => (\n <OptionalPortal withinPortal={withinPortal}>\n <Overlay\n {...overlayProps}\n {...getStyles('overlay', {\n className: overlayProps?.className,\n style: [transitionStyles, overlayProps?.style],\n })}\n />\n </OptionalPortal>\n )}\n </Transition>\n )}\n </PopoverContextProvider>\n );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.ContextMenu = PopoverContextMenu;\nPopover.varsResolver = varsResolver;\nPopover.displayName = '@mantine/core/Popover';\nPopover.extend = (input: ExtendComponent<PopoverFactory>) => input;\nPopover.withProps = (fixedProps: Partial<PopoverProps>) => {\n const Extended = (props: PopoverProps) => <Popover {...fixedProps} {...props} />;\n Extended.extend = Popover.extend;\n Extended.displayName = `WithProps(${Popover.displayName})`;\n return Extended;\n};\n\nexport namespace Popover {\n export type Props = PopoverProps;\n export type __Props = __PopoverProps;\n export type Factory = PopoverFactory;\n export type StylesNames = PopoverStylesNames;\n export type TargetProps = PopoverTargetProps;\n export type DropdownProps = PopoverDropdownProps;\n export type Width = PopoverWidth;\n export type ContextValue = PopoverContextValue;\n\n export namespace Target {\n export type Props = PopoverTargetProps;\n }\n\n export namespace Dropdown {\n export type Props = PopoverDropdownProps;\n }\n\n export namespace ContextMenu {\n export type Props = PopoverContextMenuProps;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popover.mjs","names":["useId"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useClickOutside, useId } from '@mantine/hooks';\nimport {\n createVarsResolver,\n ElementProps,\n ExtendComponent,\n Factory,\n getDefaultZIndex,\n getRadius,\n getShadow,\n MantineRadius,\n MantineShadow,\n StylesApiProps,\n useDirection,\n useMantineEnv,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n ArrowPosition,\n FloatingAxesOffsets,\n FloatingPosition,\n FloatingStrategy,\n getFloatingPosition,\n} from '../../utils/Floating';\nimport { Overlay, OverlayProps } from '../Overlay';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { Transition, TransitionOverride } from '../Transition';\nimport { PopoverContextProvider, PopoverContextValue } from './Popover.context';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\nimport {\n PopoverContextMenu,\n PopoverContextMenuProps,\n} from './PopoverContextMenu/PopoverContextMenu';\nimport { PopoverDropdown, PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';\nimport { PopoverTarget, PopoverTargetProps } from './PopoverTarget/PopoverTarget';\nimport { usePopover } from './use-popover';\nimport classes from './Popover.module.css';\n\nexport type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';\nexport type PopoverCssVariables = {\n dropdown: '--popover-radius' | '--popover-shadow';\n};\n\nexport interface __PopoverProps {\n /** Dropdown position relative to the target element @default 'bottom' */\n position?: FloatingPosition;\n\n /** Offset of the dropdown element @default 8 */\n offset?: number | FloatingAxesOffsets;\n\n /** Called when dropdown position changes */\n onPositionChange?: (position: FloatingPosition) => void;\n\n /** Called when dropdown closes */\n onClose?: () => void;\n\n /** Called when the popover is dismissed by clicking outside or by pressing escape */\n onDismiss?: () => void;\n\n /** Called when dropdown opens */\n onOpen?: () => void;\n\n /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */\n keepMounted?: boolean;\n\n /**\n * Controls how the dropdown is hidden when `keepMounted` is set:\n * `'activity'` – hidden with React 19 `Activity` component,\n * `'display-none'` – hidden with `display: none` styles\n * @default 'activity'\n */\n keepMountedMode?: 'activity' | 'display-none';\n\n /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */\n transitionProps?: TransitionOverride;\n\n /** Called when exit transition ends */\n onExitTransitionEnd?: () => void;\n\n /** Called when enter transition ends */\n onEnterTransitionEnd?: () => void;\n\n /** Dropdown width, or `'target'` to make dropdown width the same as target element @default 'max-content' */\n width?: PopoverWidth;\n\n /** Floating ui middlewares to configure position handling @default { flip: true, shift: true, inline: false } */\n middlewares?: PopoverMiddlewares;\n\n /** Determines whether component should have an arrow @default false */\n withArrow?: boolean;\n\n /** Determines whether the overlay should be displayed when the dropdown is opened @default false */\n withOverlay?: boolean;\n\n /** Props passed down to `Overlay` component */\n overlayProps?: OverlayProps & ElementProps<'div'>;\n\n /** Arrow size in px @default 7 */\n arrowSize?: number;\n\n /** Arrow offset in px @default 5 */\n arrowOffset?: number;\n\n /** Arrow `border-radius` in px @default 0 */\n arrowRadius?: number;\n\n /** Arrow position */\n arrowPosition?: ArrowPosition;\n\n /** Determines whether dropdown should be rendered within the `Portal` @default true */\n withinPortal?: boolean;\n\n /** Props to pass down to the `Portal` when `withinPortal` is true */\n portalProps?: BasePortalProps;\n\n /** Dropdown `z-index` @default 300 */\n zIndex?: string | number;\n\n /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */\n shadow?: MantineShadow;\n\n /** If set, popover dropdown will not be rendered */\n disabled?: boolean;\n\n /** Determines whether focus should be automatically returned to control when dropdown closes @default false */\n returnFocus?: boolean;\n\n /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n floatingStrategy?: FloatingStrategy;\n\n /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */\n hideDetached?: boolean;\n\n /** If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. @default true */\n preventPositionChangeWhenVisible?: boolean;\n}\n\nexport interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {\n __staticSelector?: string;\n\n /** `Popover.Target` and `Popover.Dropdown` components */\n children?: React.ReactNode;\n\n /** Initial opened state for uncontrolled component */\n defaultOpened?: boolean;\n\n /** Controlled dropdown opened state */\n opened?: boolean;\n\n /** Called with current state when dropdown opens or closes */\n onChange?: (opened: boolean) => void;\n\n /** Determines whether dropdown should be closed on outside clicks @default true */\n closeOnClickOutside?: boolean;\n\n /** Events that trigger outside clicks */\n clickOutsideEvents?: string[];\n\n /** Determines whether focus should be trapped within dropdown @default false */\n trapFocus?: boolean;\n\n /** Determines whether dropdown should be closed when `Escape` key is pressed @default true */\n closeOnEscape?: boolean;\n\n /** Id base to create accessibility connections */\n id?: string;\n\n /** Determines whether dropdown and target elements should have accessible roles @default true */\n withRoles?: boolean;\n}\n\nexport type PopoverFactory = Factory<{\n props: PopoverProps;\n stylesNames: PopoverStylesNames;\n vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n position: 'bottom',\n offset: 8,\n transitionProps: { transition: 'fade', duration: 150 },\n middlewares: { flip: true, shift: true, inline: false },\n arrowSize: 7,\n arrowOffset: 5,\n arrowRadius: 0,\n arrowPosition: 'side',\n closeOnClickOutside: true,\n withinPortal: true,\n closeOnEscape: true,\n trapFocus: false,\n withRoles: true,\n returnFocus: false,\n withOverlay: false,\n hideDetached: true,\n preventPositionChangeWhenVisible: true,\n clickOutsideEvents: ['mousedown', 'touchstart'],\n zIndex: getDefaultZIndex('popover'),\n __staticSelector: 'Popover',\n width: 'max-content',\n} satisfies Partial<PopoverProps>;\n\nconst varsResolver = createVarsResolver<PopoverFactory>((_, { radius, shadow }) => ({\n dropdown: {\n '--popover-radius': radius === undefined ? undefined : getRadius(radius),\n '--popover-shadow': getShadow(shadow),\n },\n}));\n\nexport function Popover(_props: PopoverProps) {\n const props = useProps('Popover', defaultProps, _props);\n const {\n children,\n position,\n offset,\n onPositionChange,\n opened,\n transitionProps,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n width,\n middlewares,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n unstyled,\n classNames,\n styles,\n closeOnClickOutside,\n withinPortal,\n portalProps,\n closeOnEscape,\n clickOutsideEvents,\n trapFocus,\n onClose,\n onDismiss,\n onOpen,\n onChange,\n zIndex,\n radius,\n shadow,\n id,\n defaultOpened,\n __staticSelector,\n withRoles,\n disabled,\n returnFocus,\n variant,\n keepMounted,\n keepMountedMode,\n vars,\n floatingStrategy,\n withOverlay,\n overlayProps,\n hideDetached,\n attributes,\n preventPositionChangeWhenVisible,\n ...others\n } = props;\n\n const getStyles = useStyles<PopoverFactory>({\n name: __staticSelector,\n props,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'dropdown',\n vars,\n varsResolver,\n });\n\n const { resolvedStyles } = useResolvedStylesApi<PopoverFactory>({ classNames, styles, props });\n\n const arrowRef = useRef<HTMLDivElement | null>(null);\n const [targetNode, setTargetNode] = useState<HTMLElement | null>(null);\n const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);\n const { dir } = useDirection();\n const env = useMantineEnv();\n\n const uid = useId(id);\n const popover = usePopover({\n middlewares,\n width,\n position: getFloatingPosition(dir, position),\n offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n arrowRef,\n arrowOffset,\n onPositionChange,\n opened,\n defaultOpened,\n onChange,\n onOpen,\n onClose,\n onDismiss,\n strategy: floatingStrategy,\n disabled,\n preventPositionChangeWhenVisible,\n keepMounted,\n });\n\n useClickOutside(\n () => {\n if (closeOnClickOutside) {\n popover.onClose();\n onDismiss?.();\n }\n },\n clickOutsideEvents,\n [targetNode, dropdownNode]\n );\n\n const reference = useCallback(\n (node: HTMLElement) => {\n setTargetNode(node);\n popover.floating.refs.setReference(node);\n },\n [popover.floating.refs.setReference]\n );\n\n const floating = useCallback(\n (node: HTMLElement) => {\n setDropdownNode(node);\n popover.floating.refs.setFloating(node);\n },\n [popover.floating.refs.setFloating]\n );\n\n const onExited = useCallback(() => {\n transitionProps?.onExited?.();\n onExitTransitionEnd?.();\n popover.resetLockedPlacement();\n }, [transitionProps?.onExited, onExitTransitionEnd, popover.resetLockedPlacement]);\n\n const onEntered = useCallback(() => {\n transitionProps?.onEntered?.();\n onEnterTransitionEnd?.();\n }, [transitionProps?.onEntered, onEnterTransitionEnd]);\n\n return (\n <PopoverContextProvider\n value={{\n returnFocus,\n disabled,\n controlled: popover.controlled,\n reference,\n floating,\n x: popover.floating.x,\n y: popover.floating.y,\n arrowX: popover.floating?.middlewareData?.arrow?.x,\n arrowY: popover.floating?.middlewareData?.arrow?.y,\n opened: popover.opened,\n arrowRef,\n transitionProps: { ...transitionProps, onExited, onEntered },\n width,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n placement: popover.floating.placement,\n trapFocus,\n withinPortal,\n portalProps,\n zIndex,\n radius,\n shadow,\n closeOnEscape,\n onDismiss,\n onClose: popover.onClose,\n onToggle: popover.onToggle,\n getTargetId: () => uid,\n getDropdownId: () => `${uid}-dropdown`,\n withRoles,\n targetProps: others,\n __staticSelector,\n classNames,\n styles,\n unstyled,\n variant,\n keepMounted,\n keepMountedMode,\n getStyles,\n resolvedStyles,\n floatingStrategy,\n referenceHidden:\n hideDetached && env !== 'test'\n ? popover.floating.middlewareData.hide?.referenceHidden\n : false,\n }}\n >\n {children}\n {withOverlay && (\n <Transition\n transition=\"fade\"\n mounted={popover.opened}\n duration={transitionProps?.duration || 250}\n exitDuration={transitionProps?.exitDuration || 250}\n >\n {(transitionStyles) => (\n <OptionalPortal withinPortal={withinPortal}>\n <Overlay\n {...overlayProps}\n {...getStyles('overlay', {\n className: overlayProps?.className,\n style: [transitionStyles, overlayProps?.style],\n })}\n />\n </OptionalPortal>\n )}\n </Transition>\n )}\n </PopoverContextProvider>\n );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.ContextMenu = PopoverContextMenu;\nPopover.varsResolver = varsResolver;\nPopover.displayName = '@mantine/core/Popover';\nPopover.extend = (input: ExtendComponent<PopoverFactory>) => input;\nPopover.withProps = (fixedProps: Partial<PopoverProps>) => {\n const Extended = (props: PopoverProps) => <Popover {...fixedProps} {...props} />;\n Extended.extend = Popover.extend;\n Extended.displayName = `WithProps(${Popover.displayName})`;\n return Extended;\n};\n\nexport namespace Popover {\n export type Props = PopoverProps;\n export type __Props = __PopoverProps;\n export type Factory = PopoverFactory;\n export type StylesNames = PopoverStylesNames;\n export type TargetProps = PopoverTargetProps;\n export type DropdownProps = PopoverDropdownProps;\n export type Width = PopoverWidth;\n export type ContextValue = PopoverContextValue;\n\n export namespace Target {\n export type Props = PopoverTargetProps;\n }\n\n export namespace Dropdown {\n export type Props = PopoverDropdownProps;\n }\n\n export namespace ContextMenu {\n export type Props = PopoverContextMenuProps;\n }\n}\n"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ function PopoverContextMenu(props) {
|
|
|
10
10
|
const child = getSingleElementChild(children);
|
|
11
11
|
if (!child) throw new Error("Popover.ContextMenu component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
|
|
12
12
|
const ctx = usePopoverContext();
|
|
13
|
-
|
|
13
|
+
const handlers = useContextMenuHandlers({
|
|
14
14
|
childProps: child.props,
|
|
15
15
|
disabled: disabled || ctx.disabled,
|
|
16
16
|
opened: ctx.opened,
|
|
@@ -19,7 +19,8 @@ function PopoverContextMenu(props) {
|
|
|
19
19
|
open: () => {
|
|
20
20
|
if (!ctx.opened) ctx.onToggle();
|
|
21
21
|
}
|
|
22
|
-
})
|
|
22
|
+
});
|
|
23
|
+
return cloneElement(child, handlers);
|
|
23
24
|
}
|
|
24
25
|
PopoverContextMenu.displayName = "@mantine/core/PopoverContextMenu";
|
|
25
26
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverContextMenu.mjs","names":[],"sources":["../../../../src/components/Popover/PopoverContextMenu/PopoverContextMenu.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { getSingleElementChild, useProps } from '../../../core';\nimport { useContextMenuHandlers } from '../../../utils/Floating/use-context-menu-handlers';\nimport { usePopoverContext } from '../Popover.context';\n\nexport interface PopoverContextMenuProps {\n /** Element that opens the popover when right-clicked. Dropdown is positioned at the cursor. The trigger element must not call `event.preventDefault()` in its own `onContextMenu` handler, otherwise the native context menu is not suppressed. */\n children: React.ReactNode;\n\n /** If set, the right-click trigger is disabled and the browser's default context menu is shown */\n disabled?: boolean;\n\n /** Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default */\n longPressDelay?: number;\n}\n\nexport function PopoverContextMenu(props: PopoverContextMenuProps) {\n const { children, disabled, longPressDelay } = useProps('PopoverContextMenu', null, props);\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Popover.ContextMenu component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const ctx = usePopoverContext();\n\n const handlers = useContextMenuHandlers({\n childProps: child.props as any,\n disabled: disabled || ctx.disabled,\n opened: ctx.opened,\n longPressDelay,\n setReference: ctx.reference as unknown as (node: object) => void,\n open: () => {\n if (!ctx.opened) {\n ctx.onToggle();\n }\n },\n });\n\n return cloneElement(child, handlers as any);\n}\n\nPopoverContextMenu.displayName = '@mantine/core/PopoverContextMenu';\n"],"mappings":";;;;;;;AAgBA,SAAgB,mBAAmB,OAAgC;CACjE,MAAM,EAAE,UAAU,UAAU,mBAAmB,SAAS,sBAAsB,MAAM,KAAK;CAEzF,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,uKACF;CAGF,MAAM,MAAM,kBAAkB;
|
|
1
|
+
{"version":3,"file":"PopoverContextMenu.mjs","names":[],"sources":["../../../../src/components/Popover/PopoverContextMenu/PopoverContextMenu.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { getSingleElementChild, useProps } from '../../../core';\nimport { useContextMenuHandlers } from '../../../utils/Floating/use-context-menu-handlers';\nimport { usePopoverContext } from '../Popover.context';\n\nexport interface PopoverContextMenuProps {\n /** Element that opens the popover when right-clicked. Dropdown is positioned at the cursor. The trigger element must not call `event.preventDefault()` in its own `onContextMenu` handler, otherwise the native context menu is not suppressed. */\n children: React.ReactNode;\n\n /** If set, the right-click trigger is disabled and the browser's default context menu is shown */\n disabled?: boolean;\n\n /** Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default */\n longPressDelay?: number;\n}\n\nexport function PopoverContextMenu(props: PopoverContextMenuProps) {\n const { children, disabled, longPressDelay } = useProps('PopoverContextMenu', null, props);\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Popover.ContextMenu component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const ctx = usePopoverContext();\n\n const handlers = useContextMenuHandlers({\n childProps: child.props as any,\n disabled: disabled || ctx.disabled,\n opened: ctx.opened,\n longPressDelay,\n setReference: ctx.reference as unknown as (node: object) => void,\n open: () => {\n if (!ctx.opened) {\n ctx.onToggle();\n }\n },\n });\n\n return cloneElement(child, handlers as any);\n}\n\nPopoverContextMenu.displayName = '@mantine/core/PopoverContextMenu';\n"],"mappings":";;;;;;;AAgBA,SAAgB,mBAAmB,OAAgC;CACjE,MAAM,EAAE,UAAU,UAAU,mBAAmB,SAAS,sBAAsB,MAAM,KAAK;CAEzF,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,uKACF;CAGF,MAAM,MAAM,kBAAkB;CAE9B,MAAM,WAAW,uBAAuB;EACtC,YAAY,MAAM;EAClB,UAAU,YAAY,IAAI;EAC1B,QAAQ,IAAI;EACZ;EACA,cAAc,IAAI;EAClB,YAAY;GACV,IAAI,CAAC,IAAI,QACP,IAAI,SAAS;EAEjB;CACF,CAAC;CAED,OAAO,aAAa,OAAO,QAAe;AAC5C;AAEA,mBAAmB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import { useFocusReturn, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n closeOnEscape,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n rem,\n useDirection,\n useProps,\n} from '../../../core';\nimport { FloatingArrow, getArrowMergeDropdownStyles } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { Transition } from '../../Transition';\nimport type { PopoverStylesNames } from '../Popover';\nimport { usePopoverContext } from '../Popover.context';\nimport classes from '../Popover.module.css';\n\nexport interface PopoverDropdownProps\n extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {}\n\nexport type PopoverDropdownFactory = Factory<{\n props: PopoverDropdownProps;\n ref: HTMLDivElement;\n stylesNames: PopoverStylesNames;\n compound: true;\n}>;\n\nexport const PopoverDropdown = factory<PopoverDropdownFactory>((_props) => {\n const props = useProps('PopoverDropdown', null, _props);\n const {\n className,\n style,\n vars,\n children,\n onKeyDownCapture,\n variant,\n classNames,\n styles,\n ref,\n ...others\n } = props;\n\n const ctx = usePopoverContext();\n const { dir } = useDirection();\n\n const mergeStyles =\n ctx.arrowPosition === 'merge' && ctx.withArrow\n ? getArrowMergeDropdownStyles({ position: ctx.placement, dir })\n : undefined;\n\n const returnFocus = useFocusReturn({\n opened: ctx.opened,\n shouldReturnFocus: ctx.returnFocus,\n });\n\n const accessibleProps = ctx.withRoles\n ? {\n 'aria-labelledby': ctx.getTargetId(),\n id: ctx.getDropdownId(),\n role: 'dialog',\n tabIndex: -1,\n }\n : {};\n\n const mergedRef = useMergedRef(ref, ctx.floating);\n\n if (ctx.disabled) {\n return null;\n }\n\n return (\n <OptionalPortal {...ctx.portalProps} withinPortal={ctx.withinPortal}>\n <Transition\n mounted={ctx.opened}\n {...ctx.transitionProps}\n transition={ctx.transitionProps?.transition || 'fade'}\n duration={ctx.transitionProps?.duration ?? 150}\n keepMounted={ctx.keepMounted}\n keepMountedMode={ctx.keepMountedMode}\n exitDuration={\n typeof ctx.transitionProps?.exitDuration === 'number'\n ? ctx.transitionProps.exitDuration\n : ctx.transitionProps?.duration\n }\n >\n {(transitionStyles) => (\n <FocusTrap active={ctx.trapFocus && ctx.opened} innerRef={mergedRef}>\n <Box\n {...accessibleProps}\n {...others}\n variant={variant}\n onKeyDownCapture={closeOnEscape(\n () => {\n ctx.onClose?.();\n ctx.onDismiss?.();\n },\n {\n active: ctx.closeOnEscape,\n onTrigger: returnFocus,\n onKeyDown: onKeyDownCapture,\n }\n )}\n data-position={ctx.placement}\n data-fixed={ctx.floatingStrategy === 'fixed' || undefined}\n {...ctx.getStyles('dropdown', {\n className,\n props,\n classNames,\n styles,\n style: [\n {\n ...transitionStyles,\n ...mergeStyles,\n zIndex: ctx.zIndex as React.CSSProperties['zIndex'],\n top: ctx.y ?? 0,\n left: ctx.x ?? 0,\n width: ctx.width === 'target' ? undefined : rem(ctx.width),\n ...(ctx.referenceHidden ? { display: 'none' } : null),\n },\n ctx.resolvedStyles?.dropdown,\n styles?.dropdown,\n style,\n ],\n })}\n >\n {children}\n\n <FloatingArrow\n ref={ctx.arrowRef}\n arrowX={ctx.arrowX}\n arrowY={ctx.arrowY}\n visible={ctx.withArrow}\n position={ctx.placement}\n arrowSize={ctx.arrowSize}\n arrowRadius={ctx.arrowRadius}\n arrowOffset={ctx.arrowOffset}\n arrowPosition={ctx.arrowPosition}\n {...ctx.getStyles('arrow', {\n props,\n classNames,\n styles,\n })}\n />\n </Box>\n </FocusTrap>\n )}\n </Transition>\n </OptionalPortal>\n );\n});\n\nPopoverDropdown.classes = classes;\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,MAAa,kBAAkB,SAAiC,WAAW;CACzE,MAAM,QAAQ,SAAS,mBAAmB,MAAM,MAAM;CACtD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAM,kBAAkB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAE7B,MAAM,cACJ,IAAI,kBAAkB,WAAW,IAAI,YACjC,4BAA4B;EAAE,UAAU,IAAI;EAAW;CAAI,CAAC,IAC5D,KAAA;CAEN,MAAM,cAAc,eAAe;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;CACzB,CAAC;CAED,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,YAAY;EACnC,IAAI,IAAI,cAAc;EACtB,MAAM;EACN,UAAU;CACZ,IACA,CAAC;CAEL,MAAM,YAAY,aAAa,KAAK,IAAI,QAAQ;CAEhD,IAAI,IAAI,UACN,OAAO;CAGT,OACE,oBAAC,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;
|
|
1
|
+
{"version":3,"file":"PopoverDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import { useFocusReturn, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n closeOnEscape,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n rem,\n useDirection,\n useProps,\n} from '../../../core';\nimport { FloatingArrow, getArrowMergeDropdownStyles } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { Transition } from '../../Transition';\nimport type { PopoverStylesNames } from '../Popover';\nimport { usePopoverContext } from '../Popover.context';\nimport classes from '../Popover.module.css';\n\nexport interface PopoverDropdownProps\n extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {}\n\nexport type PopoverDropdownFactory = Factory<{\n props: PopoverDropdownProps;\n ref: HTMLDivElement;\n stylesNames: PopoverStylesNames;\n compound: true;\n}>;\n\nexport const PopoverDropdown = factory<PopoverDropdownFactory>((_props) => {\n const props = useProps('PopoverDropdown', null, _props);\n const {\n className,\n style,\n vars,\n children,\n onKeyDownCapture,\n variant,\n classNames,\n styles,\n ref,\n ...others\n } = props;\n\n const ctx = usePopoverContext();\n const { dir } = useDirection();\n\n const mergeStyles =\n ctx.arrowPosition === 'merge' && ctx.withArrow\n ? getArrowMergeDropdownStyles({ position: ctx.placement, dir })\n : undefined;\n\n const returnFocus = useFocusReturn({\n opened: ctx.opened,\n shouldReturnFocus: ctx.returnFocus,\n });\n\n const accessibleProps = ctx.withRoles\n ? {\n 'aria-labelledby': ctx.getTargetId(),\n id: ctx.getDropdownId(),\n role: 'dialog',\n tabIndex: -1,\n }\n : {};\n\n const mergedRef = useMergedRef(ref, ctx.floating);\n\n if (ctx.disabled) {\n return null;\n }\n\n return (\n <OptionalPortal {...ctx.portalProps} withinPortal={ctx.withinPortal}>\n <Transition\n mounted={ctx.opened}\n {...ctx.transitionProps}\n transition={ctx.transitionProps?.transition || 'fade'}\n duration={ctx.transitionProps?.duration ?? 150}\n keepMounted={ctx.keepMounted}\n keepMountedMode={ctx.keepMountedMode}\n exitDuration={\n typeof ctx.transitionProps?.exitDuration === 'number'\n ? ctx.transitionProps.exitDuration\n : ctx.transitionProps?.duration\n }\n >\n {(transitionStyles) => (\n <FocusTrap active={ctx.trapFocus && ctx.opened} innerRef={mergedRef}>\n <Box\n {...accessibleProps}\n {...others}\n variant={variant}\n onKeyDownCapture={closeOnEscape(\n () => {\n ctx.onClose?.();\n ctx.onDismiss?.();\n },\n {\n active: ctx.closeOnEscape,\n onTrigger: returnFocus,\n onKeyDown: onKeyDownCapture,\n }\n )}\n data-position={ctx.placement}\n data-fixed={ctx.floatingStrategy === 'fixed' || undefined}\n {...ctx.getStyles('dropdown', {\n className,\n props,\n classNames,\n styles,\n style: [\n {\n ...transitionStyles,\n ...mergeStyles,\n zIndex: ctx.zIndex as React.CSSProperties['zIndex'],\n top: ctx.y ?? 0,\n left: ctx.x ?? 0,\n width: ctx.width === 'target' ? undefined : rem(ctx.width),\n ...(ctx.referenceHidden ? { display: 'none' } : null),\n },\n ctx.resolvedStyles?.dropdown,\n styles?.dropdown,\n style,\n ],\n })}\n >\n {children}\n\n <FloatingArrow\n ref={ctx.arrowRef}\n arrowX={ctx.arrowX}\n arrowY={ctx.arrowY}\n visible={ctx.withArrow}\n position={ctx.placement}\n arrowSize={ctx.arrowSize}\n arrowRadius={ctx.arrowRadius}\n arrowOffset={ctx.arrowOffset}\n arrowPosition={ctx.arrowPosition}\n {...ctx.getStyles('arrow', {\n props,\n classNames,\n styles,\n })}\n />\n </Box>\n </FocusTrap>\n )}\n </Transition>\n </OptionalPortal>\n );\n});\n\nPopoverDropdown.classes = classes;\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,MAAa,kBAAkB,SAAiC,WAAW;CACzE,MAAM,QAAQ,SAAS,mBAAmB,MAAM,MAAM;CACtD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAM,kBAAkB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAE7B,MAAM,cACJ,IAAI,kBAAkB,WAAW,IAAI,YACjC,4BAA4B;EAAE,UAAU,IAAI;EAAW;CAAI,CAAC,IAC5D,KAAA;CAEN,MAAM,cAAc,eAAe;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;CACzB,CAAC;CAED,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,YAAY;EACnC,IAAI,IAAI,cAAc;EACtB,MAAM;EACN,UAAU;CACZ,IACA,CAAC;CAEL,MAAM,YAAY,aAAa,KAAK,IAAI,QAAQ;CAEhD,IAAI,IAAI,UACN,OAAO;CAGT,OACE,oBAAC,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;EACrD,UAAA,oBAAC,YAAD;GACE,SAAS,IAAI;GACb,GAAI,IAAI;GACR,YAAY,IAAI,iBAAiB,cAAc;GAC/C,UAAU,IAAI,iBAAiB,YAAY;GAC3C,aAAa,IAAI;GACjB,iBAAiB,IAAI;GACrB,cACE,OAAO,IAAI,iBAAiB,iBAAiB,WACzC,IAAI,gBAAgB,eACpB,IAAI,iBAAiB;GAGzB,WAAA,qBACA,oBAAC,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;IACxD,UAAA,qBAAC,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkB,oBACV;MACJ,IAAI,UAAU;MACd,IAAI,YAAY;KAClB,GACA;MACE,QAAQ,IAAI;MACZ,WAAW;MACX,WAAW;KACb,CACF;KACA,iBAAe,IAAI;KACnB,cAAY,IAAI,qBAAqB,WAAW,KAAA;KAChD,GAAI,IAAI,UAAU,YAAY;MAC5B;MACA;MACA;MACA;MACA,OAAO;OACL;QACE,GAAG;QACH,GAAG;QACH,QAAQ,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,MAAM,IAAI,KAAK;QACf,OAAO,IAAI,UAAU,WAAW,KAAA,IAAY,IAAI,IAAI,KAAK;QACzD,GAAI,IAAI,kBAAkB,EAAE,SAAS,OAAO,IAAI;OAClD;OACA,IAAI,gBAAgB;OACpB,QAAQ;OACR;MACF;KACF,CAAC;KApCH,UAAA,CAsCG,UAED,oBAAC,eAAD;MACE,KAAK,IAAI;MACT,QAAQ,IAAI;MACZ,QAAQ,IAAI;MACZ,SAAS,IAAI;MACb,UAAU,IAAI;MACd,WAAW,IAAI;MACf,aAAa,IAAI;MACjB,aAAa,IAAI;MACjB,eAAe,IAAI;MACnB,GAAI,IAAI,UAAU,SAAS;OACzB;OACA;OACA;MACF,CAAC;KACF,CAAA,CACE;;GACI,CAAA;EAEH,CAAA;CACE,CAAA;AAEpB,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}
|
|
@@ -45,16 +45,18 @@ function getPopoverMiddlewares(options, getFloating, disableFlip, lockEnabled) {
|
|
|
45
45
|
...typeof middlewaresOptions.size === "boolean" ? {} : middlewaresOptions.size,
|
|
46
46
|
apply({ rects, availableWidth, availableHeight, ...rest }) {
|
|
47
47
|
const styles = getFloating().refs.floating.current?.style ?? {};
|
|
48
|
-
if (middlewaresOptions.size)
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
48
|
+
if (middlewaresOptions.size) {
|
|
49
|
+
if (typeof middlewaresOptions.size === "object" && !!middlewaresOptions.size.apply) middlewaresOptions.size.apply({
|
|
50
|
+
rects,
|
|
51
|
+
availableWidth,
|
|
52
|
+
availableHeight,
|
|
53
|
+
...rest
|
|
54
|
+
});
|
|
55
|
+
else Object.assign(styles, {
|
|
56
|
+
maxWidth: `${availableWidth}px`,
|
|
57
|
+
maxHeight: `${availableHeight}px`
|
|
58
|
+
});
|
|
59
|
+
}
|
|
58
60
|
if (options.width === "target") Object.assign(styles, { width: `${rects.reference.width}px` });
|
|
59
61
|
}
|
|
60
62
|
}));
|
|
@@ -68,6 +70,7 @@ function usePopover(options) {
|
|
|
68
70
|
onChange: options.onChange
|
|
69
71
|
});
|
|
70
72
|
const previouslyOpened = useRef(_opened);
|
|
73
|
+
const measuredAfterShowRef = useRef(false);
|
|
71
74
|
const [lockedPlacement, setLockedPlacement] = useState(null);
|
|
72
75
|
const lockEnabled = options.preventPositionChangeWhenVisible !== false;
|
|
73
76
|
const wasOpenedRef = useRef(_opened);
|
|
@@ -75,6 +78,12 @@ function usePopover(options) {
|
|
|
75
78
|
wasOpenedRef.current = _opened;
|
|
76
79
|
if (_opened && lockedPlacement !== null) setLockedPlacement(null);
|
|
77
80
|
}
|
|
81
|
+
const previousPositionRef = useRef(options.position);
|
|
82
|
+
if (options.position !== previousPositionRef.current) {
|
|
83
|
+
previousPositionRef.current = options.position;
|
|
84
|
+
measuredAfterShowRef.current = false;
|
|
85
|
+
if (lockedPlacement !== null) setLockedPlacement(null);
|
|
86
|
+
}
|
|
78
87
|
const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);
|
|
79
88
|
const onClose = () => {
|
|
80
89
|
if (_opened && !options.disabled) setOpened(false);
|
|
@@ -101,7 +110,6 @@ function usePopover(options) {
|
|
|
101
110
|
floating.elements.reference,
|
|
102
111
|
floating.elements.floating
|
|
103
112
|
]);
|
|
104
|
-
const measuredAfterShowRef = useRef(false);
|
|
105
113
|
useIsomorphicEffect(() => {
|
|
106
114
|
if (!_opened) {
|
|
107
115
|
measuredAfterShowRef.current = false;
|
|
@@ -132,8 +140,10 @@ function usePopover(options) {
|
|
|
132
140
|
}
|
|
133
141
|
}, [floating.placement]);
|
|
134
142
|
useDidUpdate(() => {
|
|
135
|
-
if (_opened !== previouslyOpened.current)
|
|
136
|
-
|
|
143
|
+
if (_opened !== previouslyOpened.current) {
|
|
144
|
+
if (!_opened) options.onClose?.();
|
|
145
|
+
else options.onOpen?.();
|
|
146
|
+
}
|
|
137
147
|
previouslyOpened.current = _opened;
|
|
138
148
|
}, [
|
|
139
149
|
_opened,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover.mjs","names":[],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n hide,\n inline,\n limitShift,\n Middleware,\n offset,\n shift,\n size,\n useFloating,\n UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n offset: number | FloatingAxesOffsets;\n position: FloatingPosition;\n onPositionChange?: (position: FloatingPosition) => void;\n opened: boolean | undefined;\n defaultOpened: boolean | undefined;\n onChange?: (opened: boolean) => void;\n onClose?: () => void;\n onDismiss?: () => void;\n onOpen?: () => void;\n width: PopoverWidth;\n middlewares: PopoverMiddlewares | undefined;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n arrowOffset: number;\n strategy?: FloatingStrategy;\n disabled: boolean | undefined;\n preventPositionChangeWhenVisible: boolean | undefined;\n keepMounted: boolean | undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares | undefined): PopoverMiddlewares {\n if (middlewares === undefined) {\n return { shift: true, flip: true };\n }\n\n const result = { ...middlewares };\n if (middlewares.shift === undefined) {\n result.shift = true;\n }\n\n if (middlewares.flip === undefined) {\n result.flip = true;\n }\n\n return result;\n}\n\nfunction getPopoverMiddlewares(\n options: UsePopoverOptions,\n getFloating: () => UseFloatingReturn<Element>,\n disableFlip: boolean,\n lockEnabled: boolean\n) {\n const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n if (middlewaresOptions.flip && !disableFlip) {\n const userFlip = typeof middlewaresOptions.flip === 'boolean' ? {} : middlewaresOptions.flip;\n const flipOptions = lockEnabled\n ? { fallbackStrategy: 'initialPlacement' as const, ...userFlip }\n : userFlip;\n middlewares.push(flip(flipOptions));\n }\n\n if (middlewaresOptions.shift) {\n const shiftOptions =\n typeof middlewaresOptions.shift === 'boolean' ? {} : middlewaresOptions.shift;\n middlewares.push(\n shift((state) => {\n const isVerticalPlacement =\n state.placement.startsWith('top') || state.placement.startsWith('bottom');\n return {\n limiter: limitShift(),\n padding: 5,\n ...(options.width === 'target' && isVerticalPlacement ? { mainAxis: false } : null),\n ...shiftOptions,\n };\n })\n );\n }\n\n if (middlewaresOptions.inline) {\n middlewares.push(\n typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n );\n }\n\n middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n if (middlewaresOptions.size || options.width === 'target') {\n middlewares.push(\n size({\n ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n apply({ rects, availableWidth, availableHeight, ...rest }) {\n const floating = getFloating();\n const styles = floating.refs.floating.current?.style ?? {};\n\n if (middlewaresOptions.size) {\n // If custom apply function is given use that else set defaults\n if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n } else {\n Object.assign(styles, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n }\n\n if (options.width === 'target') {\n Object.assign(styles, {\n width: `${rects.reference.width}px`,\n });\n }\n },\n })\n );\n }\n\n return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n const [_opened, setOpened] = useUncontrolled({\n value: options.opened,\n defaultValue: options.defaultOpened,\n finalValue: false,\n onChange: options.onChange,\n });\n\n const previouslyOpened = useRef(_opened);\n\n const [lockedPlacement, setLockedPlacement] = useState<FloatingPosition | null>(null);\n const lockEnabled = options.preventPositionChangeWhenVisible !== false;\n\n const wasOpenedRef = useRef(_opened);\n if (_opened !== wasOpenedRef.current) {\n wasOpenedRef.current = _opened;\n if (_opened && lockedPlacement !== null) {\n setLockedPlacement(null);\n }\n }\n\n const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);\n\n const onClose = () => {\n if (_opened && !options.disabled) {\n setOpened(false);\n }\n };\n\n const onToggle = () => {\n if (!options.disabled) {\n setOpened(!_opened);\n }\n };\n\n const floating: UseFloatingReturn<Element> = useFloating({\n open: _opened,\n strategy: options.strategy,\n placement: lockEnabled ? (lockedPlacement ?? options.position) : options.position,\n middleware: getPopoverMiddlewares(\n options,\n () => floating,\n lockEnabled && lockedPlacement !== null,\n lockEnabled\n ),\n whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n });\n\n useEffect(() => {\n if (!options.keepMounted) {\n return undefined;\n }\n\n const referenceElement = floating.refs.reference.current;\n const floatingElement = floating.refs.floating.current;\n\n if (_opened && referenceElement && floatingElement) {\n return autoUpdate(referenceElement, floatingElement, floating.update);\n }\n\n return undefined;\n }, [\n options.keepMounted,\n _opened,\n floating.update,\n floating.elements.reference,\n floating.elements.floating,\n ]);\n\n const measuredAfterShowRef = useRef(false);\n\n useIsomorphicEffect(() => {\n if (!_opened) {\n measuredAfterShowRef.current = false;\n return;\n }\n\n if (!lockEnabled || lockedPlacement !== null) {\n return;\n }\n\n const flEl = floating.refs.floating.current as HTMLElement | null;\n if (!flEl || flEl.offsetHeight === 0 || flEl.offsetWidth === 0) {\n return;\n }\n\n if (!measuredAfterShowRef.current) {\n measuredAfterShowRef.current = true;\n floating.update();\n return;\n }\n\n if (floating.isPositioned) {\n setLockedPlacement(floating.placement);\n }\n }, [\n lockEnabled,\n _opened,\n floating.isPositioned,\n floating.placement,\n lockedPlacement,\n floating.update,\n ]);\n\n const previousPlacementRef = useRef(floating.placement);\n useIsomorphicEffect(() => {\n if (previousPlacementRef.current !== floating.placement) {\n previousPlacementRef.current = floating.placement;\n options.onPositionChange?.(floating.placement);\n }\n }, [floating.placement]);\n\n useDidUpdate(() => {\n if (_opened !== previouslyOpened.current) {\n if (!_opened) {\n options.onClose?.();\n } else {\n options.onOpen?.();\n }\n }\n\n previouslyOpened.current = _opened;\n }, [_opened, options.onClose, options.onOpen]);\n\n return {\n floating,\n controlled: typeof options.opened === 'boolean',\n opened: _opened,\n onClose,\n onToggle,\n resetLockedPlacement,\n };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-popover.mjs","names":[],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n hide,\n inline,\n limitShift,\n Middleware,\n offset,\n shift,\n size,\n useFloating,\n UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n offset: number | FloatingAxesOffsets;\n position: FloatingPosition;\n onPositionChange?: (position: FloatingPosition) => void;\n opened: boolean | undefined;\n defaultOpened: boolean | undefined;\n onChange?: (opened: boolean) => void;\n onClose?: () => void;\n onDismiss?: () => void;\n onOpen?: () => void;\n width: PopoverWidth;\n middlewares: PopoverMiddlewares | undefined;\n arrowRef: React.RefObject<HTMLDivElement | null>;\n arrowOffset: number;\n strategy?: FloatingStrategy;\n disabled: boolean | undefined;\n preventPositionChangeWhenVisible: boolean | undefined;\n keepMounted: boolean | undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares | undefined): PopoverMiddlewares {\n if (middlewares === undefined) {\n return { shift: true, flip: true };\n }\n\n const result = { ...middlewares };\n if (middlewares.shift === undefined) {\n result.shift = true;\n }\n\n if (middlewares.flip === undefined) {\n result.flip = true;\n }\n\n return result;\n}\n\nfunction getPopoverMiddlewares(\n options: UsePopoverOptions,\n getFloating: () => UseFloatingReturn<Element>,\n disableFlip: boolean,\n lockEnabled: boolean\n) {\n const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n if (middlewaresOptions.flip && !disableFlip) {\n const userFlip = typeof middlewaresOptions.flip === 'boolean' ? {} : middlewaresOptions.flip;\n const flipOptions = lockEnabled\n ? { fallbackStrategy: 'initialPlacement' as const, ...userFlip }\n : userFlip;\n middlewares.push(flip(flipOptions));\n }\n\n if (middlewaresOptions.shift) {\n const shiftOptions =\n typeof middlewaresOptions.shift === 'boolean' ? {} : middlewaresOptions.shift;\n middlewares.push(\n shift((state) => {\n const isVerticalPlacement =\n state.placement.startsWith('top') || state.placement.startsWith('bottom');\n return {\n limiter: limitShift(),\n padding: 5,\n ...(options.width === 'target' && isVerticalPlacement ? { mainAxis: false } : null),\n ...shiftOptions,\n };\n })\n );\n }\n\n if (middlewaresOptions.inline) {\n middlewares.push(\n typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n );\n }\n\n middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n if (middlewaresOptions.size || options.width === 'target') {\n middlewares.push(\n size({\n ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n apply({ rects, availableWidth, availableHeight, ...rest }) {\n const floating = getFloating();\n const styles = floating.refs.floating.current?.style ?? {};\n\n if (middlewaresOptions.size) {\n // If custom apply function is given use that else set defaults\n if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n } else {\n Object.assign(styles, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n }\n\n if (options.width === 'target') {\n Object.assign(styles, {\n width: `${rects.reference.width}px`,\n });\n }\n },\n })\n );\n }\n\n return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n const [_opened, setOpened] = useUncontrolled({\n value: options.opened,\n defaultValue: options.defaultOpened,\n finalValue: false,\n onChange: options.onChange,\n });\n\n const previouslyOpened = useRef(_opened);\n\n const measuredAfterShowRef = useRef(false);\n const [lockedPlacement, setLockedPlacement] = useState<FloatingPosition | null>(null);\n const lockEnabled = options.preventPositionChangeWhenVisible !== false;\n\n const wasOpenedRef = useRef(_opened);\n if (_opened !== wasOpenedRef.current) {\n wasOpenedRef.current = _opened;\n if (_opened && lockedPlacement !== null) {\n setLockedPlacement(null);\n }\n }\n\n const previousPositionRef = useRef(options.position);\n if (options.position !== previousPositionRef.current) {\n previousPositionRef.current = options.position;\n measuredAfterShowRef.current = false;\n if (lockedPlacement !== null) {\n setLockedPlacement(null);\n }\n }\n\n const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);\n\n const onClose = () => {\n if (_opened && !options.disabled) {\n setOpened(false);\n }\n };\n\n const onToggle = () => {\n if (!options.disabled) {\n setOpened(!_opened);\n }\n };\n\n const floating: UseFloatingReturn<Element> = useFloating({\n open: _opened,\n strategy: options.strategy,\n placement: lockEnabled ? (lockedPlacement ?? options.position) : options.position,\n middleware: getPopoverMiddlewares(\n options,\n () => floating,\n lockEnabled && lockedPlacement !== null,\n lockEnabled\n ),\n whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n });\n\n useEffect(() => {\n if (!options.keepMounted) {\n return undefined;\n }\n\n const referenceElement = floating.refs.reference.current;\n const floatingElement = floating.refs.floating.current;\n\n if (_opened && referenceElement && floatingElement) {\n return autoUpdate(referenceElement, floatingElement, floating.update);\n }\n\n return undefined;\n }, [\n options.keepMounted,\n _opened,\n floating.update,\n floating.elements.reference,\n floating.elements.floating,\n ]);\n\n useIsomorphicEffect(() => {\n if (!_opened) {\n measuredAfterShowRef.current = false;\n return;\n }\n\n if (!lockEnabled || lockedPlacement !== null) {\n return;\n }\n\n const flEl = floating.refs.floating.current as HTMLElement | null;\n if (!flEl || flEl.offsetHeight === 0 || flEl.offsetWidth === 0) {\n return;\n }\n\n if (!measuredAfterShowRef.current) {\n measuredAfterShowRef.current = true;\n floating.update();\n return;\n }\n\n if (floating.isPositioned) {\n setLockedPlacement(floating.placement);\n }\n }, [\n lockEnabled,\n _opened,\n floating.isPositioned,\n floating.placement,\n lockedPlacement,\n floating.update,\n ]);\n\n const previousPlacementRef = useRef(floating.placement);\n useIsomorphicEffect(() => {\n if (previousPlacementRef.current !== floating.placement) {\n previousPlacementRef.current = floating.placement;\n options.onPositionChange?.(floating.placement);\n }\n }, [floating.placement]);\n\n useDidUpdate(() => {\n if (_opened !== previouslyOpened.current) {\n if (!_opened) {\n options.onClose?.();\n } else {\n options.onOpen?.();\n }\n }\n\n previouslyOpened.current = _opened;\n }, [_opened, options.onClose, options.onOpen]);\n\n return {\n floating,\n controlled: typeof options.opened === 'boolean',\n opened: _opened,\n onClose,\n onToggle,\n resetLockedPlacement,\n };\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.mjs","names":["classes"],"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import {\n factory,\n Factory,\n MantineColor,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport { ProgressLabel, type ProgressLabelProps } from './ProgressLabel/ProgressLabel';\nimport {\n __ProgressRootProps,\n ProgressRoot,\n ProgressRootCssVariables,\n ProgressRootStylesNames,\n type ProgressRootProps,\n} from './ProgressRoot/ProgressRoot';\nimport { ProgressSection, type ProgressSectionProps } from './ProgressSection/ProgressSection';\nimport classes from './Progress.module.css';\
|
|
1
|
+
{"version":3,"file":"Progress.mjs","names":["classes"],"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import {\n factory,\n Factory,\n MantineColor,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport type { ProgressContextValue } from './Progress.context';\nimport { ProgressLabel, type ProgressLabelProps } from './ProgressLabel/ProgressLabel';\nimport {\n __ProgressRootProps,\n ProgressRoot,\n ProgressRootCssVariables,\n ProgressRootStylesNames,\n type ProgressRootProps,\n} from './ProgressRoot/ProgressRoot';\nimport { ProgressSection, type ProgressSectionProps } from './ProgressSection/ProgressSection';\nimport classes from './Progress.module.css';\nexport type ProgressStylesNames = ProgressRootStylesNames;\n\nexport interface ProgressProps extends __ProgressRootProps, StylesApiProps<ProgressFactory> {\n /** Value of the progress */\n value: number;\n\n /** Key of `theme.colors` or any valid CSS value @default theme.primaryColor */\n color?: MantineColor;\n\n /** If set, the section has stripes @default false */\n striped?: boolean;\n\n /** If set, the sections stripes are animated (automatically enables striped) @default false */\n animated?: boolean;\n}\n\nexport type ProgressFactory = Factory<{\n props: ProgressProps;\n ref: HTMLDivElement;\n stylesNames: ProgressStylesNames;\n vars: ProgressRootCssVariables;\n staticComponents: {\n Section: typeof ProgressSection;\n Root: typeof ProgressRoot;\n Label: typeof ProgressLabel;\n };\n}>;\n\nexport const Progress = factory<ProgressFactory>((_props) => {\n const props = useProps('Progress', null, _props);\n const {\n value,\n classNames,\n styles,\n vars,\n color,\n striped,\n animated,\n 'aria-label': label,\n ...others\n } = props;\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ProgressFactory>({\n classNames,\n styles,\n props,\n });\n\n return (\n <ProgressRoot\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n vars={vars as any}\n {...others}\n >\n <ProgressSection\n value={value}\n color={color}\n striped={striped}\n animated={animated}\n aria-label={label}\n />\n </ProgressRoot>\n );\n});\n\nProgress.classes = classes;\nProgress.displayName = '@mantine/core/Progress';\nProgress.Section = ProgressSection;\nProgress.Root = ProgressRoot;\nProgress.Label = ProgressLabel;\n\nexport namespace Progress {\n export type Props = ProgressProps;\n export type Factory = ProgressFactory;\n export type StylesNames = ProgressStylesNames;\n export type ContextValue = ProgressContextValue;\n\n export namespace Label {\n export type Props = ProgressLabelProps;\n }\n\n export namespace Root {\n export type Props = ProgressRootProps;\n }\n\n export namespace Section {\n export type Props = ProgressSectionProps;\n }\n}\n"],"mappings":";;;;;;;;;;AA+CA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,MAAM,MAAM;CAC/C,MAAM,EACJ,OACA,YACA,QACA,MACA,OACA,SACA,UACA,cAAc,OACd,GAAG,WACD;CAEJ,MAAM,EAAE,oBAAoB,mBAAmB,qBAAsC;EACnF;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,cAAD;EACE,YAAY;EACZ,QAAQ;EACF;EACN,GAAI;EAEJ,UAAA,oBAAC,iBAAD;GACS;GACA;GACE;GACC;GACV,cAAY;EACb,CAAA;CACW,CAAA;AAElB,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,OAAO;AAChB,SAAS,QAAQ"}
|
|
@@ -8,8 +8,9 @@ import { jsx } from "react/jsx-runtime";
|
|
|
8
8
|
//#region packages/@mantine/core/src/components/Progress/ProgressLabel/ProgressLabel.tsx
|
|
9
9
|
const ProgressLabel = factory((props) => {
|
|
10
10
|
const { classNames, className, style, styles, vars, ...others } = useProps("ProgressLabel", null, props);
|
|
11
|
+
const ctx = useProgressContext();
|
|
11
12
|
return /* @__PURE__ */ jsx(Box, {
|
|
12
|
-
...
|
|
13
|
+
...ctx.getStyles("label", {
|
|
13
14
|
className,
|
|
14
15
|
style,
|
|
15
16
|
classNames,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressLabel.mjs","names":["classes"],"sources":["../../../../src/components/Progress/ProgressLabel/ProgressLabel.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useProgressContext } from '../Progress.context';\nimport classes from '../Progress.module.css';\n\nexport type ProgressLabelStylesNames = 'label';\n\nexport interface ProgressLabelProps\n extends BoxProps, CompoundStylesApiProps<ProgressLabelFactory>, ElementProps<'div'> {}\n\nexport type ProgressLabelFactory = Factory<{\n props: ProgressLabelProps;\n ref: HTMLDivElement;\n stylesNames: ProgressLabelStylesNames;\n compound: true;\n}>;\n\nexport const ProgressLabel = factory<ProgressLabelFactory>((props) => {\n const { classNames, className, style, styles, vars, ...others } = useProps(\n 'ProgressLabel',\n null,\n props\n );\n\n const ctx = useProgressContext();\n\n return <Box {...ctx.getStyles('label', { className, style, classNames, styles })} {...others} />;\n});\n\nProgressLabel.classes = classes;\nProgressLabel.displayName = '@mantine/core/ProgressLabel';\n"],"mappings":";;;;;;;;AAwBA,MAAa,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,iBACA,MACA,KACF;
|
|
1
|
+
{"version":3,"file":"ProgressLabel.mjs","names":["classes"],"sources":["../../../../src/components/Progress/ProgressLabel/ProgressLabel.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useProgressContext } from '../Progress.context';\nimport classes from '../Progress.module.css';\n\nexport type ProgressLabelStylesNames = 'label';\n\nexport interface ProgressLabelProps\n extends BoxProps, CompoundStylesApiProps<ProgressLabelFactory>, ElementProps<'div'> {}\n\nexport type ProgressLabelFactory = Factory<{\n props: ProgressLabelProps;\n ref: HTMLDivElement;\n stylesNames: ProgressLabelStylesNames;\n compound: true;\n}>;\n\nexport const ProgressLabel = factory<ProgressLabelFactory>((props) => {\n const { classNames, className, style, styles, vars, ...others } = useProps(\n 'ProgressLabel',\n null,\n props\n );\n\n const ctx = useProgressContext();\n\n return <Box {...ctx.getStyles('label', { className, style, classNames, styles })} {...others} />;\n});\n\nProgressLabel.classes = classes;\nProgressLabel.displayName = '@mantine/core/ProgressLabel';\n"],"mappings":";;;;;;;;AAwBA,MAAa,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,iBACA,MACA,KACF;CAEA,MAAM,MAAM,mBAAmB;CAE/B,OAAO,oBAAC,KAAD;EAAK,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;EAAG,GAAI;CAAS,CAAA;AACjG,CAAC;AAED,cAAc,UAAUA;AACxB,cAAc,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressRoot.mjs","names":["classes"],"sources":["../../../../src/components/Progress/ProgressRoot/ProgressRoot.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getSize,\n MantineRadius,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport { ProgressProvider } from '../Progress.context';\nimport classes from '../Progress.module.css';\n\nexport type ProgressRootStylesNames = 'root' | 'section' | 'label';\nexport type ProgressRootCssVariables = {\n root: '--progress-size' | '--progress-radius' | '--progress-transition-duration';\n};\n\nexport interface __ProgressRootProps extends BoxProps, ElementProps<'div'> {\n /** Controls track height @default 'md' */\n size?: MantineSize | (string & {}) | number;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** If set, adjusts label text color based on section background color for readability */\n autoContrast?: boolean;\n\n /** Controls sections width transition duration, value is specified in ms @default 100 */\n transitionDuration?: number;\n\n /** Controls orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n}\n\nexport interface ProgressRootProps\n extends __ProgressRootProps, StylesApiProps<ProgressRootFactory> {}\n\nexport type ProgressRootFactory = Factory<{\n props: ProgressRootProps;\n ref: HTMLDivElement;\n stylesNames: ProgressRootStylesNames;\n vars: ProgressRootCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<ProgressRootFactory>(\n (_, { size, radius, transitionDuration }) => ({\n root: {\n '--progress-size': getSize(size, 'progress-size'),\n '--progress-radius': radius === undefined ? undefined : getRadius(radius),\n '--progress-transition-duration':\n typeof transitionDuration === 'number' ? `${transitionDuration}ms` : undefined,\n },\n })\n);\n\nexport const ProgressRoot = factory<ProgressRootFactory>((_props) => {\n const props = useProps('ProgressRoot', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n autoContrast,\n transitionDuration,\n orientation,\n attributes,\n mod,\n ...others\n } = props;\n\n const getStyles = useStyles<ProgressRootFactory>({\n name: 'Progress',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <ProgressProvider value={{ getStyles, autoContrast }}>\n <Box mod={[{ orientation }, mod]} {...getStyles('root')} {...others} />\n </ProgressProvider>\n );\n});\n\nProgressRoot.classes = classes;\nProgressRoot.varsResolver = varsResolver;\nProgressRoot.displayName = '@mantine/core/ProgressRoot';\n"],"mappings":";;;;;;;;;;;AAkDA,MAAM,eAAe,oBAClB,GAAG,EAAE,MAAM,QAAQ,0BAA0B,EAC5C,MAAM;CACJ,mBAAmB,QAAQ,MAAM,eAAe;CAChD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CACxE,kCACE,OAAO,uBAAuB,WAAW,GAAG,mBAAmB,MAAM,KAAA;AACzE,EACF,EACF;AAEA,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SAAS,gBAAgB,MAAM,MAAM;CACnD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,oBACA,aACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA+B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EAAkB,OAAO;GAAE;GAAW;EAAa;
|
|
1
|
+
{"version":3,"file":"ProgressRoot.mjs","names":["classes"],"sources":["../../../../src/components/Progress/ProgressRoot/ProgressRoot.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getSize,\n MantineRadius,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport { ProgressProvider } from '../Progress.context';\nimport classes from '../Progress.module.css';\n\nexport type ProgressRootStylesNames = 'root' | 'section' | 'label';\nexport type ProgressRootCssVariables = {\n root: '--progress-size' | '--progress-radius' | '--progress-transition-duration';\n};\n\nexport interface __ProgressRootProps extends BoxProps, ElementProps<'div'> {\n /** Controls track height @default 'md' */\n size?: MantineSize | (string & {}) | number;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** If set, adjusts label text color based on section background color for readability */\n autoContrast?: boolean;\n\n /** Controls sections width transition duration, value is specified in ms @default 100 */\n transitionDuration?: number;\n\n /** Controls orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n}\n\nexport interface ProgressRootProps\n extends __ProgressRootProps, StylesApiProps<ProgressRootFactory> {}\n\nexport type ProgressRootFactory = Factory<{\n props: ProgressRootProps;\n ref: HTMLDivElement;\n stylesNames: ProgressRootStylesNames;\n vars: ProgressRootCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<ProgressRootFactory>(\n (_, { size, radius, transitionDuration }) => ({\n root: {\n '--progress-size': getSize(size, 'progress-size'),\n '--progress-radius': radius === undefined ? undefined : getRadius(radius),\n '--progress-transition-duration':\n typeof transitionDuration === 'number' ? `${transitionDuration}ms` : undefined,\n },\n })\n);\n\nexport const ProgressRoot = factory<ProgressRootFactory>((_props) => {\n const props = useProps('ProgressRoot', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n autoContrast,\n transitionDuration,\n orientation,\n attributes,\n mod,\n ...others\n } = props;\n\n const getStyles = useStyles<ProgressRootFactory>({\n name: 'Progress',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <ProgressProvider value={{ getStyles, autoContrast }}>\n <Box mod={[{ orientation }, mod]} {...getStyles('root')} {...others} />\n </ProgressProvider>\n );\n});\n\nProgressRoot.classes = classes;\nProgressRoot.varsResolver = varsResolver;\nProgressRoot.displayName = '@mantine/core/ProgressRoot';\n"],"mappings":";;;;;;;;;;;AAkDA,MAAM,eAAe,oBAClB,GAAG,EAAE,MAAM,QAAQ,0BAA0B,EAC5C,MAAM;CACJ,mBAAmB,QAAQ,MAAM,eAAe;CAChD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CACxE,kCACE,OAAO,uBAAuB,WAAW,GAAG,mBAAmB,MAAM,KAAA;AACzE,EACF,EACF;AAEA,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SAAS,gBAAgB,MAAM,MAAM;CACnD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,oBACA,aACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA+B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EAAkB,OAAO;GAAE;GAAW;EAAa;EACjD,UAAA,oBAAC,KAAD;GAAK,KAAK,CAAC,EAAE,YAAY,GAAG,GAAG;GAAG,GAAI,UAAU,MAAM;GAAG,GAAI;EAAS,CAAA;CACtD,CAAA;AAEtB,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,eAAe;AAC5B,aAAa,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.mjs","names":["useId","classes"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n RadioCard,\n type RadioCardProps,\n type RadioCardStylesNames,\n type RadioCardFactory,\n type RadioCardCssVariables,\n type RadioCardContextValue,\n} from './RadioCard/RadioCard';\nimport {\n RadioGroup,\n RadioGroupContext,\n type RadioGroupProps,\n type RadioGroupStylesNames,\n type RadioGroupFactory,\n type RadioGroupContextValue,\n} from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport {\n RadioIndicator,\n type RadioIndicatorProps,\n type RadioIndicatorStylesNames,\n type RadioIndicatorFactory,\n type RadioIndicatorCssVariables,\n type RadioIndicatorVariant,\n} from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\nexport type RadioVariant = 'filled' | 'outline';\nexport type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';\nexport type RadioCssVariables = {\n root:\n | '--radio-size'\n | '--radio-radius'\n | '--radio-color'\n | '--radio-icon-color'\n | '--radio-icon-size';\n};\n\nexport interface RadioProps\n extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' | 'children'> {\n /** Content of the `label` associated with the radio */\n label?: React.ReactNode;\n\n /** Key of theme.colors or any valid CSS color to set radio background color in checked state @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls size of the component @default 'sm' */\n size?: MantineSize | (string & {});\n\n /** A component that replaces the default radio icon (centered dot) */\n icon?: React.FC<RadioIconProps>;\n\n /** Props passed down to the root element */\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /** Position of the label relative to the input @default 'right' */\n labelPosition?: 'left' | 'right';\n\n /** Description displayed below the label */\n description?: React.ReactNode;\n\n /** Error displayed below the label */\n error?: React.ReactNode;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n radius?: MantineRadius;\n\n /** Assigns ref of the root element */\n rootRef?: React.Ref<HTMLDivElement>;\n\n /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n iconColor?: MantineColor;\n\n /** If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** If set, applies error styles to the radio when `error` prop is set @default true */\n withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n props: RadioProps;\n ref: HTMLInputElement;\n stylesNames: RadioStylesNames;\n vars: RadioCssVariables;\n variant: RadioVariant;\n staticComponents: {\n Group: typeof RadioGroup;\n Card: typeof RadioCard;\n Indicator: typeof RadioIndicator;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n (theme, { size, radius, color, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n root: {\n '--radio-size': getSize(size, 'radio-size'),\n '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--radio-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n '--radio-icon-size': getSize(size, 'radio-icon-size'),\n },\n };\n }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n const props = useProps('Radio', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n id,\n size,\n label,\n labelPosition,\n description,\n error,\n radius,\n color,\n variant,\n disabled,\n wrapperProps,\n icon: Icon = RadioIcon,\n rootRef,\n iconColor,\n onChange,\n mod,\n attributes,\n withErrorStyles,\n checked,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioFactory>({\n name: 'Radio',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const ctx = use(RadioGroupContext);\n\n const contextSize = ctx?.size ?? size;\n const componentSize = props.size ? size : contextSize;\n\n const { styleProps, rest } = extractStyleProps(others);\n const uuid = useId(id);\n const descriptionId = description ? `${uuid}-description` : undefined;\n const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n const describedBy =\n [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n const withContextProps = {\n checked: contextChecked ?? checked,\n name: rest.name ?? ctx?.name,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx?.onChange(event);\n onChange?.(event);\n },\n disabled: ctx?.disabled ?? disabled,\n };\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Radio\"\n __stylesApiProps={props}\n id={uuid}\n size={componentSize}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={withContextProps.disabled}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={(contextChecked ?? checked) || undefined}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n {...styleProps}\n {...wrapperProps}\n >\n <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n <Box\n {...getStyles('radio', { focusable: true, variant })}\n {...rest}\n {...withContextProps}\n component=\"input\"\n mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n id={uuid}\n type=\"radio\"\n aria-describedby={describedBy}\n />\n <Icon {...getStyles('icon')} aria-hidden />\n </Box>\n </InlineInput>\n );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n\nexport namespace Radio {\n export type Props = RadioProps;\n export type StylesNames = RadioStylesNames;\n export type Factory = RadioFactory;\n export type Variant = RadioVariant;\n\n export namespace Group {\n export type Props = RadioGroupProps;\n export type StylesNames = RadioGroupStylesNames;\n export type Factory = RadioGroupFactory;\n export type ContextValue = RadioGroupContextValue;\n }\n\n export namespace Card {\n export type Props = RadioCardProps;\n export type StylesNames = RadioCardStylesNames;\n export type Factory = RadioCardFactory;\n export type CssVariables = RadioCardCssVariables;\n export type ContextValue = RadioCardContextValue;\n }\n\n export namespace Indicator {\n export type Props = RadioIndicatorProps;\n export type StylesNames = RadioIndicatorStylesNames;\n export type Factory = RadioIndicatorFactory;\n export type CssVariables = RadioIndicatorCssVariables;\n export type Variant = RadioIndicatorVariant;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqHA,MAAM,eAAe;CACnB,eAAe;CACf,iBAAiB;AACnB;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,OAAO,EACL,MAAM;EACJ,gBAAgB,QAAQ,MAAM,YAAY;EAC1C,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACrE,iBAAiB,YAAY,YAAY,eAAe,cAAc,OAAO,KAAK;EAClF,sBAAsB,YAClB,cAAc,WAAW,KAAK,IAC9B,qBAAqB,cAAc,KAAK,IACtC,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;EACN,qBAAqB,QAAQ,MAAM,iBAAiB;CACtD,EACF;AACF,CACF;AAEA,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,IACA,MACA,OACA,eACA,aACA,OACA,QACA,OACA,SACA,UACA,cACA,MAAM,OAAO,WACb,SACA,WACA,UACA,KACA,YACA,iBACA,SACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,MAAM,IAAI,iBAAiB;CAEjC,MAAM,cAAc,KAAK,QAAQ;CACjC,MAAM,gBAAgB,MAAM,OAAO,OAAO;CAE1C,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CACrD,MAAM,OAAOA,QAAM,EAAE;CAGrB,MAAM,cACJ;EAHoB,cAAc,GAAG,KAAK,gBAAgB,KAAA;EAC5C,SAAS,OAAO,UAAU,YAAY,GAAG,KAAK,UAAU,KAAA;EAE7C,KAAK;CAAmB,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CAElF,MAAM,iBAAiB,MAAM,IAAI,UAAU,KAAK,QAAQ,KAAA;CAExD,MAAM,mBAAmB;EACvB,SAAS,kBAAkB;EAC3B,MAAM,KAAK,QAAQ,KAAK;EACxB,WAAW,UAA+C;GACxD,KAAK,SAAS,KAAK;GACnB,WAAW,KAAK;EAClB;EACA,UAAU,KAAK,YAAY;CAC7B;CAEA,OACE,oBAAC,aAAD;EACE,GAAI,UAAU,MAAM;EACpB,kBAAiB;EACjB,kBAAkB;EAClB,IAAI;EACJ,MAAM;EACS;EACR;EACM;EACN;EACP,UAAU,iBAAiB;EACf;EACJ;EACE;EACV,iBAAe,kBAAkB,YAAY,KAAA;EACpC;EACT,KAAK;EACA;EACO;EACZ,GAAI;EACJ,GAAI;YAEJ,qBAAC,KAAD;GAAK,GAAI,UAAU,OAAO;GAAG,KAAK,EAAE,kBAAkB,cAAc;aAApE,CACE,oBAAC,KAAD;IACE,GAAI,UAAU,SAAS;KAAE,WAAW;KAAM;IAAQ,CAAC;IACnD,GAAI;IACJ,GAAI;IACJ,WAAU;IACV,KAAK;KAAE,OAAO,CAAC,CAAC;KAAO,qBAAqB;IAAgB;IAC5D,IAAI;IACJ,MAAK;IACL,oBAAkB;GACnB,CAAA,GACD,oBAAC,MAAD;IAAM,GAAI,UAAU,MAAM;IAAG,eAAA;GAAa,CAAA,CACvC;;CACM,CAAA;AAEjB,CAAC;AAED,MAAM,UAAUC;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,QAAQ;AACd,MAAM,OAAO;AACb,MAAM,YAAY"}
|
|
1
|
+
{"version":3,"file":"Radio.mjs","names":["useId","classes"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n RadioCard,\n type RadioCardProps,\n type RadioCardStylesNames,\n type RadioCardFactory,\n type RadioCardCssVariables,\n type RadioCardContextValue,\n} from './RadioCard/RadioCard';\nimport {\n RadioGroup,\n RadioGroupContext,\n type RadioGroupProps,\n type RadioGroupStylesNames,\n type RadioGroupFactory,\n type RadioGroupContextValue,\n} from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport {\n RadioIndicator,\n type RadioIndicatorProps,\n type RadioIndicatorStylesNames,\n type RadioIndicatorFactory,\n type RadioIndicatorCssVariables,\n type RadioIndicatorVariant,\n} from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\nexport type RadioVariant = 'filled' | 'outline';\nexport type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';\nexport type RadioCssVariables = {\n root:\n | '--radio-size'\n | '--radio-radius'\n | '--radio-color'\n | '--radio-icon-color'\n | '--radio-icon-size';\n};\n\nexport interface RadioProps\n extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' | 'children'> {\n /** Content of the `label` associated with the radio */\n label?: React.ReactNode;\n\n /** Key of theme.colors or any valid CSS color to set radio background color in checked state @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls size of the component @default 'sm' */\n size?: MantineSize | (string & {});\n\n /** A component that replaces the default radio icon (centered dot) */\n icon?: React.FC<RadioIconProps>;\n\n /** Props passed down to the root element */\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /** Position of the label relative to the input @default 'right' */\n labelPosition?: 'left' | 'right';\n\n /** Description displayed below the label */\n description?: React.ReactNode;\n\n /** Error displayed below the label */\n error?: React.ReactNode;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n radius?: MantineRadius;\n\n /** Assigns ref of the root element */\n rootRef?: React.Ref<HTMLDivElement>;\n\n /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n iconColor?: MantineColor;\n\n /** If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** If set, applies error styles to the radio when `error` prop is set @default true */\n withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n props: RadioProps;\n ref: HTMLInputElement;\n stylesNames: RadioStylesNames;\n vars: RadioCssVariables;\n variant: RadioVariant;\n staticComponents: {\n Group: typeof RadioGroup;\n Card: typeof RadioCard;\n Indicator: typeof RadioIndicator;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n (theme, { size, radius, color, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n root: {\n '--radio-size': getSize(size, 'radio-size'),\n '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--radio-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n '--radio-icon-size': getSize(size, 'radio-icon-size'),\n },\n };\n }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n const props = useProps('Radio', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n id,\n size,\n label,\n labelPosition,\n description,\n error,\n radius,\n color,\n variant,\n disabled,\n wrapperProps,\n icon: Icon = RadioIcon,\n rootRef,\n iconColor,\n onChange,\n mod,\n attributes,\n withErrorStyles,\n checked,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioFactory>({\n name: 'Radio',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const ctx = use(RadioGroupContext);\n\n const contextSize = ctx?.size ?? size;\n const componentSize = props.size ? size : contextSize;\n\n const { styleProps, rest } = extractStyleProps(others);\n const uuid = useId(id);\n const descriptionId = description ? `${uuid}-description` : undefined;\n const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n const describedBy =\n [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n const withContextProps = {\n checked: contextChecked ?? checked,\n name: rest.name ?? ctx?.name,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx?.onChange(event);\n onChange?.(event);\n },\n disabled: ctx?.disabled ?? disabled,\n };\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Radio\"\n __stylesApiProps={props}\n id={uuid}\n size={componentSize}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={withContextProps.disabled}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={(contextChecked ?? checked) || undefined}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n {...styleProps}\n {...wrapperProps}\n >\n <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n <Box\n {...getStyles('radio', { focusable: true, variant })}\n {...rest}\n {...withContextProps}\n component=\"input\"\n mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n id={uuid}\n type=\"radio\"\n aria-describedby={describedBy}\n />\n <Icon {...getStyles('icon')} aria-hidden />\n </Box>\n </InlineInput>\n );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n\nexport namespace Radio {\n export type Props = RadioProps;\n export type StylesNames = RadioStylesNames;\n export type Factory = RadioFactory;\n export type Variant = RadioVariant;\n\n export namespace Group {\n export type Props = RadioGroupProps;\n export type StylesNames = RadioGroupStylesNames;\n export type Factory = RadioGroupFactory;\n export type ContextValue = RadioGroupContextValue;\n }\n\n export namespace Card {\n export type Props = RadioCardProps;\n export type StylesNames = RadioCardStylesNames;\n export type Factory = RadioCardFactory;\n export type CssVariables = RadioCardCssVariables;\n export type ContextValue = RadioCardContextValue;\n }\n\n export namespace Indicator {\n export type Props = RadioIndicatorProps;\n export type StylesNames = RadioIndicatorStylesNames;\n export type Factory = RadioIndicatorFactory;\n export type CssVariables = RadioIndicatorCssVariables;\n export type Variant = RadioIndicatorVariant;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioCard.mjs","names":["classes"],"sources":["../../../../src/components/Radio/RadioCard/RadioCard.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { RadioGroupContext } from '../RadioGroup/RadioGroup';\nimport classes from './RadioCard.module.css';\n\nexport interface RadioCardContextValue {\n checked: boolean;\n}\n\nexport const RadioCardContext = createContext<RadioCardContextValue | null>(null);\n\nexport type RadioCardStylesNames = 'card';\nexport type RadioCardCssVariables = {\n card: '--card-radius';\n};\n\nexport interface RadioCardProps\n extends BoxProps, StylesApiProps<RadioCardFactory>, ElementProps<'button', 'onChange'> {\n /** Checked state */\n checked?: boolean;\n\n /** Adds border to the root element */\n withBorder?: boolean;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Value of the radio, used with Radio.Group */\n value?: string;\n\n /** Value used to associate all related radio cards, required for accessibility if used outside of `Radio.Group` */\n name?: string;\n}\n\nexport type RadioCardFactory = Factory<{\n props: RadioCardProps;\n ref: HTMLButtonElement;\n stylesNames: RadioCardStylesNames;\n vars: RadioCardCssVariables;\n}>;\n\nconst defaultProps = {\n withBorder: true,\n} satisfies Partial<RadioCardProps>;\n\nconst varsResolver = createVarsResolver<RadioCardFactory>((_, { radius }) => ({\n card: {\n '--card-radius': getRadius(radius),\n },\n}));\n\nexport const RadioCard = factory<RadioCardFactory>((_props) => {\n const props = useProps('RadioCard', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n checked,\n mod,\n withBorder,\n value,\n onClick,\n name,\n onKeyDown,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioCardFactory>({\n name: 'RadioCard',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'card',\n });\n\n const { dir } = useDirection();\n const ctx = use(RadioGroupContext);\n const _checked = typeof checked === 'boolean' ? checked : ctx?.value === value || false;\n const _name = name || ctx?.name;\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (!_name) {\n return;\n }\n\n if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.nativeEvent.code)) {\n event.preventDefault();\n\n const siblings = Array.from(\n document.querySelectorAll<HTMLButtonElement>(`[role=\"radio\"][name=\"${_name}\"]`)\n );\n\n const currentIndex = siblings.findIndex((element) => element === event.target);\n const nextIndex = currentIndex + 1 >= siblings.length ? 0 : currentIndex + 1;\n const prevIndex = currentIndex - 1 < 0 ? siblings.length - 1 : currentIndex - 1;\n\n if (event.nativeEvent.code === 'ArrowDown') {\n siblings[nextIndex].focus();\n siblings[nextIndex].click();\n }\n\n if (event.nativeEvent.code === 'ArrowUp') {\n siblings[prevIndex].focus();\n siblings[prevIndex].click();\n }\n\n if (event.nativeEvent.code === 'ArrowLeft') {\n siblings[dir === 'ltr' ? prevIndex : nextIndex].focus();\n siblings[dir === 'ltr' ? prevIndex : nextIndex].click();\n }\n\n if (event.nativeEvent.code === 'ArrowRight') {\n siblings[dir === 'ltr' ? nextIndex : prevIndex].focus();\n siblings[dir === 'ltr' ? nextIndex : prevIndex].click();\n }\n }\n };\n\n return (\n <RadioCardContext value={{ checked: _checked }}>\n {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus -- UnstyledButton renders a native <button> which is focusable */}\n <UnstyledButton\n mod={[{ 'with-border': withBorder, checked: _checked }, mod]}\n {...getStyles('card')}\n {...others}\n role=\"radio\"\n aria-checked={_checked}\n name={_name}\n onClick={(event) => {\n onClick?.(event);\n ctx?.onChange(value || '');\n }}\n onKeyDown={handleKeyDown}\n />\n </RadioCardContext>\n );\n});\n\nRadioCard.displayName = '@mantine/core/RadioCard';\nRadioCard.classes = classes;\nRadioCard.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,mBAAmB,cAA4C,IAAI;AAgChF,MAAM,eAAe,EACnB,YAAY,KACd;AAEA,MAAM,eAAe,oBAAsC,GAAG,EAAE,cAAc,EAC5E,MAAM,EACJ,iBAAiB,UAAU,MAAM,EACnC,EACF,EAAE;AAEF,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,KACA,YACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,MAAM,IAAI,iBAAiB;CACjC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,UAAU,SAAS;CAClF,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,iBAAiB,UAAkD;EACvE,YAAY,KAAK;EAEjB,IAAI,CAAC,OACH;EAGF,IAAI;GAAC;GAAa;GAAW;GAAa;EAAY,CAAC,CAAC,SAAS,MAAM,YAAY,IAAI,GAAG;GACxF,MAAM,eAAe;GAErB,MAAM,WAAW,MAAM,KACrB,SAAS,iBAAoC,wBAAwB,MAAM,GAAG,CAChF;GAEA,MAAM,eAAe,SAAS,WAAW,YAAY,YAAY,MAAM,MAAM;GAC7E,MAAM,YAAY,eAAe,KAAK,SAAS,SAAS,IAAI,eAAe;GAC3E,MAAM,YAAY,eAAe,IAAI,IAAI,SAAS,SAAS,IAAI,eAAe;GAE9E,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,SAAS,UAAU,CAAC,MAAM;IAC1B,SAAS,UAAU,CAAC,MAAM;GAC5B;GAEA,IAAI,MAAM,YAAY,SAAS,WAAW;IACxC,SAAS,UAAU,CAAC,MAAM;IAC1B,SAAS,UAAU,CAAC,MAAM;GAC5B;GAEA,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;IACtD,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;GACxD;GAEA,IAAI,MAAM,YAAY,SAAS,cAAc;IAC3C,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;IACtD,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;GACxD;EACF;CACF;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,SAAS,SAAS;
|
|
1
|
+
{"version":3,"file":"RadioCard.mjs","names":["classes"],"sources":["../../../../src/components/Radio/RadioCard/RadioCard.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { RadioGroupContext } from '../RadioGroup/RadioGroup';\nimport classes from './RadioCard.module.css';\n\nexport interface RadioCardContextValue {\n checked: boolean;\n}\n\nexport const RadioCardContext = createContext<RadioCardContextValue | null>(null);\n\nexport type RadioCardStylesNames = 'card';\nexport type RadioCardCssVariables = {\n card: '--card-radius';\n};\n\nexport interface RadioCardProps\n extends BoxProps, StylesApiProps<RadioCardFactory>, ElementProps<'button', 'onChange'> {\n /** Checked state */\n checked?: boolean;\n\n /** Adds border to the root element */\n withBorder?: boolean;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Value of the radio, used with Radio.Group */\n value?: string;\n\n /** Value used to associate all related radio cards, required for accessibility if used outside of `Radio.Group` */\n name?: string;\n}\n\nexport type RadioCardFactory = Factory<{\n props: RadioCardProps;\n ref: HTMLButtonElement;\n stylesNames: RadioCardStylesNames;\n vars: RadioCardCssVariables;\n}>;\n\nconst defaultProps = {\n withBorder: true,\n} satisfies Partial<RadioCardProps>;\n\nconst varsResolver = createVarsResolver<RadioCardFactory>((_, { radius }) => ({\n card: {\n '--card-radius': getRadius(radius),\n },\n}));\n\nexport const RadioCard = factory<RadioCardFactory>((_props) => {\n const props = useProps('RadioCard', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n checked,\n mod,\n withBorder,\n value,\n onClick,\n name,\n onKeyDown,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioCardFactory>({\n name: 'RadioCard',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'card',\n });\n\n const { dir } = useDirection();\n const ctx = use(RadioGroupContext);\n const _checked = typeof checked === 'boolean' ? checked : ctx?.value === value || false;\n const _name = name || ctx?.name;\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (!_name) {\n return;\n }\n\n if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.nativeEvent.code)) {\n event.preventDefault();\n\n const siblings = Array.from(\n document.querySelectorAll<HTMLButtonElement>(`[role=\"radio\"][name=\"${_name}\"]`)\n );\n\n const currentIndex = siblings.findIndex((element) => element === event.target);\n const nextIndex = currentIndex + 1 >= siblings.length ? 0 : currentIndex + 1;\n const prevIndex = currentIndex - 1 < 0 ? siblings.length - 1 : currentIndex - 1;\n\n if (event.nativeEvent.code === 'ArrowDown') {\n siblings[nextIndex].focus();\n siblings[nextIndex].click();\n }\n\n if (event.nativeEvent.code === 'ArrowUp') {\n siblings[prevIndex].focus();\n siblings[prevIndex].click();\n }\n\n if (event.nativeEvent.code === 'ArrowLeft') {\n siblings[dir === 'ltr' ? prevIndex : nextIndex].focus();\n siblings[dir === 'ltr' ? prevIndex : nextIndex].click();\n }\n\n if (event.nativeEvent.code === 'ArrowRight') {\n siblings[dir === 'ltr' ? nextIndex : prevIndex].focus();\n siblings[dir === 'ltr' ? nextIndex : prevIndex].click();\n }\n }\n };\n\n return (\n <RadioCardContext value={{ checked: _checked }}>\n {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus -- UnstyledButton renders a native <button> which is focusable */}\n <UnstyledButton\n mod={[{ 'with-border': withBorder, checked: _checked }, mod]}\n {...getStyles('card')}\n {...others}\n role=\"radio\"\n aria-checked={_checked}\n name={_name}\n onClick={(event) => {\n onClick?.(event);\n ctx?.onChange(value || '');\n }}\n onKeyDown={handleKeyDown}\n />\n </RadioCardContext>\n );\n});\n\nRadioCard.displayName = '@mantine/core/RadioCard';\nRadioCard.classes = classes;\nRadioCard.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,mBAAmB,cAA4C,IAAI;AAgChF,MAAM,eAAe,EACnB,YAAY,KACd;AAEA,MAAM,eAAe,oBAAsC,GAAG,EAAE,cAAc,EAC5E,MAAM,EACJ,iBAAiB,UAAU,MAAM,EACnC,EACF,EAAE;AAEF,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,KACA,YACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,MAAM,IAAI,iBAAiB;CACjC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,UAAU,SAAS;CAClF,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,iBAAiB,UAAkD;EACvE,YAAY,KAAK;EAEjB,IAAI,CAAC,OACH;EAGF,IAAI;GAAC;GAAa;GAAW;GAAa;EAAY,CAAC,CAAC,SAAS,MAAM,YAAY,IAAI,GAAG;GACxF,MAAM,eAAe;GAErB,MAAM,WAAW,MAAM,KACrB,SAAS,iBAAoC,wBAAwB,MAAM,GAAG,CAChF;GAEA,MAAM,eAAe,SAAS,WAAW,YAAY,YAAY,MAAM,MAAM;GAC7E,MAAM,YAAY,eAAe,KAAK,SAAS,SAAS,IAAI,eAAe;GAC3E,MAAM,YAAY,eAAe,IAAI,IAAI,SAAS,SAAS,IAAI,eAAe;GAE9E,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,SAAS,UAAU,CAAC,MAAM;IAC1B,SAAS,UAAU,CAAC,MAAM;GAC5B;GAEA,IAAI,MAAM,YAAY,SAAS,WAAW;IACxC,SAAS,UAAU,CAAC,MAAM;IAC1B,SAAS,UAAU,CAAC,MAAM;GAC5B;GAEA,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;IACtD,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;GACxD;GAEA,IAAI,MAAM,YAAY,SAAS,cAAc;IAC3C,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;IACtD,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;GACxD;EACF;CACF;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,SAAS,SAAS;EAE3C,UAAA,oBAAC,gBAAD;GACE,KAAK,CAAC;IAAE,eAAe;IAAY,SAAS;GAAS,GAAG,GAAG;GAC3D,GAAI,UAAU,MAAM;GACpB,GAAI;GACJ,MAAK;GACL,gBAAc;GACd,MAAM;GACN,UAAU,UAAU;IAClB,UAAU,KAAK;IACf,KAAK,SAAS,SAAS,EAAE;GAC3B;GACA,WAAW;EACZ,CAAA;CACe,CAAA;AAEtB,CAAC;AAED,UAAU,cAAc;AACxB,UAAU,UAAUA;AACpB,UAAU,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.mjs","names":["useId"],"sources":["../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n DataAttributes,\n Factory,\n genericFactory,\n MantineSize,\n Primitive,\n useProps,\n} from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface RadioGroupContextValue<Value extends Primitive = string> {\n size: MantineSize | undefined;\n value: Value | null;\n onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;\n name: string;\n disabled: boolean | undefined;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport type RadioGroupStylesNames = InputWrapperStylesNames;\n\nexport interface RadioGroupProps<Value extends Primitive = string> extends Omit<\n InputWrapperProps,\n 'onChange' | 'value' | 'defaultValue'\n> {\n /** `Radio` components and any other elements */\n children: React.ReactNode;\n\n /** Controlled component value */\n value?: Value | null;\n\n /** Uncontrolled component default value */\n defaultValue?: Value | null;\n\n /** Called when value changes */\n onChange?: (value: Value) => void;\n\n /** Props passed down to the `Input.Wrapper` */\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /** Controls size of the `Input.Wrapper` @default 'sm' */\n size?: MantineSize;\n\n /** `name` attribute of child radio inputs. By default, `name` is generated randomly. */\n name?: string;\n\n /** If set, value cannot be changed */\n readOnly?: boolean;\n\n /** Sets `disabled` attribute, prevents interactions */\n disabled?: boolean;\n}\n\nexport type RadioGroupFactory = Factory<{\n props: RadioGroupProps;\n ref: HTMLDivElement;\n stylesNames: RadioGroupStylesNames;\n signature: <Value extends Primitive = string>(props: RadioGroupProps<Value>) => React.JSX.Element;\n}>;\n\nexport const RadioGroup = genericFactory<RadioGroupFactory>(((props: RadioGroupProps<string>) => {\n const {\n value,\n defaultValue,\n onChange,\n size,\n wrapperProps,\n children,\n name,\n readOnly,\n disabled,\n ...others\n } = useProps('RadioGroup', null, props);\n\n const _name = useId(name);\n\n const [_value, setValue] = useUncontrolled<string | null>({\n value,\n defaultValue,\n finalValue: '',\n onChange: onChange as any,\n });\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement> | string) =>\n !readOnly && setValue(typeof event === 'string' ? event : event.currentTarget.value);\n\n return (\n <RadioGroupContext\n value={{ value: _value, onChange: handleChange, size, name: _name, disabled }}\n >\n <Input.Wrapper\n size={size}\n {...wrapperProps}\n {...others}\n labelElement=\"div\"\n __staticSelector=\"RadioGroup\"\n >\n <InputsGroupFieldset role=\"radiogroup\">{children}</InputsGroupFieldset>\n </Input.Wrapper>\n </RadioGroupContext>\n );\n}) as any);\n\nRadioGroup.classes = Input.Wrapper.classes;\nRadioGroup.displayName = '@mantine/core/RadioGroup';\n"],"mappings":";;;;;;;;;AAqBA,MAAa,oBAAoB,cAA6C,IAAI;AA2ClF,MAAa,aAAa,iBAAoC,UAAmC;CAC/F,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,MACA,UACA,UACA,GAAG,WACD,SAAS,cAAc,MAAM,KAAK;CAEtC,MAAM,QAAQA,QAAM,IAAI;CAExB,MAAM,CAAC,QAAQ,YAAY,gBAA+B;EACxD;EACA;EACA,YAAY;EACF;CACZ,CAAC;CAED,MAAM,gBAAgB,UACpB,CAAC,YAAY,SAAS,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc,KAAK;CAErF,OACE,oBAAC,mBAAD;EACE,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM,MAAM;GAAO;EAAS;
|
|
1
|
+
{"version":3,"file":"RadioGroup.mjs","names":["useId"],"sources":["../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n DataAttributes,\n Factory,\n genericFactory,\n MantineSize,\n Primitive,\n useProps,\n} from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface RadioGroupContextValue<Value extends Primitive = string> {\n size: MantineSize | undefined;\n value: Value | null;\n onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;\n name: string;\n disabled: boolean | undefined;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport type RadioGroupStylesNames = InputWrapperStylesNames;\n\nexport interface RadioGroupProps<Value extends Primitive = string> extends Omit<\n InputWrapperProps,\n 'onChange' | 'value' | 'defaultValue'\n> {\n /** `Radio` components and any other elements */\n children: React.ReactNode;\n\n /** Controlled component value */\n value?: Value | null;\n\n /** Uncontrolled component default value */\n defaultValue?: Value | null;\n\n /** Called when value changes */\n onChange?: (value: Value) => void;\n\n /** Props passed down to the `Input.Wrapper` */\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /** Controls size of the `Input.Wrapper` @default 'sm' */\n size?: MantineSize;\n\n /** `name` attribute of child radio inputs. By default, `name` is generated randomly. */\n name?: string;\n\n /** If set, value cannot be changed */\n readOnly?: boolean;\n\n /** Sets `disabled` attribute, prevents interactions */\n disabled?: boolean;\n}\n\nexport type RadioGroupFactory = Factory<{\n props: RadioGroupProps;\n ref: HTMLDivElement;\n stylesNames: RadioGroupStylesNames;\n signature: <Value extends Primitive = string>(props: RadioGroupProps<Value>) => React.JSX.Element;\n}>;\n\nexport const RadioGroup = genericFactory<RadioGroupFactory>(((props: RadioGroupProps<string>) => {\n const {\n value,\n defaultValue,\n onChange,\n size,\n wrapperProps,\n children,\n name,\n readOnly,\n disabled,\n ...others\n } = useProps('RadioGroup', null, props);\n\n const _name = useId(name);\n\n const [_value, setValue] = useUncontrolled<string | null>({\n value,\n defaultValue,\n finalValue: '',\n onChange: onChange as any,\n });\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement> | string) =>\n !readOnly && setValue(typeof event === 'string' ? event : event.currentTarget.value);\n\n return (\n <RadioGroupContext\n value={{ value: _value, onChange: handleChange, size, name: _name, disabled }}\n >\n <Input.Wrapper\n size={size}\n {...wrapperProps}\n {...others}\n labelElement=\"div\"\n __staticSelector=\"RadioGroup\"\n >\n <InputsGroupFieldset role=\"radiogroup\">{children}</InputsGroupFieldset>\n </Input.Wrapper>\n </RadioGroupContext>\n );\n}) as any);\n\nRadioGroup.classes = Input.Wrapper.classes;\nRadioGroup.displayName = '@mantine/core/RadioGroup';\n"],"mappings":";;;;;;;;;AAqBA,MAAa,oBAAoB,cAA6C,IAAI;AA2ClF,MAAa,aAAa,iBAAoC,UAAmC;CAC/F,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,MACA,UACA,UACA,GAAG,WACD,SAAS,cAAc,MAAM,KAAK;CAEtC,MAAM,QAAQA,QAAM,IAAI;CAExB,MAAM,CAAC,QAAQ,YAAY,gBAA+B;EACxD;EACA;EACA,YAAY;EACF;CACZ,CAAC;CAED,MAAM,gBAAgB,UACpB,CAAC,YAAY,SAAS,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc,KAAK;CAErF,OACE,oBAAC,mBAAD;EACE,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM,MAAM;GAAO;EAAS;EAE5E,UAAA,oBAAC,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;GAEjB,UAAA,oBAAC,qBAAD;IAAqB,MAAK;IAAc;GAA8B,CAAA;EACzD,CAAA;CACE,CAAA;AAEvB,EAAS;AAET,WAAW,UAAU,MAAM,QAAQ;AACnC,WAAW,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioIcon.mjs","names":[],"sources":["../../../src/components/Radio/RadioIcon.tsx"],"sourcesContent":["import { rem } from '../../core';\n\nexport interface RadioIconProps extends React.ComponentProps<'svg'> {\n size?: string | number;\n}\n\nexport function RadioIcon({ size, style, ...others }: RadioIconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 5 5\"\n style={{ width: rem(size), height: rem(size), ...style }}\n aria-hidden\n {...others}\n >\n <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"currentColor\" />\n </svg>\n );\n}\n"],"mappings":";;;;AAMA,SAAgB,UAAU,EAAE,MAAM,OAAO,GAAG,UAA0B;CACpE,OACE,oBAAC,OAAD;EACE,OAAM;EACN,MAAK;EACL,SAAQ;EACR,OAAO;GAAE,OAAO,IAAI,IAAI;GAAG,QAAQ,IAAI,IAAI;GAAG,GAAG;EAAM;EACvD,eAAA;EACA,GAAI;
|
|
1
|
+
{"version":3,"file":"RadioIcon.mjs","names":[],"sources":["../../../src/components/Radio/RadioIcon.tsx"],"sourcesContent":["import { rem } from '../../core';\n\nexport interface RadioIconProps extends React.ComponentProps<'svg'> {\n size?: string | number;\n}\n\nexport function RadioIcon({ size, style, ...others }: RadioIconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 5 5\"\n style={{ width: rem(size), height: rem(size), ...style }}\n aria-hidden\n {...others}\n >\n <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"currentColor\" />\n </svg>\n );\n}\n"],"mappings":";;;;AAMA,SAAgB,UAAU,EAAE,MAAM,OAAO,GAAG,UAA0B;CACpE,OACE,oBAAC,OAAD;EACE,OAAM;EACN,MAAK;EACL,SAAQ;EACR,OAAO;GAAE,OAAO,IAAI,IAAI;GAAG,QAAQ,IAAI,IAAI;GAAG,GAAG;EAAM;EACvD,eAAA;EACA,GAAI;EAEJ,UAAA,oBAAC,UAAD;GAAQ,IAAG;GAAM,IAAG;GAAM,GAAE;GAAM,MAAK;EAAgB,CAAA;CACpD,CAAA;AAET"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Radio/RadioIndicator/RadioIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport { RadioCardContext } from '../RadioCard/RadioCard';\nimport { RadioIcon, RadioIconProps } from '../RadioIcon';\nimport classes from './RadioIndicator.module.css';\n\nexport type RadioIndicatorStylesNames = 'indicator' | 'icon';\nexport type RadioIndicatorVariant = 'filled' | 'outline';\nexport type RadioIndicatorCssVariables = {\n indicator:\n | '--radio-size'\n | '--radio-radius'\n | '--radio-color'\n | '--radio-icon-color'\n | '--radio-icon-size';\n};\n\nexport interface RadioIndicatorProps\n extends BoxProps, StylesApiProps<RadioIndicatorFactory>, ElementProps<'div'> {\n /** Key of theme.colors or any valid CSS color to set indicator background color in checked state @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls size of the component @default 'sm' */\n size?: MantineSize | (string & {}) | number;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n iconColor?: MantineColor;\n\n /** If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** A component that replaces the default radio icon (centered dot) */\n icon?: React.FC<RadioIconProps>;\n\n /** Checked state */\n checked?: boolean;\n\n /** Disabled state */\n disabled?: boolean;\n}\n\nexport type RadioIndicatorFactory = Factory<{\n props: RadioIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: RadioIndicatorStylesNames;\n vars: RadioIndicatorCssVariables;\n variant: RadioIndicatorVariant;\n}>;\n\nconst defaultProps = {\n icon: RadioIcon,\n} satisfies Partial<RadioIndicatorProps>;\n\nconst varsResolver = createVarsResolver<RadioIndicatorFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n indicator: {\n '--radio-size': getSize(size, 'radio-size'),\n '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--radio-icon-size':\n typeof size === 'number'\n ? `calc(${getSize(size, 'radio-size')} * 0.4)`\n : getSize(size, 'radio-icon-size'),\n '--radio-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const RadioIndicator = factory<RadioIndicatorFactory>((_props) => {\n const props = useProps('RadioIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n icon: Icon,\n radius,\n color,\n iconColor,\n autoContrast,\n checked,\n mod,\n variant,\n disabled,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioIndicatorFactory>({\n name: 'RadioIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'indicator',\n });\n\n const ctx = use(RadioCardContext);\n const _checked = typeof checked === 'boolean' ? checked : ctx?.checked || false;\n\n return (\n <Box\n {...getStyles('indicator', { variant })}\n variant={variant}\n mod={[{ checked: _checked, disabled }, mod]}\n {...others}\n >\n <Icon {...getStyles('icon')} />\n </Box>\n );\n});\n\nRadioIndicator.displayName = '@mantine/core/RadioIndicator';\nRadioIndicator.classes = classes;\nRadioIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAuEA,MAAM,eAAe,EACnB,MAAM,UACR;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,OAAO,EACL,WAAW;EACT,gBAAgB,QAAQ,MAAM,YAAY;EAC1C,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACrE,iBAAiB,YAAY,YAAY,eAAe,cAAc,OAAO,KAAK;EAClF,qBACE,OAAO,SAAS,WACZ,QAAQ,QAAQ,MAAM,YAAY,EAAE,WACpC,QAAQ,MAAM,iBAAiB;EACrC,sBAAsB,YAClB,cAAc,WAAW,KAAK,IAC9B,qBAAqB,cAAc,KAAK,IACtC,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACR,EACF;AACF,CACF;AAEA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,IAAI,gBAAgB;CAChC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,WAAW;CAE1E,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;
|
|
1
|
+
{"version":3,"file":"RadioIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Radio/RadioIndicator/RadioIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport { RadioCardContext } from '../RadioCard/RadioCard';\nimport { RadioIcon, RadioIconProps } from '../RadioIcon';\nimport classes from './RadioIndicator.module.css';\n\nexport type RadioIndicatorStylesNames = 'indicator' | 'icon';\nexport type RadioIndicatorVariant = 'filled' | 'outline';\nexport type RadioIndicatorCssVariables = {\n indicator:\n | '--radio-size'\n | '--radio-radius'\n | '--radio-color'\n | '--radio-icon-color'\n | '--radio-icon-size';\n};\n\nexport interface RadioIndicatorProps\n extends BoxProps, StylesApiProps<RadioIndicatorFactory>, ElementProps<'div'> {\n /** Key of theme.colors or any valid CSS color to set indicator background color in checked state @default theme.primaryColor */\n color?: MantineColor;\n\n /** Controls size of the component @default 'sm' */\n size?: MantineSize | (string & {}) | number;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n iconColor?: MantineColor;\n\n /** If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n\n /** A component that replaces the default radio icon (centered dot) */\n icon?: React.FC<RadioIconProps>;\n\n /** Checked state */\n checked?: boolean;\n\n /** Disabled state */\n disabled?: boolean;\n}\n\nexport type RadioIndicatorFactory = Factory<{\n props: RadioIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: RadioIndicatorStylesNames;\n vars: RadioIndicatorCssVariables;\n variant: RadioIndicatorVariant;\n}>;\n\nconst defaultProps = {\n icon: RadioIcon,\n} satisfies Partial<RadioIndicatorProps>;\n\nconst varsResolver = createVarsResolver<RadioIndicatorFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n indicator: {\n '--radio-size': getSize(size, 'radio-size'),\n '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--radio-icon-size':\n typeof size === 'number'\n ? `calc(${getSize(size, 'radio-size')} * 0.4)`\n : getSize(size, 'radio-icon-size'),\n '--radio-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const RadioIndicator = factory<RadioIndicatorFactory>((_props) => {\n const props = useProps('RadioIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n icon: Icon,\n radius,\n color,\n iconColor,\n autoContrast,\n checked,\n mod,\n variant,\n disabled,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioIndicatorFactory>({\n name: 'RadioIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'indicator',\n });\n\n const ctx = use(RadioCardContext);\n const _checked = typeof checked === 'boolean' ? checked : ctx?.checked || false;\n\n return (\n <Box\n {...getStyles('indicator', { variant })}\n variant={variant}\n mod={[{ checked: _checked, disabled }, mod]}\n {...others}\n >\n <Icon {...getStyles('icon')} />\n </Box>\n );\n});\n\nRadioIndicator.displayName = '@mantine/core/RadioIndicator';\nRadioIndicator.classes = classes;\nRadioIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAuEA,MAAM,eAAe,EACnB,MAAM,UACR;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,OAAO,EACL,WAAW;EACT,gBAAgB,QAAQ,MAAM,YAAY;EAC1C,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACrE,iBAAiB,YAAY,YAAY,eAAe,cAAc,OAAO,KAAK;EAClF,qBACE,OAAO,SAAS,WACZ,QAAQ,QAAQ,MAAM,YAAY,EAAE,WACpC,QAAQ,MAAM,iBAAiB;EACrC,sBAAsB,YAClB,cAAc,WAAW,KAAK,IAC9B,qBAAqB,cAAc,KAAK,IACtC,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACR,EACF;AACF,CACF;AAEA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,IAAI,gBAAgB;CAChC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,WAAW;CAE1E,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;EAEJ,UAAA,oBAAC,MAAD,EAAM,GAAI,UAAU,MAAM,EAAI,CAAA;CAC3B,CAAA;AAET,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUA;AACzB,eAAe,eAAe"}
|
|
@@ -67,7 +67,8 @@ const Rating = factory((_props) => {
|
|
|
67
67
|
if (!rootRef.current) return 0;
|
|
68
68
|
const { left, right, width } = rootRef.current.getBoundingClientRect();
|
|
69
69
|
const symbolWidth = width / _count;
|
|
70
|
-
|
|
70
|
+
const hoverValue = (dir === "rtl" ? right - x : x - left) / symbolWidth;
|
|
71
|
+
return clamp(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);
|
|
71
72
|
};
|
|
72
73
|
const handleMouseEnter = (event) => {
|
|
73
74
|
onMouseEnter?.(event);
|
|
@@ -102,8 +103,10 @@ const Rating = factory((_props) => {
|
|
|
102
103
|
};
|
|
103
104
|
const handleItemBlur = () => isOutside && setHovered(-1);
|
|
104
105
|
const handleInputChange = (event) => {
|
|
105
|
-
if (!readOnly)
|
|
106
|
-
|
|
106
|
+
if (!readOnly) {
|
|
107
|
+
if (typeof event === "number") setHovered(event);
|
|
108
|
+
else setHovered(parseFloat(event.target.value));
|
|
109
|
+
}
|
|
107
110
|
};
|
|
108
111
|
const handleChange = (event) => {
|
|
109
112
|
if (!readOnly) {
|