@react-md/core 1.0.0-next.10 → 1.0.0-next.12
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/.turbo/turbo-build.log +22 -22
- package/.turbo/turbo-lint.log +3 -3
- package/.turbo/turbo-typecheck.log +1 -1
- package/CHANGELOG.md +12 -0
- package/dist/CoreProviders.js.map +1 -1
- package/dist/NoSsr.js.map +1 -1
- package/dist/RootHtml.js.map +1 -1
- package/dist/SsrProvider.js.map +1 -1
- package/dist/app-bar/AppBar.js.map +1 -1
- package/dist/app-bar/AppBarTitle.d.ts +2 -1
- package/dist/app-bar/AppBarTitle.js.map +1 -1
- package/dist/avatar/Avatar.js.map +1 -1
- package/dist/avatar/styles.js.map +1 -1
- package/dist/badge/Badge.js.map +1 -1
- package/dist/box/Box.js.map +1 -1
- package/dist/box/styles.js.map +1 -1
- package/dist/button/AsyncButton.js.map +1 -1
- package/dist/button/Button.js.map +1 -1
- package/dist/button/ButtonUnstyled.js.map +1 -1
- package/dist/button/FloatingActionButton.js.map +1 -1
- package/dist/button/TooltippedButton.js.map +1 -1
- package/dist/button/buttonStyles.js.map +1 -1
- package/dist/button/buttonUnstyledStyles.js.map +1 -1
- package/dist/card/Card.js.map +1 -1
- package/dist/card/CardContent.js.map +1 -1
- package/dist/card/CardFooter.js.map +1 -1
- package/dist/card/CardHeader.js.map +1 -1
- package/dist/card/CardSubtitle.js.map +1 -1
- package/dist/card/CardTitle.js.map +1 -1
- package/dist/card/ClickableCard.js.map +1 -1
- package/dist/card/styles.js.map +1 -1
- package/dist/chip/Chip.js.map +1 -1
- package/dist/chip/styles.js.map +1 -1
- package/dist/cssUtils.js.map +1 -1
- package/dist/delegateEvent.js.map +1 -1
- package/dist/dialog/Dialog.js.map +1 -1
- package/dist/dialog/DialogContainer.js.map +1 -1
- package/dist/dialog/DialogContent.js.map +1 -1
- package/dist/dialog/DialogFooter.js.map +1 -1
- package/dist/dialog/DialogHeader.js.map +1 -1
- package/dist/dialog/DialogTitle.d.ts +2 -1
- package/dist/dialog/DialogTitle.js.map +1 -1
- package/dist/dialog/FixedDialog.js.map +1 -1
- package/dist/dialog/NestedDialogProvider.js.map +1 -1
- package/dist/dialog/styles.js.map +1 -1
- package/dist/divider/Divider.js.map +1 -1
- package/dist/divider/styles.js.map +1 -1
- package/dist/draggable/useDraggable.js.map +1 -1
- package/dist/draggable/utils.js.map +1 -1
- package/dist/expansion-panel/ExpansionList.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanel.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanelHeader.d.ts +2 -1
- package/dist/expansion-panel/ExpansionPanelHeader.js +1 -1
- package/dist/expansion-panel/ExpansionPanelHeader.js.map +1 -1
- package/dist/expansion-panel/useExpansionList.js.map +1 -1
- package/dist/expansion-panel/useExpansionPanels.js.map +1 -1
- package/dist/focus/useFocusContainer.js.map +1 -1
- package/dist/focus/utils.js.map +1 -1
- package/dist/form/Checkbox.js.map +1 -1
- package/dist/form/Fieldset.js.map +1 -1
- package/dist/form/FileInput.js.map +1 -1
- package/dist/form/Form.js.map +1 -1
- package/dist/form/FormMessage.js.map +1 -1
- package/dist/form/FormMessageContainer.js.map +1 -1
- package/dist/form/FormMessageCounter.js.map +1 -1
- package/dist/form/InputToggle.js.map +1 -1
- package/dist/form/InputToggleIcon.js.map +1 -1
- package/dist/form/Label.js.map +1 -1
- package/dist/form/Legend.js.map +1 -1
- package/dist/form/MenuItemCheckbox.js.map +1 -1
- package/dist/form/MenuItemFileInput.js.map +1 -1
- package/dist/form/MenuItemInputToggle.js.map +1 -1
- package/dist/form/MenuItemRadio.js.map +1 -1
- package/dist/form/MenuItemSwitch.js.map +1 -1
- package/dist/form/MenuItemTextField.js.map +1 -1
- package/dist/form/NativeSelect.js.map +1 -1
- package/dist/form/OptGroup.js.map +1 -1
- package/dist/form/Option.js.map +1 -1
- package/dist/form/Password.js.map +1 -1
- package/dist/form/Radio.js.map +1 -1
- package/dist/form/ResizingTextAreaWrapper.js.map +1 -1
- package/dist/form/Select.js.map +1 -1
- package/dist/form/SelectedOption.js.map +1 -1
- package/dist/form/Slider.js.map +1 -1
- package/dist/form/SliderContainer.js.map +1 -1
- package/dist/form/SliderMark.js.map +1 -1
- package/dist/form/SliderMarkLabel.d.ts +2 -1
- package/dist/form/SliderMarkLabel.js.map +1 -1
- package/dist/form/SliderThumb.js.map +1 -1
- package/dist/form/SliderTrack.js.map +1 -1
- package/dist/form/SliderValueMarks.js.map +1 -1
- package/dist/form/SliderValueTooltip.js.map +1 -1
- package/dist/form/Switch.js.map +1 -1
- package/dist/form/SwitchTrack.js.map +1 -1
- package/dist/form/TextArea.js.map +1 -1
- package/dist/form/TextField.js.map +1 -1
- package/dist/form/TextFieldAddon.js.map +1 -1
- package/dist/form/TextFieldContainer.js +2 -2
- package/dist/form/TextFieldContainer.js.map +1 -1
- package/dist/form/fileUtils.js.map +1 -1
- package/dist/form/formConfig.js.map +1 -1
- package/dist/form/formMessageStyles.js.map +1 -1
- package/dist/form/inputToggleStyles.js.map +1 -1
- package/dist/form/menuItemInputToggleStyles.js.map +1 -1
- package/dist/form/nativeSelectStyles.js.map +1 -1
- package/dist/form/optionStyles.js.map +1 -1
- package/dist/form/passwordStyles.js.map +1 -1
- package/dist/form/selectStyles.js.map +1 -1
- package/dist/form/selectUtils.js.map +1 -1
- package/dist/form/sliderUtils.js.map +1 -1
- package/dist/form/switchStyles.js.map +1 -1
- package/dist/form/textAreaStyles.js.map +1 -1
- package/dist/form/{TextFieldContainerStyles.js → textFieldContainerStyles.js} +1 -1
- package/dist/form/{TextFieldContainerStyles.js.map → textFieldContainerStyles.js.map} +1 -1
- package/dist/form/textFieldStyles.js.map +1 -1
- package/dist/form/types.js.map +1 -1
- package/dist/form/useCheckboxGroup.js.map +1 -1
- package/dist/form/useCombobox.js.map +1 -1
- package/dist/form/useEditableCombobox.js.map +1 -1
- package/dist/form/useFileUpload.js.map +1 -1
- package/dist/form/useFormReset.js.map +1 -1
- package/dist/form/useListboxProvider.js.map +1 -1
- package/dist/form/useNumberField.js.map +1 -1
- package/dist/form/useRadioGroup.js.map +1 -1
- package/dist/form/useRangeSlider.js.map +1 -1
- package/dist/form/useResizingTextArea.js.map +1 -1
- package/dist/form/useSelectCombobox.js.map +1 -1
- package/dist/form/useSlider.js.map +1 -1
- package/dist/form/useTextField.js.map +1 -1
- package/dist/form/utils.js.map +1 -1
- package/dist/form/validation.js.map +1 -1
- package/dist/hoverMode/useHoverMode.js.map +1 -1
- package/dist/hoverMode/useHoverModeProvider.js.map +1 -1
- package/dist/icon/FontIcon.js.map +1 -1
- package/dist/icon/IconRotator.js.map +1 -1
- package/dist/icon/MaterialIcon.js.map +1 -1
- package/dist/icon/MaterialSymbol.js.map +1 -1
- package/dist/icon/SVGIcon.js.map +1 -1
- package/dist/icon/TextIconSpacing.js.map +1 -1
- package/dist/icon/iconConfig.js.map +1 -1
- package/dist/icon/material.js.map +1 -1
- package/dist/icon/materialConfig.js.map +1 -1
- package/dist/icon/styles.js.map +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/interaction/Ripple.js.map +1 -1
- package/dist/interaction/RippleContainer.js.map +1 -1
- package/dist/interaction/UserInteractionModeProvider.js.map +1 -1
- package/dist/interaction/config.js.map +1 -1
- package/dist/interaction/types.js.map +1 -1
- package/dist/interaction/useElementInteraction.js.map +1 -1
- package/dist/interaction/useHigherContrastChildren.js.map +1 -1
- package/dist/interaction/utils.js.map +1 -1
- package/dist/layout/LayoutAppBar.js.map +1 -1
- package/dist/layout/LayoutNav.js.map +1 -1
- package/dist/layout/LayoutWindowSplitter.js.map +1 -1
- package/dist/layout/Main.js.map +1 -1
- package/dist/layout/layoutNavStyles.js.map +1 -1
- package/dist/layout/layoutWindowSplitterStyles.js.map +1 -1
- package/dist/layout/mainStyles.js.map +1 -1
- package/dist/layout/useExpandableLayout.js.map +1 -1
- package/dist/layout/useHorizontalLayoutTransition.js.map +1 -1
- package/dist/layout/useLayoutAppBarHeight.js.map +1 -1
- package/dist/layout/useLayoutTree.js.map +1 -1
- package/dist/layout/useLayoutWindowSplitter.js.map +1 -1
- package/dist/layout/useMainTabIndex.js.map +1 -1
- package/dist/layout/useResizableLayout.js.map +1 -1
- package/dist/layout/useTemporaryLayout.js.map +1 -1
- package/dist/link/Link.js.map +1 -1
- package/dist/link/SkipToMainContent.js.map +1 -1
- package/dist/link/styles.js.map +1 -1
- package/dist/list/List.js.map +1 -1
- package/dist/list/ListItem.js.map +1 -1
- package/dist/list/ListItemAddon.js.map +1 -1
- package/dist/list/ListItemChildren.js.map +1 -1
- package/dist/list/ListItemLink.js.map +1 -1
- package/dist/list/ListItemText.js.map +1 -1
- package/dist/list/ListSubheader.js.map +1 -1
- package/dist/list/getListItemHeight.js.map +1 -1
- package/dist/list/listItemStyles.js.map +1 -1
- package/dist/list/types.js.map +1 -1
- package/dist/media-queries/AppSizeProvider.js.map +1 -1
- package/dist/media-queries/appSize.js.map +1 -1
- package/dist/media-queries/useMediaQuery.js.map +1 -1
- package/dist/menu/DropdownMenu.js.map +1 -1
- package/dist/menu/Menu.js.map +1 -1
- package/dist/menu/MenuBar.js.map +1 -1
- package/dist/menu/MenuButton.js.map +1 -1
- package/dist/menu/MenuConfigurationProvider.js.map +1 -1
- package/dist/menu/MenuItem.js.map +1 -1
- package/dist/menu/MenuItemButton.js.map +1 -1
- package/dist/menu/MenuItemCircularProgress.js.map +1 -1
- package/dist/menu/MenuItemGroup.js.map +1 -1
- package/dist/menu/MenuItemSeparator.js.map +1 -1
- package/dist/menu/MenuSheet.js.map +1 -1
- package/dist/menu/MenuVisibilityProvider.js.map +1 -1
- package/dist/menu/MenuWidget.js.map +1 -1
- package/dist/menu/MenuWidgetKeyboardProvider.js.map +1 -1
- package/dist/menu/useContextMenu.js.map +1 -1
- package/dist/menu/useMenuBarProvider.js.map +1 -1
- package/dist/menu/utils.js.map +1 -1
- package/dist/movement/constants.js.map +1 -1
- package/dist/movement/findMatchIndex.js.map +1 -1
- package/dist/movement/types.js.map +1 -1
- package/dist/movement/useKeyboardMovementProvider.js.map +1 -1
- package/dist/movement/utils.js.map +1 -1
- package/dist/overlay/Overlay.js.map +1 -1
- package/dist/overlay/overlayStyles.js.map +1 -1
- package/dist/portal/Portal.js.map +1 -1
- package/dist/portal/PortalContainerProvider.js.map +1 -1
- package/dist/positioning/constants.js.map +1 -1
- package/dist/positioning/createHorizontalPosition.js.map +1 -1
- package/dist/positioning/createVerticalPosition.js.map +1 -1
- package/dist/positioning/getFixedPosition.js.map +1 -1
- package/dist/positioning/types.js.map +1 -1
- package/dist/positioning/useFixedPositioning.js.map +1 -1
- package/dist/positioning/utils.js.map +1 -1
- package/dist/progress/CircularProgress.js.map +1 -1
- package/dist/progress/LinearProgress.js.map +1 -1
- package/dist/progress/getProgressA11y.js.map +1 -1
- package/dist/progress/types.js.map +1 -1
- package/dist/responsive-item/ResponsiveItemContainer.js.map +1 -1
- package/dist/responsive-item/ResponsiveItemOverlay.js.map +1 -1
- package/dist/responsive-item/styles.js.map +1 -1
- package/dist/scroll/ScrollLock.js.map +1 -1
- package/dist/scroll/getScrollbarWidth.js.map +1 -1
- package/dist/scroll/useScrollLock.js.map +1 -1
- package/dist/searching/caseInsensitive.js.map +1 -1
- package/dist/searching/fuzzy.js.map +1 -1
- package/dist/searching/toSearchQuery.js.map +1 -1
- package/dist/searching/types.js.map +1 -1
- package/dist/searching/useFuzzyMatch.js.map +1 -1
- package/dist/searching/utils.js.map +1 -1
- package/dist/segmented-button/SegmentedButton.js.map +1 -1
- package/dist/segmented-button/SegmentedButtonContainer.js.map +1 -1
- package/dist/segmented-button/segmentedButtonContainerStyles.js.map +1 -1
- package/dist/segmented-button/segmentedButtonStyles.js.map +1 -1
- package/dist/sheet/Sheet.js.map +1 -1
- package/dist/sheet/styles.js.map +1 -1
- package/dist/snackbar/DefaultToastRenderer.js.map +1 -1
- package/dist/snackbar/Snackbar.js.map +1 -1
- package/dist/snackbar/Toast.js.map +1 -1
- package/dist/snackbar/ToastActionButton.js.map +1 -1
- package/dist/snackbar/ToastCloseButton.js.map +1 -1
- package/dist/snackbar/ToastContent.js.map +1 -1
- package/dist/snackbar/ToastManager.js.map +1 -1
- package/dist/snackbar/ToastManagerProvider.js.map +1 -1
- package/dist/snackbar/snackbarStyles.js.map +1 -1
- package/dist/snackbar/toastContentStyles.js.map +1 -1
- package/dist/snackbar/toastStyles.js.map +1 -1
- package/dist/snackbar/useCurrentToastActions.js.map +1 -1
- package/dist/suspense/CircularProgressSuspense.js.map +1 -1
- package/dist/suspense/NullSuspense.js.map +1 -1
- package/dist/table/Table.js.map +1 -1
- package/dist/table/TableBody.js.map +1 -1
- package/dist/table/TableCell.js.map +1 -1
- package/dist/table/TableCellContent.js.map +1 -1
- package/dist/table/TableCheckbox.js.map +1 -1
- package/dist/table/TableConfigurationProvider.js.map +1 -1
- package/dist/table/TableContainer.js.map +1 -1
- package/dist/table/TableContainerProvider.js.map +1 -1
- package/dist/table/TableFooter.js.map +1 -1
- package/dist/table/TableHeader.js.map +1 -1
- package/dist/table/TableRadio.js.map +1 -1
- package/dist/table/TableRow.js.map +1 -1
- package/dist/table/tableCellStyles.js.map +1 -1
- package/dist/table/tableContainerStyles.js.map +1 -1
- package/dist/table/tableFooterStyles.js.map +1 -1
- package/dist/table/tableHeaderStyles.js.map +1 -1
- package/dist/table/tableRowStyles.js.map +1 -1
- package/dist/table/tableStyles.js.map +1 -1
- package/dist/table/types.js.map +1 -1
- package/dist/tabs/Tab.js.map +1 -1
- package/dist/tabs/TabList.js.map +1 -1
- package/dist/tabs/TabListScrollButton.js.map +1 -1
- package/dist/tabs/tabIndicatorStyles.js.map +1 -1
- package/dist/tabs/tabListScrollButtonStyles.js.map +1 -1
- package/dist/tabs/tabListStyles.js.map +1 -1
- package/dist/tabs/tabStyles.js.map +1 -1
- package/dist/tabs/useTabList.js.map +1 -1
- package/dist/tabs/useTabs.js.map +1 -1
- package/dist/tabs/utils.js.map +1 -1
- package/dist/test-utils/IntersectionObserver.js.map +1 -1
- package/dist/test-utils/ResizeObserver.js.map +1 -1
- package/dist/test-utils/data-testid.js.map +1 -1
- package/dist/test-utils/index.js.map +1 -1
- package/dist/test-utils/jest-setup.js.map +1 -1
- package/dist/test-utils/matchMedia.js.map +1 -1
- package/dist/test-utils/polyfills/IntersectionObserver.js.map +1 -1
- package/dist/test-utils/polyfills/ResizeObserver.js.map +1 -1
- package/dist/test-utils/polyfills/TextDecoder.js.map +1 -1
- package/dist/test-utils/polyfills/TextEncoder.js.map +1 -1
- package/dist/test-utils/polyfills/index.js.map +1 -1
- package/dist/test-utils/polyfills/matchMedia.js.map +1 -1
- package/dist/test-utils/polyfills/offsetParent.js.map +1 -1
- package/dist/test-utils/polyfills/scrollIntoView.js.map +1 -1
- package/dist/test-utils/render.js.map +1 -1
- package/dist/test-utils/timers.js.map +1 -1
- package/dist/theme/LocalStorageColorSchemeProvider.js.map +1 -1
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/colors.js.map +1 -1
- package/dist/theme/cssVars.js.map +1 -1
- package/dist/theme/types.js.map +1 -1
- package/dist/theme/useCSSVariables.js.map +1 -1
- package/dist/theme/useColorScheme.js.map +1 -1
- package/dist/theme/useColorSchemeMetaTag.js.map +1 -1
- package/dist/theme/useColorSchemeProvider.js.map +1 -1
- package/dist/theme/usePrefersColorScheme.js.map +1 -1
- package/dist/theme/utils.js.map +1 -1
- package/dist/tooltip/Tooltip.js.map +1 -1
- package/dist/tooltip/TooltipHoverModeProvider.js.map +1 -1
- package/dist/tooltip/constants.js.map +1 -1
- package/dist/tooltip/tooltipStyles.js.map +1 -1
- package/dist/tooltip/useTooltip.js.map +1 -1
- package/dist/tooltip/useTooltipPosition.js.map +1 -1
- package/dist/tooltip/utils.js.map +1 -1
- package/dist/transition/CSSTransition.js.map +1 -1
- package/dist/transition/Collapse.js.map +1 -1
- package/dist/transition/CrossFade.js.map +1 -1
- package/dist/transition/ScaleTransition.js.map +1 -1
- package/dist/transition/SkeletonPlaceholder.js.map +1 -1
- package/dist/transition/Slide.js.map +1 -1
- package/dist/transition/SlideContainer.js.map +1 -1
- package/dist/transition/collapseStyles.js.map +1 -1
- package/dist/transition/config.js.map +1 -1
- package/dist/transition/maxWidthTransition.js.map +1 -1
- package/dist/transition/skeletonPlaceholderUtils.js.map +1 -1
- package/dist/transition/types.js.map +1 -1
- package/dist/transition/useCSSTransition.js.map +1 -1
- package/dist/transition/useCarousel.js.map +1 -1
- package/dist/transition/useCollapseTransition.js.map +1 -1
- package/dist/transition/useCrossFadeTransition.js.map +1 -1
- package/dist/transition/useMaxWidthTransition.js.map +1 -1
- package/dist/transition/useScaleTransition.js.map +1 -1
- package/dist/transition/useSkeletonPlaceholder.js.map +1 -1
- package/dist/transition/useSlideTransition.js.map +1 -1
- package/dist/transition/useTransition.js.map +1 -1
- package/dist/transition/utils.js.map +1 -1
- package/dist/tree/DefaultTreeItemRenderer.js.map +1 -1
- package/dist/tree/Tree.js.map +1 -1
- package/dist/tree/TreeGroup.js.map +1 -1
- package/dist/tree/TreeItem.js.map +1 -1
- package/dist/tree/TreeItemExpander.js.map +1 -1
- package/dist/tree/TreeProvider.js.map +1 -1
- package/dist/tree/styles.js.map +1 -1
- package/dist/tree/types.js.map +1 -1
- package/dist/tree/useTree.js.map +1 -1
- package/dist/tree/useTreeExpansion.js.map +1 -1
- package/dist/tree/useTreeItems.js.map +1 -1
- package/dist/tree/useTreeMovement.js.map +1 -1
- package/dist/tree/useTreeSelection.js.map +1 -1
- package/dist/tree/utils.js.map +1 -1
- package/dist/types.js.map +1 -1
- package/dist/typography/SrOnly.js.map +1 -1
- package/dist/typography/TextContainer.d.ts +1 -40
- package/dist/typography/TextContainer.js +1 -30
- package/dist/typography/TextContainer.js.map +1 -1
- package/dist/typography/Typography.d.ts +1 -112
- package/dist/typography/Typography.js +1 -89
- package/dist/typography/Typography.js.map +1 -1
- package/dist/typography/WritingDirectionProvider.js.map +1 -1
- package/dist/typography/textContainerStyles.d.ts +40 -0
- package/dist/typography/textContainerStyles.js +32 -0
- package/dist/typography/textContainerStyles.js.map +1 -0
- package/dist/typography/typographyStyles.d.ts +112 -0
- package/dist/typography/typographyStyles.js +91 -0
- package/dist/typography/typographyStyles.js.map +1 -0
- package/dist/useAsyncAction.js.map +1 -1
- package/dist/useDebouncedFunction.js.map +1 -1
- package/dist/useDropzone.js.map +1 -1
- package/dist/useElementSize.js.map +1 -1
- package/dist/useEnsuredId.js.map +1 -1
- package/dist/useEnsuredRef.js.map +1 -1
- package/dist/useEnsuredState.js.map +1 -1
- package/dist/useHtmlClassName.js.map +1 -1
- package/dist/useIntersectionObserver.js.map +1 -1
- package/dist/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist/useLocalStorage.js.map +1 -1
- package/dist/useOrientation.js.map +1 -1
- package/dist/usePageInactive.js.map +1 -1
- package/dist/useResizeListener.js.map +1 -1
- package/dist/useResizeObserver.js.map +1 -1
- package/dist/useThrottledFunction.js.map +1 -1
- package/dist/useToggle.js.map +1 -1
- package/dist/useUnmounted.js.map +1 -1
- package/dist/useWindowSize.js.map +1 -1
- package/dist/utils/RenderRecursively.js.map +1 -1
- package/dist/utils/alphaNumericSort.js.map +1 -1
- package/dist/utils/applyRef.js.map +1 -1
- package/dist/utils/bem.js.map +1 -1
- package/dist/utils/getClientPosition.js.map +1 -1
- package/dist/utils/getMiddleOfRange.js.map +1 -1
- package/dist/utils/getPercentage.js.map +1 -1
- package/dist/utils/getRangeDefaultValue.js.map +1 -1
- package/dist/utils/getRangeSteps.js.map +1 -1
- package/dist/utils/identity.js.map +1 -1
- package/dist/utils/isElementVisible.js.map +1 -1
- package/dist/utils/loop.js.map +1 -1
- package/dist/utils/nearest.js.map +1 -1
- package/dist/utils/parseCssLengthUnit.js.map +1 -1
- package/dist/utils/randomInt.js.map +1 -1
- package/dist/utils/wait.js.map +1 -1
- package/dist/utils/withinRange.js.map +1 -1
- package/dist/window-splitter/WindowSplitter.js.map +1 -1
- package/dist/window-splitter/useWindowSplitter.js.map +1 -1
- package/package.json +21 -13
- package/src/app-bar/AppBarTitle.tsx +2 -5
- package/src/dialog/DialogTitle.tsx +1 -1
- package/src/expansion-panel/ExpansionPanelHeader.tsx +3 -6
- package/src/form/SliderMarkLabel.tsx +1 -1
- package/src/form/TextFieldContainer.tsx +2 -2
- package/src/index.ts +3 -1
- package/src/typography/TextContainer.tsx +4 -53
- package/src/typography/Typography.tsx +5 -145
- package/src/typography/__tests__/TextContainer.tsx +2 -1
- package/src/typography/__tests__/Typography.tsx +2 -1
- package/src/typography/textContainerStyles.ts +53 -0
- package/src/typography/typographyStyles.ts +145 -0
- package/tsconfig.types.json +1 -1
- package/.turbo/turbo-test.log +0 -5512
- /package/dist/form/{TextFieldContainerStyles.d.ts → textFieldContainerStyles.d.ts} +0 -0
- /package/src/form/{TextFieldContainerStyles.ts → textFieldContainerStyles.ts} +0 -0
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
> @react-md/core@1.0.0-next.
|
|
3
|
-
> npm-run-all build-esm build-scss build-types
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
> @react-md/core@1.0.0-next.
|
|
7
|
-
> swc -d ./dist --strip-leading-paths src
|
|
8
|
-
|
|
9
|
-
Successfully compiled:
|
|
10
|
-
|
|
11
|
-
> @react-md/core@1.0.0-next.
|
|
12
|
-
> pnpm run run-script scripts/copySassFiles.ts
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
> @react-md/core@1.0.0-next.
|
|
16
|
-
> tsx --tsconfig scripts/tsconfig.json "scripts/copySassFiles.ts"
|
|
17
|
-
|
|
18
|
-
Copied 38 scss files
|
|
19
|
-
|
|
20
|
-
> @react-md/core@1.0.0-next.
|
|
21
|
-
> tsc -P tsconfig.types.json
|
|
22
|
-
|
|
1
|
+
|
|
2
|
+
> @react-md/core@1.0.0-next.11 build /home/mlaursen/code/react-md/packages/core
|
|
3
|
+
> npm-run-all build-esm build-scss build-types
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
> @react-md/core@1.0.0-next.11 build-esm /home/mlaursen/code/react-md/packages/core
|
|
7
|
+
> swc -d ./dist --strip-leading-paths src
|
|
8
|
+
|
|
9
|
+
Successfully compiled: 385 files with swc (361.15ms)
|
|
10
|
+
|
|
11
|
+
> @react-md/core@1.0.0-next.11 build-scss /home/mlaursen/code/react-md/packages/core
|
|
12
|
+
> pnpm run run-script scripts/copySassFiles.ts
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
> @react-md/core@1.0.0-next.11 run-script /home/mlaursen/code/react-md/packages/core
|
|
16
|
+
> tsx --tsconfig scripts/tsconfig.json "scripts/copySassFiles.ts"
|
|
17
|
+
|
|
18
|
+
Copied 38 scss files
|
|
19
|
+
|
|
20
|
+
> @react-md/core@1.0.0-next.11 build-types /home/mlaursen/code/react-md/packages/core
|
|
21
|
+
> tsc -P tsconfig.types.json
|
|
22
|
+
|
package/.turbo/turbo-lint.log
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
|
|
2
|
-
> @react-md/core@1.0.0-next.
|
|
2
|
+
> @react-md/core@1.0.0-next.11 lint /home/mlaursen/code/react-md/packages/core
|
|
3
3
|
> npm-run-all lint-scripts lint-styles
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
> @react-md/core@1.0.0-next.
|
|
6
|
+
> @react-md/core@1.0.0-next.11 lint-scripts /home/mlaursen/code/react-md/packages/core
|
|
7
7
|
> eslint "src/**/*.{ts,tsx,js,jsx,cjs,mjs}"
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
> @react-md/core@1.0.0-next.
|
|
10
|
+
> @react-md/core@1.0.0-next.11 lint-styles /home/mlaursen/code/react-md/packages/core
|
|
11
11
|
> stylelint "src/**/*.{css,scss}"
|
|
12
12
|
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @react-md/core
|
|
2
2
|
|
|
3
|
+
## 1.0.0-next.12
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Trying a different way to handle package.json exports.
|
|
8
|
+
|
|
9
|
+
## 1.0.0-next.11
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Experimental support for package.json exports and updated material icons.
|
|
14
|
+
|
|
3
15
|
## 1.0.0-next.10
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/CoreProviders.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { SsrProvider } from \"./SsrProvider.js\";\nimport { UserInteractionModeProvider } from \"./interaction/UserInteractionModeProvider.js\";\nimport { AppSizeProvider } from \"./media-queries/AppSizeProvider.js\";\nimport {\n DEFAULT_APP_SIZE,\n DEFAULT_APP_SIZE_QUERIES,\n type AppSize,\n type AppSizeQueries,\n} from \"./media-queries/appSize.js\";\nimport {\n PortalContainerProvider,\n type PortalContainer,\n} from \"./portal/PortalContainerProvider.js\";\n\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { type MenuConfigurationProvider } from \"./menu/MenuConfigurationProvider.js\";\nimport { type Snackbar } from \"./snackbar/Snackbar.js\";\nimport { type LocalStorageColorSchemeProvider } from \"./theme/LocalStorageColorSchemeProvider.js\";\nimport { type ThemeProvider } from \"./theme/ThemeProvider.js\";\nimport { type useColorSchemeProvider } from \"./theme/useColorSchemeProvider.js\";\nimport { type TooltipHoverModeProvider } from \"./tooltip/TooltipHoverModeProvider.js\";\nimport { type WritingDirectionProvider } from \"./typography/WritingDirectionProvider.js\";\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\n/** @remarks \\@since 6.0.0 */\nexport interface ReactMDCoreConfiguration {\n /**\n * Set this to `true` if you are using SSR. This will update some hook\n * behavior so that you will not have mismatched initial state between server\n * and client and correctly rehydrate after initial render.\n *\n * @defaultValue `false`\n */\n ssr?: boolean;\n\n /**\n * @defaultValue `DEFAULT_APP_SIZE`\n * @see {@link DEFAULT_APP_SIZE}\n */\n ssrAppSize?: Readonly<AppSize>;\n\n /**\n * @defaultValue `DEFAULT_APP_SIZE_QUERIES`\n * @see {@link DEFAULT_APP_SIZE_QUERIES}\n */\n appSizeQueries?: Readonly<AppSizeQueries>;\n\n /** @see {@link PortalContainerProvider} */\n portalContainer?: PortalContainer;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CoreProvidersProps extends ReactMDCoreConfiguration {\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This is a convenience wrapper for initializing providers for react-md. This\n * includes configuration for:\n *\n * - {@link SsrProvider}\n * - {@link PortalContainerProvider}\n * - {@link AppSizeProvider}\n * - {@link UserInteractionModeProvider}\n *\n * This does not include every provider within `react-md` to help decrease the\n * bundle size for unused features. Here are some other providers that might be\n * useful to initialize near the root of your app:\n *\n * - {@link MenuConfigurationProvider} - If you want to render menus as sheets\n * on phones or other configuration.\n * - {@link LocalStorageColorSchemeProvider}/{@link useColorSchemeProvider} - If\n * you want to allow the user to select a light, dark, or system theme\n * - {@link WritingDirectionProvider} - If you need dynamic support for ltr and\n * rtl languages\n * - {@link ThemeProvider} - If you allow the user to dynamically configure the\n * `react-md` theme\n * - {@link TooltipHoverModeProvider} - If you want tooltips to appear\n * immediately for a time after another tooltip has become visible. You can\n * also configure the global visible delay.\n * - {@link Snackbar} - This isn't a provider but this is how you can display\n * alerts in your app\n *\n * @remarks \\@since 6.0.0\n */\nexport function CoreProviders(props: CoreProvidersProps): ReactElement {\n const {\n ssr = false,\n ssrAppSize = DEFAULT_APP_SIZE,\n appSizeQueries = DEFAULT_APP_SIZE_QUERIES,\n portalContainer,\n children,\n } = props;\n return (\n <SsrProvider ssr={ssr}>\n <PortalContainerProvider container={portalContainer}>\n <UserInteractionModeProvider>\n <AppSizeProvider {...appSizeQueries} ssrSize={ssrAppSize}>\n {children}\n </AppSizeProvider>\n </UserInteractionModeProvider>\n </PortalContainerProvider>\n </SsrProvider>\n );\n}\n"],"names":["SsrProvider","UserInteractionModeProvider","AppSizeProvider","DEFAULT_APP_SIZE","DEFAULT_APP_SIZE_QUERIES","PortalContainerProvider","CoreProviders","props","ssr","ssrAppSize","appSizeQueries","portalContainer","children","container","ssrSize"],"mappings":"AAAA;;AAEA,SAASA,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+CAA+C;AAC3F,SAASC,eAAe,QAAQ,qCAAqC;AACrE,SACEC,gBAAgB,EAChBC,wBAAwB,QAGnB,6BAA6B;AACpC,SACEC,uBAAuB,QAElB,sCAAsC;AA4C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,MAAM,KAAK,EACXC,aAAaN,gBAAgB,EAC7BO,iBAAiBN,wBAAwB,EACzCO,eAAe,EACfC,QAAQ,EACT,GAAGL;IACJ,qBACE,KAACP;QAAYQ,KAAKA;kBAChB,cAAA,KAACH;YAAwBQ,WAAWF;sBAClC,cAAA,KAACV;0BACC,cAAA,KAACC;oBAAiB,GAAGQ,cAAc;oBAAEI,SAASL;8BAC3CG;;;;;AAMb"}
|
|
1
|
+
{"version":3,"sources":["../src/CoreProviders.tsx"],"sourcesContent":["\"use client\";\nimport { type ReactElement, type ReactNode } from \"react\";\nimport { SsrProvider } from \"./SsrProvider.js\";\nimport { UserInteractionModeProvider } from \"./interaction/UserInteractionModeProvider.js\";\nimport { AppSizeProvider } from \"./media-queries/AppSizeProvider.js\";\nimport {\n DEFAULT_APP_SIZE,\n DEFAULT_APP_SIZE_QUERIES,\n type AppSize,\n type AppSizeQueries,\n} from \"./media-queries/appSize.js\";\nimport {\n PortalContainerProvider,\n type PortalContainer,\n} from \"./portal/PortalContainerProvider.js\";\n\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { type MenuConfigurationProvider } from \"./menu/MenuConfigurationProvider.js\";\nimport { type Snackbar } from \"./snackbar/Snackbar.js\";\nimport { type LocalStorageColorSchemeProvider } from \"./theme/LocalStorageColorSchemeProvider.js\";\nimport { type ThemeProvider } from \"./theme/ThemeProvider.js\";\nimport { type useColorSchemeProvider } from \"./theme/useColorSchemeProvider.js\";\nimport { type TooltipHoverModeProvider } from \"./tooltip/TooltipHoverModeProvider.js\";\nimport { type WritingDirectionProvider } from \"./typography/WritingDirectionProvider.js\";\n/* eslint-enable @typescript-eslint/no-unused-vars */\n\n/** @remarks \\@since 6.0.0 */\nexport interface ReactMDCoreConfiguration {\n /**\n * Set this to `true` if you are using SSR. This will update some hook\n * behavior so that you will not have mismatched initial state between server\n * and client and correctly rehydrate after initial render.\n *\n * @defaultValue `false`\n */\n ssr?: boolean;\n\n /**\n * @defaultValue `DEFAULT_APP_SIZE`\n * @see {@link DEFAULT_APP_SIZE}\n */\n ssrAppSize?: Readonly<AppSize>;\n\n /**\n * @defaultValue `DEFAULT_APP_SIZE_QUERIES`\n * @see {@link DEFAULT_APP_SIZE_QUERIES}\n */\n appSizeQueries?: Readonly<AppSizeQueries>;\n\n /** @see {@link PortalContainerProvider} */\n portalContainer?: PortalContainer;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CoreProvidersProps extends ReactMDCoreConfiguration {\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * This is a convenience wrapper for initializing providers for react-md. This\n * includes configuration for:\n *\n * - {@link SsrProvider}\n * - {@link PortalContainerProvider}\n * - {@link AppSizeProvider}\n * - {@link UserInteractionModeProvider}\n *\n * This does not include every provider within `react-md` to help decrease the\n * bundle size for unused features. Here are some other providers that might be\n * useful to initialize near the root of your app:\n *\n * - {@link MenuConfigurationProvider} - If you want to render menus as sheets\n * on phones or other configuration.\n * - {@link LocalStorageColorSchemeProvider}/{@link useColorSchemeProvider} - If\n * you want to allow the user to select a light, dark, or system theme\n * - {@link WritingDirectionProvider} - If you need dynamic support for ltr and\n * rtl languages\n * - {@link ThemeProvider} - If you allow the user to dynamically configure the\n * `react-md` theme\n * - {@link TooltipHoverModeProvider} - If you want tooltips to appear\n * immediately for a time after another tooltip has become visible. You can\n * also configure the global visible delay.\n * - {@link Snackbar} - This isn't a provider but this is how you can display\n * alerts in your app\n *\n * @remarks \\@since 6.0.0\n */\nexport function CoreProviders(props: CoreProvidersProps): ReactElement {\n const {\n ssr = false,\n ssrAppSize = DEFAULT_APP_SIZE,\n appSizeQueries = DEFAULT_APP_SIZE_QUERIES,\n portalContainer,\n children,\n } = props;\n return (\n <SsrProvider ssr={ssr}>\n <PortalContainerProvider container={portalContainer}>\n <UserInteractionModeProvider>\n <AppSizeProvider {...appSizeQueries} ssrSize={ssrAppSize}>\n {children}\n </AppSizeProvider>\n </UserInteractionModeProvider>\n </PortalContainerProvider>\n </SsrProvider>\n );\n}\n"],"names":["SsrProvider","UserInteractionModeProvider","AppSizeProvider","DEFAULT_APP_SIZE","DEFAULT_APP_SIZE_QUERIES","PortalContainerProvider","CoreProviders","props","ssr","ssrAppSize","appSizeQueries","portalContainer","children","container","ssrSize"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AAEA,SAASA,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,2BAA2B,QAAQ,+CAA+C;AAC3F,SAASC,eAAe,QAAQ,qCAAqC;AACrE,SACEC,gBAAgB,EAChBC,wBAAwB,QAGnB,6BAA6B;AACpC,SACEC,uBAAuB,QAElB,sCAAsC;AA4C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,MAAM,KAAK,EACXC,aAAaN,gBAAgB,EAC7BO,iBAAiBN,wBAAwB,EACzCO,eAAe,EACfC,QAAQ,EACT,GAAGL;IACJ,qBACE,KAACP;QAAYQ,KAAKA;kBAChB,cAAA,KAACH;YAAwBQ,WAAWF;sBAClC,cAAA,KAACV;0BACC,cAAA,KAACC;oBAAiB,GAAGQ,cAAc;oBAAEI,SAASL;8BAC3CG;;;;;AAMb"}
|
package/dist/NoSsr.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/NoSsr.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useState, type ReactElement, type ReactNode } from \"react\";\nimport { useSsr } from \"./SsrProvider.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface NoSsrProps {\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * A small wrapper that can be used to render children client side only. The\n * main use-case are for components that rely on browser API to work correctly.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { CoreProviders, NoSsr, Typography } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <>\n * <Typography>This is always rendered.</Typography>\n * <NoSsr>\n * <Typography>\n * This is only rendered client-side after rehydrating.\n * </Typography>\n * </NoSsr>\n * </>\n * );\n * }\n *\n * function App(): ReactElement {\n * return (\n * <CoreProviders ssr>\n * <Example />\n * </CoreProviders>\n * );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function NoSsr(props: NoSsrProps): ReactElement {\n const { children } = props;\n const ssr = useSsr();\n const [rendered, setRendered] = useState(!ssr);\n useEffect(() => {\n setRendered(true);\n }, []);\n\n return <>{rendered && children}</>;\n}\n"],"names":["useEffect","useState","useSsr","NoSsr","props","children","ssr","rendered","setRendered"],"mappings":"AAAA;;AACA,SAASA,SAAS,EAAEC,QAAQ,QAA2C,QAAQ;AAC/E,SAASC,MAAM,QAAQ,mBAAmB;AAO1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,SAASC,MAAMC,KAAiB;IACrC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,MAAMJ;IACZ,MAAM,CAACK,UAAUC,YAAY,GAAGP,SAAS,CAACK;IAC1CN,UAAU;QACRQ,YAAY;IACd,GAAG,EAAE;IAEL,qBAAO;kBAAGD,YAAYF;;AACxB"}
|
|
1
|
+
{"version":3,"sources":["../src/NoSsr.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useState, type ReactElement, type ReactNode } from \"react\";\nimport { useSsr } from \"./SsrProvider.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface NoSsrProps {\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * A small wrapper that can be used to render children client side only. The\n * main use-case are for components that rely on browser API to work correctly.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { CoreProviders, NoSsr, Typography } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <>\n * <Typography>This is always rendered.</Typography>\n * <NoSsr>\n * <Typography>\n * This is only rendered client-side after rehydrating.\n * </Typography>\n * </NoSsr>\n * </>\n * );\n * }\n *\n * function App(): ReactElement {\n * return (\n * <CoreProviders ssr>\n * <Example />\n * </CoreProviders>\n * );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function NoSsr(props: NoSsrProps): ReactElement {\n const { children } = props;\n const ssr = useSsr();\n const [rendered, setRendered] = useState(!ssr);\n useEffect(() => {\n setRendered(true);\n }, []);\n\n return <>{rendered && children}</>;\n}\n"],"names":["useEffect","useState","useSsr","NoSsr","props","children","ssr","rendered","setRendered"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,SAAS,EAAEC,QAAQ,QAA2C,QAAQ;AAC/E,SAASC,MAAM,QAAQ,mBAAmB;AAO1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCC,GACD,OAAO,SAASC,MAAMC,KAAiB;IACrC,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,MAAMJ;IACZ,MAAM,CAACK,UAAUC,YAAY,GAAGP,SAAS,CAACK;IAC1CN,UAAU;QACRQ,YAAY;IACd,GAAG,EAAE;IAEL,qBAAO;kBAAGD,YAAYF;;AACxB"}
|
package/dist/RootHtml.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/RootHtml.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type HtmlHTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {\n /** @defaultValue `\"ltr\"` */\n dir?: string;\n\n /** @defaultValue `\"en\"` */\n lang?: string;\n\n /**\n * Any additional props to provide to the `<body>` element and also supports a\n * `ref` if that is required for some reason. Using a `ref` would make your\n * root layout a client component though.\n */\n bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;\n\n /**\n * Convenience prop to replace `bodyProps={{ className: \"custom-class-name\" }}`.\n */\n bodyClassName?: string;\n\n /**\n * Any content to render before the `<body>` tag. This can be useful if you\n * need to render a custom `<head>` element.\n */\n beforeBodyChildren?: ReactNode;\n\n /**\n * Any content to render after the `<body>` tag. This can be useful to insert\n * `<script>` tags for analytics or other external libraries.\n */\n afterBodyChildren?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * This is mostly for creating the root html for next.js applications that\n * defaults to setting the `dir=\"ltr\"` and `lang=\"en\"`. Additional props can be\n * passed to the root `<html>` and `<body>` elements and children can be\n * rendered before and after the `<body>` if needed.\n *\n * @example\n * Simple Example\n * ```tsx\n * // src/app/layout.tsx\n * import { RootHtml } from \"@react-md/core\";\n * import { type ReactElement, type PropsWithChildren } from \"react\";\n * import { Roboto_Flex } from \"next/font/google\";\n *\n * const roboto = Roboto_Flex({\n * subsets: [\"latin\"],\n * variable: \"--roboto\",\n * });\n *\n * export default function RootLayout(props: PropsWithChildren): ReactElement {\n * const { children } = props;\n *\n * return <RootHtml className={roboto.variable}>{children}</RootHtml>;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function RootHtml(props: RootHtmlProps): ReactElement {\n const {\n dir = \"ltr\",\n lang = \"en\",\n children,\n bodyProps,\n bodyClassName,\n beforeBodyChildren,\n afterBodyChildren,\n ...remaining\n } = props;\n\n return (\n <html dir={dir} lang={lang} {...remaining}>\n {beforeBodyChildren}\n <body {...bodyProps} className={bodyClassName || bodyProps?.className}>\n {children}\n </body>\n {afterBodyChildren}\n </html>\n );\n}\n"],"names":["RootHtml","props","dir","lang","children","bodyProps","bodyClassName","beforeBodyChildren","afterBodyChildren","remaining","html","body","className"],"mappings":";AA2CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASA,SAASC,KAAoB;IAC3C,MAAM,EACJC,MAAM,KAAK,EACXC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACTC,aAAa,EACbC,kBAAkB,EAClBC,iBAAiB,EACjB,GAAGC,WACJ,GAAGR;IAEJ,qBACE,MAACS;QAAKR,KAAKA;QAAKC,MAAMA;QAAO,GAAGM,SAAS;;YACtCF;0BACD,KAACI;gBAAM,GAAGN,SAAS;gBAAEO,WAAWN,iBAAiBD,WAAWO;0BACzDR;;YAEFI;;;AAGP"}
|
|
1
|
+
{"version":3,"sources":["../src/RootHtml.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type HtmlHTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {\n /** @defaultValue `\"ltr\"` */\n dir?: string;\n\n /** @defaultValue `\"en\"` */\n lang?: string;\n\n /**\n * Any additional props to provide to the `<body>` element and also supports a\n * `ref` if that is required for some reason. Using a `ref` would make your\n * root layout a client component though.\n */\n bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;\n\n /**\n * Convenience prop to replace `bodyProps={{ className: \"custom-class-name\" }}`.\n */\n bodyClassName?: string;\n\n /**\n * Any content to render before the `<body>` tag. This can be useful if you\n * need to render a custom `<head>` element.\n */\n beforeBodyChildren?: ReactNode;\n\n /**\n * Any content to render after the `<body>` tag. This can be useful to insert\n * `<script>` tags for analytics or other external libraries.\n */\n afterBodyChildren?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * This is mostly for creating the root html for next.js applications that\n * defaults to setting the `dir=\"ltr\"` and `lang=\"en\"`. Additional props can be\n * passed to the root `<html>` and `<body>` elements and children can be\n * rendered before and after the `<body>` if needed.\n *\n * @example\n * Simple Example\n * ```tsx\n * // src/app/layout.tsx\n * import { RootHtml } from \"@react-md/core\";\n * import { type ReactElement, type PropsWithChildren } from \"react\";\n * import { Roboto_Flex } from \"next/font/google\";\n *\n * const roboto = Roboto_Flex({\n * subsets: [\"latin\"],\n * variable: \"--roboto\",\n * });\n *\n * export default function RootLayout(props: PropsWithChildren): ReactElement {\n * const { children } = props;\n *\n * return <RootHtml className={roboto.variable}>{children}</RootHtml>;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function RootHtml(props: RootHtmlProps): ReactElement {\n const {\n dir = \"ltr\",\n lang = \"en\",\n children,\n bodyProps,\n bodyClassName,\n beforeBodyChildren,\n afterBodyChildren,\n ...remaining\n } = props;\n\n return (\n <html dir={dir} lang={lang} {...remaining}>\n {beforeBodyChildren}\n <body {...bodyProps} className={bodyClassName || bodyProps?.className}>\n {children}\n </body>\n {afterBodyChildren}\n </html>\n );\n}\n"],"names":["RootHtml","props","dir","lang","children","bodyProps","bodyClassName","beforeBodyChildren","afterBodyChildren","remaining","html","body","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AA2CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASA,SAASC,KAAoB;IAC3C,MAAM,EACJC,MAAM,KAAK,EACXC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACTC,aAAa,EACbC,kBAAkB,EAClBC,iBAAiB,EACjB,GAAGC,WACJ,GAAGR;IAEJ,qBACE,MAACS;QAAKR,KAAKA;QAAKC,MAAMA;QAAO,GAAGM,SAAS;;YACtCF;0BACD,KAACI;gBAAM,GAAGN,SAAS;gBAAEO,WAAWN,iBAAiBD,WAAWO;0BACzDR;;YAEFI;;;AAGP"}
|
package/dist/SsrProvider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SsrProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n createContext,\n useContext,\n useEffect,\n useState,\n type ReactElement,\n type ReactNode,\n} from \"react\";\n\nconst context = createContext(false);\nconst { Provider } = context;\ncontext.displayName = \"Ssr\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function useSsr(): boolean {\n return useContext(context);\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SsrProviderProps {\n ssr?: boolean;\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @remarks \\@since 6.0.0\n */\nexport function SsrProvider(props: SsrProviderProps): ReactElement {\n const { ssr = false, children } = props;\n const [isSsr, setSsr] = useState(ssr);\n useEffect(() => {\n setSsr(false);\n }, []);\n return <Provider value={isSsr}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useState","context","Provider","displayName","useSsr","SsrProvider","props","ssr","children","isSsr","setSsr","value"],"mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QAGH,QAAQ;AAEf,MAAMC,wBAAUJ,cAAc;AAC9B,MAAM,EAAEK,QAAQ,EAAE,GAAGD;AACrBA,QAAQE,WAAW,GAAG;AAEtB;;CAEC,GACD,OAAO,SAASC;IACd,OAAON,WAAWG;AACpB;AAUA;;;;CAIC,GACD,OAAO,SAASI,YAAYC,KAAuB;IACjD,MAAM,EAAEC,MAAM,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAClC,MAAM,CAACG,OAAOC,OAAO,GAAGV,SAASO;IACjCR,UAAU;QACRW,OAAO;IACT,GAAG,EAAE;IACL,qBAAO,KAACR;QAASS,OAAOF;kBAAQD;;AAClC"}
|
|
1
|
+
{"version":3,"sources":["../src/SsrProvider.tsx"],"sourcesContent":["\"use client\";\nimport {\n createContext,\n useContext,\n useEffect,\n useState,\n type ReactElement,\n type ReactNode,\n} from \"react\";\n\nconst context = createContext(false);\nconst { Provider } = context;\ncontext.displayName = \"Ssr\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function useSsr(): boolean {\n return useContext(context);\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SsrProviderProps {\n ssr?: boolean;\n children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @remarks \\@since 6.0.0\n */\nexport function SsrProvider(props: SsrProviderProps): ReactElement {\n const { ssr = false, children } = props;\n const [isSsr, setSsr] = useState(ssr);\n useEffect(() => {\n setSsr(false);\n }, []);\n return <Provider value={isSsr}>{children}</Provider>;\n}\n"],"names":["createContext","useContext","useEffect","useState","context","Provider","displayName","useSsr","SsrProvider","props","ssr","children","isSsr","setSsr","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,QAAQ,QAGH,QAAQ;AAEf,MAAMC,wBAAUJ,cAAc;AAC9B,MAAM,EAAEK,QAAQ,EAAE,GAAGD;AACrBA,QAAQE,WAAW,GAAG;AAEtB;;CAEC,GACD,OAAO,SAASC;IACd,OAAON,WAAWG;AACpB;AAUA;;;;CAIC,GACD,OAAO,SAASI,YAAYC,KAAuB;IACjD,MAAM,EAAEC,MAAM,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAClC,MAAM,CAACG,OAAOC,OAAO,GAAGV,SAASO;IACjCR,UAAU;QACRW,OAAO;IACT,GAAG,EAAE;IACL,qBAAO,KAACR;QAASS,OAAOF;kBAAQD;;AAClC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n forwardRef,\n type ElementType,\n type HTMLAttributes,\n type Ref,\n} from \"react\";\nimport { box, type BoxOptions } from \"../box/styles.js\";\nimport {\n cssUtils,\n type BackgroundColor,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n type CssUtilsOptions,\n} from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-app-bar-height\"?: string | number;\n \"--rmd-app-bar-background-color\"?: string;\n \"--rmd-app-bar-color\"?: string;\n \"--rmd-app-bar-surface-background-color\"?: string;\n \"--rmd-app-bar-surface-color\"?: string;\n }\n}\n\nconst styles = bem(\"rmd-app-bar\");\n\nexport type AppBarPosition = \"top\" | \"bottom\";\n\n/**\n * - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n * defaults to `#fff` for light themes, `#242424` for dark themes, and\n * `#424242` for dark themes when the `$disable-dark-elevation` is set to\n * `true`\n *\n * The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n */\nexport type AppBarTheme = BackgroundColor | \"clear\";\n\n/**\n * - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n */\nexport type AppBarHeight =\n | \"auto\"\n | \"normal\"\n | \"prominent\"\n | \"dense\"\n | \"prominent-dense\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface AppBarClassNameOptions extends Omit<BoxOptions, \"fullWidth\"> {\n className?: string;\n\n /**\n * Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n * `position: sticky;` to the app bar. The default position will be static and\n * inline with other content.\n *\n * @defaultValue `'static'`\n */\n position?: CssPosition;\n\n /**\n * The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n * enabled.\n *\n * @defaultValue `\"top\"`\n */\n pagePosition?: AppBarPosition;\n\n /**\n * Set this to `true` to remove the box-shadow.\n *\n * @defaultValue `false`\n */\n disableElevation?: boolean;\n\n /**\n * The theme to apply to the `AppBar`.\n *\n * @defaultValue `\"primary\"`\n * @see {@link AppBarTheme}\n */\n theme?: AppBarTheme;\n\n /**\n * @defaultValue `stacked ? \"auto\" : \"normal\"`\n * @see {@link AppBarHeight}\n */\n height?: AppBarHeight;\n\n /** @see {@link CssUtilsOptions.surfaceColor} */\n surfaceColor?: \"light\" | \"dark\";\n\n /**\n * Set this to `true` if the app bar's positioning and width should be\n * changed whenever the scrollbar is visible on the page. This defaults to\n * `true` when the {@link position} prop is `true` so that once dialogs and menus\n * become visible the contents in the app bar do not need to be repainted.\n *\n * @remarks \\@since 6.0.0\n * @defaultValue `position === \"fixed\"`\n */\n scrollbarOffset?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n const {\n className,\n theme = \"primary\",\n stacked,\n height = stacked ? \"auto\" : \"normal\",\n position = \"static\",\n pagePosition = \"top\",\n scrollbarOffset = position === \"fixed\",\n align,\n grid,\n gridColumns,\n gridName,\n justify,\n reversed,\n surfaceColor,\n disableWrap = true,\n disablePadding,\n disableElevation,\n } = options;\n const surface = theme === \"surface\";\n const clear = theme === \"clear\";\n\n return cnb(\n styles({\n surface,\n [height]: height !== \"normal\",\n fixed: position !== \"static\",\n stacked,\n sticky: position === \"sticky\",\n [pagePosition]: position !== \"static\",\n elevated: position !== \"static\" && !disableElevation,\n \"scrollbar-offset\": scrollbarOffset,\n \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n }),\n box({\n align,\n stacked,\n fullWidth: true,\n grid,\n gridColumns,\n gridName,\n justify,\n reversed,\n disableWrap,\n disablePadding,\n }),\n cssUtils({\n backgroundColor: !surface && !clear ? theme : undefined,\n surfaceColor,\n }),\n className\n );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n HTMLAttributes<HTMLDivElement> & {\n ref?: Ref<HTMLDivElement>;\n className: string;\n }\n>;\n\n/**\n * @remarks\n * \\@since 6.0.0 Renamed the `component` prop to `as` and updated the default\n * value to be a `\"div\"` when `fixed` is `false`.\n * \\@since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to\n * match naming conventions when a feature is enabled by default.\n * \\@since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are\n * no longer required.\n * \\@since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop\n * which enables position `fixed` or `sticky` behavior.\n * \\@since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.\n */\nexport interface AppBarProps\n extends HTMLAttributes<HTMLDivElement>,\n AppBarClassNameOptions {\n /** @defaultValue `fixed ? \"header\" : \"div\"` */\n as?: CustomAppBarComponent;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { AppBar, AppBarTitle, Button } from \"@react-md/core\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <AppBar>\n * <Button aria-label=\"Navigation\"><MenuIcon /></Button>\n * <AppBarTitle>My Main Title</AppBarTitle>\n * <Button aria-label=\"Options\"><MoreVertIcon /></Button>\n * </AppBar>\n * );\n * }\n * ```\n *\n * @remarks\n * \\@since 6.0.0 The `AppBar` was updated to use `gap` for spacing\n * instead of requiring the `AppBarNav` and `AppBarAction` components.\n */\nexport const AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n function AppBar(props, ref) {\n const {\n className,\n theme,\n stacked,\n height,\n align,\n grid,\n gridName,\n justify,\n reversed,\n gridColumns,\n disableWrap,\n disablePadding,\n position,\n pagePosition,\n surfaceColor,\n scrollbarOffset,\n disableElevation,\n as: Component = position ? \"header\" : \"div\",\n children,\n ...remaining\n } = props;\n\n return (\n <Component\n {...remaining}\n className={appBar({\n className,\n theme,\n position,\n pagePosition,\n disableElevation,\n scrollbarOffset,\n height,\n grid,\n gridName,\n gridColumns,\n align,\n stacked,\n justify,\n reversed,\n surfaceColor,\n disableWrap,\n disablePadding,\n })}\n ref={ref}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["cnb","forwardRef","box","cssUtils","bem","styles","appBar","options","className","theme","stacked","height","position","pagePosition","scrollbarOffset","align","grid","gridColumns","gridName","justify","reversed","surfaceColor","disableWrap","disablePadding","disableElevation","surface","clear","fixed","sticky","elevated","fullWidth","backgroundColor","undefined","AppBar","props","ref","as","Component","children","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,GAAG,QAAyB,mBAAmB;AACxD,SACEC,QAAQ,QAIH,iBAAiB;AAExB,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AAyFnB;;;;;CAKC,GACD,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,SAASD,UAAU,SAAS,QAAQ,EACpCE,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,cAAc,IAAI,EAClBC,cAAc,EACdC,gBAAgB,EACjB,GAAGjB;IACJ,MAAMkB,UAAUhB,UAAU;IAC1B,MAAMiB,QAAQjB,UAAU;IAExB,OAAOT,IACLK,OAAO;QACLoB;QACA,CAACd,OAAO,EAAEA,WAAW;QACrBgB,OAAOf,aAAa;QACpBF;QACAkB,QAAQhB,aAAa;QACrB,CAACC,aAAa,EAAED,aAAa;QAC7BiB,UAAUjB,aAAa,YAAY,CAACY;QACpC,oBAAoBV;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAZ,IAAI;QACFa;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACApB,SAAS;QACP4B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMyB,uBAAShC,WACpB,SAASgC,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ3B,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNI,KAAK,EACLC,IAAI,EACJE,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRH,WAAW,EACXK,WAAW,EACXC,cAAc,EACdX,QAAQ,EACRC,YAAY,EACZQ,YAAY,EACZP,eAAe,EACfU,gBAAgB,EAChBY,IAAIC,YAAYzB,WAAW,WAAW,KAAK,EAC3C0B,QAAQ,EACR,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACG;QACE,GAAGE,SAAS;QACb/B,WAAWF,OAAO;YAChBE;YACAC;YACAG;YACAC;YACAW;YACAV;YACAH;YACAK;YACAE;YACAD;YACAF;YACAL;YACAS;YACAC;YACAC;YACAC;YACAC;QACF;QACAY,KAAKA;kBAEJG;;AAGP,GACA"}
|
|
1
|
+
{"version":3,"sources":["../../src/app-bar/AppBar.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n forwardRef,\n type ElementType,\n type HTMLAttributes,\n type Ref,\n} from \"react\";\nimport { box, type BoxOptions } from \"../box/styles.js\";\nimport {\n cssUtils,\n type BackgroundColor,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n type CssUtilsOptions,\n} from \"../cssUtils.js\";\nimport { type CssPosition } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-app-bar-height\"?: string | number;\n \"--rmd-app-bar-background-color\"?: string;\n \"--rmd-app-bar-color\"?: string;\n \"--rmd-app-bar-surface-background-color\"?: string;\n \"--rmd-app-bar-surface-color\"?: string;\n }\n}\n\nconst styles = bem(\"rmd-app-bar\");\n\nexport type AppBarPosition = \"top\" | \"bottom\";\n\n/**\n * - `\"clear\"` - the background color will be transparent\n * - `\"primary\"` - defaults to the current primary theme color\n * - `\"secondary\"` - defaults to the current secondary theme color\n * - `\"surface\"` - this will use the current surface background color which\n * defaults to `#fff` for light themes, `#242424` for dark themes, and\n * `#424242` for dark themes when the `$disable-dark-elevation` is set to\n * `true`\n *\n * The default dark theme surface color also depends on the `$fixed-elevation`\n * value.\n */\nexport type AppBarTheme = BackgroundColor | \"clear\";\n\n/**\n * - `\"auto\"` - the height will be determined by the height of the content\n * - `\"normal\"` - defaults to `3.5rem` (`$height`)\n * - `\"prominent\"` - defaults to `7rem` (`$prominent-height`)\n * - `\"dense\"` - defaults to `3rem` (`$dense-height`)\n * - `\"prominent-dense\"` - defaults to `6rem` (`$prominent-dense-height`)\n */\nexport type AppBarHeight =\n | \"auto\"\n | \"normal\"\n | \"prominent\"\n | \"dense\"\n | \"prominent-dense\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface AppBarClassNameOptions extends Omit<BoxOptions, \"fullWidth\"> {\n className?: string;\n\n /**\n * Set this to `\"fixed\"` or `\"sticky\"` to set `position: fixed;` or\n * `position: sticky;` to the app bar. The default position will be static and\n * inline with other content.\n *\n * @defaultValue `'static'`\n */\n position?: CssPosition;\n\n /**\n * The position within the page to \"fix\" the `AppBar` when the `fixed` prop is\n * enabled.\n *\n * @defaultValue `\"top\"`\n */\n pagePosition?: AppBarPosition;\n\n /**\n * Set this to `true` to remove the box-shadow.\n *\n * @defaultValue `false`\n */\n disableElevation?: boolean;\n\n /**\n * The theme to apply to the `AppBar`.\n *\n * @defaultValue `\"primary\"`\n * @see {@link AppBarTheme}\n */\n theme?: AppBarTheme;\n\n /**\n * @defaultValue `stacked ? \"auto\" : \"normal\"`\n * @see {@link AppBarHeight}\n */\n height?: AppBarHeight;\n\n /** @see {@link CssUtilsOptions.surfaceColor} */\n surfaceColor?: \"light\" | \"dark\";\n\n /**\n * Set this to `true` if the app bar's positioning and width should be\n * changed whenever the scrollbar is visible on the page. This defaults to\n * `true` when the {@link position} prop is `true` so that once dialogs and menus\n * become visible the contents in the app bar do not need to be repainted.\n *\n * @remarks \\@since 6.0.0\n * @defaultValue `position === \"fixed\"`\n */\n scrollbarOffset?: boolean;\n}\n\n/**\n * Apply the `className`s for a tree component. This will be type-safe if using\n * typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function appBar(options: AppBarClassNameOptions = {}): string {\n const {\n className,\n theme = \"primary\",\n stacked,\n height = stacked ? \"auto\" : \"normal\",\n position = \"static\",\n pagePosition = \"top\",\n scrollbarOffset = position === \"fixed\",\n align,\n grid,\n gridColumns,\n gridName,\n justify,\n reversed,\n surfaceColor,\n disableWrap = true,\n disablePadding,\n disableElevation,\n } = options;\n const surface = theme === \"surface\";\n const clear = theme === \"clear\";\n\n return cnb(\n styles({\n surface,\n [height]: height !== \"normal\",\n fixed: position !== \"static\",\n stacked,\n sticky: position === \"sticky\",\n [pagePosition]: position !== \"static\",\n elevated: position !== \"static\" && !disableElevation,\n \"scrollbar-offset\": scrollbarOffset,\n \"static-scrollbar-offset\": position === \"static\" && scrollbarOffset,\n }),\n box({\n align,\n stacked,\n fullWidth: true,\n grid,\n gridColumns,\n gridName,\n justify,\n reversed,\n disableWrap,\n disablePadding,\n }),\n cssUtils({\n backgroundColor: !surface && !clear ? theme : undefined,\n surfaceColor,\n }),\n className\n );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport type CustomAppBarComponent = ElementType<\n HTMLAttributes<HTMLDivElement> & {\n ref?: Ref<HTMLDivElement>;\n className: string;\n }\n>;\n\n/**\n * @remarks\n * \\@since 6.0.0 Renamed the `component` prop to `as` and updated the default\n * value to be a `\"div\"` when `fixed` is `false`.\n * \\@since 6.0.0 Renamed the `fixedElevation` prop to `disableFixedElevation` to\n * match naming conventions when a feature is enabled by default.\n * \\@since 6.0.0 Removed the `inheritColor` and `flexWrap` props since they are\n * no longer required.\n * \\@since 6.0.0 Removed the `fixed` prop in favor of the new `position` prop\n * which enables position `fixed` or `sticky` behavior.\n * \\@since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.\n */\nexport interface AppBarProps\n extends HTMLAttributes<HTMLDivElement>,\n AppBarClassNameOptions {\n /** @defaultValue `fixed ? \"header\" : \"div\"` */\n as?: CustomAppBarComponent;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { AppBar, AppBarTitle, Button } from \"@react-md/core\";\n * import MenuIcon from \"@react-md/material-icons/MenuIcon\";\n * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <AppBar>\n * <Button aria-label=\"Navigation\"><MenuIcon /></Button>\n * <AppBarTitle>My Main Title</AppBarTitle>\n * <Button aria-label=\"Options\"><MoreVertIcon /></Button>\n * </AppBar>\n * );\n * }\n * ```\n *\n * @remarks\n * \\@since 6.0.0 The `AppBar` was updated to use `gap` for spacing\n * instead of requiring the `AppBarNav` and `AppBarAction` components.\n */\nexport const AppBar = forwardRef<HTMLDivElement, AppBarProps>(\n function AppBar(props, ref) {\n const {\n className,\n theme,\n stacked,\n height,\n align,\n grid,\n gridName,\n justify,\n reversed,\n gridColumns,\n disableWrap,\n disablePadding,\n position,\n pagePosition,\n surfaceColor,\n scrollbarOffset,\n disableElevation,\n as: Component = position ? \"header\" : \"div\",\n children,\n ...remaining\n } = props;\n\n return (\n <Component\n {...remaining}\n className={appBar({\n className,\n theme,\n position,\n pagePosition,\n disableElevation,\n scrollbarOffset,\n height,\n grid,\n gridName,\n gridColumns,\n align,\n stacked,\n justify,\n reversed,\n surfaceColor,\n disableWrap,\n disablePadding,\n })}\n ref={ref}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["cnb","forwardRef","box","cssUtils","bem","styles","appBar","options","className","theme","stacked","height","position","pagePosition","scrollbarOffset","align","grid","gridColumns","gridName","justify","reversed","surfaceColor","disableWrap","disablePadding","disableElevation","surface","clear","fixed","sticky","elevated","fullWidth","backgroundColor","undefined","AppBar","props","ref","as","Component","children","remaining"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAIL,QAAQ;AACf,SAASC,GAAG,QAAyB,mBAAmB;AACxD,SACEC,QAAQ,QAIH,iBAAiB;AAExB,SAASC,GAAG,QAAQ,kBAAkB;AAYtC,MAAMC,SAASD,IAAI;AAyFnB;;;;;CAKC,GACD,OAAO,SAASE,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,SAASD,UAAU,SAAS,QAAQ,EACpCE,WAAW,QAAQ,EACnBC,eAAe,KAAK,EACpBC,kBAAkBF,aAAa,OAAO,EACtCG,KAAK,EACLC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,YAAY,EACZC,cAAc,IAAI,EAClBC,cAAc,EACdC,gBAAgB,EACjB,GAAGjB;IACJ,MAAMkB,UAAUhB,UAAU;IAC1B,MAAMiB,QAAQjB,UAAU;IAExB,OAAOT,IACLK,OAAO;QACLoB;QACA,CAACd,OAAO,EAAEA,WAAW;QACrBgB,OAAOf,aAAa;QACpBF;QACAkB,QAAQhB,aAAa;QACrB,CAACC,aAAa,EAAED,aAAa;QAC7BiB,UAAUjB,aAAa,YAAY,CAACY;QACpC,oBAAoBV;QACpB,2BAA2BF,aAAa,YAAYE;IACtD,IACAZ,IAAI;QACFa;QACAL;QACAoB,WAAW;QACXd;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;IACF,IACApB,SAAS;QACP4B,iBAAiB,CAACN,WAAW,CAACC,QAAQjB,QAAQuB;QAC9CX;IACF,IACAb;AAEJ;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMyB,uBAAShC,WACpB,SAASgC,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ3B,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNI,KAAK,EACLC,IAAI,EACJE,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRH,WAAW,EACXK,WAAW,EACXC,cAAc,EACdX,QAAQ,EACRC,YAAY,EACZQ,YAAY,EACZP,eAAe,EACfU,gBAAgB,EAChBY,IAAIC,YAAYzB,WAAW,WAAW,KAAK,EAC3C0B,QAAQ,EACR,GAAGC,WACJ,GAAGL;IAEJ,qBACE,KAACG;QACE,GAAGE,SAAS;QACb/B,WAAWF,OAAO;YAChBE;YACAC;YACAG;YACAC;YACAW;YACAV;YACAH;YACAK;YACAE;YACAD;YACAF;YACAL;YACAS;YACAC;YACAC;YACAC;YACAC;QACF;QACAY,KAAKA;kBAEJG;;AAGP,GACA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { type TextOverflow } from "../cssUtils.js";
|
|
3
|
-
import { type TypographyProps
|
|
3
|
+
import { type TypographyProps } from "../typography/Typography.js";
|
|
4
|
+
import { type TypographyType } from "../typography/typographyStyles.js";
|
|
4
5
|
/**
|
|
5
6
|
* - `"small"` - the first character in the title will be `1rem` (`$keyline`)
|
|
6
7
|
* from the edge of the app bar horizontally
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/app-bar/AppBarTitle.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/app-bar/AppBarTitle.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef } from \"react\";\nimport { type TextOverflow } from \"../cssUtils.js\";\nimport { Typography, type TypographyProps } from \"../typography/Typography.js\";\nimport { type TypographyType } from \"../typography/typographyStyles.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-app-bar-title\");\n\n/**\n * - `\"small\"` - the first character in the title will be `1rem` (`$keyline`)\n * from the edge of the app bar horizontally\n * - `\"nav\"` - this should be set when there is a nav button before the title so\n * that the first character in the title will be `4.5rem` (`title-keyline`)\n * - `\"list\"` - this should be used when the title should align with the list\n * item keyline and there is no nav icon before.\n *\n * @remarks \\@since 6.0.0\n */\nexport type AppBarTitleKeyline = \"small\" | \"nav\" | \"list\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface AppBarTitleClassNameOptions {\n className?: string;\n\n /**\n * @defaultValue `\"small\"`\n * @see {@link AppBarTitleKeyline}\n */\n keyline?: AppBarTitleKeyline;\n}\n\n/**\n * Apply the `className`s for a `AppBarTitle` component. This will be type-safe\n * if using typescript.\n *\n * @remarks \\@since 6.0.0\n */\nexport function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {\n const { className, keyline = \"small\" } = options;\n return cnb(\n styles({\n keyline: keyline == \"list\",\n \"nav-keyline\": keyline === \"nav\",\n }),\n className\n );\n}\n\n/**\n * @remarks \\@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the\n * `AppBarTitle` does not line wrap by default.\n */\nexport interface AppBarTitleProps\n extends TypographyProps,\n AppBarTitleClassNameOptions {\n /** @defaultValue `\"headline-6\"` */\n type?: TypographyType;\n\n /**\n * @defaultValue `\"ellipsis\"`\n */\n textOverflow?: TextOverflow;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Updating the Keyline\n * ```tsx\n * import { AppBar, AppBarTitle } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <AppBar>\n * <AppBarTitle keyline=\"nav\">\n * Offset as if there was a nav button to the left\n * </AppBarTitle>\n * </AppBar>\n * );\n * }\n * ```\n *\n * @remarks\n * \\@since 6.0.0 Renamed the `noWrap` prop to `lineWrap` since the `AppBarTitle`\n * does not line wrap by default.\n * \\@since 6.0.0 The {@link keyline} prop was changed from a boolean to a type\n * union of different keylines: {@link AppBarTitleKeyline}\n */\nexport const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(\n function AppBarTitle(props, ref) {\n const {\n type = \"headline-6\",\n keyline = \"small\",\n children,\n className,\n textOverflow = \"ellipsis\",\n ...remaining\n } = props;\n return (\n <Typography\n {...remaining}\n ref={ref}\n type={type}\n className={appBarTitle({\n keyline,\n className,\n })}\n textOverflow={textOverflow}\n >\n {children}\n </Typography>\n );\n }\n);\n"],"names":["cnb","forwardRef","Typography","bem","styles","appBarTitle","options","className","keyline","AppBarTitle","props","ref","type","children","textOverflow","remaining"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAQ,QAAQ;AAEnC,SAASC,UAAU,QAA8B,8BAA8B;AAE/E,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAyBnB;;;;;CAKC,GACD,OAAO,SAASE,YAAYC,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAEC,UAAU,OAAO,EAAE,GAAGF;IACzC,OAAON,IACLI,OAAO;QACLI,SAASA,WAAW;QACpB,eAAeA,YAAY;IAC7B,IACAD;AAEJ;AAkBA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAME,4BAAcR,WACzB,SAASQ,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,OAAO,YAAY,EACnBJ,UAAU,OAAO,EACjBK,QAAQ,EACRN,SAAS,EACTO,eAAe,UAAU,EACzB,GAAGC,WACJ,GAAGL;IACJ,qBACE,KAACR;QACE,GAAGa,SAAS;QACbJ,KAAKA;QACLC,MAAMA;QACNL,WAAWF,YAAY;YACrBG;YACAD;QACF;QACAO,cAAcA;kBAEbD;;AAGP,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n forwardRef,\n type HTMLAttributes,\n type ImgHTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-avatar-background-color\"?: string;\n \"--rmd-avatar-color\"?: string;\n \"--rmd-avatar-border-color\"?: string;\n \"--rmd-avatar-border-radius\"?: string | number;\n \"--rmd-avatar-size\"?: string | number;\n \"--rmd-avatar-font-size\"?: string | number;\n }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @remarks \\@since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n AvatarClassNameOptions {\n /**\n * Since avatars are normally presentational data, they are hidden from screen\n * readers by default.\n *\n * @defaultValue `true`\n */\n \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n /**\n * This should be an image `src` attribute to create an avatar from. When this\n * prop is defined, you should not add any children to the avatar as the\n * positioning will break.\n */\n src?: string;\n\n /**\n * An optional alt tag to display on the `<img>` when the `src` prop is also\n * applied.\n *\n * For accessibility and screen readers, you normally do not want to actually\n * provide this prop. This should only be used if the `Avatar` is not\n * accompanied by some other component or main content as it will be extra\n * noise for screen readers.\n *\n * @defaultValue `\"\"`\n */\n alt?: string;\n\n /**\n * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n * or `imgProps` props are provided.\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n *\n * @remarks \\@since 2.2.0\n */\n referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n /**\n * An optional object of image props and ref that can be used to create an\n * image within the `Avatar`. This can be useful to add a custom `style`\n * or`className` to the `<img>` element if that additional customization is\n * needed.\n *\n * Note: The values in this object will override the `src`, `alt`, and\n * `referrerPolicy` root level avatar props if they exist on this object.\n *\n * @remarks \\@since 2.2.0\n */\n imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/**\n * **Server Component**\n *\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n * return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n function Avatar(props, ref) {\n const {\n \"aria-hidden\": ariaHidden = true,\n className,\n children,\n src,\n alt = \"\",\n size = \"avatar\",\n color = \"\",\n theme,\n imgProps,\n referrerPolicy,\n ...remaining\n } = props;\n\n let img: ReactNode;\n if (src || imgProps) {\n img = (\n <img\n src={src}\n alt={alt}\n referrerPolicy={referrerPolicy}\n {...imgProps}\n className={avatarImage({ className: imgProps?.className })}\n />\n );\n }\n\n return (\n <span\n {...remaining}\n aria-hidden={ariaHidden}\n ref={ref}\n className={avatar({\n size,\n color,\n theme,\n className,\n })}\n >\n {img}\n {children}\n </span>\n );\n }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA0E/E;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}
|
|
1
|
+
{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n forwardRef,\n type HTMLAttributes,\n type ImgHTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-avatar-background-color\"?: string;\n \"--rmd-avatar-color\"?: string;\n \"--rmd-avatar-border-color\"?: string;\n \"--rmd-avatar-border-radius\"?: string | number;\n \"--rmd-avatar-size\"?: string | number;\n \"--rmd-avatar-font-size\"?: string | number;\n }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/**\n * @remarks \\@since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport interface AvatarProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n AvatarClassNameOptions {\n /**\n * Since avatars are normally presentational data, they are hidden from screen\n * readers by default.\n *\n * @defaultValue `true`\n */\n \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n /**\n * This should be an image `src` attribute to create an avatar from. When this\n * prop is defined, you should not add any children to the avatar as the\n * positioning will break.\n */\n src?: string;\n\n /**\n * An optional alt tag to display on the `<img>` when the `src` prop is also\n * applied.\n *\n * For accessibility and screen readers, you normally do not want to actually\n * provide this prop. This should only be used if the `Avatar` is not\n * accompanied by some other component or main content as it will be extra\n * noise for screen readers.\n *\n * @defaultValue `\"\"`\n */\n alt?: string;\n\n /**\n * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n * or `imgProps` props are provided.\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n *\n * @remarks \\@since 2.2.0\n */\n referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n /**\n * An optional object of image props and ref that can be used to create an\n * image within the `Avatar`. This can be useful to add a custom `style`\n * or`className` to the `<img>` element if that additional customization is\n * needed.\n *\n * Note: The values in this object will override the `src`, `alt`, and\n * `referrerPolicy` root level avatar props if they exist on this object.\n *\n * @remarks \\@since 2.2.0\n */\n imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/**\n * **Server Component**\n *\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n * return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n function Avatar(props, ref) {\n const {\n \"aria-hidden\": ariaHidden = true,\n className,\n children,\n src,\n alt = \"\",\n size = \"avatar\",\n color = \"\",\n theme,\n imgProps,\n referrerPolicy,\n ...remaining\n } = props;\n\n let img: ReactNode;\n if (src || imgProps) {\n img = (\n <img\n src={src}\n alt={alt}\n referrerPolicy={referrerPolicy}\n {...imgProps}\n className={avatarImage({ className: imgProps?.className })}\n />\n );\n }\n\n return (\n <span\n {...remaining}\n aria-hidden={ariaHidden}\n ref={ref}\n className={avatar({\n size,\n color,\n theme,\n className,\n })}\n >\n {img}\n {children}\n </span>\n );\n }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA0E/E;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface AvatarClassNameOptions {\n className?: string;\n\n /**\n * An optional color to apply to the avatar. This will apply a className of\n * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map\n * are supported by default. It is recommended to create custom colors using\n * the `rmd-avatar-theme-update-var` mixin with custom class names if the\n * default colors aren't extensive enough.\n *\n * @see {@link theme}\n * @defaultValue `\"\"`\n */\n color?: string;\n\n /**\n * @defaultValue `\"avatar\"`\n */\n size?: \"avatar\" | \"icon\";\n\n /**\n * This can be used instead of {@link color} to set the background color to one of\n * the theme colors. This will also set the text color to either be `#000` or\n * `#fff` automatically to enforce the correct aspect ratio.\n */\n theme?: ThemeColor;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function avatar(options: AvatarClassNameOptions): string {\n const { className, color = \"\", size, theme } = options;\n\n return cnb(\n styles({ [color]: color, icon: size === \"icon\" }),\n cssUtils({ backgroundColor: theme }),\n className\n );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface AvatarImageClassNameOptions {\n className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function avatarImage(options: AvatarImageClassNameOptions = {}): string {\n const { className } = options;\n\n return cnb(styles(\"image\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","avatar","options","className","color","size","theme","icon","backgroundColor","avatarImage"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyB,iBAAiB;AAC3D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA+BnB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,OAAOL,IACLG,OAAO;QAAE,CAACI,MAAM,EAAEA;QAAOG,MAAMF,SAAS;IAAO,IAC/CP,SAAS;QAAEU,iBAAiBF;IAAM,IAClCH;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASM,YAAYP,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B"}
|
|
1
|
+
{"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface AvatarClassNameOptions {\n className?: string;\n\n /**\n * An optional color to apply to the avatar. This will apply a className of\n * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map\n * are supported by default. It is recommended to create custom colors using\n * the `rmd-avatar-theme-update-var` mixin with custom class names if the\n * default colors aren't extensive enough.\n *\n * @see {@link theme}\n * @defaultValue `\"\"`\n */\n color?: string;\n\n /**\n * @defaultValue `\"avatar\"`\n */\n size?: \"avatar\" | \"icon\";\n\n /**\n * This can be used instead of {@link color} to set the background color to one of\n * the theme colors. This will also set the text color to either be `#000` or\n * `#fff` automatically to enforce the correct aspect ratio.\n */\n theme?: ThemeColor;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function avatar(options: AvatarClassNameOptions): string {\n const { className, color = \"\", size, theme } = options;\n\n return cnb(\n styles({ [color]: color, icon: size === \"icon\" }),\n cssUtils({ backgroundColor: theme }),\n className\n );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface AvatarImageClassNameOptions {\n className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function avatarImage(options: AvatarImageClassNameOptions = {}): string {\n const { className } = options;\n\n return cnb(styles(\"image\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","avatar","options","className","color","size","theme","icon","backgroundColor","avatarImage"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyB,iBAAiB;AAC3D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA+BnB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,OAAOL,IACLG,OAAO;QAAE,CAACI,MAAM,EAAEA;QAAOG,MAAMF,SAAS;IAAO,IAC/CP,SAAS;QAAEU,iBAAiBF;IAAM,IAClCH;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASM,YAAYP,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B"}
|
package/dist/badge/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cssUtils, type BackgroundColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-badge-size\"?: string | number;\n \"--rmd-badge-offset\"?: string | number;\n \"--rmd-badge-offset-top\"?: string | number;\n \"--rmd-badge-offset-right\"?: string | number;\n }\n}\n\nconst styles = bem(\"rmd-badge\");\n\n/**\n * @remarks \\@since 6.0.0 Renamed `\"default\"` to `\"greyscale\"` and added all\n * theme colors.\n */\nexport type BadgeTheme = BackgroundColor | \"greyscale\" | \"clear\";\n\nexport interface BadgeClassNameOptions {\n className?: string;\n\n /** @defaultValue `\"\"greyscale` */\n theme?: BadgeTheme;\n}\n\nexport function badge(options: BadgeClassNameOptions = {}): string {\n const { className, theme = \"greyscale\" } = options;\n const greyscale = theme === \"greyscale\";\n const clear = theme === \"clear\";\n\n return cnb(\n styles({ greyscale }),\n cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),\n className\n );\n}\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n /** @defaultValue `\"\"greyscale` */\n theme?: BadgeTheme;\n\n children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n * return (\n * <>\n * <Badge>3</Badge>\n * <Badge theme=\"primary\">100</Badge>\n * <Badge theme=\"secondary\">23</Badge>\n * <Badge theme=\"greyscale\">18</Badge>\n * <Badge theme=\"clear\">1</Badge>\n * </>\n * );\n * }\n * ```\n *\n * @example\n * Within Buttons Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button aria-label=\"Notifications\" buttonType=\"icon\">\n * <Badge>88</Badge>\n * <MaterialSymbol name=\"notifications\" />\n * </Button>\n * );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Removed the `disableNullOnZero` feature since it's\n * easier just to use condition rendering yourself.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n function Badge(props, ref) {\n const { children, className, theme, ...remaining } = props;\n return (\n <span {...remaining} ref={ref} className={badge({ theme, className })}>\n {children}\n </span>\n );\n }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined","Badge","props","ref","children","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,QAAQ,QAA8B,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAWtC,MAAMC,SAASD,IAAI;AAenB,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOR,IACLI,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMM,sBAAQZ,WACnB,SAASY,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAET,SAAS,EAAEC,KAAK,EAAE,GAAGS,WAAW,GAAGH;IACrD,qBACE,KAACI;QAAM,GAAGD,SAAS;QAAEF,KAAKA;QAAKR,WAAWF,MAAM;YAAEG;YAAOD;QAAU;kBAChES;;AAGP,GACA"}
|
|
1
|
+
{"version":3,"sources":["../../src/badge/Badge.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cssUtils, type BackgroundColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-badge-size\"?: string | number;\n \"--rmd-badge-offset\"?: string | number;\n \"--rmd-badge-offset-top\"?: string | number;\n \"--rmd-badge-offset-right\"?: string | number;\n }\n}\n\nconst styles = bem(\"rmd-badge\");\n\n/**\n * @remarks \\@since 6.0.0 Renamed `\"default\"` to `\"greyscale\"` and added all\n * theme colors.\n */\nexport type BadgeTheme = BackgroundColor | \"greyscale\" | \"clear\";\n\nexport interface BadgeClassNameOptions {\n className?: string;\n\n /** @defaultValue `\"\"greyscale` */\n theme?: BadgeTheme;\n}\n\nexport function badge(options: BadgeClassNameOptions = {}): string {\n const { className, theme = \"greyscale\" } = options;\n const greyscale = theme === \"greyscale\";\n const clear = theme === \"clear\";\n\n return cnb(\n styles({ greyscale }),\n cssUtils({ backgroundColor: !clear && !greyscale ? theme : undefined }),\n className\n );\n}\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n /** @defaultValue `\"\"greyscale` */\n theme?: BadgeTheme;\n\n children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n * return (\n * <>\n * <Badge>3</Badge>\n * <Badge theme=\"primary\">100</Badge>\n * <Badge theme=\"secondary\">23</Badge>\n * <Badge theme=\"greyscale\">18</Badge>\n * <Badge theme=\"clear\">1</Badge>\n * </>\n * );\n * }\n * ```\n *\n * @example\n * Within Buttons Example\n * ```tsx\n * import type { ReactElement } from \"react\";\n * import { Badge, Button, MaterialSymbol } from \"@react-md/core\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button aria-label=\"Notifications\" buttonType=\"icon\">\n * <Badge>88</Badge>\n * <MaterialSymbol name=\"notifications\" />\n * </Button>\n * );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0 Removed the `disableNullOnZero` feature since it's\n * easier just to use condition rendering yourself.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n function Badge(props, ref) {\n const { children, className, theme, ...remaining } = props;\n return (\n <span {...remaining} ref={ref} className={badge({ theme, className })}>\n {children}\n </span>\n );\n }\n);\n"],"names":["cnb","forwardRef","cssUtils","bem","styles","badge","options","className","theme","greyscale","clear","backgroundColor","undefined","Badge","props","ref","children","remaining","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6C,QAAQ;AACxE,SAASC,QAAQ,QAA8B,iBAAiB;AAChE,SAASC,GAAG,QAAQ,kBAAkB;AAWtC,MAAMC,SAASD,IAAI;AAenB,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,WAAW,EAAE,GAAGF;IAC3C,MAAMG,YAAYD,UAAU;IAC5B,MAAME,QAAQF,UAAU;IAExB,OAAOR,IACLI,OAAO;QAAEK;IAAU,IACnBP,SAAS;QAAES,iBAAiB,CAACD,SAAS,CAACD,YAAYD,QAAQI;IAAU,IACrEL;AAEJ;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMM,sBAAQZ,WACnB,SAASY,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EAAEC,QAAQ,EAAET,SAAS,EAAEC,KAAK,EAAE,GAAGS,WAAW,GAAGH;IACrD,qBACE,KAACI;QAAM,GAAGD,SAAS;QAAEF,KAAKA;QAAKR,WAAWF,MAAM;YAAEG;YAAOD;QAAU;kBAChES;;AAGP,GACA"}
|
package/dist/box/Box.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { box, type BoxOptions } from \"./styles.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\n/**\n * **Server Component**\n *\n * The `Box` component is a wrapper around the CSS box model and should solve\n * most of your `flex` and `grid` layout requirements for responsive design.\n * There are pass-through props for all of the box module styling properties\n * available by default.\n *\n * @example\n * Default Styles\n * ```scss\n * .box {\n * align-items: center;\n * display: flex;\n * flex-wrap: wrap;\n * gap: 1rem;\n * padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n * return (\n * <Box>\n * <div>Thing 1</div>\n * <div>Thing 2</div>\n * <div>Thing 3</div>\n * <div>Thing 4</div>\n * <div>Thing 5</div>\n * </Box>\n * ):\n * }\n * ```\n *\n * @example\n * Default Grid Styles\n * ```scss\n * .box {\n * align-items: center;\n * display: grid;\n * grid-gap: 1rem;\n * grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n * padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n * return (\n * <Box grid>\n * <div>Thing 1</div>\n * <div>Thing 2</div>\n * <div>Thing 3</div>\n * <div>Thing 4</div>\n * <div>Thing 5</div>\n * </Box>\n * ):\n * }\n * ```\n *\n * @example\n * Custom Grid\n * ```scss\n * @use \"@react-md/core\" with (\n * $grids: (\n * small: (\n * min: 5rem,\n * ),\n * medium: (\n * min: 7rem,\n * padding: 2rem,\n * gap: 0.5rem,\n * ),\n * )\n * );\n *\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n * return (\n * <Box grid gridName=\"medium\">\n * <div>Thing 1</div>\n * <div>Thing 2</div>\n * <div>Thing 3</div>\n * <div>Thing 4</div>\n * <div>Thing 5</div>\n * </Box>\n * ):\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n function Box(props, ref) {\n const {\n className,\n children,\n align,\n grid = false,\n gridName = \"\",\n justify,\n stacked = false,\n reversed = false,\n gridColumns = \"fit\",\n fullWidth = false,\n disableWrap = false,\n disablePadding = false,\n ...remaining\n } = props;\n\n return (\n <div\n {...remaining}\n ref={ref}\n className={box({\n className,\n fullWidth,\n grid,\n stacked,\n gridName,\n gridColumns,\n align,\n justify,\n reversed,\n disableWrap,\n disablePadding,\n })}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["forwardRef","box","Box","props","ref","className","children","align","grid","gridName","justify","stacked","reversed","gridColumns","fullWidth","disableWrap","disablePadding","remaining","div"],"mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAyB,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,KAAK,EACZC,WAAW,EAAE,EACbC,OAAO,EACPC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGd;IAEJ,qBACE,KAACe;QACE,GAAGD,SAAS;QACbb,KAAKA;QACLC,WAAWJ,IAAI;YACbI;YACAS;YACAN;YACAG;YACAF;YACAI;YACAN;YACAG;YACAE;YACAG;YACAC;QACF;kBAECV;;AAGP,GACA"}
|
|
1
|
+
{"version":3,"sources":["../../src/box/Box.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { box, type BoxOptions } from \"./styles.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement>, BoxOptions {}\n\n/**\n * **Server Component**\n *\n * The `Box` component is a wrapper around the CSS box model and should solve\n * most of your `flex` and `grid` layout requirements for responsive design.\n * There are pass-through props for all of the box module styling properties\n * available by default.\n *\n * @example\n * Default Styles\n * ```scss\n * .box {\n * align-items: center;\n * display: flex;\n * flex-wrap: wrap;\n * gap: 1rem;\n * padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n * return (\n * <Box>\n * <div>Thing 1</div>\n * <div>Thing 2</div>\n * <div>Thing 3</div>\n * <div>Thing 4</div>\n * <div>Thing 5</div>\n * </Box>\n * ):\n * }\n * ```\n *\n * @example\n * Default Grid Styles\n * ```scss\n * .box {\n * align-items: center;\n * display: grid;\n * grid-gap: 1rem;\n * grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));\n * padding: 1rem;\n * }\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n * return (\n * <Box grid>\n * <div>Thing 1</div>\n * <div>Thing 2</div>\n * <div>Thing 3</div>\n * <div>Thing 4</div>\n * <div>Thing 5</div>\n * </Box>\n * ):\n * }\n * ```\n *\n * @example\n * Custom Grid\n * ```scss\n * @use \"@react-md/core\" with (\n * $grids: (\n * small: (\n * min: 5rem,\n * ),\n * medium: (\n * min: 7rem,\n * padding: 2rem,\n * gap: 0.5rem,\n * ),\n * )\n * );\n *\n * ```\n *\n * ```tsx\n * import { Box } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * export default function Example(): ReactElement {\n * return (\n * <Box grid gridName=\"medium\">\n * <div>Thing 1</div>\n * <div>Thing 2</div>\n * <div>Thing 3</div>\n * <div>Thing 4</div>\n * <div>Thing 5</div>\n * </Box>\n * ):\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n function Box(props, ref) {\n const {\n className,\n children,\n align,\n grid = false,\n gridName = \"\",\n justify,\n stacked = false,\n reversed = false,\n gridColumns = \"fit\",\n fullWidth = false,\n disableWrap = false,\n disablePadding = false,\n ...remaining\n } = props;\n\n return (\n <div\n {...remaining}\n ref={ref}\n className={box({\n className,\n fullWidth,\n grid,\n stacked,\n gridName,\n gridColumns,\n align,\n justify,\n reversed,\n disableWrap,\n disablePadding,\n })}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["forwardRef","box","Box","props","ref","className","children","align","grid","gridName","justify","stacked","reversed","gridColumns","fullWidth","disableWrap","disablePadding","remaining","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAyB,cAAc;AAOnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGC,GACD,OAAO,MAAMC,oBAAMF,WACjB,SAASE,IAAIC,KAAK,EAAEC,GAAG;IACrB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,KAAK,EACZC,WAAW,EAAE,EACbC,OAAO,EACPC,UAAU,KAAK,EACfC,WAAW,KAAK,EAChBC,cAAc,KAAK,EACnBC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGd;IAEJ,qBACE,KAACe;QACE,GAAGD,SAAS;QACbb,KAAKA;QACLC,WAAWJ,IAAI;YACbI;YACAS;YACAN;YACAG;YACAF;YACAI;YACAN;YACAG;YACAE;YACAG;YACAC;QACF;kBAECV;;AAGP,GACA"}
|
package/dist/box/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/box/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-box\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-box-gap\"?: string | number;\n \"--rmd-box-padding\"?: string | number;\n \"--rmd-box-item-min-size\"?: string | number;\n \"--rmd-box-columns\"?: string | number;\n }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type BoxAlignItems =\n | \"start\"\n | \"flex-start\"\n | \"center\"\n | \"end\"\n | \"flex-end\"\n | \"stretch\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type BoxJustifyContent =\n | BoxAlignItems\n | \"space-around\"\n | \"space-between\"\n | \"space-evenly\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type BoxFlexDirection = \"row\" | \"column\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BoxOptions {\n className?: string;\n\n /**\n * Set this to `true` to use `display: grid` instead of `display: flex`.\n *\n * @defaultValue `false`\n */\n grid?: boolean;\n\n /**\n * Set this to `true` to apply `width: 100%`. This can be useful when using\n * nested box layouts.\n *\n * @defaultValue `false`\n */\n fullWidth?: boolean;\n\n /**\n * Set this to `true` to set `flex-wrap: nowrap`.\n *\n * @defaultValue `false`\n */\n disableWrap?: boolean;\n\n /**\n * Set this to `true` to disable the default padding.\n *\n * @defaultValue `false`\n */\n disablePadding?: boolean;\n\n /**\n * This is a grid configuration\n * This should match one of the names in the `$grids` map. So for example:\n *\n * ```scss\n * @use \"react-md\" with (\n * $grids: (\n * small: (\n * min: 5rem\n * ),\n * medium: (\n * min: 7rem,\n * gap: 0.5rem,\n * padding: 2rem,\n * ),\n * ),\n * );\n * ```\n *\n * The `gridName` should be `\"small\" | \"medium\"`.\n *\n * @defaultValue `\"\"`\n */\n gridName?: string;\n\n /**\n * @defaultValue `\"fit\"`\n */\n gridColumns?: \"fit\" | \"fill\" | number;\n\n /**\n * @defaultValue `\"\"`\n */\n align?: BoxAlignItems;\n\n /**\n * The default value is really `center` or whatever the `$default-align-items` is set to.\n *\n * @defaultValue `\"\"`\n */\n justify?: BoxJustifyContent;\n\n /**\n * Set this to `true` to set `flex-direction: column` which will stack all\n * items in the box.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n\n /**\n * Set this to `true` to reverse the `flex-direction`. i.e.\n * - `flex-direction: row-reverse`\n * - `flex-direction: column-reverse`\n *\n * @defaultValue `false`\n */\n reversed?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function box(options: BoxOptions = {}): string {\n const {\n className,\n align = \"\",\n grid = false,\n gridName = \"\",\n gridColumns = \"fit\",\n justify = \"\",\n stacked = false,\n reversed,\n fullWidth = false,\n disableWrap = false,\n disablePadding = false,\n } = options;\n\n return cnb(\n styles({\n wrap: !disableWrap,\n padded: !disablePadding,\n column: stacked && !reversed,\n reverse: !stacked && reversed,\n \"column-reverse\": stacked && reversed,\n \"full-width\": fullWidth,\n grid,\n \"grid-fill\": gridColumns === \"fill\",\n \"grid-columns\": typeof gridColumns === \"number\",\n [gridName]: grid && gridName,\n \"align-start\": align === \"start\" || align === \"flex-start\",\n \"align-center\": align === \"center\",\n \"align-end\": align === \"end\" || align === \"flex-end\",\n \"align-stretch\": align === \"stretch\",\n \"justify-center\": justify === \"center\",\n \"justify-start\": justify === \"start\" || justify === \"flex-start\",\n \"justify-end\": justify === \"end\" || justify === \"flex-end\",\n \"justify-stretch\": justify === \"stretch\",\n \"justify-around\": justify === \"space-around\",\n \"justify-between\": justify === \"space-between\",\n \"justify-evenly\": justify === \"space-evenly\",\n }),\n className\n );\n}\n"],"names":["cnb","bem","styles","box","options","className","align","grid","gridName","gridColumns","justify","stacked","reversed","fullWidth","disableWrap","disablePadding","wrap","padded","column","reverse"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAmInB;;CAEC,GACD,OAAO,SAASE,IAAIC,UAAsB,CAAC,CAAC;IAC1C,MAAM,EACJC,SAAS,EACTC,QAAQ,EAAE,EACVC,OAAO,KAAK,EACZC,WAAW,EAAE,EACbC,cAAc,KAAK,EACnBC,UAAU,EAAE,EACZC,UAAU,KAAK,EACfC,QAAQ,EACRC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,iBAAiB,KAAK,EACvB,GAAGX;IAEJ,OAAOJ,IACLE,OAAO;QACLc,MAAM,CAACF;QACPG,QAAQ,CAACF;QACTG,QAAQP,WAAW,CAACC;QACpBO,SAAS,CAACR,WAAWC;QACrB,kBAAkBD,WAAWC;QAC7B,cAAcC;QACdN;QACA,aAAaE,gBAAgB;QAC7B,gBAAgB,OAAOA,gBAAgB;QACvC,CAACD,SAAS,EAAED,QAAQC;QACpB,eAAeF,UAAU,WAAWA,UAAU;QAC9C,gBAAgBA,UAAU;QAC1B,aAAaA,UAAU,SAASA,UAAU;QAC1C,iBAAiBA,UAAU;QAC3B,kBAAkBI,YAAY;QAC9B,iBAAiBA,YAAY,WAAWA,YAAY;QACpD,eAAeA,YAAY,SAASA,YAAY;QAChD,mBAAmBA,YAAY;QAC/B,kBAAkBA,YAAY;QAC9B,mBAAmBA,YAAY;QAC/B,kBAAkBA,YAAY;IAChC,IACAL;AAEJ"}
|
|
1
|
+
{"version":3,"sources":["../../src/box/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-box\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-box-gap\"?: string | number;\n \"--rmd-box-padding\"?: string | number;\n \"--rmd-box-item-min-size\"?: string | number;\n \"--rmd-box-columns\"?: string | number;\n }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type BoxAlignItems =\n | \"start\"\n | \"flex-start\"\n | \"center\"\n | \"end\"\n | \"flex-end\"\n | \"stretch\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type BoxJustifyContent =\n | BoxAlignItems\n | \"space-around\"\n | \"space-between\"\n | \"space-evenly\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type BoxFlexDirection = \"row\" | \"column\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BoxOptions {\n className?: string;\n\n /**\n * Set this to `true` to use `display: grid` instead of `display: flex`.\n *\n * @defaultValue `false`\n */\n grid?: boolean;\n\n /**\n * Set this to `true` to apply `width: 100%`. This can be useful when using\n * nested box layouts.\n *\n * @defaultValue `false`\n */\n fullWidth?: boolean;\n\n /**\n * Set this to `true` to set `flex-wrap: nowrap`.\n *\n * @defaultValue `false`\n */\n disableWrap?: boolean;\n\n /**\n * Set this to `true` to disable the default padding.\n *\n * @defaultValue `false`\n */\n disablePadding?: boolean;\n\n /**\n * This is a grid configuration\n * This should match one of the names in the `$grids` map. So for example:\n *\n * ```scss\n * @use \"react-md\" with (\n * $grids: (\n * small: (\n * min: 5rem\n * ),\n * medium: (\n * min: 7rem,\n * gap: 0.5rem,\n * padding: 2rem,\n * ),\n * ),\n * );\n * ```\n *\n * The `gridName` should be `\"small\" | \"medium\"`.\n *\n * @defaultValue `\"\"`\n */\n gridName?: string;\n\n /**\n * @defaultValue `\"fit\"`\n */\n gridColumns?: \"fit\" | \"fill\" | number;\n\n /**\n * @defaultValue `\"\"`\n */\n align?: BoxAlignItems;\n\n /**\n * The default value is really `center` or whatever the `$default-align-items` is set to.\n *\n * @defaultValue `\"\"`\n */\n justify?: BoxJustifyContent;\n\n /**\n * Set this to `true` to set `flex-direction: column` which will stack all\n * items in the box.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n\n /**\n * Set this to `true` to reverse the `flex-direction`. i.e.\n * - `flex-direction: row-reverse`\n * - `flex-direction: column-reverse`\n *\n * @defaultValue `false`\n */\n reversed?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function box(options: BoxOptions = {}): string {\n const {\n className,\n align = \"\",\n grid = false,\n gridName = \"\",\n gridColumns = \"fit\",\n justify = \"\",\n stacked = false,\n reversed,\n fullWidth = false,\n disableWrap = false,\n disablePadding = false,\n } = options;\n\n return cnb(\n styles({\n wrap: !disableWrap,\n padded: !disablePadding,\n column: stacked && !reversed,\n reverse: !stacked && reversed,\n \"column-reverse\": stacked && reversed,\n \"full-width\": fullWidth,\n grid,\n \"grid-fill\": gridColumns === \"fill\",\n \"grid-columns\": typeof gridColumns === \"number\",\n [gridName]: grid && gridName,\n \"align-start\": align === \"start\" || align === \"flex-start\",\n \"align-center\": align === \"center\",\n \"align-end\": align === \"end\" || align === \"flex-end\",\n \"align-stretch\": align === \"stretch\",\n \"justify-center\": justify === \"center\",\n \"justify-start\": justify === \"start\" || justify === \"flex-start\",\n \"justify-end\": justify === \"end\" || justify === \"flex-end\",\n \"justify-stretch\": justify === \"stretch\",\n \"justify-around\": justify === \"space-around\",\n \"justify-between\": justify === \"space-between\",\n \"justify-evenly\": justify === \"space-evenly\",\n }),\n className\n );\n}\n"],"names":["cnb","bem","styles","box","options","className","align","grid","gridName","gridColumns","justify","stacked","reversed","fullWidth","disableWrap","disablePadding","wrap","padded","column","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAmInB;;CAEC,GACD,OAAO,SAASE,IAAIC,UAAsB,CAAC,CAAC;IAC1C,MAAM,EACJC,SAAS,EACTC,QAAQ,EAAE,EACVC,OAAO,KAAK,EACZC,WAAW,EAAE,EACbC,cAAc,KAAK,EACnBC,UAAU,EAAE,EACZC,UAAU,KAAK,EACfC,QAAQ,EACRC,YAAY,KAAK,EACjBC,cAAc,KAAK,EACnBC,iBAAiB,KAAK,EACvB,GAAGX;IAEJ,OAAOJ,IACLE,OAAO;QACLc,MAAM,CAACF;QACPG,QAAQ,CAACF;QACTG,QAAQP,WAAW,CAACC;QACpBO,SAAS,CAACR,WAAWC;QACrB,kBAAkBD,WAAWC;QAC7B,cAAcC;QACdN;QACA,aAAaE,gBAAgB;QAC7B,gBAAgB,OAAOA,gBAAgB;QACvC,CAACD,SAAS,EAAED,QAAQC;QACpB,eAAeF,UAAU,WAAWA,UAAU;QAC9C,gBAAgBA,UAAU;QAC1B,aAAaA,UAAU,SAASA,UAAU;QAC1C,iBAAiBA,UAAU;QAC3B,kBAAkBI,YAAY;QAC9B,iBAAiBA,YAAY,WAAWA,YAAY;QACpD,eAAeA,YAAY,SAASA,YAAY;QAChD,mBAAmBA,YAAY;QAC/B,kBAAkBA,YAAY;QAC9B,mBAAmBA,YAAY;QAC/B,kBAAkBA,YAAY;IAChC,IACAL;AAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type MouseEvent, type ReactNode } from \"react\";\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/overlayStyles.js\";\nimport {\n CircularProgress,\n type CircularProgressProps,\n} from \"../progress/CircularProgress.js\";\nimport {\n LinearProgress,\n type LinearProgressProps,\n} from \"../progress/LinearProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useAsyncAction } from \"../useAsyncAction.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type AsyncButtonLoadingType =\n | \"circular-before\"\n | \"circular-after\"\n | \"circular-overlay\"\n | \"linear-above\"\n | \"linear-below\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface AsyncButtonProps extends ButtonProps {\n /**\n * @see {@link progressAriaLabelledBy}\n * @defaultValue `\"async-button\" + useId()`\n */\n id?: string;\n\n /**\n * When this is defined and returns a `Promise`, the loading indicator will\n * display until the promise has resolved.\n *\n * @defaultValue `() => {}`\n */\n onClick?(event: MouseEvent<HTMLButtonElement>): Promise<void> | void;\n\n /**\n * Set this to `true` to manually display a loading spinner.\n *\n * @defaultValue `false`\n */\n loading?: boolean;\n\n /**\n * - `\"circular-overlay\"` - Covers and hides the button content with a\n * centered circular progress\n * - `\"circular-before\"` - Renders a circular progress bar before the button\n * content which is useful when rendering an icon before the button text.\n * See {@link beforeAddon} as well.\n * - `\"circular-after\"` - Renders a circular progress bar before the button\n * content which is useful when rendering an icon after the button text.\n * See {@link afterAddon} as well.\n * - `\"linear-above\"` - Renders a linear progress bar at the top of the button\n * while still displaying the button contents. Usually looks good for\n * outlined buttons.\n * - `\"linear-below\"` - Renders a linear progress bar at the bottom of the\n * button while still displaying the button contents. Usually looks good for\n * outlined buttons.\n *\n * @defaultValue `\"circular-overlay\"`\n */\n loadingType?: AsyncButtonLoadingType;\n\n /**\n * Optional content to display instead of the default `children` while\n * loading.\n */\n loadingChildren?: ReactNode;\n\n /**\n * Set this to `true` to use the `disabled` theme while loading.\n *\n * @defaultValue `false`\n */\n loadingDisabledTheme?: boolean;\n\n /**\n * This should be used when the {@link loadingType} is set to\n * `\"circular-before\"`, an icon should appear before the other content in\n * the button, and the loading indicator should replace the icon.\n */\n beforeAddon?: ReactNode;\n\n /**\n * This should be used when the {@link loadingType} is set to\n * `\"circular-after\"`, an icon should appear before the other content in\n * the button, and the loading indicator should replace the icon.\n */\n afterAddon?: ReactNode;\n\n /**\n * An optional label to provide to the progressbar.\n *\n * @see {@link progressAriaLabelledBy}\n */\n progressAriaLabel?: string;\n\n /**\n * @see {@link id}\n * @defaultValue `id`\n */\n progressAriaLabelledBy?: string;\n\n /**\n * Any additional props to pass to the `CircularProgress` bar when the\n * {@link loadingType} is one of the circular types.\n */\n linearProgressProps?: PropsWithRef<LinearProgressProps, HTMLDivElement>;\n\n /**\n * Any additional props to pass to the `LinearProgress` bar when the\n * {@link loadingType} is one of the linear types.\n */\n circularProgressProps?: PropsWithRef<CircularProgressProps, HTMLSpanElement>;\n}\n\n/**\n * **Client Component**\n *\n * The async button can be used to render a loading indicator within a button\n * during an async task. The loading spinner can be shown either by enabling the\n * `loading` prop or returning a promise from the `onClick` event which will\n * continue to show the loading indicator until the promise has been resolved.\n *\n * @example\n * Async onClick\n * ```tsx\n * import { AsyncButton } from \"@react-md/core\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const [data, setData] = useState(null);\n * return (\n * <AsyncButton\n * type=\"submit\"\n * onClick={async () => {\n * const response = await fetch(\"/my-api\");\n * const json = await response.json();\n * setData(json);\n * }}\n * >\n * Submit\n * </AsyncButton>\n * );\n * }\n * ```\n *\n * @example\n * Manual Loading State\n * ```tsx\n * import { AsyncButton } from \"@react-md/core\";\n * import { useMutation } from \"@tanstack/query\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { isLoading, mutate } = useMutation({\n * mutationFn: (newTodo) => fetch('/todos', {\n * method: \"POST\",\n * body: JSON.stringify(newTodo),\n * }),\n * });\n *\n * return (\n * <AsyncButton\n * type=\"submit\"\n * loading={isLoading}\n * onClick={() => {\n * mutate({ id: Date.now(), title: \"Create example\" });\n * }}\n * >\n * Create Todo\n * </AsyncButton>\n * );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(\n function AsyncButton(props, ref) {\n const {\n id: propId,\n onClick = noop,\n children,\n floating = null,\n theme = floating ? \"secondary\" : \"clear\",\n themeType = floating ? \"contained\" : \"flat\",\n buttonType = floating ? \"icon\" : \"text\",\n className,\n disabled,\n loading: propLoading = false,\n loadingType = \"circular-overlay\",\n loadingChildren,\n loadingDisabledTheme = false,\n afterAddon: propAfterAddon,\n beforeAddon: propBeforeAddon,\n linearProgressProps,\n circularProgressProps,\n progressAriaLabel,\n progressAriaLabelledBy: propProgressAriaLabelledBy,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"async-button\");\n const { handleAsync, pending } = useAsyncAction({ disabled });\n const loading = pending || propLoading;\n\n let progressTheme: ProgressTheme = \"current-color\";\n if (theme === \"clear\" || theme === \"disabled\") {\n progressTheme = \"primary\";\n }\n\n let progressAriaLabelledBy = propProgressAriaLabelledBy;\n if (\n !progressAriaLabel &&\n !linearProgressProps?.[\"aria-label\"] &&\n !linearProgressProps?.[\"aria-labelledby\"] &&\n !circularProgressProps?.[\"aria-label\"] &&\n !circularProgressProps?.[\"aria-labelledby\"]\n ) {\n progressAriaLabelledBy = id;\n }\n\n const progress = loadingType.includes(\"linear\") ? (\n <LinearProgress\n aria-label={progressAriaLabel}\n aria-labelledby={progressAriaLabelledBy as string}\n {...linearProgressProps}\n theme={progressTheme}\n />\n ) : (\n <CircularProgress\n aria-label={progressAriaLabel}\n aria-labelledby={progressAriaLabelledBy as string}\n {...circularProgressProps}\n theme={progressTheme}\n />\n );\n\n let afterAddon = propAfterAddon;\n let beforeAddon = propBeforeAddon;\n let overlayElement: ReactNode;\n let isOverlayCover = false;\n switch (loadingType) {\n case \"circular-before\":\n beforeAddon = loading ? progress : propBeforeAddon;\n break;\n case \"circular-after\":\n afterAddon = loading ? progress : propAfterAddon;\n break;\n case \"circular-overlay\":\n case \"linear-above\":\n case \"linear-below\": {\n let alignItems: BoxAlignItems = \"center\";\n if (loadingType === \"linear-above\") {\n alignItems = \"start\";\n } else if (loadingType === \"linear-below\") {\n alignItems = \"end\";\n } else {\n isOverlayCover = true;\n }\n\n overlayElement = loading && (\n <span\n className={overlay({\n active: true,\n visible: true,\n absolute: true,\n align: alignItems,\n })}\n >\n {progress}\n </span>\n );\n break;\n }\n }\n\n return (\n <Button\n {...remaining}\n aria-disabled={loading || undefined}\n id={id}\n ref={ref}\n disabled={disabled}\n floating={floating}\n className={cnb(\n \"rmd-button--async\",\n loading && isOverlayCover && \"rmd-button--async-overlay\",\n className\n )}\n theme={loading && loadingDisabledTheme ? \"disabled\" : theme}\n themeType={themeType}\n buttonType={buttonType}\n onClick={handleAsync((event) => Promise.resolve(onClick(event)))}\n >\n {beforeAddon}\n {loading && typeof loadingChildren !== \"undefined\"\n ? loadingChildren\n : children}\n {afterAddon}\n {overlayElement}\n </Button>\n );\n }\n);\n"],"names":["cnb","forwardRef","overlay","CircularProgress","LinearProgress","useAsyncAction","useEnsuredId","Button","noop","AsyncButton","props","ref","id","propId","onClick","children","floating","theme","themeType","buttonType","className","disabled","loading","propLoading","loadingType","loadingChildren","loadingDisabledTheme","afterAddon","propAfterAddon","beforeAddon","propBeforeAddon","linearProgressProps","circularProgressProps","progressAriaLabel","progressAriaLabelledBy","propProgressAriaLabelledBy","remaining","handleAsync","pending","progressTheme","progress","includes","aria-label","aria-labelledby","overlayElement","isOverlayCover","alignItems","span","active","visible","absolute","align","aria-disabled","undefined","event","Promise","resolve"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAyC,QAAQ;AAEpE,SAASC,OAAO,QAAQ,8BAA8B;AACtD,SACEC,gBAAgB,QAEX,kCAAkC;AACzC,SACEC,cAAc,QAET,gCAAgC;AAGvC,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,MAAM,QAA0B,cAAc;AAEvD,MAAMC,OAAO;AACX,aAAa;AACf;AA8GA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DC,GACD,OAAO,MAAMC,4BAAcR,WACzB,SAASQ,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,UAAUN,IAAI,EACdO,QAAQ,EACRC,WAAW,IAAI,EACfC,QAAQD,WAAW,cAAc,OAAO,EACxCE,YAAYF,WAAW,cAAc,MAAM,EAC3CG,aAAaH,WAAW,SAAS,MAAM,EACvCI,SAAS,EACTC,QAAQ,EACRC,SAASC,cAAc,KAAK,EAC5BC,cAAc,kBAAkB,EAChCC,eAAe,EACfC,uBAAuB,KAAK,EAC5BC,YAAYC,cAAc,EAC1BC,aAAaC,eAAe,EAC5BC,mBAAmB,EACnBC,qBAAqB,EACrBC,iBAAiB,EACjBC,wBAAwBC,0BAA0B,EAClD,GAAGC,WACJ,GAAG1B;IACJ,MAAME,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEwB,WAAW,EAAEC,OAAO,EAAE,GAAGjC,eAAe;QAAEgB;IAAS;IAC3D,MAAMC,UAAUgB,WAAWf;IAE3B,IAAIgB,gBAA+B;IACnC,IAAItB,UAAU,WAAWA,UAAU,YAAY;QAC7CsB,gBAAgB;IAClB;IAEA,IAAIL,yBAAyBC;IAC7B,IACE,CAACF,qBACD,CAACF,qBAAqB,CAAC,aAAa,IACpC,CAACA,qBAAqB,CAAC,kBAAkB,IACzC,CAACC,uBAAuB,CAAC,aAAa,IACtC,CAACA,uBAAuB,CAAC,kBAAkB,EAC3C;QACAE,yBAAyBtB;IAC3B;IAEA,MAAM4B,WAAWhB,YAAYiB,QAAQ,CAAC,0BACpC,KAACrC;QACCsC,cAAYT;QACZU,mBAAiBT;QAChB,GAAGH,mBAAmB;QACvBd,OAAOsB;uBAGT,KAACpC;QACCuC,cAAYT;QACZU,mBAAiBT;QAChB,GAAGF,qBAAqB;QACzBf,OAAOsB;;IAIX,IAAIZ,aAAaC;IACjB,IAAIC,cAAcC;IAClB,IAAIc;IACJ,IAAIC,iBAAiB;IACrB,OAAQrB;QACN,KAAK;YACHK,cAAcP,UAAUkB,WAAWV;YACnC;QACF,KAAK;YACHH,aAAaL,UAAUkB,WAAWZ;YAClC;QACF,KAAK;QACL,KAAK;QACL,KAAK;YAAgB;gBACnB,IAAIkB,aAA4B;gBAChC,IAAItB,gBAAgB,gBAAgB;oBAClCsB,aAAa;gBACf,OAAO,IAAItB,gBAAgB,gBAAgB;oBACzCsB,aAAa;gBACf,OAAO;oBACLD,iBAAiB;gBACnB;gBAEAD,iBAAiBtB,yBACf,KAACyB;oBACC3B,WAAWlB,QAAQ;wBACjB8C,QAAQ;wBACRC,SAAS;wBACTC,UAAU;wBACVC,OAAOL;oBACT;8BAECN;;gBAGL;YACF;IACF;IAEA,qBACE,MAACjC;QACE,GAAG6B,SAAS;QACbgB,iBAAe9B,WAAW+B;QAC1BzC,IAAIA;QACJD,KAAKA;QACLU,UAAUA;QACVL,UAAUA;QACVI,WAAWpB,IACT,qBACAsB,WAAWuB,kBAAkB,6BAC7BzB;QAEFH,OAAOK,WAAWI,uBAAuB,aAAaT;QACtDC,WAAWA;QACXC,YAAYA;QACZL,SAASuB,YAAY,CAACiB,QAAUC,QAAQC,OAAO,CAAC1C,QAAQwC;;YAEvDzB;YACAP,WAAW,OAAOG,oBAAoB,cACnCA,kBACAV;YACHY;YACAiB;;;AAGP,GACA"}
|
|
1
|
+
{"version":3,"sources":["../../src/button/AsyncButton.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, type MouseEvent, type ReactNode } from \"react\";\nimport { type BoxAlignItems } from \"../box/styles.js\";\nimport { overlay } from \"../overlay/overlayStyles.js\";\nimport {\n CircularProgress,\n type CircularProgressProps,\n} from \"../progress/CircularProgress.js\";\nimport {\n LinearProgress,\n type LinearProgressProps,\n} from \"../progress/LinearProgress.js\";\nimport { type ProgressTheme } from \"../progress/types.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useAsyncAction } from \"../useAsyncAction.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type AsyncButtonLoadingType =\n | \"circular-before\"\n | \"circular-after\"\n | \"circular-overlay\"\n | \"linear-above\"\n | \"linear-below\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface AsyncButtonProps extends ButtonProps {\n /**\n * @see {@link progressAriaLabelledBy}\n * @defaultValue `\"async-button\" + useId()`\n */\n id?: string;\n\n /**\n * When this is defined and returns a `Promise`, the loading indicator will\n * display until the promise has resolved.\n *\n * @defaultValue `() => {}`\n */\n onClick?(event: MouseEvent<HTMLButtonElement>): Promise<void> | void;\n\n /**\n * Set this to `true` to manually display a loading spinner.\n *\n * @defaultValue `false`\n */\n loading?: boolean;\n\n /**\n * - `\"circular-overlay\"` - Covers and hides the button content with a\n * centered circular progress\n * - `\"circular-before\"` - Renders a circular progress bar before the button\n * content which is useful when rendering an icon before the button text.\n * See {@link beforeAddon} as well.\n * - `\"circular-after\"` - Renders a circular progress bar before the button\n * content which is useful when rendering an icon after the button text.\n * See {@link afterAddon} as well.\n * - `\"linear-above\"` - Renders a linear progress bar at the top of the button\n * while still displaying the button contents. Usually looks good for\n * outlined buttons.\n * - `\"linear-below\"` - Renders a linear progress bar at the bottom of the\n * button while still displaying the button contents. Usually looks good for\n * outlined buttons.\n *\n * @defaultValue `\"circular-overlay\"`\n */\n loadingType?: AsyncButtonLoadingType;\n\n /**\n * Optional content to display instead of the default `children` while\n * loading.\n */\n loadingChildren?: ReactNode;\n\n /**\n * Set this to `true` to use the `disabled` theme while loading.\n *\n * @defaultValue `false`\n */\n loadingDisabledTheme?: boolean;\n\n /**\n * This should be used when the {@link loadingType} is set to\n * `\"circular-before\"`, an icon should appear before the other content in\n * the button, and the loading indicator should replace the icon.\n */\n beforeAddon?: ReactNode;\n\n /**\n * This should be used when the {@link loadingType} is set to\n * `\"circular-after\"`, an icon should appear before the other content in\n * the button, and the loading indicator should replace the icon.\n */\n afterAddon?: ReactNode;\n\n /**\n * An optional label to provide to the progressbar.\n *\n * @see {@link progressAriaLabelledBy}\n */\n progressAriaLabel?: string;\n\n /**\n * @see {@link id}\n * @defaultValue `id`\n */\n progressAriaLabelledBy?: string;\n\n /**\n * Any additional props to pass to the `CircularProgress` bar when the\n * {@link loadingType} is one of the circular types.\n */\n linearProgressProps?: PropsWithRef<LinearProgressProps, HTMLDivElement>;\n\n /**\n * Any additional props to pass to the `LinearProgress` bar when the\n * {@link loadingType} is one of the linear types.\n */\n circularProgressProps?: PropsWithRef<CircularProgressProps, HTMLSpanElement>;\n}\n\n/**\n * **Client Component**\n *\n * The async button can be used to render a loading indicator within a button\n * during an async task. The loading spinner can be shown either by enabling the\n * `loading` prop or returning a promise from the `onClick` event which will\n * continue to show the loading indicator until the promise has been resolved.\n *\n * @example\n * Async onClick\n * ```tsx\n * import { AsyncButton } from \"@react-md/core\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const [data, setData] = useState(null);\n * return (\n * <AsyncButton\n * type=\"submit\"\n * onClick={async () => {\n * const response = await fetch(\"/my-api\");\n * const json = await response.json();\n * setData(json);\n * }}\n * >\n * Submit\n * </AsyncButton>\n * );\n * }\n * ```\n *\n * @example\n * Manual Loading State\n * ```tsx\n * import { AsyncButton } from \"@react-md/core\";\n * import { useMutation } from \"@tanstack/query\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { isLoading, mutate } = useMutation({\n * mutationFn: (newTodo) => fetch('/todos', {\n * method: \"POST\",\n * body: JSON.stringify(newTodo),\n * }),\n * });\n *\n * return (\n * <AsyncButton\n * type=\"submit\"\n * loading={isLoading}\n * onClick={() => {\n * mutate({ id: Date.now(), title: \"Create example\" });\n * }}\n * >\n * Create Todo\n * </AsyncButton>\n * );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const AsyncButton = forwardRef<HTMLButtonElement, AsyncButtonProps>(\n function AsyncButton(props, ref) {\n const {\n id: propId,\n onClick = noop,\n children,\n floating = null,\n theme = floating ? \"secondary\" : \"clear\",\n themeType = floating ? \"contained\" : \"flat\",\n buttonType = floating ? \"icon\" : \"text\",\n className,\n disabled,\n loading: propLoading = false,\n loadingType = \"circular-overlay\",\n loadingChildren,\n loadingDisabledTheme = false,\n afterAddon: propAfterAddon,\n beforeAddon: propBeforeAddon,\n linearProgressProps,\n circularProgressProps,\n progressAriaLabel,\n progressAriaLabelledBy: propProgressAriaLabelledBy,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"async-button\");\n const { handleAsync, pending } = useAsyncAction({ disabled });\n const loading = pending || propLoading;\n\n let progressTheme: ProgressTheme = \"current-color\";\n if (theme === \"clear\" || theme === \"disabled\") {\n progressTheme = \"primary\";\n }\n\n let progressAriaLabelledBy = propProgressAriaLabelledBy;\n if (\n !progressAriaLabel &&\n !linearProgressProps?.[\"aria-label\"] &&\n !linearProgressProps?.[\"aria-labelledby\"] &&\n !circularProgressProps?.[\"aria-label\"] &&\n !circularProgressProps?.[\"aria-labelledby\"]\n ) {\n progressAriaLabelledBy = id;\n }\n\n const progress = loadingType.includes(\"linear\") ? (\n <LinearProgress\n aria-label={progressAriaLabel}\n aria-labelledby={progressAriaLabelledBy as string}\n {...linearProgressProps}\n theme={progressTheme}\n />\n ) : (\n <CircularProgress\n aria-label={progressAriaLabel}\n aria-labelledby={progressAriaLabelledBy as string}\n {...circularProgressProps}\n theme={progressTheme}\n />\n );\n\n let afterAddon = propAfterAddon;\n let beforeAddon = propBeforeAddon;\n let overlayElement: ReactNode;\n let isOverlayCover = false;\n switch (loadingType) {\n case \"circular-before\":\n beforeAddon = loading ? progress : propBeforeAddon;\n break;\n case \"circular-after\":\n afterAddon = loading ? progress : propAfterAddon;\n break;\n case \"circular-overlay\":\n case \"linear-above\":\n case \"linear-below\": {\n let alignItems: BoxAlignItems = \"center\";\n if (loadingType === \"linear-above\") {\n alignItems = \"start\";\n } else if (loadingType === \"linear-below\") {\n alignItems = \"end\";\n } else {\n isOverlayCover = true;\n }\n\n overlayElement = loading && (\n <span\n className={overlay({\n active: true,\n visible: true,\n absolute: true,\n align: alignItems,\n })}\n >\n {progress}\n </span>\n );\n break;\n }\n }\n\n return (\n <Button\n {...remaining}\n aria-disabled={loading || undefined}\n id={id}\n ref={ref}\n disabled={disabled}\n floating={floating}\n className={cnb(\n \"rmd-button--async\",\n loading && isOverlayCover && \"rmd-button--async-overlay\",\n className\n )}\n theme={loading && loadingDisabledTheme ? \"disabled\" : theme}\n themeType={themeType}\n buttonType={buttonType}\n onClick={handleAsync((event) => Promise.resolve(onClick(event)))}\n >\n {beforeAddon}\n {loading && typeof loadingChildren !== \"undefined\"\n ? loadingChildren\n : children}\n {afterAddon}\n {overlayElement}\n </Button>\n );\n }\n);\n"],"names":["cnb","forwardRef","overlay","CircularProgress","LinearProgress","useAsyncAction","useEnsuredId","Button","noop","AsyncButton","props","ref","id","propId","onClick","children","floating","theme","themeType","buttonType","className","disabled","loading","propLoading","loadingType","loadingChildren","loadingDisabledTheme","afterAddon","propAfterAddon","beforeAddon","propBeforeAddon","linearProgressProps","circularProgressProps","progressAriaLabel","progressAriaLabelledBy","propProgressAriaLabelledBy","remaining","handleAsync","pending","progressTheme","progress","includes","aria-label","aria-labelledby","overlayElement","isOverlayCover","alignItems","span","active","visible","absolute","align","aria-disabled","undefined","event","Promise","resolve"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAyC,QAAQ;AAEpE,SAASC,OAAO,QAAQ,8BAA8B;AACtD,SACEC,gBAAgB,QAEX,kCAAkC;AACzC,SACEC,cAAc,QAET,gCAAgC;AAGvC,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,MAAM,QAA0B,cAAc;AAEvD,MAAMC,OAAO;AACX,aAAa;AACf;AA8GA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DC,GACD,OAAO,MAAMC,4BAAcR,WACzB,SAASQ,YAAYC,KAAK,EAAEC,GAAG;IAC7B,MAAM,EACJC,IAAIC,MAAM,EACVC,UAAUN,IAAI,EACdO,QAAQ,EACRC,WAAW,IAAI,EACfC,QAAQD,WAAW,cAAc,OAAO,EACxCE,YAAYF,WAAW,cAAc,MAAM,EAC3CG,aAAaH,WAAW,SAAS,MAAM,EACvCI,SAAS,EACTC,QAAQ,EACRC,SAASC,cAAc,KAAK,EAC5BC,cAAc,kBAAkB,EAChCC,eAAe,EACfC,uBAAuB,KAAK,EAC5BC,YAAYC,cAAc,EAC1BC,aAAaC,eAAe,EAC5BC,mBAAmB,EACnBC,qBAAqB,EACrBC,iBAAiB,EACjBC,wBAAwBC,0BAA0B,EAClD,GAAGC,WACJ,GAAG1B;IACJ,MAAME,KAAKN,aAAaO,QAAQ;IAChC,MAAM,EAAEwB,WAAW,EAAEC,OAAO,EAAE,GAAGjC,eAAe;QAAEgB;IAAS;IAC3D,MAAMC,UAAUgB,WAAWf;IAE3B,IAAIgB,gBAA+B;IACnC,IAAItB,UAAU,WAAWA,UAAU,YAAY;QAC7CsB,gBAAgB;IAClB;IAEA,IAAIL,yBAAyBC;IAC7B,IACE,CAACF,qBACD,CAACF,qBAAqB,CAAC,aAAa,IACpC,CAACA,qBAAqB,CAAC,kBAAkB,IACzC,CAACC,uBAAuB,CAAC,aAAa,IACtC,CAACA,uBAAuB,CAAC,kBAAkB,EAC3C;QACAE,yBAAyBtB;IAC3B;IAEA,MAAM4B,WAAWhB,YAAYiB,QAAQ,CAAC,0BACpC,KAACrC;QACCsC,cAAYT;QACZU,mBAAiBT;QAChB,GAAGH,mBAAmB;QACvBd,OAAOsB;uBAGT,KAACpC;QACCuC,cAAYT;QACZU,mBAAiBT;QAChB,GAAGF,qBAAqB;QACzBf,OAAOsB;;IAIX,IAAIZ,aAAaC;IACjB,IAAIC,cAAcC;IAClB,IAAIc;IACJ,IAAIC,iBAAiB;IACrB,OAAQrB;QACN,KAAK;YACHK,cAAcP,UAAUkB,WAAWV;YACnC;QACF,KAAK;YACHH,aAAaL,UAAUkB,WAAWZ;YAClC;QACF,KAAK;QACL,KAAK;QACL,KAAK;YAAgB;gBACnB,IAAIkB,aAA4B;gBAChC,IAAItB,gBAAgB,gBAAgB;oBAClCsB,aAAa;gBACf,OAAO,IAAItB,gBAAgB,gBAAgB;oBACzCsB,aAAa;gBACf,OAAO;oBACLD,iBAAiB;gBACnB;gBAEAD,iBAAiBtB,yBACf,KAACyB;oBACC3B,WAAWlB,QAAQ;wBACjB8C,QAAQ;wBACRC,SAAS;wBACTC,UAAU;wBACVC,OAAOL;oBACT;8BAECN;;gBAGL;YACF;IACF;IAEA,qBACE,MAACjC;QACE,GAAG6B,SAAS;QACbgB,iBAAe9B,WAAW+B;QAC1BzC,IAAIA;QACJD,KAAKA;QACLU,UAAUA;QACVL,UAAUA;QACVI,WAAWpB,IACT,qBACAsB,WAAWuB,kBAAkB,6BAC7BzB;QAEFH,OAAOK,WAAWI,uBAAuB,aAAaT;QACtDC,WAAWA;QACXC,YAAYA;QACZL,SAASuB,YAAY,CAACiB,QAAUC,QAAQC,OAAO,CAAC1C,QAAQwC;;YAEvDzB;YACAP,WAAW,OAAOG,oBAAoB,cACnCA,kBACAV;YACHY;YACAiB;;;AAGP,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/button/Button.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ButtonHTMLAttributes } from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n FloatingActionButton,\n type FloatingActionButtonPosition,\n type FloatingActionButtonProps,\n} from \"./FloatingActionButton.js\";\nimport { button, type ButtonClassNameThemeOptions } from \"./buttonStyles.js\";\n\nexport interface ButtonProps\n extends ButtonHTMLAttributes<HTMLButtonElement>,\n ButtonClassNameThemeOptions {\n /** @defaultValue `\"button\"` */\n type?: \"button\" | \"reset\" | \"submit\";\n\n /**\n * The position within the viewport to display the button as a floating action\n * button.\n */\n floating?: FloatingActionButtonPosition;\n\n /**\n * Any additional props to provide the to `FAB` container element when the\n * `floating` prop is provided\n */\n floatingProps?: PropsWithRef<FloatingActionButtonProps, HTMLSpanElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * Content\n * </Button>\n * );\n * }\n * ```\n *\n * @example\n * Theme Example\n * ```tsx\n * import { Button } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * theme=\"primary\"\n * themeType=\"contained\"\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * Content\n * </Button>\n * );\n * }\n * ```\n *\n * @example\n * Icon Button Example\n * ```tsx\n * import { Button } from \"@react-md/core\";\n * import { FavoriteSVGIcon } from \"@react-md/material-icons\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * theme=\"secondary\"\n * themeType=\"outline\"\n * buttonType=\"icon\"\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * <FavoriteSVGIcon />\n * </Button>\n * );\n * }\n * ```\n *\n * @example\n * Text Button with icons\n * ```tsx\n * import { Button } from \"@react-md/core\";\n * import { FavoriteSVGIcon } from \"@react-md/material-icons\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * <FavoriteSVGIcon />\n * Content\n * </Button>\n * );\n * }\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(props, ref) {\n const {\n type = \"button\",\n disabled = false,\n floating = null,\n floatingProps,\n theme = floating ? \"secondary\" : \"clear\",\n themeType = floating ? \"contained\" : \"flat\",\n iconSize,\n buttonType = floating || iconSize ? \"icon\" : \"text\",\n className,\n responsive,\n children: propChildren,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n ...remaining\n } = props;\n const isThemeDisabled = theme === \"disabled\";\n const ariaDisabled = props[\"aria-disabled\"];\n const { pressed, pressedClassName, ripples, handlers } =\n useElementInteraction({\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled:\n disabled ||\n isThemeDisabled ||\n (ariaDisabled && ariaDisabled !== \"false\"),\n });\n\n const children = useHigherContrastChildren(propChildren);\n\n return (\n <FloatingActionButton position={floating} {...floatingProps}>\n <button\n {...remaining}\n // when the theme is set to `\"disabled\"`, the event handlers should be\n // removed so that it behaves like a disabled button. you do not want to\n // actually set the `disabled` attribute since it will lose keyboard\n // focus. this is mostly for supporting circular progress bars within\n // buttons\n {...(isThemeDisabled ? {} : handlers)}\n aria-disabled={isThemeDisabled || remaining[\"aria-disabled\"]}\n disabled={disabled}\n ref={ref}\n type={type}\n className={button({\n theme,\n themeType,\n buttonType,\n disabled,\n responsive,\n iconSize,\n pressed,\n pressedClassName,\n className,\n })}\n >\n {children}\n {ripples}\n </button>\n </FloatingActionButton>\n );\n }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","FloatingActionButton","button","Button","props","ref","type","disabled","floating","floatingProps","theme","themeType","iconSize","buttonType","className","responsive","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","remaining","isThemeDisabled","ariaDisabled","pressed","pressedClassName","ripples","handlers","position","aria-disabled"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAmC,QAAQ;AAC9D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SACEC,oBAAoB,QAGf,4BAA4B;AACnC,SAASC,MAAM,QAA0C,oBAAoB;AAqB7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFC,GACD,OAAO,MAAMC,uBAASL,WACpB,SAASK,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,OAAO,QAAQ,EACfC,WAAW,KAAK,EAChBC,WAAW,IAAI,EACfC,aAAa,EACbC,QAAQF,WAAW,cAAc,OAAO,EACxCG,YAAYH,WAAW,cAAc,MAAM,EAC3CI,QAAQ,EACRC,aAAaL,YAAYI,WAAW,SAAS,MAAM,EACnDE,SAAS,EACTC,UAAU,EACVC,UAAUC,YAAY,EACtBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACX,GAAGC,WACJ,GAAGzB;IACJ,MAAM0B,kBAAkBpB,UAAU;IAClC,MAAMqB,eAAe3B,KAAK,CAAC,gBAAgB;IAC3C,MAAM,EAAE4B,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpDpC,sBAAsB;QACpBmB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACArB,UACEA,YACAuB,mBACCC,gBAAgBA,iBAAiB;IACtC;IAEF,MAAMf,WAAWhB,0BAA0BiB;IAE3C,qBACE,KAAChB;QAAqBmC,UAAU5B;QAAW,GAAGC,aAAa;kBACzD,cAAA,MAACP;YACE,GAAG2B,SAAS;YAMZ,GAAIC,kBAAkB,CAAC,IAAIK,QAAQ;YACpCE,iBAAeP,mBAAmBD,SAAS,CAAC,gBAAgB;YAC5DtB,UAAUA;YACVF,KAAKA;YACLC,MAAMA;YACNQ,WAAWZ,OAAO;gBAChBQ;gBACAC;gBACAE;gBACAN;gBACAQ;gBACAH;gBACAoB;gBACAC;gBACAnB;YACF;;gBAECE;gBACAkB;;;;AAIT,GACA"}
|
|
1
|
+
{"version":3,"sources":["../../src/button/Button.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ButtonHTMLAttributes } from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n FloatingActionButton,\n type FloatingActionButtonPosition,\n type FloatingActionButtonProps,\n} from \"./FloatingActionButton.js\";\nimport { button, type ButtonClassNameThemeOptions } from \"./buttonStyles.js\";\n\nexport interface ButtonProps\n extends ButtonHTMLAttributes<HTMLButtonElement>,\n ButtonClassNameThemeOptions {\n /** @defaultValue `\"button\"` */\n type?: \"button\" | \"reset\" | \"submit\";\n\n /**\n * The position within the viewport to display the button as a floating action\n * button.\n */\n floating?: FloatingActionButtonPosition;\n\n /**\n * Any additional props to provide the to `FAB` container element when the\n * `floating` prop is provided\n */\n floatingProps?: PropsWithRef<FloatingActionButtonProps, HTMLSpanElement>;\n}\n\n/**\n * **Client Component**\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * Content\n * </Button>\n * );\n * }\n * ```\n *\n * @example\n * Theme Example\n * ```tsx\n * import { Button } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * theme=\"primary\"\n * themeType=\"contained\"\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * Content\n * </Button>\n * );\n * }\n * ```\n *\n * @example\n * Icon Button Example\n * ```tsx\n * import { Button } from \"@react-md/core\";\n * import { FavoriteSVGIcon } from \"@react-md/material-icons\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * theme=\"secondary\"\n * themeType=\"outline\"\n * buttonType=\"icon\"\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * <FavoriteSVGIcon />\n * </Button>\n * );\n * }\n * ```\n *\n * @example\n * Text Button with icons\n * ```tsx\n * import { Button } from \"@react-md/core\";\n * import { FavoriteSVGIcon } from \"@react-md/material-icons\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return (\n * <Button\n * onClick={(event) => {\n * // do something\n * }}\n * >\n * <FavoriteSVGIcon />\n * Content\n * </Button>\n * );\n * }\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(props, ref) {\n const {\n type = \"button\",\n disabled = false,\n floating = null,\n floatingProps,\n theme = floating ? \"secondary\" : \"clear\",\n themeType = floating ? \"contained\" : \"flat\",\n iconSize,\n buttonType = floating || iconSize ? \"icon\" : \"text\",\n className,\n responsive,\n children: propChildren,\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n ...remaining\n } = props;\n const isThemeDisabled = theme === \"disabled\";\n const ariaDisabled = props[\"aria-disabled\"];\n const { pressed, pressedClassName, ripples, handlers } =\n useElementInteraction({\n onBlur,\n onClick,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseUp,\n onMouseLeave,\n onDragStart,\n onTouchStart,\n onTouchEnd,\n onTouchMove,\n disabled:\n disabled ||\n isThemeDisabled ||\n (ariaDisabled && ariaDisabled !== \"false\"),\n });\n\n const children = useHigherContrastChildren(propChildren);\n\n return (\n <FloatingActionButton position={floating} {...floatingProps}>\n <button\n {...remaining}\n // when the theme is set to `\"disabled\"`, the event handlers should be\n // removed so that it behaves like a disabled button. you do not want to\n // actually set the `disabled` attribute since it will lose keyboard\n // focus. this is mostly for supporting circular progress bars within\n // buttons\n {...(isThemeDisabled ? {} : handlers)}\n aria-disabled={isThemeDisabled || remaining[\"aria-disabled\"]}\n disabled={disabled}\n ref={ref}\n type={type}\n className={button({\n theme,\n themeType,\n buttonType,\n disabled,\n responsive,\n iconSize,\n pressed,\n pressedClassName,\n className,\n })}\n >\n {children}\n {ripples}\n </button>\n </FloatingActionButton>\n );\n }\n);\n"],"names":["forwardRef","useElementInteraction","useHigherContrastChildren","FloatingActionButton","button","Button","props","ref","type","disabled","floating","floatingProps","theme","themeType","iconSize","buttonType","className","responsive","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","remaining","isThemeDisabled","ariaDisabled","pressed","pressedClassName","ripples","handlers","position","aria-disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,QAAmC,QAAQ;AAC9D,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SACEC,oBAAoB,QAGf,4BAA4B;AACnC,SAASC,MAAM,QAA0C,oBAAoB;AAqB7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFC,GACD,OAAO,MAAMC,uBAASL,WACpB,SAASK,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,OAAO,QAAQ,EACfC,WAAW,KAAK,EAChBC,WAAW,IAAI,EACfC,aAAa,EACbC,QAAQF,WAAW,cAAc,OAAO,EACxCG,YAAYH,WAAW,cAAc,MAAM,EAC3CI,QAAQ,EACRC,aAAaL,YAAYI,WAAW,SAAS,MAAM,EACnDE,SAAS,EACTC,UAAU,EACVC,UAAUC,YAAY,EACtBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACX,GAAGC,WACJ,GAAGzB;IACJ,MAAM0B,kBAAkBpB,UAAU;IAClC,MAAMqB,eAAe3B,KAAK,CAAC,gBAAgB;IAC3C,MAAM,EAAE4B,OAAO,EAAEC,gBAAgB,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GACpDpC,sBAAsB;QACpBmB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACArB,UACEA,YACAuB,mBACCC,gBAAgBA,iBAAiB;IACtC;IAEF,MAAMf,WAAWhB,0BAA0BiB;IAE3C,qBACE,KAAChB;QAAqBmC,UAAU5B;QAAW,GAAGC,aAAa;kBACzD,cAAA,MAACP;YACE,GAAG2B,SAAS;YAMZ,GAAIC,kBAAkB,CAAC,IAAIK,QAAQ;YACpCE,iBAAeP,mBAAmBD,SAAS,CAAC,gBAAgB;YAC5DtB,UAAUA;YACVF,KAAKA;YACLC,MAAMA;YACNQ,WAAWZ,OAAO;gBAChBQ;gBACAC;gBACAE;gBACAN;gBACAQ;gBACAH;gBACAoB;gBACAC;gBACAnB;YACF;;gBAECE;gBACAkB;;;;AAIT,GACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/button/ButtonUnstyled.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from \"react\";\nimport { buttonUnstyled } from \"./buttonUnstyledStyles.js\";\n\n/**\n * The props for the unstyled button are just all the normal button html\n * attributes without the `type` since this component forces the `type=\"button\"`\n * value.\n *\n * @remarks \\@since 6.0.0 Renamed from `UnstyledButtonProps`\n */\nexport type ButtonUnstyledProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"type\"\n>;\n\n/**\n * **Server Component**\n *\n * A simple wrapper for a `<button type=\"button\">` that applies the unstyled\n * utility class.\n *\n * Requires the `$disable-unstyled-utility-class` to be `false` to use.\n *\n * @see {@link buttonUnstyled}\n * @remarks \\@since 6.0.0 Renamed from `UnstyledButton`\n */\nexport const ButtonUnstyled = forwardRef<\n HTMLButtonElement,\n ButtonUnstyledProps\n>(function ButtonUnstyled(props, ref) {\n const { children, className, ...remaining } = props;\n return (\n <button\n {...remaining}\n ref={ref}\n type=\"button\"\n className={buttonUnstyled({ className })}\n >\n {children}\n </button>\n );\n});\n"],"names":["forwardRef","buttonUnstyled","ButtonUnstyled","props","ref","children","className","remaining","button","type"],"mappings":";AAAA,SAASA,UAAU,QAAmC,QAAQ;AAC9D,SAASC,cAAc,QAAQ,4BAA4B;AAc3D;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,+BAAiBF,WAG5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACK;QACE,GAAGD,SAAS;QACbH,KAAKA;QACLK,MAAK;QACLH,WAAWL,eAAe;YAAEK;QAAU;kBAErCD;;AAGP,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../../src/button/ButtonUnstyled.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from \"react\";\nimport { buttonUnstyled } from \"./buttonUnstyledStyles.js\";\n\n/**\n * The props for the unstyled button are just all the normal button html\n * attributes without the `type` since this component forces the `type=\"button\"`\n * value.\n *\n * @remarks \\@since 6.0.0 Renamed from `UnstyledButtonProps`\n */\nexport type ButtonUnstyledProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"type\"\n>;\n\n/**\n * **Server Component**\n *\n * A simple wrapper for a `<button type=\"button\">` that applies the unstyled\n * utility class.\n *\n * Requires the `$disable-unstyled-utility-class` to be `false` to use.\n *\n * @see {@link buttonUnstyled}\n * @remarks \\@since 6.0.0 Renamed from `UnstyledButton`\n */\nexport const ButtonUnstyled = forwardRef<\n HTMLButtonElement,\n ButtonUnstyledProps\n>(function ButtonUnstyled(props, ref) {\n const { children, className, ...remaining } = props;\n return (\n <button\n {...remaining}\n ref={ref}\n type=\"button\"\n className={buttonUnstyled({ className })}\n >\n {children}\n </button>\n );\n});\n"],"names":["forwardRef","buttonUnstyled","ButtonUnstyled","props","ref","children","className","remaining","button","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAAmC,QAAQ;AAC9D,SAASC,cAAc,QAAQ,4BAA4B;AAc3D;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,+BAAiBF,WAG5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACK;QACE,GAAGD,SAAS;QACbH,KAAKA;QACLK,MAAK;QACLH,WAAWL,eAAe;YAAEK;QAAU;kBAErCD;;AAGP,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/button/FloatingActionButton.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-fab-offset\"?: string | number;\n }\n}\n\nconst styles = bem(\"rmd-fab\");\n\n/**\n * The position within the viewport for the floating action button.\n *\n * @remarks \\@since 6.0.0 This was renamed from `FABPosition`\n */\nexport type FloatingActionButtonPosition =\n | \"bottom-left\"\n | \"bottom-right\"\n | \"top-left\"\n | \"top-right\"\n | null;\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface FloatingActionButtonClassNameOptions {\n className?: string;\n\n /** @defaultValue `null` */\n position?: FloatingActionButtonPosition;\n\n /**\n * @defaultValue `false`\n */\n absolute?: boolean;\n}\n\n/**\n * FAB = Floating Action Button\n *\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport function fab(options: FloatingActionButtonClassNameOptions): string {\n const { className, position = null, absolute = false } = options;\n\n return cnb(\n styles({\n tl: position === \"top-left\",\n tr: position === \"top-right\",\n bl: position === \"bottom-left\",\n br: position === \"bottom-right\",\n absolute,\n }),\n className\n );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface FloatingActionButtonProps\n extends HTMLAttributes<HTMLSpanElement>,\n FloatingActionButtonClassNameOptions {}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport const FloatingActionButton = forwardRef<\n HTMLSpanElement,\n FloatingActionButtonProps\n>(function FloatingActionButton(props, ref) {\n const {\n children,\n className,\n position = null,\n absolute = false,\n ...remaining\n } = props;\n if (!position) {\n return <>{children}</>;\n }\n\n return (\n <span\n {...remaining}\n ref={ref}\n className={fab({\n className,\n position,\n absolute,\n })}\n >\n {children}\n </span>\n );\n});\n"],"names":["cnb","forwardRef","bem","styles","fab","options","className","position","absolute","tl","tr","bl","br","FloatingActionButton","props","ref","children","remaining","span"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,kBAAkB;AAQtC,MAAMC,SAASD,IAAI;AA8BnB;;;;;CAKC,GACD,OAAO,SAASE,IAAIC,OAA6C;IAC/D,MAAM,EAAEC,SAAS,EAAEC,WAAW,IAAI,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAEzD,OAAOL,IACLG,OAAO;QACLM,IAAIF,aAAa;QACjBG,IAAIH,aAAa;QACjBI,IAAIJ,aAAa;QACjBK,IAAIL,aAAa;QACjBC;IACF,IACAF;AAEJ;AAOA;;;CAGC,GACD,OAAO,MAAMO,qCAAuBZ,WAGlC,SAASY,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJC,QAAQ,EACRV,SAAS,EACTC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChB,GAAGS,WACJ,GAAGH;IACJ,IAAI,CAACP,UAAU;QACb,qBAAO;sBAAGS;;IACZ;IAEA,qBACE,KAACE;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLT,WAAWF,IAAI;YACbE;YACAC;YACAC;QACF;kBAECQ;;AAGP,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../../src/button/FloatingActionButton.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { bem } from \"../utils/bem.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-fab-offset\"?: string | number;\n }\n}\n\nconst styles = bem(\"rmd-fab\");\n\n/**\n * The position within the viewport for the floating action button.\n *\n * @remarks \\@since 6.0.0 This was renamed from `FABPosition`\n */\nexport type FloatingActionButtonPosition =\n | \"bottom-left\"\n | \"bottom-right\"\n | \"top-left\"\n | \"top-right\"\n | null;\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface FloatingActionButtonClassNameOptions {\n className?: string;\n\n /** @defaultValue `null` */\n position?: FloatingActionButtonPosition;\n\n /**\n * @defaultValue `false`\n */\n absolute?: boolean;\n}\n\n/**\n * FAB = Floating Action Button\n *\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport function fab(options: FloatingActionButtonClassNameOptions): string {\n const { className, position = null, absolute = false } = options;\n\n return cnb(\n styles({\n tl: position === \"top-left\",\n tr: position === \"top-right\",\n bl: position === \"bottom-left\",\n br: position === \"bottom-right\",\n absolute,\n }),\n className\n );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface FloatingActionButtonProps\n extends HTMLAttributes<HTMLSpanElement>,\n FloatingActionButtonClassNameOptions {}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport const FloatingActionButton = forwardRef<\n HTMLSpanElement,\n FloatingActionButtonProps\n>(function FloatingActionButton(props, ref) {\n const {\n children,\n className,\n position = null,\n absolute = false,\n ...remaining\n } = props;\n if (!position) {\n return <>{children}</>;\n }\n\n return (\n <span\n {...remaining}\n ref={ref}\n className={fab({\n className,\n position,\n absolute,\n })}\n >\n {children}\n </span>\n );\n});\n"],"names":["cnb","forwardRef","bem","styles","fab","options","className","position","absolute","tl","tr","bl","br","FloatingActionButton","props","ref","children","remaining","span"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAA6B,QAAQ;AACxD,SAASC,GAAG,QAAQ,kBAAkB;AAQtC,MAAMC,SAASD,IAAI;AA8BnB;;;;;CAKC,GACD,OAAO,SAASE,IAAIC,OAA6C;IAC/D,MAAM,EAAEC,SAAS,EAAEC,WAAW,IAAI,EAAEC,WAAW,KAAK,EAAE,GAAGH;IAEzD,OAAOL,IACLG,OAAO;QACLM,IAAIF,aAAa;QACjBG,IAAIH,aAAa;QACjBI,IAAIJ,aAAa;QACjBK,IAAIL,aAAa;QACjBC;IACF,IACAF;AAEJ;AAOA;;;CAGC,GACD,OAAO,MAAMO,qCAAuBZ,WAGlC,SAASY,qBAAqBC,KAAK,EAAEC,GAAG;IACxC,MAAM,EACJC,QAAQ,EACRV,SAAS,EACTC,WAAW,IAAI,EACfC,WAAW,KAAK,EAChB,GAAGS,WACJ,GAAGH;IACJ,IAAI,CAACP,UAAU;QACb,qBAAO;sBAAGS;;IACZ;IAEA,qBACE,KAACE;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLT,WAAWF,IAAI;YACbE;YACAC;YACAC;QACF;kBAECQ;;AAGP,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/button/TooltippedButton.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Tooltip, type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport {\n useTooltip,\n type ProvidedTooltipProps,\n type TooltipOptions,\n type TooltippedElementEventHandlers,\n} from \"../tooltip/useTooltip.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\nimport { type ButtonType } from \"./buttonStyles.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TooltippedButtonProps extends ButtonProps {\n /** @defaultValue `\"icon\"` */\n buttonType?: ButtonType;\n\n /**\n * The tooltip children to render. When this is falsey, the tooltip event\n * listeners will not be enabled and the tooltip will never display.\n */\n tooltip?: ReactNode;\n\n /**\n * Any additional props to pass to the `Tooltip` component (normally styling\n * props).\n */\n tooltipProps?: Omit<TooltipProps, keyof ProvidedTooltipProps>;\n\n /**\n * Any additional tooltip options to pass to {@link useTooltip}. The most\n * common options would be:\n *\n * ```ts\n * tooltipOptions={{\n * overflowOnly: true,\n *\n * // whatever values you want for these\n * hoverTimeout: 0,\n * leaveTimeout: 150,\n * defaultPosition: \"left\",\n * }}\n * ```\n */\n tooltipOptions?: Omit<TooltipOptions, keyof TooltippedElementEventHandlers>;\n}\n\n/**\n * **Client Component**\n *\n * A simple wrapper around the `Button` and `Tooltip` components to dynamically\n * add tooltips to buttons. The `buttonType` will default to `icon` instead of\n * `text`.\n *\n * @example\n * ```tsx\n * import { TooltippedButton } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n *\n * export default function Example(): ReactElement {\n * return (\n * <TooltippedButton tooltip=\"I am a tooltip!\" aria-label=\"Favorite\">\n * <FavoriteIcon />\n * </TooltippedButton>\n * );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const TooltippedButton = forwardRef<\n HTMLButtonElement,\n TooltippedButtonProps\n>(function TooltippedButton(props, ref) {\n const {\n tooltip,\n tooltipProps,\n tooltipOptions,\n buttonType = \"icon\",\n onBlur = noop,\n onFocus = noop,\n onMouseEnter = noop,\n onMouseLeave = noop,\n onTouchStart = noop,\n onTouchEnd = noop,\n onContextMenu = noop,\n ...remaining\n } = props;\n const { tooltipProps: providedTooltipProps, elementProps } = useTooltip({\n ...tooltipOptions,\n disabled: !tooltip || tooltipOptions?.disabled,\n onBlur,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n onTouchEnd,\n onTouchStart,\n onContextMenu,\n });\n\n return (\n <>\n <Button\n {...elementProps}\n {...remaining}\n ref={ref}\n buttonType={buttonType}\n />\n <Tooltip {...providedTooltipProps} {...tooltipProps}>\n {tooltip}\n </Tooltip>\n </>\n );\n});\n"],"names":["forwardRef","Tooltip","useTooltip","Button","noop","TooltippedButton","props","ref","tooltip","tooltipProps","tooltipOptions","buttonType","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","remaining","providedTooltipProps","elementProps","disabled"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAwB,QAAQ;AACnD,SAASC,OAAO,QAA2B,wBAAwB;AACnE,SACEC,UAAU,QAIL,2BAA2B;AAClC,SAASC,MAAM,QAA0B,cAAc;AAGvD,MAAMC,OAAO;AACX,aAAa;AACf;AAuCA;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAMC,iCAAmBL,WAG9B,SAASK,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,OAAO,EACPC,YAAY,EACZC,cAAc,EACdC,aAAa,MAAM,EACnBC,SAASR,IAAI,EACbS,UAAUT,IAAI,EACdU,eAAeV,IAAI,EACnBW,eAAeX,IAAI,EACnBY,eAAeZ,IAAI,EACnBa,aAAab,IAAI,EACjBc,gBAAgBd,IAAI,EACpB,GAAGe,WACJ,GAAGb;IACJ,MAAM,EAAEG,cAAcW,oBAAoB,EAAEC,YAAY,EAAE,GAAGnB,WAAW;QACtE,GAAGQ,cAAc;QACjBY,UAAU,CAACd,WAAWE,gBAAgBY;QACtCV;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;IACF;IAEA,qBACE;;0BACE,KAACf;gBACE,GAAGkB,YAAY;gBACf,GAAGF,SAAS;gBACbZ,KAAKA;gBACLI,YAAYA;;0BAEd,KAACV;gBAAS,GAAGmB,oBAAoB;gBAAG,GAAGX,YAAY;0BAChDD;;;;AAIT,GAAG"}
|
|
1
|
+
{"version":3,"sources":["../../src/button/TooltippedButton.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Tooltip, type TooltipProps } from \"../tooltip/Tooltip.js\";\nimport {\n useTooltip,\n type ProvidedTooltipProps,\n type TooltipOptions,\n type TooltippedElementEventHandlers,\n} from \"../tooltip/useTooltip.js\";\nimport { Button, type ButtonProps } from \"./Button.js\";\nimport { type ButtonType } from \"./buttonStyles.js\";\n\nconst noop = (): void => {\n // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TooltippedButtonProps extends ButtonProps {\n /** @defaultValue `\"icon\"` */\n buttonType?: ButtonType;\n\n /**\n * The tooltip children to render. When this is falsey, the tooltip event\n * listeners will not be enabled and the tooltip will never display.\n */\n tooltip?: ReactNode;\n\n /**\n * Any additional props to pass to the `Tooltip` component (normally styling\n * props).\n */\n tooltipProps?: Omit<TooltipProps, keyof ProvidedTooltipProps>;\n\n /**\n * Any additional tooltip options to pass to {@link useTooltip}. The most\n * common options would be:\n *\n * ```ts\n * tooltipOptions={{\n * overflowOnly: true,\n *\n * // whatever values you want for these\n * hoverTimeout: 0,\n * leaveTimeout: 150,\n * defaultPosition: \"left\",\n * }}\n * ```\n */\n tooltipOptions?: Omit<TooltipOptions, keyof TooltippedElementEventHandlers>;\n}\n\n/**\n * **Client Component**\n *\n * A simple wrapper around the `Button` and `Tooltip` components to dynamically\n * add tooltips to buttons. The `buttonType` will default to `icon` instead of\n * `text`.\n *\n * @example\n * ```tsx\n * import { TooltippedButton } from \"@react-md/core\";\n * import FavoriteIcon from \"@react-md/material-icons/FavoriteIcon\";\n *\n * export default function Example(): ReactElement {\n * return (\n * <TooltippedButton tooltip=\"I am a tooltip!\" aria-label=\"Favorite\">\n * <FavoriteIcon />\n * </TooltippedButton>\n * );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport const TooltippedButton = forwardRef<\n HTMLButtonElement,\n TooltippedButtonProps\n>(function TooltippedButton(props, ref) {\n const {\n tooltip,\n tooltipProps,\n tooltipOptions,\n buttonType = \"icon\",\n onBlur = noop,\n onFocus = noop,\n onMouseEnter = noop,\n onMouseLeave = noop,\n onTouchStart = noop,\n onTouchEnd = noop,\n onContextMenu = noop,\n ...remaining\n } = props;\n const { tooltipProps: providedTooltipProps, elementProps } = useTooltip({\n ...tooltipOptions,\n disabled: !tooltip || tooltipOptions?.disabled,\n onBlur,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n onTouchEnd,\n onTouchStart,\n onContextMenu,\n });\n\n return (\n <>\n <Button\n {...elementProps}\n {...remaining}\n ref={ref}\n buttonType={buttonType}\n />\n <Tooltip {...providedTooltipProps} {...tooltipProps}>\n {tooltip}\n </Tooltip>\n </>\n );\n});\n"],"names":["forwardRef","Tooltip","useTooltip","Button","noop","TooltippedButton","props","ref","tooltip","tooltipProps","tooltipOptions","buttonType","onBlur","onFocus","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","onContextMenu","remaining","providedTooltipProps","elementProps","disabled"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,QAAwB,QAAQ;AACnD,SAASC,OAAO,QAA2B,wBAAwB;AACnE,SACEC,UAAU,QAIL,2BAA2B;AAClC,SAASC,MAAM,QAA0B,cAAc;AAGvD,MAAMC,OAAO;AACX,aAAa;AACf;AAuCA;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,MAAMC,iCAAmBL,WAG9B,SAASK,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,OAAO,EACPC,YAAY,EACZC,cAAc,EACdC,aAAa,MAAM,EACnBC,SAASR,IAAI,EACbS,UAAUT,IAAI,EACdU,eAAeV,IAAI,EACnBW,eAAeX,IAAI,EACnBY,eAAeZ,IAAI,EACnBa,aAAab,IAAI,EACjBc,gBAAgBd,IAAI,EACpB,GAAGe,WACJ,GAAGb;IACJ,MAAM,EAAEG,cAAcW,oBAAoB,EAAEC,YAAY,EAAE,GAAGnB,WAAW;QACtE,GAAGQ,cAAc;QACjBY,UAAU,CAACd,WAAWE,gBAAgBY;QACtCV;QACAC;QACAC;QACAC;QACAE;QACAD;QACAE;IACF;IAEA,qBACE;;0BACE,KAACf;gBACE,GAAGkB,YAAY;gBACf,GAAGF,SAAS;gBACbZ,KAAKA;gBACLI,YAAYA;;0BAEd,KAACV;gBAAS,GAAGmB,oBAAoB;gBAAG,GAAGX,YAAY;0BAChDD;;;;AAIT,GAAG"}
|