@basic-ui/material 0.1.13 → 1.0.0-alpha.0
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/build/cjs/index.js +634 -371
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Alert/Alert.d.ts +1 -1
- package/build/esm/Alert/Alert.js +1 -1
- package/build/esm/Alert/Alert.js.map +1 -1
- package/build/esm/Alert/index.d.ts +0 -0
- package/build/esm/Alert/index.js.map +0 -0
- package/build/esm/AppBar/AppBar.d.ts +1 -1
- package/build/esm/AppBar/AppBar.js +1 -2
- package/build/esm/AppBar/AppBar.js.map +1 -1
- package/build/esm/AppBar/AppBarButton.d.ts +1 -1
- package/build/esm/AppBar/AppBarButton.js.map +0 -0
- package/build/esm/AppBar/context.d.ts +0 -0
- package/build/esm/AppBar/context.js.map +0 -0
- package/build/esm/AppBar/index.d.ts +0 -0
- package/build/esm/AppBar/index.js.map +0 -0
- package/build/esm/Badge/Badge.d.ts +1 -1
- package/build/esm/Badge/Badge.js.map +0 -0
- package/build/esm/Badge/index.d.ts +0 -0
- package/build/esm/Badge/index.js.map +0 -0
- package/build/esm/BaseLine/BaseLine.d.ts +0 -1
- package/build/esm/BaseLine/BaseLine.js.map +0 -0
- package/build/esm/BaseLine/index.d.ts +0 -0
- package/build/esm/BaseLine/index.js.map +0 -0
- package/build/esm/BottomSheet/BottomSheet.d.ts +1 -1
- package/build/esm/BottomSheet/BottomSheet.js.map +0 -0
- package/build/esm/BottomSheet/BottomSheetSurface.d.ts +1 -1
- package/build/esm/BottomSheet/BottomSheetSurface.js +1 -1
- package/build/esm/BottomSheet/BottomSheetSurface.js.map +1 -1
- package/build/esm/BottomSheet/index.d.ts +0 -0
- package/build/esm/BottomSheet/index.js.map +0 -0
- package/build/esm/Box/Box.d.ts +0 -0
- package/build/esm/Box/Box.js.map +0 -0
- package/build/esm/Box/index.d.ts +0 -0
- package/build/esm/Box/index.js.map +0 -0
- package/build/esm/Button/BaseButton.d.ts +2 -1
- package/build/esm/Button/BaseButton.js.map +1 -1
- package/build/esm/Button/Button.d.ts +3 -3
- package/build/esm/Button/Button.js +22 -6
- package/build/esm/Button/Button.js.map +1 -1
- package/build/esm/Button/ButtonGroup.d.ts +5 -0
- package/build/esm/Button/ButtonGroup.js +28 -0
- package/build/esm/Button/ButtonGroup.js.map +1 -0
- package/build/esm/Button/FilledButton.d.ts +2 -1
- package/build/esm/Button/FilledButton.js +36 -3
- package/build/esm/Button/FilledButton.js.map +1 -1
- package/build/esm/Button/IconButton.d.ts +1 -0
- package/build/esm/Button/IconButton.js +2 -1
- package/build/esm/Button/IconButton.js.map +1 -1
- package/build/esm/Button/OutlinedButton.d.ts +1 -1
- package/build/esm/Button/OutlinedButton.js +32 -2
- package/build/esm/Button/OutlinedButton.js.map +1 -1
- package/build/esm/Button/TransparentButton.d.ts +2 -1
- package/build/esm/Button/TransparentButton.js +32 -2
- package/build/esm/Button/TransparentButton.js.map +1 -1
- package/build/esm/Button/context.d.ts +8 -0
- package/build/esm/Button/context.js +5 -0
- package/build/esm/Button/context.js.map +1 -0
- package/build/esm/Button/index.d.ts +1 -0
- package/build/esm/Button/index.js +1 -0
- package/build/esm/Button/index.js.map +1 -1
- package/build/esm/CheckBox/CheckBox.d.ts +1 -1
- package/build/esm/CheckBox/CheckBox.js +1 -1
- package/build/esm/CheckBox/CheckBox.js.map +1 -1
- package/build/esm/CheckBox/CheckBoxIcon.d.ts +1 -1
- package/build/esm/CheckBox/CheckBoxIcon.js.map +0 -0
- package/build/esm/CheckBox/CheckPath.d.ts +0 -0
- package/build/esm/CheckBox/CheckPath.js.map +0 -0
- package/build/esm/CheckBox/IndeterminatePath.d.ts +0 -0
- package/build/esm/CheckBox/IndeterminatePath.js.map +0 -0
- package/build/esm/CheckBox/index.d.ts +0 -0
- package/build/esm/CheckBox/index.js.map +0 -0
- package/build/esm/Chip/ButtonChip.d.ts +3 -3
- package/build/esm/Chip/ButtonChip.js +41 -53
- package/build/esm/Chip/ButtonChip.js.map +1 -1
- package/build/esm/Chip/Chip.d.ts +0 -0
- package/build/esm/Chip/Chip.js.map +0 -0
- package/build/esm/Chip/ChipBase.d.ts +1 -1
- package/build/esm/Chip/ChipBase.js +23 -15
- package/build/esm/Chip/ChipBase.js.map +1 -1
- package/build/esm/Chip/ChoiceChip.d.ts +3 -2
- package/build/esm/Chip/ChoiceChip.js +18 -24
- package/build/esm/Chip/ChoiceChip.js.map +1 -1
- package/build/esm/Chip/index.d.ts +0 -0
- package/build/esm/Chip/index.js.map +0 -0
- package/build/esm/ColorMode/ColorModeProvider.d.ts +0 -0
- package/build/esm/ColorMode/ColorModeProvider.js.map +0 -0
- package/build/esm/ColorMode/color-mode.d.ts +0 -0
- package/build/esm/ColorMode/color-mode.js.map +0 -0
- package/build/esm/ColorMode/color-vars.d.ts +0 -0
- package/build/esm/ColorMode/color-vars.js.map +0 -0
- package/build/esm/ColorMode/constants.d.ts +0 -0
- package/build/esm/ColorMode/constants.js.map +0 -0
- package/build/esm/ColorMode/index.d.ts +0 -0
- package/build/esm/ColorMode/index.js.map +0 -0
- package/build/esm/Combobox/Combobox.d.ts +7 -7
- package/build/esm/Combobox/Combobox.js +2 -1
- package/build/esm/Combobox/Combobox.js.map +1 -1
- package/build/esm/Combobox/index.d.ts +0 -0
- package/build/esm/Combobox/index.js.map +0 -0
- package/build/esm/Dialog/Dialog.d.ts +1 -1
- package/build/esm/Dialog/Dialog.js.map +0 -0
- package/build/esm/Dialog/DialogBackdrop.d.ts +1 -1
- package/build/esm/Dialog/DialogBackdrop.js.map +0 -0
- package/build/esm/Dialog/DialogContainer.d.ts +1 -1
- package/build/esm/Dialog/DialogContainer.js.map +0 -0
- package/build/esm/Dialog/DialogSurface.d.ts +4 -2
- package/build/esm/Dialog/DialogSurface.js +19 -7
- package/build/esm/Dialog/DialogSurface.js.map +1 -1
- package/build/esm/Dialog/Scrim.d.ts +1 -1
- package/build/esm/Dialog/Scrim.js.map +0 -0
- package/build/esm/Dialog/index.d.ts +0 -0
- package/build/esm/Dialog/index.js.map +0 -0
- package/build/esm/Dialog/useDialogAnimation.d.ts +0 -0
- package/build/esm/Dialog/useDialogAnimation.js.map +0 -0
- package/build/esm/Divider/Divider.d.ts +1 -1
- package/build/esm/Divider/Divider.js.map +0 -0
- package/build/esm/Divider/index.d.ts +0 -0
- package/build/esm/Divider/index.js.map +0 -0
- package/build/esm/FloatingLabel/FloatingLabel.d.ts +0 -1
- package/build/esm/FloatingLabel/FloatingLabel.js +1 -3
- package/build/esm/FloatingLabel/FloatingLabel.js.map +1 -1
- package/build/esm/FloatingLabel/index.d.ts +0 -0
- package/build/esm/FloatingLabel/index.js.map +0 -0
- package/build/esm/LineRipple/LineRipple.d.ts +1 -1
- package/build/esm/LineRipple/LineRipple.js.map +0 -0
- package/build/esm/LineRipple/index.d.ts +0 -0
- package/build/esm/LineRipple/index.js.map +0 -0
- package/build/esm/Link/Link.d.ts +1 -1
- package/build/esm/Link/Link.js.map +0 -0
- package/build/esm/Link/index.d.ts +0 -0
- package/build/esm/Link/index.js.map +0 -0
- package/build/esm/List/List.d.ts +1 -1
- package/build/esm/List/List.js.map +0 -0
- package/build/esm/List/index.d.ts +0 -0
- package/build/esm/List/index.js.map +0 -0
- package/build/esm/ListItem/ListItem.d.ts +1 -1
- package/build/esm/ListItem/ListItem.js +52 -33
- package/build/esm/ListItem/ListItem.js.map +1 -1
- package/build/esm/ListItem/ListItemText.d.ts +0 -0
- package/build/esm/ListItem/ListItemText.js +2 -7
- package/build/esm/ListItem/ListItemText.js.map +1 -1
- package/build/esm/ListItem/context.d.ts +0 -0
- package/build/esm/ListItem/context.js.map +0 -0
- package/build/esm/ListItem/index.d.ts +0 -0
- package/build/esm/ListItem/index.js.map +0 -0
- package/build/esm/Menu/Menu.d.ts +4 -4
- package/build/esm/Menu/Menu.js +2 -2
- package/build/esm/Menu/Menu.js.map +1 -1
- package/build/esm/Menu/animation.d.ts +0 -0
- package/build/esm/Menu/animation.js.map +0 -0
- package/build/esm/Menu/index.d.ts +0 -0
- package/build/esm/Menu/index.js.map +0 -0
- package/build/esm/NotchedOutline/NotchedOutline.d.ts +0 -0
- package/build/esm/NotchedOutline/NotchedOutline.js.map +0 -0
- package/build/esm/NotchedOutline/context.d.ts +0 -0
- package/build/esm/NotchedOutline/context.js.map +0 -0
- package/build/esm/NotchedOutline/index.d.ts +0 -0
- package/build/esm/NotchedOutline/index.js.map +0 -0
- package/build/esm/NotchedOutline/styledComponents.d.ts +96 -50
- package/build/esm/NotchedOutline/styledComponents.js +7 -7
- package/build/esm/NotchedOutline/styledComponents.js.map +1 -1
- package/build/esm/Paper/Paper.d.ts +1 -1
- package/build/esm/Paper/Paper.js +2 -2
- package/build/esm/Paper/Paper.js.map +1 -1
- package/build/esm/Paper/index.d.ts +0 -0
- package/build/esm/Paper/index.js.map +0 -0
- package/build/esm/ProgressSpinner/ProgressSpinner.d.ts +1 -1
- package/build/esm/ProgressSpinner/ProgressSpinner.js.map +0 -0
- package/build/esm/ProgressSpinner/index.d.ts +0 -0
- package/build/esm/ProgressSpinner/index.js.map +0 -0
- package/build/esm/RadioButton/RadioButton.d.ts +0 -0
- package/build/esm/RadioButton/RadioButton.js +1 -1
- package/build/esm/RadioButton/RadioButton.js.map +1 -1
- package/build/esm/RadioButton/RadioButtonIcon.d.ts +0 -0
- package/build/esm/RadioButton/RadioButtonIcon.js +2 -2
- package/build/esm/RadioButton/RadioButtonIcon.js.map +1 -1
- package/build/esm/RadioButton/RadioGroup.d.ts +1 -1
- package/build/esm/RadioButton/RadioGroup.js.map +0 -0
- package/build/esm/RadioButton/index.d.ts +0 -0
- package/build/esm/RadioButton/index.js.map +0 -0
- package/build/esm/Ripple/Ripple.d.ts +0 -0
- package/build/esm/Ripple/Ripple.js +2 -2
- package/build/esm/Ripple/Ripple.js.map +1 -1
- package/build/esm/Ripple/RippleBox.d.ts +0 -0
- package/build/esm/Ripple/RippleBox.js +1 -1
- package/build/esm/Ripple/RippleBox.js.map +1 -1
- package/build/esm/Ripple/constants.d.ts +0 -0
- package/build/esm/Ripple/constants.js.map +0 -0
- package/build/esm/Ripple/index.d.ts +0 -0
- package/build/esm/Ripple/index.js.map +0 -0
- package/build/esm/Ripple/keyframes.d.ts +0 -0
- package/build/esm/Ripple/keyframes.js.map +0 -0
- package/build/esm/Ripple/useRipple.d.ts +0 -0
- package/build/esm/Ripple/useRipple.js.map +0 -0
- package/build/esm/Ripple/useRippleHandlers.d.ts +0 -0
- package/build/esm/Ripple/useRippleHandlers.js.map +0 -0
- package/build/esm/Ripple/useRippleSurface.d.ts +5 -4
- package/build/esm/Ripple/useRippleSurface.js +30 -8
- package/build/esm/Ripple/useRippleSurface.js.map +1 -1
- package/build/esm/Select/Select.d.ts +3 -3
- package/build/esm/Select/Select.js +5 -14
- package/build/esm/Select/Select.js.map +1 -1
- package/build/esm/Select/SelectIcon.d.ts +1 -1
- package/build/esm/Select/SelectIcon.js +3 -1
- package/build/esm/Select/SelectIcon.js.map +1 -1
- package/build/esm/Select/context.d.ts +0 -0
- package/build/esm/Select/context.js.map +0 -0
- package/build/esm/Select/defaultRender.d.ts +0 -0
- package/build/esm/Select/defaultRender.js.map +0 -0
- package/build/esm/Select/index.d.ts +0 -0
- package/build/esm/Select/index.js.map +0 -0
- package/build/esm/Select/styledComponents.d.ts +0 -0
- package/build/esm/Select/styledComponents.js +9 -5
- package/build/esm/Select/styledComponents.js.map +1 -1
- package/build/esm/SelectItem/SelectItem.d.ts +1 -1
- package/build/esm/SelectItem/SelectItem.js.map +0 -0
- package/build/esm/SelectItem/index.d.ts +0 -0
- package/build/esm/SelectItem/index.js.map +0 -0
- package/build/esm/SelectionControl/SelectionControlLabel.d.ts +1 -1
- package/build/esm/SelectionControl/SelectionControlLabel.js.map +0 -0
- package/build/esm/SelectionControl/SelectionControlText.d.ts +1 -1
- package/build/esm/SelectionControl/SelectionControlText.js.map +0 -0
- package/build/esm/SelectionControl/index.d.ts +0 -0
- package/build/esm/SelectionControl/index.js.map +0 -0
- package/build/esm/Skeleton/DelayAppearance.d.ts +1 -1
- package/build/esm/Skeleton/DelayAppearance.js.map +0 -0
- package/build/esm/Skeleton/Skeleton.d.ts +1 -1
- package/build/esm/Skeleton/Skeleton.js.map +0 -0
- package/build/esm/Skeleton/animation.d.ts +0 -0
- package/build/esm/Skeleton/animation.js.map +0 -0
- package/build/esm/Skeleton/index.d.ts +0 -0
- package/build/esm/Skeleton/index.js.map +0 -0
- package/build/esm/Snackbar/Snackbar.d.ts +1 -1
- package/build/esm/Snackbar/Snackbar.js +4 -4
- package/build/esm/Snackbar/Snackbar.js.map +1 -1
- package/build/esm/Snackbar/Stack.d.ts +0 -0
- package/build/esm/Snackbar/Stack.js.map +0 -0
- package/build/esm/Snackbar/index.d.ts +0 -0
- package/build/esm/Snackbar/index.js.map +0 -0
- package/build/esm/Snackbar/useSnackbarAnimation.d.ts +0 -0
- package/build/esm/Snackbar/useSnackbarAnimation.js.map +0 -0
- package/build/esm/Switch/Switch.d.ts +1 -1
- package/build/esm/Switch/Switch.js +8 -6
- package/build/esm/Switch/Switch.js.map +1 -1
- package/build/esm/Switch/index.d.ts +0 -0
- package/build/esm/Switch/index.js.map +0 -0
- package/build/esm/Switch/styledComponents.d.ts +2 -2
- package/build/esm/Switch/styledComponents.js +54 -26
- package/build/esm/Switch/styledComponents.js.map +1 -1
- package/build/esm/Tab/Tab.d.ts +1 -1
- package/build/esm/Tab/Tab.js.map +0 -0
- package/build/esm/Tab/TabList.d.ts +1 -1
- package/build/esm/Tab/TabList.js.map +0 -0
- package/build/esm/Tab/TabPanel.d.ts +1 -1
- package/build/esm/Tab/TabPanel.js.map +0 -0
- package/build/esm/Tab/TabPanels.d.ts +0 -0
- package/build/esm/Tab/TabPanels.js.map +0 -0
- package/build/esm/Tab/Tabs.d.ts +0 -0
- package/build/esm/Tab/Tabs.js.map +0 -0
- package/build/esm/Tab/context.d.ts +0 -0
- package/build/esm/Tab/context.js.map +0 -0
- package/build/esm/Tab/index.d.ts +0 -0
- package/build/esm/Tab/index.js.map +0 -0
- package/build/esm/TabIndicator/TabIndicator.d.ts +1 -1
- package/build/esm/TabIndicator/TabIndicator.js.map +0 -0
- package/build/esm/TabIndicator/context.d.ts +0 -0
- package/build/esm/TabIndicator/context.js.map +0 -0
- package/build/esm/TabIndicator/index.d.ts +0 -0
- package/build/esm/TabIndicator/index.js.map +0 -0
- package/build/esm/Table/Table.d.ts +1 -1
- package/build/esm/Table/Table.js +1 -1
- package/build/esm/Table/Table.js.map +1 -1
- package/build/esm/Table/TableBody.d.ts +1 -1
- package/build/esm/Table/TableBody.js.map +0 -0
- package/build/esm/Table/TableCell.d.ts +1 -1
- package/build/esm/Table/TableCell.js.map +0 -0
- package/build/esm/Table/TableHead.d.ts +1 -1
- package/build/esm/Table/TableHead.js.map +0 -0
- package/build/esm/Table/TableRow.d.ts +1 -1
- package/build/esm/Table/TableRow.js.map +0 -0
- package/build/esm/Table/context.d.ts +0 -0
- package/build/esm/Table/context.js.map +0 -0
- package/build/esm/Table/index.d.ts +0 -0
- package/build/esm/Table/index.js.map +0 -0
- package/build/esm/Text/LoremIpsum.d.ts +4 -4
- package/build/esm/Text/LoremIpsum.js.map +1 -1
- package/build/esm/Text/Text.d.ts +1 -1
- package/build/esm/Text/Text.js.map +0 -0
- package/build/esm/Text/index.d.ts +0 -0
- package/build/esm/Text/index.js.map +0 -0
- package/build/esm/TextField/FilledContainer.d.ts +1 -1
- package/build/esm/TextField/FilledContainer.js +17 -10
- package/build/esm/TextField/FilledContainer.js.map +1 -1
- package/build/esm/TextField/HelperText.d.ts +1 -1
- package/build/esm/TextField/HelperText.js.map +0 -0
- package/build/esm/TextField/IconContainer.d.ts +2 -2
- package/build/esm/TextField/IconContainer.js +4 -2
- package/build/esm/TextField/IconContainer.js.map +1 -1
- package/build/esm/TextField/Input.d.ts +1 -1
- package/build/esm/TextField/Input.js +18 -10
- package/build/esm/TextField/Input.js.map +1 -1
- package/build/esm/TextField/OutlinedContainer.d.ts +1 -1
- package/build/esm/TextField/OutlinedContainer.js +7 -4
- package/build/esm/TextField/OutlinedContainer.js.map +1 -1
- package/build/esm/TextField/TextField.d.ts +1 -1
- package/build/esm/TextField/TextField.js +2 -2
- package/build/esm/TextField/TextField.js.map +1 -1
- package/build/esm/TextField/consts.d.ts +5 -0
- package/build/esm/TextField/consts.js +6 -0
- package/build/esm/TextField/consts.js.map +1 -0
- package/build/esm/TextField/index.d.ts +0 -0
- package/build/esm/TextField/index.js.map +0 -0
- package/build/esm/ThemeExplorer/ColorPicker.js +2 -2
- package/build/esm/ThemeExplorer/ColorPicker.js.map +1 -1
- package/build/esm/ThemeExplorer/TextFieldColorPicker.js +5 -5
- package/build/esm/ThemeExplorer/TextFieldColorPicker.js.map +1 -1
- package/build/esm/Tooltip/Tooltip.d.ts +1 -1
- package/build/esm/Tooltip/Tooltip.js.map +0 -0
- package/build/esm/Tooltip/index.d.ts +0 -0
- package/build/esm/Tooltip/index.js.map +0 -0
- package/build/esm/color.d.ts +2 -1
- package/build/esm/color.js +10 -6
- package/build/esm/color.js.map +1 -1
- package/build/esm/css.d.ts +0 -0
- package/build/esm/css.js.map +0 -0
- package/build/esm/hooks/useAnimation.d.ts +0 -0
- package/build/esm/hooks/useAnimation.js.map +0 -0
- package/build/esm/index.d.ts +0 -0
- package/build/esm/index.js.map +0 -0
- package/build/esm/theme/index.d.ts +0 -0
- package/build/esm/theme/index.js.map +0 -0
- package/build/esm/theme/theme.d.ts +96 -50
- package/build/esm/theme/theme.js +133 -93
- package/build/esm/theme/theme.js.map +1 -1
- package/build/esm/theme/typography-raleway.d.ts +0 -0
- package/build/esm/theme/typography-raleway.js.map +0 -0
- package/build/esm/theme/typography-roboto.d.ts +0 -0
- package/build/esm/theme/typography-roboto.js.map +0 -0
- package/build/esm/theme/useTheme.d.ts +471 -1
- package/build/esm/theme/useTheme.js.map +0 -0
- package/build/tsconfig.tsbuildinfo +1 -4757
- package/package.json +15 -14
- package/src/Alert/Alert.story.tsx +5 -6
- package/src/Alert/Alert.tsx +1 -1
- package/src/AppBar/AppBar.story.tsx +11 -20
- package/src/AppBar/AppBar.tsx +5 -6
- package/src/BottomSheet/BottomSheet.story.tsx +5 -6
- package/src/BottomSheet/BottomSheetSurface.tsx +1 -1
- package/src/Button/BaseButton.tsx +1 -0
- package/src/Button/Button.story.tsx +34 -47
- package/src/Button/Button.tsx +20 -6
- package/src/Button/ButtonGroup.story.tsx +106 -0
- package/src/Button/ButtonGroup.tsx +33 -0
- package/src/Button/FilledButton.tsx +38 -4
- package/src/Button/FloatingActionButton.tsx +9 -0
- package/src/Button/IconButton.tsx +1 -0
- package/src/Button/OutlinedButton.tsx +30 -2
- package/src/Button/SpinnerButton.story.tsx +7 -7
- package/src/Button/TransparentButton.tsx +32 -1
- package/src/Button/context.tsx +16 -0
- package/src/Button/index.ts +1 -0
- package/src/CheckBox/CheckBox.story.tsx +7 -6
- package/src/CheckBox/CheckBox.tsx +1 -1
- package/src/Chip/ButtonChip.tsx +42 -46
- package/src/Chip/Chip.story.tsx +98 -26
- package/src/Chip/ChipBase.tsx +40 -12
- package/src/Chip/ChoiceChip.tsx +18 -17
- package/src/Combobox/Combobox.story.tsx +12 -13
- package/src/Combobox/Combobox.tsx +2 -1
- package/src/Dialog/Dialog.story.tsx +7 -8
- package/src/Dialog/DialogSurface.tsx +20 -5
- package/src/Divider/Divider.story.tsx +6 -5
- package/src/FloatingLabel/FloatingLabel.story.tsx +10 -9
- package/src/FloatingLabel/FloatingLabel.tsx +0 -3
- package/src/LineRipple/LineRipple.story.tsx +5 -4
- package/src/Link/Link.story.tsx +3 -4
- package/src/ListItem/ListItem.story.tsx +6 -5
- package/src/ListItem/ListItem.tsx +55 -32
- package/src/ListItem/ListItemText.tsx +2 -4
- package/src/Menu/Menu.story.tsx +8 -7
- package/src/Menu/Menu.tsx +2 -2
- package/src/NotchedOutline/NotchedOutline.story.tsx +6 -5
- package/src/NotchedOutline/styledComponents.ts +6 -6
- package/src/Paper/Paper.story.tsx +21 -7
- package/src/Paper/Paper.tsx +6 -2
- package/src/ProgressSpinner/ProgressSpinner.story.tsx +5 -4
- package/src/RadioButton/RadioButton.story.tsx +12 -10
- package/src/RadioButton/RadioButton.tsx +1 -1
- package/src/RadioButton/RadioButtonIcon.tsx +2 -2
- package/src/Ripple/Ripple.story.tsx +6 -5
- package/src/Ripple/Ripple.tsx +1 -1
- package/src/Ripple/RippleBox.tsx +1 -0
- package/src/Ripple/useRippleSurface.ts +31 -7
- package/src/Select/PaymentMethodSelect.story.tsx +321 -0
- package/src/Select/Select.story.tsx +34 -8
- package/src/Select/Select.tsx +12 -34
- package/src/Select/SelectIcon.tsx +2 -1
- package/src/Select/styledComponents.tsx +8 -4
- package/src/Skeleton/Skeleton.story.tsx +9 -8
- package/src/Snackbar/Snackbar.story.tsx +7 -6
- package/src/Snackbar/Snackbar.tsx +4 -4
- package/src/Switch/Switch.story.tsx +5 -4
- package/src/Switch/Switch.tsx +7 -6
- package/src/Switch/styledComponents.tsx +69 -22
- package/src/Tab/Tab.story.tsx +7 -5
- package/src/Table/Table.story.tsx +5 -4
- package/src/Table/Table.tsx +1 -1
- package/src/Text/LoremIpsum.tsx +3 -1
- package/src/Text/Text.story.tsx +5 -4
- package/src/TextField/FilledContainer.tsx +30 -10
- package/src/TextField/IconContainer.tsx +5 -4
- package/src/TextField/Input.tsx +33 -10
- package/src/TextField/OutlinedContainer.tsx +18 -4
- package/src/TextField/TextField.story.tsx +21 -7
- package/src/TextField/TextField.tsx +2 -2
- package/src/TextField/consts.ts +7 -0
- package/src/ThemeExplorer/ColorPicker.tsx +101 -0
- package/src/ThemeExplorer/TextFieldColorPicker.tsx +112 -0
- package/src/ThemeExplorer/ThemeBuilder.story.tsx +169 -0
- package/src/ThemeExplorer/ThemeColors.tsx +88 -0
- package/src/ThemeExplorer/ThemeExplorer.story.tsx +42 -0
- package/src/ThemeExplorer/components.tsx +208 -0
- package/src/ThemeExplorer/makeColorScheme.tsx +73 -0
- package/src/ThemeExplorer/useDeferredColor.tsx +24 -0
- package/src/ThemeExplorer/useLocalStorageCachedState.ts +18 -0
- package/src/Tooltip/Tooltip.story.tsx +5 -4
- package/src/color.ts +18 -13
- package/src/theme/theme.ts +131 -92
- package/src/ListItem/context.ts +0 -13
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type * as React from 'react';
|
|
2
2
|
import { BaseButtonProps } from './BaseButton';
|
|
3
|
-
export declare type ButtonVariants = 'text' | 'outlined' | 'filled' | 'fab' | 'fab-mini' | 'fab-extended' | 'icon';
|
|
3
|
+
export declare type ButtonVariants = 'text' | 'outlined' | 'filled' | 'fab' | 'fab-mini' | 'fab-large' | 'fab-extended' | 'icon';
|
|
4
4
|
export declare type ButtonColors = 'primary' | 'secondary' | string;
|
|
5
5
|
export interface ButtonProps extends BaseButtonProps {
|
|
6
6
|
as?: React.ElementType<any>;
|
|
@@ -8,6 +8,6 @@ export interface ButtonProps extends BaseButtonProps {
|
|
|
8
8
|
variant?: ButtonVariants;
|
|
9
9
|
color?: ButtonColors;
|
|
10
10
|
disabled?: boolean;
|
|
11
|
-
elevation?: 'none' | 'contained' | 'floating';
|
|
11
|
+
elevation?: 'none' | 'default' | 'contained' | 'floating' | 'elevated';
|
|
12
12
|
}
|
|
13
|
-
export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "
|
|
13
|
+
export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "bottom" | "top" | "hidden" | "left" | "right" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "p" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation" | "isGroupedButton" | "key"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -2,39 +2,54 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import * as TransparentButton from './TransparentButton';
|
|
5
|
+
import * as FloatingActionButton from './FloatingActionButton';
|
|
5
6
|
import * as FilledButton from './FilledButton';
|
|
6
7
|
import * as OutlinedButton from './OutlinedButton';
|
|
7
8
|
import * as IconButton from './IconButton';
|
|
8
9
|
import { useTheme } from '../theme';
|
|
9
10
|
import { useRippleSurface } from '../Ripple';
|
|
11
|
+
import { useButtonGroupContext } from './context';
|
|
10
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
13
|
const componentMapping = {
|
|
12
14
|
text: TransparentButton.TransparentButton,
|
|
13
15
|
outlined: OutlinedButton.OutlinedButton,
|
|
14
16
|
filled: FilledButton.FilledButton,
|
|
15
17
|
fab: FilledButton.FilledButton,
|
|
16
|
-
'fab-extended': FilledButton.FilledButton,
|
|
17
18
|
'fab-mini': FilledButton.FilledButton,
|
|
19
|
+
'fab-large': FilledButton.FilledButton,
|
|
20
|
+
'fab-extended': FilledButton.FilledButton,
|
|
18
21
|
icon: TransparentButton.TransparentButton
|
|
19
22
|
};
|
|
20
23
|
const rippleMapping = {
|
|
21
24
|
text: TransparentButton.getRippleProperties,
|
|
22
25
|
outlined: TransparentButton.getRippleProperties,
|
|
23
26
|
filled: FilledButton.getRippleProperties,
|
|
24
|
-
fab:
|
|
27
|
+
fab: FloatingActionButton.getRippleProperties,
|
|
28
|
+
'fab-mini': FloatingActionButton.getRippleProperties,
|
|
29
|
+
'fab-large': FloatingActionButton.getRippleProperties,
|
|
25
30
|
'fab-extended': FilledButton.getRippleProperties,
|
|
26
|
-
'fab-mini': FilledButton.getRippleProperties,
|
|
27
31
|
icon: IconButton.getRippleProperties
|
|
28
32
|
};
|
|
33
|
+
|
|
34
|
+
function getFallbackElevation(variant = 'text') {
|
|
35
|
+
if (variant === 'text' || variant === 'outlined' || variant === 'icon') {
|
|
36
|
+
return 'none';
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return 'default';
|
|
40
|
+
}
|
|
41
|
+
|
|
29
42
|
export const Button = /*#__PURE__*/forwardRef(function Button(props, forwardedRef) {
|
|
43
|
+
const buttonGroup = useButtonGroupContext();
|
|
44
|
+
|
|
30
45
|
const {
|
|
31
46
|
children,
|
|
32
|
-
variant = 'text',
|
|
47
|
+
variant = (buttonGroup == null ? void 0 : buttonGroup.variant) || 'text',
|
|
33
48
|
onPointerDown: onPointerDownProp,
|
|
34
49
|
onKeyDown: onKeyDownProp,
|
|
35
50
|
color = 'primary',
|
|
36
51
|
disabled = false,
|
|
37
|
-
elevation =
|
|
52
|
+
elevation = getFallbackElevation(props.variant),
|
|
38
53
|
style: styleProp
|
|
39
54
|
} = props,
|
|
40
55
|
otherProps = _objectWithoutPropertiesLoose(props, ["children", "variant", "onPointerDown", "onKeyDown", "color", "disabled", "elevation", "style"]);
|
|
@@ -56,7 +71,8 @@ export const Button = /*#__PURE__*/forwardRef(function Button(props, forwardedRe
|
|
|
56
71
|
disabled: disabled,
|
|
57
72
|
"aria-disabled": disabled ? 'true' : undefined,
|
|
58
73
|
color: color,
|
|
59
|
-
elevation: elevation
|
|
74
|
+
elevation: elevation,
|
|
75
|
+
isGroupedButton: Boolean(buttonGroup)
|
|
60
76
|
}, rippleProps, otherProps, {
|
|
61
77
|
children: children
|
|
62
78
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["forwardRef","TransparentButton","FilledButton","OutlinedButton","IconButton","useTheme","useRippleSurface","componentMapping","text","outlined","filled","fab","icon","rippleMapping","getRippleProperties","Button","props","forwardedRef","
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["forwardRef","TransparentButton","FloatingActionButton","FilledButton","OutlinedButton","IconButton","useTheme","useRippleSurface","useButtonGroupContext","componentMapping","text","outlined","filled","fab","icon","rippleMapping","getRippleProperties","getFallbackElevation","variant","Button","props","forwardedRef","buttonGroup","children","onPointerDown","onPointerDownProp","onKeyDown","onKeyDownProp","color","disabled","elevation","style","styleProp","otherProps","theme","Comp","rippleProps","rippleColor","undefined","Boolean"],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type * as React from 'react';\nimport * as TransparentButton from './TransparentButton';\nimport * as FloatingActionButton from './FloatingActionButton';\nimport * as FilledButton from './FilledButton';\nimport * as OutlinedButton from './OutlinedButton';\nimport * as IconButton from './IconButton';\nimport { useTheme } from '../theme';\nimport { useRippleSurface } from '../Ripple';\nimport { BaseButtonProps } from './BaseButton';\nimport { useButtonGroupContext } from './context';\n\nexport type ButtonVariants =\n | 'text'\n | 'outlined'\n | 'filled'\n | 'fab'\n | 'fab-mini'\n | 'fab-large'\n | 'fab-extended'\n | 'icon';\n\nconst componentMapping = {\n text: TransparentButton.TransparentButton,\n outlined: OutlinedButton.OutlinedButton,\n filled: FilledButton.FilledButton,\n fab: FilledButton.FilledButton,\n 'fab-mini': FilledButton.FilledButton,\n 'fab-large': FilledButton.FilledButton,\n 'fab-extended': FilledButton.FilledButton,\n icon: TransparentButton.TransparentButton,\n};\n\nconst rippleMapping = {\n text: TransparentButton.getRippleProperties,\n outlined: TransparentButton.getRippleProperties,\n filled: FilledButton.getRippleProperties,\n fab: FloatingActionButton.getRippleProperties,\n 'fab-mini': FloatingActionButton.getRippleProperties,\n 'fab-large': FloatingActionButton.getRippleProperties,\n 'fab-extended': FilledButton.getRippleProperties,\n icon: IconButton.getRippleProperties,\n};\n\nexport type ButtonColors = 'primary' | 'secondary' | string;\n\nexport interface ButtonProps extends BaseButtonProps {\n as?: React.ElementType<any>;\n children?: React.ReactNode;\n variant?: ButtonVariants;\n color?: ButtonColors;\n disabled?: boolean;\n elevation?: 'none' | 'default' | 'contained' | 'floating' | 'elevated';\n}\n\nfunction getFallbackElevation(variant: ButtonVariants = 'text') {\n if (variant === 'text' || variant === 'outlined' || variant === 'icon') {\n return 'none';\n }\n return 'default';\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(props, forwardedRef) {\n const buttonGroup = useButtonGroupContext();\n const {\n children,\n variant = buttonGroup?.variant || 'text',\n onPointerDown: onPointerDownProp,\n onKeyDown: onKeyDownProp,\n color = 'primary',\n disabled = false,\n elevation = getFallbackElevation(props.variant),\n style: styleProp,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const Comp: React.ComponentType<any> = componentMapping[variant];\n const getRippleProperties = rippleMapping[variant];\n\n const rippleProps = useRippleSurface({\n ...getRippleProperties(theme),\n rippleColor: 'currentColor',\n disabled,\n style: styleProp,\n onKeyDown: onKeyDownProp,\n onPointerDown: onPointerDownProp,\n });\n\n return (\n <Comp\n ref={forwardedRef}\n variant={variant}\n theme={theme}\n disabled={disabled}\n aria-disabled={disabled ? 'true' : undefined}\n color={color}\n elevation={elevation}\n isGroupedButton={Boolean(buttonGroup)}\n {...rippleProps}\n {...otherProps}\n >\n {children}\n </Comp>\n );\n }\n);\n"],"file":"Button.js"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ButtonProps } from './Button';
|
|
3
|
+
import { ButtonGroupContextProps } from './context';
|
|
4
|
+
export declare type ButtonGroupProps = ButtonProps & ButtonGroupContextProps;
|
|
5
|
+
export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "bottom" | "top" | "hidden" | "left" | "right" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "p" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation" | "isGroupedButton" | "key" | "direction"> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
|
|
3
|
+
import React, { forwardRef, useMemo } from 'react';
|
|
4
|
+
import { ButtonGroupContext } from './context';
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
export const ButtonGroup = /*#__PURE__*/forwardRef(function ButtonGroup(props, forwardedRef) {
|
|
7
|
+
const {
|
|
8
|
+
as: Comp = 'div',
|
|
9
|
+
variant = 'text',
|
|
10
|
+
direction = 'row'
|
|
11
|
+
} = props,
|
|
12
|
+
otherProps = _objectWithoutPropertiesLoose(props, ["as", "variant", "direction"]);
|
|
13
|
+
|
|
14
|
+
const value = useMemo(() => ({
|
|
15
|
+
direction,
|
|
16
|
+
variant
|
|
17
|
+
}), [direction, variant]);
|
|
18
|
+
return /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
|
|
19
|
+
value: value,
|
|
20
|
+
children: /*#__PURE__*/_jsx(Comp, _extends({
|
|
21
|
+
ref: forwardedRef,
|
|
22
|
+
role: "group",
|
|
23
|
+
"data-button-group": "",
|
|
24
|
+
"data-button-group-direction": direction
|
|
25
|
+
}, otherProps))
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
//# sourceMappingURL=ButtonGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/ButtonGroup.tsx"],"names":["React","forwardRef","useMemo","ButtonGroupContext","ButtonGroup","props","forwardedRef","as","Comp","variant","direction","otherProps","value"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,OAA5B,QAA2C,OAA3C;AAEA,SAASC,kBAAT,QAA4D,WAA5D;;AAIA,OAAO,MAAMC,WAAW,gBAAGH,UAAU,CACnC,SAASG,WAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA0C;AACxC,QAAM;AACJC,IAAAA,EAAE,EAAEC,IAAI,GAAG,KADP;AAEJC,IAAAA,OAAO,GAAG,MAFN;AAGJC,IAAAA,SAAS,GAAG;AAHR,MAKFL,KALJ;AAAA,QAIKM,UAJL,iCAKIN,KALJ;;AAOA,QAAMO,KAA8B,GAAGV,OAAO,CAC5C,OAAO;AAAEQ,IAAAA,SAAF;AAAaD,IAAAA;AAAb,GAAP,CAD4C,EAE5C,CAACC,SAAD,EAAYD,OAAZ,CAF4C,CAA9C;AAKA,sBACE,KAAC,kBAAD,CAAoB,QAApB;AAA6B,IAAA,KAAK,EAAEG,KAApC;AAAA,2BACE,KAAC,IAAD;AACE,MAAA,GAAG,EAAEN,YADP;AAEE,MAAA,IAAI,EAAC,OAFP;AAGE,2BAAkB,EAHpB;AAIE,qCAA6BI;AAJ/B,OAKMC,UALN;AADF,IADF;AAWD,CAzBkC,CAA9B","sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { ButtonProps } from './Button';\nimport { ButtonGroupContext, ButtonGroupContextProps } from './context';\n\nexport type ButtonGroupProps = ButtonProps & ButtonGroupContextProps;\n\nexport const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n function ButtonGroup(props, forwardedRef) {\n const {\n as: Comp = 'div',\n variant = 'text',\n direction = 'row',\n ...otherProps\n } = props;\n\n const value: ButtonGroupContextProps = useMemo(\n () => ({ direction, variant }),\n [direction, variant]\n );\n\n return (\n <ButtonGroupContext.Provider value={value}>\n <Comp\n ref={forwardedRef}\n role=\"group\"\n data-button-group=\"\"\n data-button-group-direction={direction}\n {...otherProps}\n />\n </ButtonGroupContext.Provider>\n );\n }\n);\n"],"file":"ButtonGroup.js"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Theme } from '../theme';
|
|
3
|
-
export declare const FilledButton: import("@emotion/styled").StyledComponent<Pick<import("./BaseButton").BaseButtonProps, "
|
|
3
|
+
export declare const FilledButton: import("@emotion/styled").StyledComponent<Pick<import("./BaseButton").BaseButtonProps, "bottom" | "top" | "hidden" | "left" | "right" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "p" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation" | "isGroupedButton" | "key"> & import("react").RefAttributes<HTMLButtonElement> & {
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
5
|
}, {}, {}>;
|
|
6
6
|
export declare function getRippleProperties(theme: Theme): {
|
|
7
7
|
hoverOpacity: any;
|
|
8
8
|
focusOpacity: any;
|
|
9
9
|
pressedOpacity: any;
|
|
10
|
+
rippleEnabled: boolean;
|
|
10
11
|
};
|
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _styled from "@emotion/styled/base";
|
|
3
3
|
import { readableColor } from 'polished';
|
|
4
4
|
import { BaseButton } from './BaseButton';
|
|
5
|
-
import { alpha,
|
|
5
|
+
import { alpha, getBackgroundOverlay } from '../color';
|
|
6
6
|
import { get, css } from '@styled-system/css';
|
|
7
7
|
export const FilledButton = /*#__PURE__*/_styled(BaseButton, process.env.NODE_ENV === "production" ? {
|
|
8
8
|
target: "ex8w9nt0"
|
|
@@ -20,17 +20,50 @@ export const FilledButton = /*#__PURE__*/_styled(BaseButton, process.env.NODE_EN
|
|
|
20
20
|
background: "linear-gradient(".concat(get(theme, 'colors.surface'), ", ").concat(get(theme, 'colors.surface'), "), ").concat(alpha('on.surface', 0.12)(theme)),
|
|
21
21
|
backgroundBlendMode: 'overlay',
|
|
22
22
|
cursor: 'default'
|
|
23
|
+
},
|
|
24
|
+
'&:focus-visible': {
|
|
25
|
+
outlineColor: get(theme, "colors.".concat(String(color))) || color,
|
|
26
|
+
outlineWidth: 2,
|
|
27
|
+
outlineStyle: 'auto',
|
|
28
|
+
outlineOffset: '2px'
|
|
23
29
|
}
|
|
24
30
|
}), ({
|
|
25
31
|
color = 'primary',
|
|
26
32
|
elevation = 'none',
|
|
27
33
|
theme
|
|
28
|
-
}) => color === 'surface' && _extends({},
|
|
34
|
+
}) => color === 'surface' && _extends({}, getBackgroundOverlay(theme, get(theme, "buttons.elevations.".concat(elevation, ".boxShadow"), 0), 'primary')), ({
|
|
35
|
+
color = 'primary',
|
|
36
|
+
theme,
|
|
37
|
+
isGroupedButton = false
|
|
38
|
+
}) => isGroupedButton && {
|
|
39
|
+
'[data-button-group=""] &': {
|
|
40
|
+
borderColor: get(theme, "colors.on.".concat(String(color))) || (typeof color === 'string' ? readableColor(color) : undefined),
|
|
41
|
+
':first-of-type': {
|
|
42
|
+
borderTopRightRadius: 0,
|
|
43
|
+
borderBottomRightRadius: 0,
|
|
44
|
+
borderRightStyle: 'solid',
|
|
45
|
+
borderRightWidth: "0.0625rem"
|
|
46
|
+
},
|
|
47
|
+
':not(:first-of-type):not(:last-of-type)': {
|
|
48
|
+
borderRadius: 0
|
|
49
|
+
},
|
|
50
|
+
':last-of-type': {
|
|
51
|
+
borderTopLeftRadius: 0,
|
|
52
|
+
borderBottomLeftRadius: 0,
|
|
53
|
+
borderLeftStyle: 'solid',
|
|
54
|
+
borderLeftWidth: "0.0625rem"
|
|
55
|
+
},
|
|
56
|
+
':last-of-type:nth-of-type(2)': {
|
|
57
|
+
borderLeftWidth: 0
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CdXR0b24vRmlsbGVkQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNEIiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0J1dHRvbi9GaWxsZWRCdXR0b24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgcmVhZGFibGVDb2xvciwgcmVtIH0gZnJvbSAncG9saXNoZWQnO1xuaW1wb3J0IHsgQmFzZUJ1dHRvbiB9IGZyb20gJy4vQmFzZUJ1dHRvbic7XG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uL3RoZW1lJztcbmltcG9ydCB7IGFscGhhLCBnZXRCYWNrZ3JvdW5kT3ZlcmxheSB9IGZyb20gJy4uL2NvbG9yJztcbmltcG9ydCB7IGdldCwgY3NzIH0gZnJvbSAnQHN0eWxlZC1zeXN0ZW0vY3NzJztcblxuZXhwb3J0IGNvbnN0IEZpbGxlZEJ1dHRvbiA9IHN0eWxlZChCYXNlQnV0dG9uKShcbiAgKHsgY29sb3IgPSAncHJpbWFyeScsIHRoZW1lIH0pID0+XG4gICAgY3NzKHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogZ2V0KHRoZW1lLCBgY29sb3JzLiR7U3RyaW5nKGNvbG9yKX1gKSB8fCBjb2xvcixcbiAgICAgIGNvbG9yOlxuICAgICAgICBnZXQodGhlbWUsIGBjb2xvcnMub24uJHtTdHJpbmcoY29sb3IpfWApIHx8XG4gICAgICAgICh0eXBlb2YgY29sb3IgPT09ICdzdHJpbmcnID8gcmVhZGFibGVDb2xvcihjb2xvcikgOiB1bmRlZmluZWQpLFxuICAgICAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgICAgIGNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMzgpLFxuICAgICAgICBiYWNrZ3JvdW5kOiBgbGluZWFyLWdyYWRpZW50KCR7Z2V0KHRoZW1lLCAnY29sb3JzLnN1cmZhY2UnKX0sICR7Z2V0KFxuICAgICAgICAgIHRoZW1lLFxuICAgICAgICAgICdjb2xvcnMuc3VyZmFjZSdcbiAgICAgICAgKX0pLCAke2FscGhhKCdvbi5zdXJmYWNlJywgMC4xMikodGhlbWUpfWAsXG4gICAgICAgIGJhY2tncm91bmRCbGVuZE1vZGU6ICdvdmVybGF5JyxcbiAgICAgICAgY3Vyc29yOiAnZGVmYXVsdCcsXG4gICAgICB9LFxuICAgICAgJyY6Zm9jdXMtdmlzaWJsZSc6IHtcbiAgICAgICAgb3V0bGluZUNvbG9yOiBnZXQodGhlbWUsIGBjb2xvcnMuJHtTdHJpbmcoY29sb3IpfWApIHx8IGNvbG9yLFxuICAgICAgICBvdXRsaW5lV2lkdGg6IDIsXG4gICAgICAgIG91dGxpbmVTdHlsZTogJ2F1dG8nLFxuICAgICAgICBvdXRsaW5lT2Zmc2V0OiAnMnB4JyxcbiAgICAgIH0sXG4gICAgfSksXG4gICh7IGNvbG9yID0gJ3ByaW1hcnknLCBlbGV2YXRpb24gPSAnbm9uZScsIHRoZW1lIH0pID0+XG4gICAgY29sb3IgPT09ICdzdXJmYWNlJyAmJiB7XG4gICAgICAuLi5nZXRCYWNrZ3JvdW5kT3ZlcmxheShcbiAgICAgICAgdGhlbWUsXG4gICAgICAgIGdldCh0aGVtZSwgYGJ1dHRvbnMuZWxldmF0aW9ucy4ke2VsZXZhdGlvbn0uYm94U2hhZG93YCwgMCksXG4gICAgICAgICdwcmltYXJ5J1xuICAgICAgKSxcbiAgICB9LFxuICAoeyBjb2xvciA9ICdwcmltYXJ5JywgdGhlbWUsIGlzR3JvdXBlZEJ1dHRvbiA9IGZhbHNlIH0pID0+XG4gICAgaXNHcm91cGVkQnV0dG9uICYmIHtcbiAgICAgICdbZGF0YS1idXR0b24tZ3JvdXA9XCJcIl0gJic6IHtcbiAgICAgICAgYm9yZGVyQ29sb3I6XG4gICAgICAgICAgZ2V0KHRoZW1lLCBgY29sb3JzLm9uLiR7U3RyaW5nKGNvbG9yKX1gKSB8fFxuICAgICAgICAgICh0eXBlb2YgY29sb3IgPT09ICdzdHJpbmcnID8gcmVhZGFibGVDb2xvcihjb2xvcikgOiB1bmRlZmluZWQpLFxuICAgICAgICAnOmZpcnN0LW9mLXR5cGUnOiB7XG4gICAgICAgICAgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyUmlnaHRTdHlsZTogJ3NvbGlkJyxcbiAgICAgICAgICBib3JkZXJSaWdodFdpZHRoOiByZW0oMSksXG4gICAgICAgIH0sXG4gICAgICAgICc6bm90KDpmaXJzdC1vZi10eXBlKTpub3QoOmxhc3Qtb2YtdHlwZSknOiB7XG4gICAgICAgICAgYm9yZGVyUmFkaXVzOiAwLFxuICAgICAgICB9LFxuICAgICAgICAnOmxhc3Qtb2YtdHlwZSc6IHtcbiAgICAgICAgICBib3JkZXJUb3BMZWZ0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6IDAsXG4gICAgICAgICAgYm9yZGVyTGVmdFN0eWxlOiAnc29saWQnLFxuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogcmVtKDEpLFxuICAgICAgICB9LFxuICAgICAgICAnOmxhc3Qtb2YtdHlwZTpudGgtb2YtdHlwZSgyKSc6IHtcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IDAsXG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIH1cbik7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRSaXBwbGVQcm9wZXJ0aWVzKHRoZW1lOiBUaGVtZSkge1xuICByZXR1cm4ge1xuICAgIGhvdmVyT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy5maWxsZWQuaG92ZXIub3BhY2l0eWApLFxuICAgIGZvY3VzT3BhY2l0eTogZ2V0KHRoZW1lLCBgYnV0dG9ucy5vdmVybGF5cy5maWxsZWQuZm9jdXMub3BhY2l0eWApLFxuICAgIHByZXNzZWRPcGFjaXR5OiBnZXQodGhlbWUsIGBidXR0b25zLm92ZXJsYXlzLmZpbGxlZC5wcmVzc2VkLm9wYWNpdHlgKSxcbiAgICByaXBwbGVFbmFibGVkOiBmYWxzZSxcbiAgfTtcbn1cbiJdfQ== */");
|
|
29
61
|
export function getRippleProperties(theme) {
|
|
30
62
|
return {
|
|
31
63
|
hoverOpacity: get(theme, "buttons.overlays.filled.hover.opacity"),
|
|
32
64
|
focusOpacity: get(theme, "buttons.overlays.filled.focus.opacity"),
|
|
33
|
-
pressedOpacity: get(theme, "buttons.overlays.filled.pressed.opacity")
|
|
65
|
+
pressedOpacity: get(theme, "buttons.overlays.filled.pressed.opacity"),
|
|
66
|
+
rippleEnabled: false
|
|
34
67
|
};
|
|
35
68
|
}
|
|
36
69
|
//# sourceMappingURL=FilledButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/FilledButton.tsx"],"names":["readableColor","BaseButton","alpha","
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/FilledButton.tsx"],"names":["readableColor","BaseButton","alpha","getBackgroundOverlay","get","css","FilledButton","color","theme","backgroundColor","String","undefined","background","backgroundBlendMode","cursor","outlineColor","outlineWidth","outlineStyle","outlineOffset","elevation","isGroupedButton","borderColor","borderTopRightRadius","borderBottomRightRadius","borderRightStyle","borderRightWidth","borderRadius","borderTopLeftRadius","borderBottomLeftRadius","borderLeftStyle","borderLeftWidth","getRippleProperties","hoverOpacity","focusOpacity","pressedOpacity","rippleEnabled"],"mappings":"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","sourcesContent":["import styled from '@emotion/styled';\nimport { readableColor, rem } from 'polished';\nimport { BaseButton } from './BaseButton';\nimport { Theme } from '../theme';\nimport { alpha, getBackgroundOverlay } from '../color';\nimport { get, css } from '@styled-system/css';\n\nexport const FilledButton = styled(BaseButton)(\n ({ color = 'primary', theme }) =>\n css({\n backgroundColor: get(theme, `colors.${String(color)}`) || color,\n color:\n get(theme, `colors.on.${String(color)}`) ||\n (typeof color === 'string' ? readableColor(color) : undefined),\n '&:disabled': {\n color: alpha('on.surface', 0.38),\n background: `linear-gradient(${get(theme, 'colors.surface')}, ${get(\n theme,\n 'colors.surface'\n )}), ${alpha('on.surface', 0.12)(theme)}`,\n backgroundBlendMode: 'overlay',\n cursor: 'default',\n },\n '&:focus-visible': {\n outlineColor: get(theme, `colors.${String(color)}`) || color,\n outlineWidth: 2,\n outlineStyle: 'auto',\n outlineOffset: '2px',\n },\n }),\n ({ color = 'primary', elevation = 'none', theme }) =>\n color === 'surface' && {\n ...getBackgroundOverlay(\n theme,\n get(theme, `buttons.elevations.${elevation}.boxShadow`, 0),\n 'primary'\n ),\n },\n ({ color = 'primary', theme, isGroupedButton = false }) =>\n isGroupedButton && {\n '[data-button-group=\"\"] &': {\n borderColor:\n get(theme, `colors.on.${String(color)}`) ||\n (typeof color === 'string' ? readableColor(color) : undefined),\n ':first-of-type': {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n borderRightStyle: 'solid',\n borderRightWidth: rem(1),\n },\n ':not(:first-of-type):not(:last-of-type)': {\n borderRadius: 0,\n },\n ':last-of-type': {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n borderLeftStyle: 'solid',\n borderLeftWidth: rem(1),\n },\n ':last-of-type:nth-of-type(2)': {\n borderLeftWidth: 0,\n },\n },\n }\n);\n\nexport function getRippleProperties(theme: Theme) {\n return {\n hoverOpacity: get(theme, `buttons.overlays.filled.hover.opacity`),\n focusOpacity: get(theme, `buttons.overlays.filled.focus.opacity`),\n pressedOpacity: get(theme, `buttons.overlays.filled.pressed.opacity`),\n rippleEnabled: false,\n };\n}\n"],"file":"FilledButton.js"}
|
|
@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import { getRippleProperties as filledButtonGetProperties } from './FilledButton';
|
|
3
3
|
export function getRippleProperties(theme) {
|
|
4
4
|
return _extends({}, filledButtonGetProperties(theme), {
|
|
5
|
-
center: true
|
|
5
|
+
center: true,
|
|
6
|
+
rippleEnabled: true
|
|
6
7
|
});
|
|
7
8
|
}
|
|
8
9
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/IconButton.tsx"],"names":["getRippleProperties","filledButtonGetProperties","theme","center"],"mappings":";AAAA,SAASA,mBAAmB,IAAIC,yBAAhC,QAAiE,gBAAjE;AAGA,OAAO,SAASD,mBAAT,CAA6BE,KAA7B,EAA2C;AAChD,sBACKD,yBAAyB,CAACC,KAAD,CAD9B;AAEEC,IAAAA,MAAM,EAAE;
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/IconButton.tsx"],"names":["getRippleProperties","filledButtonGetProperties","theme","center","rippleEnabled"],"mappings":";AAAA,SAASA,mBAAmB,IAAIC,yBAAhC,QAAiE,gBAAjE;AAGA,OAAO,SAASD,mBAAT,CAA6BE,KAA7B,EAA2C;AAChD,sBACKD,yBAAyB,CAACC,KAAD,CAD9B;AAEEC,IAAAA,MAAM,EAAE,IAFV;AAGEC,IAAAA,aAAa,EAAE;AAHjB;AAKD","sourcesContent":["import { getRippleProperties as filledButtonGetProperties } from './FilledButton';\nimport { Theme } from '../theme';\n\nexport function getRippleProperties(theme: Theme) {\n return {\n ...filledButtonGetProperties(theme),\n center: true,\n rippleEnabled: true,\n };\n}\n"],"file":"IconButton.js"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export declare const OutlinedButton: import("@emotion/styled").StyledComponent<Pick<import("./BaseButton").BaseButtonProps, "
|
|
2
|
+
export declare const OutlinedButton: import("@emotion/styled").StyledComponent<Pick<import("./BaseButton").BaseButtonProps, "bottom" | "top" | "hidden" | "left" | "right" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "p" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "elevation" | "isGroupedButton" | "key"> & import("react").RefAttributes<HTMLButtonElement> & {
|
|
3
3
|
theme?: import("@emotion/react").Theme | undefined;
|
|
4
4
|
}, {}, {}>;
|
|
@@ -10,11 +10,41 @@ export const OutlinedButton = /*#__PURE__*/_styled(TransparentButton, process.en
|
|
|
10
10
|
})(css({
|
|
11
11
|
borderStyle: 'solid',
|
|
12
12
|
borderWidth: "0.0625rem",
|
|
13
|
-
borderColor:
|
|
13
|
+
borderColor: 'outline',
|
|
14
|
+
boxShadow: 0,
|
|
15
|
+
'&:focus,:&active,:&hover': {
|
|
16
|
+
boxShadow: 0
|
|
17
|
+
},
|
|
18
|
+
'&:focus-visible,&:active': {
|
|
19
|
+
borderColor: 'currentColor'
|
|
20
|
+
},
|
|
14
21
|
'&:disabled': {
|
|
15
22
|
color: alpha('on.surface', 0.38),
|
|
16
23
|
borderColor: alpha('on.surface', 0.12),
|
|
17
24
|
cursor: 'default'
|
|
18
25
|
}
|
|
19
|
-
}),
|
|
26
|
+
}), ({
|
|
27
|
+
isGroupedButton = false
|
|
28
|
+
}) => isGroupedButton && {
|
|
29
|
+
'[data-button-group=""] &': {
|
|
30
|
+
':first-of-type': {
|
|
31
|
+
borderTopRightRadius: 0,
|
|
32
|
+
borderBottomRightRadius: 0
|
|
33
|
+
},
|
|
34
|
+
':not(:first-of-type):not(:last-of-type)': {
|
|
35
|
+
borderRadius: 0,
|
|
36
|
+
borderRightWidth: 0,
|
|
37
|
+
borderLeftWidth: 0
|
|
38
|
+
},
|
|
39
|
+
':last-of-type': {
|
|
40
|
+
borderTopLeftRadius: 0,
|
|
41
|
+
borderBottomLeftRadius: 0,
|
|
42
|
+
borderLeftStyle: 'solid',
|
|
43
|
+
borderLeftWidth: "0.0625rem"
|
|
44
|
+
},
|
|
45
|
+
':last-of-type:nth-of-type(2)': {
|
|
46
|
+
borderLeftWidth: 0
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CdXR0b24vT3V0bGluZWRCdXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU04QiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvQnV0dG9uL091dGxpbmVkQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFRyYW5zcGFyZW50QnV0dG9uIH0gZnJvbSAnLi9UcmFuc3BhcmVudEJ1dHRvbic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAc3R5bGVkLXN5c3RlbS9jc3MnO1xuaW1wb3J0IHsgYWxwaGEgfSBmcm9tICcuLi9jb2xvcic7XG5pbXBvcnQgeyByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5cbmV4cG9ydCBjb25zdCBPdXRsaW5lZEJ1dHRvbiA9IHN0eWxlZChUcmFuc3BhcmVudEJ1dHRvbikoXG4gIGNzcyh7XG4gICAgYm9yZGVyU3R5bGU6ICdzb2xpZCcsXG4gICAgYm9yZGVyV2lkdGg6IHJlbSgxKSxcbiAgICBib3JkZXJDb2xvcjogJ291dGxpbmUnLFxuICAgIGJveFNoYWRvdzogMCxcbiAgICAnJjpmb2N1cyw6JmFjdGl2ZSw6JmhvdmVyJzogeyBib3hTaGFkb3c6IDAgfSxcbiAgICAnJjpmb2N1cy12aXNpYmxlLCY6YWN0aXZlJzoge1xuICAgICAgYm9yZGVyQ29sb3I6ICdjdXJyZW50Q29sb3InLFxuICAgIH0sXG4gICAgJyY6ZGlzYWJsZWQnOiB7XG4gICAgICBjb2xvcjogYWxwaGEoJ29uLnN1cmZhY2UnLCAwLjM4KSxcbiAgICAgIGJvcmRlckNvbG9yOiBhbHBoYSgnb24uc3VyZmFjZScsIDAuMTIpLFxuICAgICAgY3Vyc29yOiAnZGVmYXVsdCcsXG4gICAgfSxcbiAgfSksXG4gICh7IGlzR3JvdXBlZEJ1dHRvbiA9IGZhbHNlIH0pID0+XG4gICAgaXNHcm91cGVkQnV0dG9uICYmIHtcbiAgICAgICdbZGF0YS1idXR0b24tZ3JvdXA9XCJcIl0gJic6IHtcbiAgICAgICAgJzpmaXJzdC1vZi10eXBlJzoge1xuICAgICAgICAgIGJvcmRlclRvcFJpZ2h0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiAwLFxuICAgICAgICB9LFxuICAgICAgICAnOm5vdCg6Zmlyc3Qtb2YtdHlwZSk6bm90KDpsYXN0LW9mLXR5cGUpJzoge1xuICAgICAgICAgIGJvcmRlclJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJSaWdodFdpZHRoOiAwLFxuICAgICAgICAgIGJvcmRlckxlZnRXaWR0aDogMCxcbiAgICAgICAgfSxcbiAgICAgICAgJzpsYXN0LW9mLXR5cGUnOiB7XG4gICAgICAgICAgYm9yZGVyVG9wTGVmdFJhZGl1czogMCxcbiAgICAgICAgICBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiAwLFxuICAgICAgICAgIGJvcmRlckxlZnRTdHlsZTogJ3NvbGlkJyxcbiAgICAgICAgICBib3JkZXJMZWZ0V2lkdGg6IHJlbSgxKSxcbiAgICAgICAgfSxcbiAgICAgICAgJzpsYXN0LW9mLXR5cGU6bnRoLW9mLXR5cGUoMiknOiB7XG4gICAgICAgICAgYm9yZGVyTGVmdFdpZHRoOiAwLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9XG4pO1xuIl19 */");
|
|
20
50
|
//# sourceMappingURL=OutlinedButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Button/OutlinedButton.tsx"],"names":["TransparentButton","css","alpha","OutlinedButton","borderStyle","borderWidth","borderColor","color","cursor"],"mappings":";AAAA,SAASA,iBAAT,QAAkC,qBAAlC;AAEA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,KAAT,QAAsB,UAAtB;AAGA,OAAO,MAAMC,cAAc,GAAG,qBAAOH,iBAAP;AAAA;AAAA;AAAA;AAAA;AAAA,GAC5BC,GAAG,CAAC;AACFG,EAAAA,WAAW,EAAE,OADX;AAEFC,EAAAA,WAAW,aAFT;AAGFC,EAAAA,WAAW,
|
|
1
|
+
{"version":3,"sources":["../../../src/Button/OutlinedButton.tsx"],"names":["TransparentButton","css","alpha","OutlinedButton","borderStyle","borderWidth","borderColor","boxShadow","color","cursor","isGroupedButton","borderTopRightRadius","borderBottomRightRadius","borderRadius","borderRightWidth","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","borderLeftStyle"],"mappings":";AAAA,SAASA,iBAAT,QAAkC,qBAAlC;AAEA,SAASC,GAAT,QAAoB,oBAApB;AACA,SAASC,KAAT,QAAsB,UAAtB;AAGA,OAAO,MAAMC,cAAc,GAAG,qBAAOH,iBAAP;AAAA;AAAA;AAAA;AAAA;AAAA,GAC5BC,GAAG,CAAC;AACFG,EAAAA,WAAW,EAAE,OADX;AAEFC,EAAAA,WAAW,aAFT;AAGFC,EAAAA,WAAW,EAAE,SAHX;AAIFC,EAAAA,SAAS,EAAE,CAJT;AAKF,8BAA4B;AAAEA,IAAAA,SAAS,EAAE;AAAb,GAL1B;AAMF,8BAA4B;AAC1BD,IAAAA,WAAW,EAAE;AADa,GAN1B;AASF,gBAAc;AACZE,IAAAA,KAAK,EAAEN,KAAK,CAAC,YAAD,EAAe,IAAf,CADA;AAEZI,IAAAA,WAAW,EAAEJ,KAAK,CAAC,YAAD,EAAe,IAAf,CAFN;AAGZO,IAAAA,MAAM,EAAE;AAHI;AATZ,CAAD,CADyB,EAgB5B,CAAC;AAAEC,EAAAA,eAAe,GAAG;AAApB,CAAD,KACEA,eAAe,IAAI;AACjB,8BAA4B;AAC1B,sBAAkB;AAChBC,MAAAA,oBAAoB,EAAE,CADN;AAEhBC,MAAAA,uBAAuB,EAAE;AAFT,KADQ;AAK1B,+CAA2C;AACzCC,MAAAA,YAAY,EAAE,CAD2B;AAEzCC,MAAAA,gBAAgB,EAAE,CAFuB;AAGzCC,MAAAA,eAAe,EAAE;AAHwB,KALjB;AAU1B,qBAAiB;AACfC,MAAAA,mBAAmB,EAAE,CADN;AAEfC,MAAAA,sBAAsB,EAAE,CAFT;AAGfC,MAAAA,eAAe,EAAE,OAHF;AAIfH,MAAAA,eAAe;AAJA,KAVS;AAgB1B,oCAAgC;AAC9BA,MAAAA,eAAe,EAAE;AADa;AAhBN;AADX,CAjBO,yjEAAvB","sourcesContent":["import { TransparentButton } from './TransparentButton';\nimport styled from '@emotion/styled';\nimport { css } from '@styled-system/css';\nimport { alpha } from '../color';\nimport { rem } from 'polished';\n\nexport const OutlinedButton = styled(TransparentButton)(\n css({\n borderStyle: 'solid',\n borderWidth: rem(1),\n borderColor: 'outline',\n boxShadow: 0,\n '&:focus,:&active,:&hover': { boxShadow: 0 },\n '&:focus-visible,&:active': {\n borderColor: 'currentColor',\n },\n '&:disabled': {\n color: alpha('on.surface', 0.38),\n borderColor: alpha('on.surface', 0.12),\n cursor: 'default',\n },\n }),\n ({ isGroupedButton = false }) =>\n isGroupedButton && {\n '[data-button-group=\"\"] &': {\n ':first-of-type': {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n ':not(:first-of-type):not(:last-of-type)': {\n borderRadius: 0,\n borderRightWidth: 0,\n borderLeftWidth: 0,\n },\n ':last-of-type': {\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n borderLeftStyle: 'solid',\n borderLeftWidth: rem(1),\n },\n ':last-of-type:nth-of-type(2)': {\n borderLeftWidth: 0,\n },\n },\n }\n);\n"],"file":"OutlinedButton.js"}
|