@mantine/core 4.1.3 → 4.2.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/cjs/components/Accordion/AccordionItem/AccordionItem.styles.js +5 -6
- package/cjs/components/Accordion/AccordionItem/AccordionItem.styles.js.map +1 -1
- package/cjs/components/ActionIcon/ActionIcon.js +1 -1
- package/cjs/components/ActionIcon/ActionIcon.js.map +1 -1
- package/cjs/components/ActionIcon/ActionIcon.styles.js +9 -13
- package/cjs/components/ActionIcon/ActionIcon.styles.js.map +1 -1
- package/cjs/components/Alert/Alert.js +12 -0
- package/cjs/components/Alert/Alert.js.map +1 -1
- package/cjs/components/Alert/Alert.styles.js +6 -6
- package/cjs/components/Alert/Alert.styles.js.map +1 -1
- package/cjs/components/AppShell/HorizontalSection/HorizontalSection.js +2 -1
- package/cjs/components/AppShell/HorizontalSection/HorizontalSection.js.map +1 -1
- package/cjs/components/AppShell/HorizontalSection/HorizontalSection.styles.js +2 -2
- package/cjs/components/AppShell/HorizontalSection/HorizontalSection.styles.js.map +1 -1
- package/cjs/components/Autocomplete/Autocomplete.js +8 -4
- package/cjs/components/Autocomplete/Autocomplete.js.map +1 -1
- package/cjs/components/Avatar/Avatar.styles.js +40 -36
- package/cjs/components/Avatar/Avatar.styles.js.map +1 -1
- package/cjs/components/Badge/Badge.styles.js +5 -6
- package/cjs/components/Badge/Badge.styles.js.map +1 -1
- package/cjs/components/Blockquote/Blockquote.styles.js +1 -1
- package/cjs/components/Blockquote/Blockquote.styles.js.map +1 -1
- package/cjs/components/Button/Button.js +1 -1
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.js +9 -15
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js +3 -2
- package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/components/Chips/Chip/Chip.styles.js +19 -21
- package/cjs/components/Chips/Chip/Chip.styles.js.map +1 -1
- package/cjs/components/Code/Code.styles.js +1 -1
- package/cjs/components/Code/Code.styles.js.map +1 -1
- package/cjs/components/Container/Container.js +0 -1
- package/cjs/components/Container/Container.js.map +1 -1
- package/cjs/components/Container/Container.styles.js +2 -0
- package/cjs/components/Container/Container.styles.js.map +1 -1
- package/cjs/components/Divider/Divider.styles.js +1 -1
- package/cjs/components/Divider/Divider.styles.js.map +1 -1
- package/cjs/components/Drawer/Drawer.js +7 -3
- package/cjs/components/Drawer/Drawer.js.map +1 -1
- package/cjs/components/Grid/Col/Col.js +23 -13
- package/cjs/components/Grid/Col/Col.js.map +1 -1
- package/cjs/components/Indicator/Indicator.js +92 -0
- package/cjs/components/Indicator/Indicator.js.map +1 -0
- package/cjs/components/Indicator/Indicator.styles.js +83 -0
- package/cjs/components/Indicator/Indicator.styles.js.map +1 -0
- package/cjs/components/InputWrapper/InputWrapper.js +2 -1
- package/cjs/components/InputWrapper/InputWrapper.js.map +1 -1
- package/cjs/components/Loader/Loader.js +1 -1
- package/cjs/components/Loader/Loader.js.map +1 -1
- package/cjs/components/Menu/MenuItem/MenuItem.styles.js +3 -3
- package/cjs/components/Menu/MenuItem/MenuItem.styles.js.map +1 -1
- package/cjs/components/Modal/Modal.js +9 -2
- package/cjs/components/Modal/Modal.js.map +1 -1
- package/cjs/components/MultiSelect/MultiSelect.js +21 -9
- package/cjs/components/MultiSelect/MultiSelect.js.map +1 -1
- package/cjs/components/MultiSelect/MultiSelect.styles.js +2 -1
- package/cjs/components/MultiSelect/MultiSelect.styles.js.map +1 -1
- package/cjs/components/Notification/Notification.js +1 -1
- package/cjs/components/Notification/Notification.js.map +1 -1
- package/cjs/components/Notification/Notification.styles.js +6 -4
- package/cjs/components/Notification/Notification.styles.js.map +1 -1
- package/cjs/components/NumberInput/NumberInput.js +3 -1
- package/cjs/components/NumberInput/NumberInput.js.map +1 -1
- package/cjs/components/Pagination/Pagination.styles.js +1 -5
- package/cjs/components/Pagination/Pagination.styles.js.map +1 -1
- package/cjs/components/Popper/Popper.js +3 -4
- package/cjs/components/Popper/Popper.js.map +1 -1
- package/cjs/components/Progress/Progress.js +1 -1
- package/cjs/components/Progress/Progress.js.map +1 -1
- package/cjs/components/Progress/Progress.styles.js +1 -1
- package/cjs/components/Progress/Progress.styles.js.map +1 -1
- package/cjs/components/RadioGroup/Radio/Radio.js +2 -1
- package/cjs/components/RadioGroup/Radio/Radio.js.map +1 -1
- package/cjs/components/RadioGroup/Radio/Radio.styles.js +3 -2
- package/cjs/components/RadioGroup/Radio/Radio.styles.js.map +1 -1
- package/cjs/components/RadioGroup/RadioGroup.js +5 -0
- package/cjs/components/RadioGroup/RadioGroup.js.map +1 -1
- package/cjs/components/RingProgress/Curve/Curve.js +1 -1
- package/cjs/components/RingProgress/Curve/Curve.js.map +1 -1
- package/cjs/components/SegmentedControl/SegmentedControl.js +14 -7
- package/cjs/components/SegmentedControl/SegmentedControl.js.map +1 -1
- package/cjs/components/SegmentedControl/SegmentedControl.styles.js +9 -4
- package/cjs/components/SegmentedControl/SegmentedControl.styles.js.map +1 -1
- package/cjs/components/Select/Select.js +17 -6
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Select/SelectDropdown/SelectDropdown.js +3 -1
- package/cjs/components/Select/SelectDropdown/SelectDropdown.js.map +1 -1
- package/cjs/components/Select/SelectRightSection/SelectRightSection.js +4 -2
- package/cjs/components/Select/SelectRightSection/SelectRightSection.js.map +1 -1
- package/cjs/components/Slider/Marks/Marks.styles.js +4 -3
- package/cjs/components/Slider/Marks/Marks.styles.js.map +1 -1
- package/cjs/components/Slider/Thumb/Thumb.styles.js +3 -3
- package/cjs/components/Slider/Thumb/Thumb.styles.js.map +1 -1
- package/cjs/components/Slider/Track/Track.styles.js +1 -1
- package/cjs/components/Slider/Track/Track.styles.js.map +1 -1
- package/cjs/components/Stepper/Step/Step.styles.js +4 -3
- package/cjs/components/Stepper/Step/Step.styles.js.map +1 -1
- package/cjs/components/Stepper/Stepper.styles.js +1 -1
- package/cjs/components/Stepper/Stepper.styles.js.map +1 -1
- package/cjs/components/Switch/Switch.styles.js +3 -2
- package/cjs/components/Switch/Switch.styles.js.map +1 -1
- package/cjs/components/Text/Text.styles.js +6 -8
- package/cjs/components/Text/Text.styles.js.map +1 -1
- package/cjs/components/ThemeIcon/ThemeIcon.styles.js +2 -3
- package/cjs/components/ThemeIcon/ThemeIcon.styles.js.map +1 -1
- package/cjs/components/Timeline/TimelineItem/TimelineItem.styles.js +70 -67
- package/cjs/components/Timeline/TimelineItem/TimelineItem.styles.js.map +1 -1
- package/cjs/components/Tooltip/FloatingTooltip/FloatingTooltip.js +40 -32
- package/cjs/components/Tooltip/FloatingTooltip/FloatingTooltip.js.map +1 -1
- package/cjs/components/Tooltip/FloatingTooltip/FloatingTooltip.styles.js +3 -2
- package/cjs/components/Tooltip/FloatingTooltip/FloatingTooltip.styles.js.map +1 -1
- package/cjs/components/Tooltip/Tooltip.js +2 -2
- package/cjs/components/Tooltip/Tooltip.js.map +1 -1
- package/cjs/components/TransferList/RenderList/RenderList.styles.js +2 -2
- package/cjs/components/TransferList/RenderList/RenderList.styles.js.map +1 -1
- package/cjs/index.js +2 -0
- package/cjs/index.js.map +1 -1
- package/esm/components/Accordion/AccordionItem/AccordionItem.styles.js +5 -6
- package/esm/components/Accordion/AccordionItem/AccordionItem.styles.js.map +1 -1
- package/esm/components/ActionIcon/ActionIcon.js +2 -2
- package/esm/components/ActionIcon/ActionIcon.js.map +1 -1
- package/esm/components/ActionIcon/ActionIcon.styles.js +10 -14
- package/esm/components/ActionIcon/ActionIcon.styles.js.map +1 -1
- package/esm/components/Alert/Alert.js +12 -0
- package/esm/components/Alert/Alert.js.map +1 -1
- package/esm/components/Alert/Alert.styles.js +6 -6
- package/esm/components/Alert/Alert.styles.js.map +1 -1
- package/esm/components/AppShell/HorizontalSection/HorizontalSection.js +2 -1
- package/esm/components/AppShell/HorizontalSection/HorizontalSection.js.map +1 -1
- package/esm/components/AppShell/HorizontalSection/HorizontalSection.styles.js +2 -2
- package/esm/components/AppShell/HorizontalSection/HorizontalSection.styles.js.map +1 -1
- package/esm/components/Autocomplete/Autocomplete.js +8 -4
- package/esm/components/Autocomplete/Autocomplete.js.map +1 -1
- package/esm/components/Avatar/Avatar.styles.js +41 -37
- package/esm/components/Avatar/Avatar.styles.js.map +1 -1
- package/esm/components/Badge/Badge.styles.js +6 -7
- package/esm/components/Badge/Badge.styles.js.map +1 -1
- package/esm/components/Blockquote/Blockquote.styles.js +1 -1
- package/esm/components/Blockquote/Blockquote.styles.js.map +1 -1
- package/esm/components/Button/Button.js +2 -2
- package/esm/components/Button/Button.js.map +1 -1
- package/esm/components/Button/Button.styles.js +10 -16
- package/esm/components/Button/Button.styles.js.map +1 -1
- package/esm/components/Checkbox/Checkbox.styles.js +3 -2
- package/esm/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/esm/components/Chips/Chip/Chip.styles.js +20 -22
- package/esm/components/Chips/Chip/Chip.styles.js.map +1 -1
- package/esm/components/Code/Code.styles.js +2 -2
- package/esm/components/Code/Code.styles.js.map +1 -1
- package/esm/components/Container/Container.js +0 -1
- package/esm/components/Container/Container.js.map +1 -1
- package/esm/components/Container/Container.styles.js +2 -0
- package/esm/components/Container/Container.styles.js.map +1 -1
- package/esm/components/Divider/Divider.styles.js +1 -1
- package/esm/components/Divider/Divider.styles.js.map +1 -1
- package/esm/components/Drawer/Drawer.js +7 -3
- package/esm/components/Drawer/Drawer.js.map +1 -1
- package/esm/components/Grid/Col/Col.js +22 -12
- package/esm/components/Grid/Col/Col.js.map +1 -1
- package/esm/components/Indicator/Indicator.js +84 -0
- package/esm/components/Indicator/Indicator.js.map +1 -0
- package/esm/components/Indicator/Indicator.styles.js +79 -0
- package/esm/components/Indicator/Indicator.styles.js.map +1 -0
- package/esm/components/InputWrapper/InputWrapper.js +2 -1
- package/esm/components/InputWrapper/InputWrapper.js.map +1 -1
- package/esm/components/Loader/Loader.js +1 -1
- package/esm/components/Loader/Loader.js.map +1 -1
- package/esm/components/Menu/MenuItem/MenuItem.styles.js +3 -3
- package/esm/components/Menu/MenuItem/MenuItem.styles.js.map +1 -1
- package/esm/components/Modal/Modal.js +9 -2
- package/esm/components/Modal/Modal.js.map +1 -1
- package/esm/components/MultiSelect/MultiSelect.js +21 -9
- package/esm/components/MultiSelect/MultiSelect.js.map +1 -1
- package/esm/components/MultiSelect/MultiSelect.styles.js +2 -1
- package/esm/components/MultiSelect/MultiSelect.styles.js.map +1 -1
- package/esm/components/Notification/Notification.js +1 -1
- package/esm/components/Notification/Notification.js.map +1 -1
- package/esm/components/Notification/Notification.styles.js +6 -4
- package/esm/components/Notification/Notification.styles.js.map +1 -1
- package/esm/components/NumberInput/NumberInput.js +3 -1
- package/esm/components/NumberInput/NumberInput.js.map +1 -1
- package/esm/components/Pagination/Pagination.styles.js +2 -6
- package/esm/components/Pagination/Pagination.styles.js.map +1 -1
- package/esm/components/Popper/Popper.js +3 -4
- package/esm/components/Popper/Popper.js.map +1 -1
- package/esm/components/Progress/Progress.js +1 -1
- package/esm/components/Progress/Progress.js.map +1 -1
- package/esm/components/Progress/Progress.styles.js +1 -1
- package/esm/components/Progress/Progress.styles.js.map +1 -1
- package/esm/components/RadioGroup/Radio/Radio.js +2 -1
- package/esm/components/RadioGroup/Radio/Radio.js.map +1 -1
- package/esm/components/RadioGroup/Radio/Radio.styles.js +3 -2
- package/esm/components/RadioGroup/Radio/Radio.styles.js.map +1 -1
- package/esm/components/RadioGroup/RadioGroup.js +5 -0
- package/esm/components/RadioGroup/RadioGroup.js.map +1 -1
- package/esm/components/RingProgress/Curve/Curve.js +1 -1
- package/esm/components/RingProgress/Curve/Curve.js.map +1 -1
- package/esm/components/SegmentedControl/SegmentedControl.js +16 -9
- package/esm/components/SegmentedControl/SegmentedControl.js.map +1 -1
- package/esm/components/SegmentedControl/SegmentedControl.styles.js +9 -4
- package/esm/components/SegmentedControl/SegmentedControl.styles.js.map +1 -1
- package/esm/components/Select/Select.js +17 -6
- package/esm/components/Select/Select.js.map +1 -1
- package/esm/components/Select/SelectDropdown/SelectDropdown.js +3 -1
- package/esm/components/Select/SelectDropdown/SelectDropdown.js.map +1 -1
- package/esm/components/Select/SelectRightSection/SelectRightSection.js +4 -2
- package/esm/components/Select/SelectRightSection/SelectRightSection.js.map +1 -1
- package/esm/components/Slider/Marks/Marks.styles.js +4 -3
- package/esm/components/Slider/Marks/Marks.styles.js.map +1 -1
- package/esm/components/Slider/Thumb/Thumb.styles.js +3 -3
- package/esm/components/Slider/Thumb/Thumb.styles.js.map +1 -1
- package/esm/components/Slider/Track/Track.styles.js +1 -1
- package/esm/components/Slider/Track/Track.styles.js.map +1 -1
- package/esm/components/Stepper/Step/Step.styles.js +4 -3
- package/esm/components/Stepper/Step/Step.styles.js.map +1 -1
- package/esm/components/Stepper/Stepper.styles.js +1 -1
- package/esm/components/Stepper/Stepper.styles.js.map +1 -1
- package/esm/components/Switch/Switch.styles.js +3 -2
- package/esm/components/Switch/Switch.styles.js.map +1 -1
- package/esm/components/Text/Text.styles.js +7 -9
- package/esm/components/Text/Text.styles.js.map +1 -1
- package/esm/components/ThemeIcon/ThemeIcon.styles.js +3 -4
- package/esm/components/ThemeIcon/ThemeIcon.styles.js.map +1 -1
- package/esm/components/Timeline/TimelineItem/TimelineItem.styles.js +70 -67
- package/esm/components/Timeline/TimelineItem/TimelineItem.styles.js.map +1 -1
- package/esm/components/Tooltip/FloatingTooltip/FloatingTooltip.js +40 -32
- package/esm/components/Tooltip/FloatingTooltip/FloatingTooltip.js.map +1 -1
- package/esm/components/Tooltip/FloatingTooltip/FloatingTooltip.styles.js +3 -2
- package/esm/components/Tooltip/FloatingTooltip/FloatingTooltip.styles.js.map +1 -1
- package/esm/components/Tooltip/Tooltip.js +2 -2
- package/esm/components/Tooltip/Tooltip.js.map +1 -1
- package/esm/components/TransferList/RenderList/RenderList.styles.js +2 -2
- package/esm/components/TransferList/RenderList/RenderList.styles.js.map +1 -1
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/lib/components/ActionIcon/ActionIcon.d.ts.map +1 -1
- package/lib/components/ActionIcon/ActionIcon.styles.d.ts.map +1 -1
- package/lib/components/Alert/Alert.d.ts.map +1 -1
- package/lib/components/Alert/Alert.styles.d.ts.map +1 -1
- package/lib/components/AppShell/HorizontalSection/HorizontalSection.d.ts.map +1 -1
- package/lib/components/AppShell/HorizontalSection/HorizontalSection.styles.d.ts +1 -0
- package/lib/components/AppShell/HorizontalSection/HorizontalSection.styles.d.ts.map +1 -1
- package/lib/components/Autocomplete/Autocomplete.d.ts.map +1 -1
- package/lib/components/Avatar/Avatar.styles.d.ts.map +1 -1
- package/lib/components/Badge/Badge.styles.d.ts.map +1 -1
- package/lib/components/Button/Button.d.ts.map +1 -1
- package/lib/components/Button/Button.styles.d.ts.map +1 -1
- package/lib/components/Checkbox/Checkbox.styles.d.ts.map +1 -1
- package/lib/components/Chips/Chip/Chip.styles.d.ts.map +1 -1
- package/lib/components/Code/Code.styles.d.ts.map +1 -1
- package/lib/components/Container/Container.d.ts.map +1 -1
- package/lib/components/Container/Container.styles.d.ts.map +1 -1
- package/lib/components/Divider/Divider.styles.d.ts.map +1 -1
- package/lib/components/Drawer/Drawer.d.ts +4 -2
- package/lib/components/Drawer/Drawer.d.ts.map +1 -1
- package/lib/components/Grid/Col/Col.d.ts +1 -4
- package/lib/components/Grid/Col/Col.d.ts.map +1 -1
- package/lib/components/Indicator/Indicator.d.ts +29 -0
- package/lib/components/Indicator/Indicator.d.ts.map +1 -0
- package/lib/components/Indicator/Indicator.styles.d.ts +19 -0
- package/lib/components/Indicator/Indicator.styles.d.ts.map +1 -0
- package/lib/components/Indicator/Indicator.types.d.ts +5 -0
- package/lib/components/Indicator/Indicator.types.d.ts.map +1 -0
- package/lib/components/Indicator/index.d.ts +4 -0
- package/lib/components/Indicator/index.d.ts.map +1 -0
- package/lib/components/InputWrapper/InputWrapper.d.ts.map +1 -1
- package/lib/components/Loader/Loader.d.ts.map +1 -1
- package/lib/components/Menu/MenuItem/MenuItem.styles.d.ts.map +1 -1
- package/lib/components/Modal/Modal.d.ts +4 -2
- package/lib/components/Modal/Modal.d.ts.map +1 -1
- package/lib/components/MultiSelect/MultiSelect.d.ts +2 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts.map +1 -1
- package/lib/components/MultiSelect/MultiSelect.styles.d.ts.map +1 -1
- package/lib/components/Notification/Notification.styles.d.ts +0 -1
- package/lib/components/Notification/Notification.styles.d.ts.map +1 -1
- package/lib/components/NumberInput/NumberInput.d.ts.map +1 -1
- package/lib/components/Pagination/Pagination.styles.d.ts.map +1 -1
- package/lib/components/Popper/Popper.d.ts +1 -6
- package/lib/components/Popper/Popper.d.ts.map +1 -1
- package/lib/components/Progress/Progress.styles.d.ts.map +1 -1
- package/lib/components/RadioGroup/Radio/Radio.styles.d.ts.map +1 -1
- package/lib/components/RadioGroup/RadioGroup.d.ts.map +1 -1
- package/lib/components/SegmentedControl/SegmentedControl.d.ts +1 -0
- package/lib/components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/lib/components/SegmentedControl/SegmentedControl.styles.d.ts.map +1 -1
- package/lib/components/Select/Select.d.ts +4 -0
- package/lib/components/Select/Select.d.ts.map +1 -1
- package/lib/components/Select/SelectDropdown/SelectDropdown.d.ts +1 -0
- package/lib/components/Select/SelectDropdown/SelectDropdown.d.ts.map +1 -1
- package/lib/components/Select/SelectRightSection/SelectRightSection.d.ts +2 -1
- package/lib/components/Select/SelectRightSection/SelectRightSection.d.ts.map +1 -1
- package/lib/components/Slider/Marks/Marks.styles.d.ts.map +1 -1
- package/lib/components/Slider/Thumb/Thumb.styles.d.ts.map +1 -1
- package/lib/components/Stepper/Step/Step.styles.d.ts.map +1 -1
- package/lib/components/Switch/Switch.styles.d.ts.map +1 -1
- package/lib/components/Text/Text.styles.d.ts.map +1 -1
- package/lib/components/ThemeIcon/ThemeIcon.styles.d.ts.map +1 -1
- package/lib/components/Timeline/TimelineItem/TimelineItem.styles.d.ts.map +1 -1
- package/lib/components/Tooltip/FloatingTooltip/FloatingTooltip.d.ts +14 -4
- package/lib/components/Tooltip/FloatingTooltip/FloatingTooltip.d.ts.map +1 -1
- package/lib/components/Tooltip/FloatingTooltip/FloatingTooltip.styles.d.ts.map +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.styles.js","sources":["../../../src/components/Stepper/Stepper.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, MantineSize } from '@mantine/styles';\nimport { iconSizes } from './Step/Step.styles';\n\nexport interface StepperStylesParams {\n contentPadding: MantineNumberSize;\n iconSize?: number;\n size: MantineSize;\n color: MantineColor;\n orientation: 'vertical' | 'horizontal';\n iconPosition: 'right' | 'left';\n breakpoint: MantineNumberSize;\n}\n\nexport default createStyles(\n (\n theme,\n {\n contentPadding,\n color,\n orientation,\n iconPosition,\n iconSize,\n size,\n breakpoint,\n }: StepperStylesParams\n ) => {\n const shouldBeResponsive = typeof breakpoint !== 'undefined';\n const breakpointValue = theme.fn.size({ size: breakpoint, sizes: theme.breakpoints });\n const separatorOffset =\n typeof iconSize !== 'undefined'\n ? iconSize / 2 - 1\n : theme.fn.size({ size, sizes: iconSizes }) / 2 - 1;\n\n const verticalOrientationStyles = {\n steps: {\n flexDirection: 'column',\n alignItems: iconPosition === 'left' ? 'flex-start' : 'flex-end',\n },\n\n separator: {\n width: 2,\n minHeight: theme.spacing.xl,\n marginLeft: iconPosition === 'left' ? separatorOffset : 0,\n marginRight: iconPosition === 'right' ? separatorOffset : 0,\n marginTop: theme.spacing.xs / 2,\n marginBottom: theme.spacing.xs / 2,\n },\n } as const;\n\n const responsiveStyles = {\n steps: {\n [`@media (max-width: ${breakpointValue}px)`]: verticalOrientationStyles.steps,\n },\n\n separator: {\n [`@media (max-width: ${breakpointValue}px)`]: verticalOrientationStyles.separator,\n },\n } as const;\n\n return {\n root: {},\n\n steps: {\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n ...(orientation === 'vertical' ? verticalOrientationStyles.steps : null),\n ...(shouldBeResponsive ? responsiveStyles.steps : null),\n },\n\n separator: {\n boxSizing: 'border-box',\n transition: 'background-color 150ms ease',\n flex: 1,\n height: 2,\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n marginLeft: theme.spacing.md,\n marginRight: theme.spacing.md,\n ...(orientation === 'vertical' ? verticalOrientationStyles.separator : null),\n ...(shouldBeResponsive ? responsiveStyles.separator : null),\n },\n\n separatorActive: {\n backgroundColor: theme.fn.
|
|
1
|
+
{"version":3,"file":"Stepper.styles.js","sources":["../../../src/components/Stepper/Stepper.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, MantineSize } from '@mantine/styles';\nimport { iconSizes } from './Step/Step.styles';\n\nexport interface StepperStylesParams {\n contentPadding: MantineNumberSize;\n iconSize?: number;\n size: MantineSize;\n color: MantineColor;\n orientation: 'vertical' | 'horizontal';\n iconPosition: 'right' | 'left';\n breakpoint: MantineNumberSize;\n}\n\nexport default createStyles(\n (\n theme,\n {\n contentPadding,\n color,\n orientation,\n iconPosition,\n iconSize,\n size,\n breakpoint,\n }: StepperStylesParams\n ) => {\n const shouldBeResponsive = typeof breakpoint !== 'undefined';\n const breakpointValue = theme.fn.size({ size: breakpoint, sizes: theme.breakpoints });\n const separatorOffset =\n typeof iconSize !== 'undefined'\n ? iconSize / 2 - 1\n : theme.fn.size({ size, sizes: iconSizes }) / 2 - 1;\n\n const verticalOrientationStyles = {\n steps: {\n flexDirection: 'column',\n alignItems: iconPosition === 'left' ? 'flex-start' : 'flex-end',\n },\n\n separator: {\n width: 2,\n minHeight: theme.spacing.xl,\n marginLeft: iconPosition === 'left' ? separatorOffset : 0,\n marginRight: iconPosition === 'right' ? separatorOffset : 0,\n marginTop: theme.spacing.xs / 2,\n marginBottom: theme.spacing.xs / 2,\n },\n } as const;\n\n const responsiveStyles = {\n steps: {\n [`@media (max-width: ${breakpointValue}px)`]: verticalOrientationStyles.steps,\n },\n\n separator: {\n [`@media (max-width: ${breakpointValue}px)`]: verticalOrientationStyles.separator,\n },\n } as const;\n\n return {\n root: {},\n\n steps: {\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n ...(orientation === 'vertical' ? verticalOrientationStyles.steps : null),\n ...(shouldBeResponsive ? responsiveStyles.steps : null),\n },\n\n separator: {\n boxSizing: 'border-box',\n transition: 'background-color 150ms ease',\n flex: 1,\n height: 2,\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n marginLeft: theme.spacing.md,\n marginRight: theme.spacing.md,\n ...(orientation === 'vertical' ? verticalOrientationStyles.separator : null),\n ...(shouldBeResponsive ? responsiveStyles.separator : null),\n },\n\n separatorActive: {\n backgroundColor: theme.fn.variant({ variant: 'filled', color }).background,\n },\n\n content: {\n ...theme.fn.fontStyles(),\n paddingTop: theme.fn.size({ size: contentPadding, sizes: theme.spacing }),\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -54,6 +54,7 @@ const sizes = Object.keys(switchHeight).reduce((acc, size) => {
|
|
|
54
54
|
var useStyles = createStyles((theme, { size, radius, color, offLabel, onLabel }) => {
|
|
55
55
|
const handleSize = theme.fn.size({ size, sizes: handleSizes });
|
|
56
56
|
const borderRadius = theme.fn.size({ size: radius, sizes: theme.radius });
|
|
57
|
+
const colors = theme.fn.variant({ variant: "filled", color });
|
|
57
58
|
return {
|
|
58
59
|
root: {
|
|
59
60
|
display: "flex",
|
|
@@ -109,8 +110,8 @@ var useStyles = createStyles((theme, { size, radius, color, offLabel, onLabel })
|
|
|
109
110
|
transition: `color 150ms ${theme.transitionTimingFunction}`
|
|
110
111
|
},
|
|
111
112
|
"&:checked": {
|
|
112
|
-
backgroundColor:
|
|
113
|
-
borderColor:
|
|
113
|
+
backgroundColor: colors.background,
|
|
114
|
+
borderColor: colors.background,
|
|
114
115
|
"&::before": {
|
|
115
116
|
transform: `translateX(${theme.fn.size({ size, sizes: switchWidth }) - theme.fn.size({ size, sizes: handleSizes }) - (size === "xs" ? 3 : 4)}px)`,
|
|
116
117
|
borderColor: theme.white
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.styles.js","sources":["../../../src/components/Switch/Switch.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineSize, MantineColor } from '@mantine/styles';\n\nexport interface SwitchStylesParams {\n color: MantineColor;\n size: MantineSize;\n radius: MantineNumberSize;\n offLabel: string;\n onLabel: string;\n}\n\nconst switchHeight = {\n xs: 16,\n sm: 20,\n md: 24,\n lg: 30,\n xl: 36,\n};\n\nconst switchWidth = {\n xs: 30,\n sm: 38,\n md: 46,\n lg: 56,\n xl: 68,\n};\n\nconst handleSizes = {\n xs: 12,\n sm: 14,\n md: 18,\n lg: 22,\n xl: 28,\n};\n\nconst labelFontSizes = {\n xs: 5,\n sm: 6,\n md: 7,\n lg: 9,\n xl: 11,\n};\n\nexport const sizes = Object.keys(switchHeight).reduce((acc, size) => {\n acc[size] = { width: switchWidth[size], height: switchHeight[size] };\n return acc;\n}, {} as Record<MantineSize, { width: number; height: number }>);\n\nexport default createStyles(\n (theme, { size, radius, color, offLabel, onLabel }: SwitchStylesParams) => {\n const handleSize = theme.fn.size({ size, sizes: handleSizes });\n const borderRadius = theme.fn.size({ size: radius, sizes: theme.radius });\n\n return {\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n\n input: {\n ...theme.fn.focusStyles(),\n overflow: 'hidden',\n WebkitTapHighlightColor: 'transparent',\n position: 'relative',\n borderRadius,\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n border: `1px solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n }`,\n height: theme.fn.size({ size, sizes: switchHeight }),\n width: theme.fn.size({ size, sizes: switchWidth }),\n minWidth: theme.fn.size({ size, sizes: switchWidth }),\n margin: 0,\n transitionProperty: 'background-color, border-color',\n transitionTimingFunction: theme.transitionTimingFunction,\n transitionDuration: '150ms',\n boxSizing: 'border-box',\n appearance: 'none',\n display: 'flex',\n alignItems: 'center',\n fontSize: theme.fn.size({ size, sizes: labelFontSizes }),\n fontWeight: 600,\n\n '&::before': {\n zIndex: 1,\n borderRadius,\n boxSizing: 'border-box',\n content: \"''\",\n display: 'block',\n backgroundColor: theme.white,\n height: handleSize,\n width: handleSize,\n border: `1px solid ${theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[3]}`,\n transition: `transform 150ms ${theme.transitionTimingFunction}`,\n transform: `translateX(${size === 'xs' ? 1 : 2}px)`,\n\n '@media (prefers-reduced-motion)': {\n transitionDuration: '0ms',\n },\n },\n\n '&::after': {\n position: 'absolute',\n zIndex: 0,\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n lineHeight: 0,\n right: '10%',\n transform: 'translateX(0)',\n content: offLabel ? `'${offLabel}'` : \"''\",\n color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[6],\n transition: `color 150ms ${theme.transitionTimingFunction}`,\n },\n\n '&:checked': {\n backgroundColor: theme.fn.themeColor(color, 6),\n borderColor: theme.fn.themeColor(color, 6),\n\n '&::before': {\n transform: `translateX(${\n theme.fn.size({ size, sizes: switchWidth }) -\n theme.fn.size({ size, sizes: handleSizes }) -\n (size === 'xs' ? 3 : 4) // borderWidth: 2 + padding: 2 * 2\n }px)`,\n borderColor: theme.white,\n },\n\n '&::after': {\n transform: 'translateX(-200%)',\n content: onLabel ? `'${onLabel}'` : \"''\",\n color: theme.white,\n },\n },\n\n '&:disabled': {\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n cursor: 'not-allowed',\n\n '&::before': {\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[0],\n },\n },\n },\n\n label: {\n ...theme.fn.fontStyles(),\n WebkitTapHighlightColor: 'transparent',\n fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n fontFamily: theme.fontFamily,\n paddingLeft: theme.spacing.sm,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Switch.styles.js","sources":["../../../src/components/Switch/Switch.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineSize, MantineColor } from '@mantine/styles';\n\nexport interface SwitchStylesParams {\n color: MantineColor;\n size: MantineSize;\n radius: MantineNumberSize;\n offLabel: string;\n onLabel: string;\n}\n\nconst switchHeight = {\n xs: 16,\n sm: 20,\n md: 24,\n lg: 30,\n xl: 36,\n};\n\nconst switchWidth = {\n xs: 30,\n sm: 38,\n md: 46,\n lg: 56,\n xl: 68,\n};\n\nconst handleSizes = {\n xs: 12,\n sm: 14,\n md: 18,\n lg: 22,\n xl: 28,\n};\n\nconst labelFontSizes = {\n xs: 5,\n sm: 6,\n md: 7,\n lg: 9,\n xl: 11,\n};\n\nexport const sizes = Object.keys(switchHeight).reduce((acc, size) => {\n acc[size] = { width: switchWidth[size], height: switchHeight[size] };\n return acc;\n}, {} as Record<MantineSize, { width: number; height: number }>);\n\nexport default createStyles(\n (theme, { size, radius, color, offLabel, onLabel }: SwitchStylesParams) => {\n const handleSize = theme.fn.size({ size, sizes: handleSizes });\n const borderRadius = theme.fn.size({ size: radius, sizes: theme.radius });\n const colors = theme.fn.variant({ variant: 'filled', color });\n\n return {\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n\n input: {\n ...theme.fn.focusStyles(),\n overflow: 'hidden',\n WebkitTapHighlightColor: 'transparent',\n position: 'relative',\n borderRadius,\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n border: `1px solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n }`,\n height: theme.fn.size({ size, sizes: switchHeight }),\n width: theme.fn.size({ size, sizes: switchWidth }),\n minWidth: theme.fn.size({ size, sizes: switchWidth }),\n margin: 0,\n transitionProperty: 'background-color, border-color',\n transitionTimingFunction: theme.transitionTimingFunction,\n transitionDuration: '150ms',\n boxSizing: 'border-box',\n appearance: 'none',\n display: 'flex',\n alignItems: 'center',\n fontSize: theme.fn.size({ size, sizes: labelFontSizes }),\n fontWeight: 600,\n\n '&::before': {\n zIndex: 1,\n borderRadius,\n boxSizing: 'border-box',\n content: \"''\",\n display: 'block',\n backgroundColor: theme.white,\n height: handleSize,\n width: handleSize,\n border: `1px solid ${theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[3]}`,\n transition: `transform 150ms ${theme.transitionTimingFunction}`,\n transform: `translateX(${size === 'xs' ? 1 : 2}px)`,\n\n '@media (prefers-reduced-motion)': {\n transitionDuration: '0ms',\n },\n },\n\n '&::after': {\n position: 'absolute',\n zIndex: 0,\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n lineHeight: 0,\n right: '10%',\n transform: 'translateX(0)',\n content: offLabel ? `'${offLabel}'` : \"''\",\n color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[6],\n transition: `color 150ms ${theme.transitionTimingFunction}`,\n },\n\n '&:checked': {\n backgroundColor: colors.background,\n borderColor: colors.background,\n\n '&::before': {\n transform: `translateX(${\n theme.fn.size({ size, sizes: switchWidth }) -\n theme.fn.size({ size, sizes: handleSizes }) -\n (size === 'xs' ? 3 : 4) // borderWidth: 2 + padding: 2 * 2\n }px)`,\n borderColor: theme.white,\n },\n\n '&::after': {\n transform: 'translateX(-200%)',\n content: onLabel ? `'${onLabel}'` : \"''\",\n color: theme.white,\n },\n },\n\n '&:disabled': {\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n cursor: 'not-allowed',\n\n '&::before': {\n borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n backgroundColor:\n theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[0],\n },\n },\n },\n\n label: {\n ...theme.fn.fontStyles(),\n WebkitTapHighlightColor: 'transparent',\n fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n fontFamily: theme.fontFamily,\n paddingLeft: theme.spacing.sm,\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createStyles
|
|
1
|
+
import { createStyles } from '@mantine/styles';
|
|
2
2
|
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
4
|
var __defProps = Object.defineProperties;
|
|
@@ -52,13 +52,12 @@ var useStyles = createStyles((theme, {
|
|
|
52
52
|
transform,
|
|
53
53
|
align
|
|
54
54
|
}) => {
|
|
55
|
-
const colors =
|
|
56
|
-
theme,
|
|
55
|
+
const colors = theme.fn.variant({
|
|
57
56
|
variant: "gradient",
|
|
58
57
|
gradient: { from: gradientFrom, to: gradientTo, deg: gradientDeg }
|
|
59
58
|
});
|
|
60
59
|
return {
|
|
61
|
-
root: __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, theme.fn.fontStyles()), theme.fn.focusStyles()), getLineClamp(lineClamp)), {
|
|
60
|
+
root: __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, theme.fn.fontStyles()), theme.fn.focusStyles()), getLineClamp(lineClamp)), {
|
|
62
61
|
color: getTextColor({ color, theme, variant }),
|
|
63
62
|
fontFamily: inherit ? "inherit" : theme.fontFamily,
|
|
64
63
|
fontSize: inherit ? "inherit" : theme.fontSizes[size],
|
|
@@ -67,11 +66,10 @@ var useStyles = createStyles((theme, {
|
|
|
67
66
|
WebkitTapHighlightColor: "transparent",
|
|
68
67
|
fontWeight: inherit ? "inherit" : weight,
|
|
69
68
|
textTransform: transform,
|
|
70
|
-
textAlign: align
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}),
|
|
69
|
+
textAlign: align
|
|
70
|
+
}), theme.fn.hover(variant === "link" && underline === void 0 ? {
|
|
71
|
+
textDecoration: "underline"
|
|
72
|
+
} : void 0)),
|
|
75
73
|
gradient: {
|
|
76
74
|
backgroundImage: colors.background,
|
|
77
75
|
WebkitBackgroundClip: "text",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.styles.js","sources":["../../../src/components/Text/Text.styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"Text.styles.js","sources":["../../../src/components/Text/Text.styles.ts"],"sourcesContent":["import { createStyles, MantineTheme, MantineSize, MantineColor, CSSObject } from '@mantine/styles';\n\nexport interface TextStylesParams {\n color: MantineColor;\n variant: 'text' | 'link' | 'gradient';\n size: MantineSize;\n lineClamp: number;\n inline: boolean;\n inherit: boolean;\n underline: boolean;\n gradientFrom: string;\n gradientTo: string;\n gradientDeg: number;\n transform: 'capitalize' | 'uppercase' | 'lowercase' | 'none';\n align: 'left' | 'center' | 'right' | 'justify';\n weight: React.CSSProperties['fontWeight'];\n}\n\ninterface GetTextColor {\n theme: MantineTheme;\n color: MantineColor;\n variant: TextStylesParams['variant'];\n}\n\nfunction getTextColor({ theme, color, variant }: GetTextColor) {\n if (color === 'dimmed') {\n return theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6];\n }\n\n return color in theme.colors\n ? theme.colors[color][theme.colorScheme === 'dark' ? 5 : 7]\n : variant === 'link'\n ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 7]\n : color || 'inherit';\n}\n\nfunction getLineClamp(lineClamp: number): CSSObject {\n if (typeof lineClamp === 'number') {\n return {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n display: '-webkit-box',\n WebkitLineClamp: lineClamp,\n WebkitBoxOrient: 'vertical',\n };\n }\n\n return null;\n}\n\nexport default createStyles(\n (\n theme,\n {\n color,\n variant,\n size,\n lineClamp,\n inline,\n inherit,\n underline,\n gradientDeg,\n gradientTo,\n gradientFrom,\n weight,\n transform,\n align,\n }: TextStylesParams\n ) => {\n const colors = theme.fn.variant({\n variant: 'gradient',\n gradient: { from: gradientFrom, to: gradientTo, deg: gradientDeg },\n });\n\n return {\n root: {\n ...theme.fn.fontStyles(),\n ...theme.fn.focusStyles(),\n ...getLineClamp(lineClamp),\n color: getTextColor({ color, theme, variant }),\n fontFamily: inherit ? 'inherit' : theme.fontFamily,\n fontSize: inherit ? 'inherit' : theme.fontSizes[size],\n lineHeight: inherit ? 'inherit' : inline ? 1 : theme.lineHeight,\n textDecoration: underline ? 'underline' : 'none',\n WebkitTapHighlightColor: 'transparent',\n fontWeight: inherit ? 'inherit' : weight,\n textTransform: transform,\n textAlign: align,\n\n ...theme.fn.hover(\n variant === 'link' && underline === undefined\n ? {\n textDecoration: 'underline',\n }\n : undefined\n ),\n },\n\n gradient: {\n backgroundImage: colors.background,\n WebkitBackgroundClip: 'text',\n WebkitTextFillColor: 'transparent',\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createStyles
|
|
1
|
+
import { createStyles } from '@mantine/styles';
|
|
2
2
|
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
4
|
var __defProps = Object.defineProperties;
|
|
@@ -27,10 +27,9 @@ const sizes = {
|
|
|
27
27
|
xl: 40
|
|
28
28
|
};
|
|
29
29
|
var useStyles = createStyles((theme, { color, size, radius, gradientFrom, gradientTo, gradientDeg, variant }) => {
|
|
30
|
-
const colors =
|
|
31
|
-
theme,
|
|
32
|
-
color,
|
|
30
|
+
const colors = theme.fn.variant({
|
|
33
31
|
variant,
|
|
32
|
+
color,
|
|
34
33
|
gradient: { from: gradientFrom, to: gradientTo, deg: gradientDeg }
|
|
35
34
|
});
|
|
36
35
|
const iconSize = theme.fn.size({ size, sizes });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeIcon.styles.js","sources":["../../../src/components/ThemeIcon/ThemeIcon.styles.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ThemeIcon.styles.js","sources":["../../../src/components/ThemeIcon/ThemeIcon.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor } from '@mantine/styles';\n\nexport type ThemeIconVariant = 'filled' | 'light' | 'gradient' | 'outline';\n\nexport interface ThemeIconStylesParams {\n color: MantineColor;\n size: MantineNumberSize;\n radius: MantineNumberSize;\n variant: ThemeIconVariant;\n gradientFrom: string;\n gradientTo: string;\n gradientDeg: number;\n}\n\nexport const sizes = {\n xs: 16,\n sm: 20,\n md: 26,\n lg: 32,\n xl: 40,\n};\n\nexport default createStyles(\n (\n theme,\n { color, size, radius, gradientFrom, gradientTo, gradientDeg, variant }: ThemeIconStylesParams\n ) => {\n const colors = theme.fn.variant({\n variant,\n color,\n gradient: { from: gradientFrom, to: gradientTo, deg: gradientDeg },\n });\n\n const iconSize = theme.fn.size({ size, sizes });\n\n return {\n root: {\n ...theme.fn.fontStyles(),\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n boxSizing: 'border-box',\n width: iconSize,\n height: iconSize,\n minWidth: iconSize,\n minHeight: iconSize,\n borderRadius: theme.fn.radius(radius),\n backgroundColor: colors.background,\n color: colors.color,\n backgroundImage: variant === 'gradient' ? colors.background : null,\n border: `1px solid ${colors.border}`,\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -1,78 +1,81 @@
|
|
|
1
1
|
import { createStyles } from '@mantine/styles';
|
|
2
2
|
|
|
3
|
-
var useStyles = createStyles((theme, { bulletSize, color, radius, align, lineVariant, lineWidth }, getRef) =>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
ref: getRef("itemBullet"),
|
|
14
|
-
boxSizing: "border-box",
|
|
15
|
-
width: bulletSize,
|
|
16
|
-
height: bulletSize,
|
|
17
|
-
borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
|
|
18
|
-
border: `${lineWidth}px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`,
|
|
19
|
-
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
|
|
20
|
-
position: "absolute",
|
|
21
|
-
top: 0,
|
|
22
|
-
left: align === "left" ? -bulletSize / 2 - lineWidth / 2 : "auto",
|
|
23
|
-
right: align === "right" ? -bulletSize / 2 - lineWidth / 2 : "auto",
|
|
24
|
-
display: "flex",
|
|
25
|
-
alignItems: "center",
|
|
26
|
-
justifyContent: "center",
|
|
27
|
-
color: theme.white
|
|
28
|
-
},
|
|
29
|
-
item: {
|
|
30
|
-
position: "relative",
|
|
31
|
-
boxSizing: "border-box",
|
|
32
|
-
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
|
|
33
|
-
paddingLeft: align === "left" ? theme.spacing.xl : 0,
|
|
34
|
-
paddingRight: align === "right" ? theme.spacing.xl : 0,
|
|
35
|
-
textAlign: align,
|
|
36
|
-
"&:not(:last-of-type)::before": {
|
|
37
|
-
display: "block"
|
|
3
|
+
var useStyles = createStyles((theme, { bulletSize, color, radius, align, lineVariant, lineWidth }, getRef) => {
|
|
4
|
+
const colors = theme.fn.variant({ variant: "filled", color });
|
|
5
|
+
return {
|
|
6
|
+
itemBody: {},
|
|
7
|
+
itemContent: {},
|
|
8
|
+
itemBulletWithChild: {
|
|
9
|
+
ref: getRef("itemBulletWithChild"),
|
|
10
|
+
borderWidth: 1,
|
|
11
|
+
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3],
|
|
12
|
+
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
|
|
38
13
|
},
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
},
|
|
42
|
-
"&::before": {
|
|
14
|
+
itemBullet: {
|
|
15
|
+
ref: getRef("itemBullet"),
|
|
43
16
|
boxSizing: "border-box",
|
|
17
|
+
width: bulletSize,
|
|
18
|
+
height: bulletSize,
|
|
19
|
+
borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
|
|
20
|
+
border: `${lineWidth}px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`,
|
|
21
|
+
backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
|
|
44
22
|
position: "absolute",
|
|
45
23
|
top: 0,
|
|
46
|
-
left: align === "left" ? -lineWidth : "auto",
|
|
47
|
-
right: align === "right" ? -lineWidth : "auto",
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
display: "none"
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
itemLineActive: {
|
|
55
|
-
"&::before": {
|
|
56
|
-
borderLeftColor: theme.fn.themeColor(color, theme.colorScheme === "dark" ? 6 : 7)
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
itemActive: {
|
|
60
|
-
[`& .${getRef("itemBullet")}`]: {
|
|
61
|
-
borderColor: theme.fn.themeColor(color, theme.colorScheme === "dark" ? 6 : 7),
|
|
62
|
-
backgroundColor: theme.white
|
|
63
|
-
},
|
|
64
|
-
[`& .${getRef("itemBulletWithChild")}`]: {
|
|
65
|
-
backgroundColor: theme.fn.themeColor(color, theme.colorScheme === "dark" ? 6 : 7),
|
|
24
|
+
left: align === "left" ? -bulletSize / 2 - lineWidth / 2 : "auto",
|
|
25
|
+
right: align === "right" ? -bulletSize / 2 - lineWidth / 2 : "auto",
|
|
26
|
+
display: "flex",
|
|
27
|
+
alignItems: "center",
|
|
28
|
+
justifyContent: "center",
|
|
66
29
|
color: theme.white
|
|
30
|
+
},
|
|
31
|
+
item: {
|
|
32
|
+
position: "relative",
|
|
33
|
+
boxSizing: "border-box",
|
|
34
|
+
color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
|
|
35
|
+
paddingLeft: align === "left" ? theme.spacing.xl : 0,
|
|
36
|
+
paddingRight: align === "right" ? theme.spacing.xl : 0,
|
|
37
|
+
textAlign: align,
|
|
38
|
+
"&:not(:last-of-type)::before": {
|
|
39
|
+
display: "block"
|
|
40
|
+
},
|
|
41
|
+
"&:not(:first-of-type)": {
|
|
42
|
+
marginTop: theme.spacing.xl
|
|
43
|
+
},
|
|
44
|
+
"&::before": {
|
|
45
|
+
boxSizing: "border-box",
|
|
46
|
+
position: "absolute",
|
|
47
|
+
top: 0,
|
|
48
|
+
left: align === "left" ? -lineWidth : "auto",
|
|
49
|
+
right: align === "right" ? -lineWidth : "auto",
|
|
50
|
+
bottom: -theme.spacing.xl,
|
|
51
|
+
borderLeft: `${lineWidth}px ${lineVariant} ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`,
|
|
52
|
+
content: '""',
|
|
53
|
+
display: "none"
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
itemLineActive: {
|
|
57
|
+
"&::before": {
|
|
58
|
+
borderLeftColor: colors.background
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
itemActive: {
|
|
62
|
+
[`& .${getRef("itemBullet")}`]: {
|
|
63
|
+
borderColor: colors.background,
|
|
64
|
+
backgroundColor: theme.white
|
|
65
|
+
},
|
|
66
|
+
[`& .${getRef("itemBulletWithChild")}`]: {
|
|
67
|
+
backgroundColor: colors.background,
|
|
68
|
+
color: theme.white
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
itemTitle: {
|
|
72
|
+
fontWeight: 500,
|
|
73
|
+
lineHeight: 1,
|
|
74
|
+
marginBottom: theme.spacing.xs / 2,
|
|
75
|
+
textAlign: align
|
|
67
76
|
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
fontWeight: 500,
|
|
71
|
-
lineHeight: 1,
|
|
72
|
-
marginBottom: theme.spacing.xs / 2,
|
|
73
|
-
textAlign: align
|
|
74
|
-
}
|
|
75
|
-
}));
|
|
77
|
+
};
|
|
78
|
+
});
|
|
76
79
|
|
|
77
80
|
export default useStyles;
|
|
78
81
|
//# sourceMappingURL=TimelineItem.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineItem.styles.js","sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.styles.ts"],"sourcesContent":["import { createStyles, MantineColor, MantineNumberSize } from '@mantine/styles';\n\ninterface TimelineItemStyles {\n bulletSize: number;\n color: MantineColor;\n radius: MantineNumberSize;\n align: 'right' | 'left';\n lineVariant: 'solid' | 'dashed' | 'dotted';\n lineWidth: number;\n}\n\nexport default createStyles(\n (\n theme,\n { bulletSize, color, radius, align, lineVariant, lineWidth }: TimelineItemStyles,\n getRef\n ) => ({\n itemBody: {},\n
|
|
1
|
+
{"version":3,"file":"TimelineItem.styles.js","sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.styles.ts"],"sourcesContent":["import { createStyles, MantineColor, MantineNumberSize } from '@mantine/styles';\n\ninterface TimelineItemStyles {\n bulletSize: number;\n color: MantineColor;\n radius: MantineNumberSize;\n align: 'right' | 'left';\n lineVariant: 'solid' | 'dashed' | 'dotted';\n lineWidth: number;\n}\n\nexport default createStyles(\n (\n theme,\n { bulletSize, color, radius, align, lineVariant, lineWidth }: TimelineItemStyles,\n getRef\n ) => {\n const colors = theme.fn.variant({ variant: 'filled', color });\n\n return {\n itemBody: {},\n itemContent: {},\n\n itemBulletWithChild: {\n ref: getRef('itemBulletWithChild'),\n borderWidth: 1,\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3],\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n },\n\n itemBullet: {\n ref: getRef('itemBullet'),\n boxSizing: 'border-box',\n width: bulletSize,\n height: bulletSize,\n borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n border: `${lineWidth}px solid ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n }`,\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n position: 'absolute',\n top: 0,\n left: align === 'left' ? -bulletSize / 2 - lineWidth / 2 : 'auto',\n right: align === 'right' ? -bulletSize / 2 - lineWidth / 2 : 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n color: theme.white,\n },\n\n item: {\n position: 'relative',\n boxSizing: 'border-box',\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n paddingLeft: align === 'left' ? theme.spacing.xl : 0,\n paddingRight: align === 'right' ? theme.spacing.xl : 0,\n textAlign: align,\n\n '&:not(:last-of-type)::before': {\n display: 'block',\n },\n\n '&:not(:first-of-type)': {\n marginTop: theme.spacing.xl,\n },\n\n '&::before': {\n boxSizing: 'border-box',\n position: 'absolute',\n top: 0,\n left: align === 'left' ? -lineWidth : 'auto',\n right: align === 'right' ? -lineWidth : 'auto',\n bottom: -theme.spacing.xl,\n borderLeft: `${lineWidth}px ${lineVariant} ${\n theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n }`,\n content: '\"\"',\n display: 'none',\n },\n },\n\n itemLineActive: {\n '&::before': {\n borderLeftColor: colors.background,\n },\n },\n\n itemActive: {\n [`& .${getRef('itemBullet')}`]: {\n borderColor: colors.background,\n backgroundColor: theme.white,\n },\n\n [`& .${getRef('itemBulletWithChild')}`]: {\n backgroundColor: colors.background,\n color: theme.white,\n },\n },\n\n itemTitle: {\n fontWeight: 500,\n lineHeight: 1,\n marginBottom: theme.spacing.xs / 2,\n textAlign: align,\n },\n };\n }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -3,9 +3,11 @@ import { getDefaultZIndex, useMantineDefaultProps } from '@mantine/styles';
|
|
|
3
3
|
import { useMergedRef, useMouse } from '@mantine/hooks';
|
|
4
4
|
import useStyles from './FloatingTooltip.styles.js';
|
|
5
5
|
import { Box } from '../../Box/Box.js';
|
|
6
|
-
import {
|
|
6
|
+
import { Transition } from '../../Transition/Transition.js';
|
|
7
7
|
|
|
8
8
|
var __defProp = Object.defineProperty;
|
|
9
|
+
var __defProps = Object.defineProperties;
|
|
10
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
9
11
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
10
12
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
13
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
@@ -21,6 +23,7 @@ var __spreadValues = (a, b) => {
|
|
|
21
23
|
}
|
|
22
24
|
return a;
|
|
23
25
|
};
|
|
26
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
27
|
var __objRest = (source, exclude) => {
|
|
25
28
|
var target = {};
|
|
26
29
|
for (var prop in source)
|
|
@@ -36,7 +39,6 @@ var __objRest = (source, exclude) => {
|
|
|
36
39
|
const defaultProps = {
|
|
37
40
|
openDelay: 0,
|
|
38
41
|
closeDelay: 0,
|
|
39
|
-
gutter: 0,
|
|
40
42
|
color: "gray",
|
|
41
43
|
disabled: false,
|
|
42
44
|
position: "right",
|
|
@@ -45,8 +47,7 @@ const defaultProps = {
|
|
|
45
47
|
zIndex: getDefaultZIndex("popover"),
|
|
46
48
|
width: "auto",
|
|
47
49
|
wrapLines: false,
|
|
48
|
-
positionDependencies: []
|
|
49
|
-
withinPortal: true
|
|
50
|
+
positionDependencies: []
|
|
50
51
|
};
|
|
51
52
|
const FloatingTooltip = forwardRef((props, ref) => {
|
|
52
53
|
const _a = useMantineDefaultProps("FloatingTooltip", defaultProps, props), {
|
|
@@ -55,7 +56,6 @@ const FloatingTooltip = forwardRef((props, ref) => {
|
|
|
55
56
|
children,
|
|
56
57
|
openDelay,
|
|
57
58
|
closeDelay,
|
|
58
|
-
gutter,
|
|
59
59
|
color,
|
|
60
60
|
radius,
|
|
61
61
|
disabled,
|
|
@@ -67,7 +67,6 @@ const FloatingTooltip = forwardRef((props, ref) => {
|
|
|
67
67
|
width,
|
|
68
68
|
wrapLines,
|
|
69
69
|
positionDependencies,
|
|
70
|
-
withinPortal,
|
|
71
70
|
tooltipRef,
|
|
72
71
|
tooltipId,
|
|
73
72
|
classNames,
|
|
@@ -80,7 +79,6 @@ const FloatingTooltip = forwardRef((props, ref) => {
|
|
|
80
79
|
"children",
|
|
81
80
|
"openDelay",
|
|
82
81
|
"closeDelay",
|
|
83
|
-
"gutter",
|
|
84
82
|
"color",
|
|
85
83
|
"radius",
|
|
86
84
|
"disabled",
|
|
@@ -92,7 +90,6 @@ const FloatingTooltip = forwardRef((props, ref) => {
|
|
|
92
90
|
"width",
|
|
93
91
|
"wrapLines",
|
|
94
92
|
"positionDependencies",
|
|
95
|
-
"withinPortal",
|
|
96
93
|
"tooltipRef",
|
|
97
94
|
"tooltipId",
|
|
98
95
|
"classNames",
|
|
@@ -108,25 +105,40 @@ const FloatingTooltip = forwardRef((props, ref) => {
|
|
|
108
105
|
const [opened, setOpened] = useState(false);
|
|
109
106
|
const { ref: mouseRef, x, y } = useMouse();
|
|
110
107
|
const visible = opened && !disabled;
|
|
111
|
-
const
|
|
112
|
-
const mergedRefs = useMergedRef(ref, setReferenceElement, mouseRef);
|
|
108
|
+
const mergedRefs = useMergedRef(ref, mouseRef);
|
|
113
109
|
const coordinates = useMemo(() => {
|
|
114
|
-
var _a2;
|
|
110
|
+
var _a2, _b;
|
|
115
111
|
const estimatedCursorSize = 32;
|
|
116
|
-
const tooltipWidth = ((_a2 = _tooltipRef.current) == null ? void 0 : _a2.offsetWidth) || 0;
|
|
112
|
+
const tooltipWidth = typeof width === "number" ? width : ((_a2 = _tooltipRef.current) == null ? void 0 : _a2.offsetWidth) || 0;
|
|
113
|
+
const tooltipHeight = ((_b = _tooltipRef.current) == null ? void 0 : _b.offsetHeight) || 0;
|
|
117
114
|
switch (position) {
|
|
118
115
|
case "top":
|
|
119
|
-
return {
|
|
116
|
+
return {
|
|
117
|
+
left: x - tooltipWidth / 2,
|
|
118
|
+
top: y - tooltipHeight
|
|
119
|
+
};
|
|
120
120
|
case "left":
|
|
121
|
-
return {
|
|
121
|
+
return {
|
|
122
|
+
left: x - tooltipWidth - estimatedCursorSize / 2,
|
|
123
|
+
top: y
|
|
124
|
+
};
|
|
122
125
|
case "right":
|
|
123
|
-
return {
|
|
126
|
+
return {
|
|
127
|
+
left: x + estimatedCursorSize / 2,
|
|
128
|
+
top: y
|
|
129
|
+
};
|
|
124
130
|
case "bottom":
|
|
125
|
-
return {
|
|
131
|
+
return {
|
|
132
|
+
left: x - tooltipWidth / 2,
|
|
133
|
+
top: y + tooltipHeight
|
|
134
|
+
};
|
|
126
135
|
default:
|
|
127
|
-
return {
|
|
136
|
+
return {
|
|
137
|
+
left: x || 0,
|
|
138
|
+
top: y || 0
|
|
139
|
+
};
|
|
128
140
|
}
|
|
129
|
-
}, [x, y]);
|
|
141
|
+
}, [x, y, ...positionDependencies]);
|
|
130
142
|
const handleOpen = () => {
|
|
131
143
|
window.clearTimeout(closeTimeoutRef.current);
|
|
132
144
|
if (openDelay !== 0) {
|
|
@@ -164,26 +176,22 @@ const FloatingTooltip = forwardRef((props, ref) => {
|
|
|
164
176
|
onFocusCapture: handleOpen,
|
|
165
177
|
onBlurCapture: handleClose,
|
|
166
178
|
ref: mergedRefs
|
|
167
|
-
}, others), /* @__PURE__ */ React.createElement(
|
|
168
|
-
referenceElement,
|
|
169
|
-
transitionDuration,
|
|
170
|
-
transition,
|
|
179
|
+
}, others), /* @__PURE__ */ React.createElement(Transition, {
|
|
171
180
|
mounted: visible,
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
coordinates
|
|
181
|
+
duration: transitionDuration,
|
|
182
|
+
transition,
|
|
183
|
+
exitDuration: transitionDuration,
|
|
184
|
+
timingFunction: transitionTimingFunction
|
|
185
|
+
}, (transitionStyles) => /* @__PURE__ */ React.createElement("div", {
|
|
186
|
+
style: __spreadProps(__spreadValues({}, transitionStyles), { zIndex, position: "relative" })
|
|
179
187
|
}, /* @__PURE__ */ React.createElement(Box, {
|
|
180
188
|
className: classes.body,
|
|
181
189
|
ref: mergedTooltipRefs,
|
|
182
|
-
sx: {
|
|
190
|
+
sx: __spreadValues({
|
|
183
191
|
whiteSpace: wrapLines ? "normal" : "nowrap",
|
|
184
192
|
width
|
|
185
|
-
}
|
|
186
|
-
}, label)), children);
|
|
193
|
+
}, coordinates)
|
|
194
|
+
}, label))), children);
|
|
187
195
|
});
|
|
188
196
|
FloatingTooltip.displayName = "@mantine/core/FloatingTooltip";
|
|
189
197
|
|