@mantine/core 5.0.2 → 5.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/Accordion/AccordionControl/AccordionControl.js +1 -0
- package/cjs/Accordion/AccordionControl/AccordionControl.js.map +1 -1
- package/cjs/ActionIcon/ActionIcon.styles.js +3 -3
- package/cjs/ActionIcon/ActionIcon.styles.js.map +1 -1
- package/cjs/AppShell/HorizontalSection/HorizontalSection.js +4 -1
- package/cjs/AppShell/HorizontalSection/HorizontalSection.js.map +1 -1
- package/cjs/AppShell/HorizontalSection/HorizontalSection.styles.js +11 -2
- package/cjs/AppShell/HorizontalSection/HorizontalSection.styles.js.map +1 -1
- package/cjs/AppShell/VerticalSection/VerticalSection.js +3 -1
- package/cjs/AppShell/VerticalSection/VerticalSection.js.map +1 -1
- package/cjs/Badge/Badge.styles.js +1 -1
- package/cjs/Badge/Badge.styles.js.map +1 -1
- package/cjs/Burger/Burger.js.map +1 -1
- package/cjs/Burger/Burger.styles.js +6 -6
- package/cjs/Burger/Burger.styles.js.map +1 -1
- package/cjs/Button/Button.styles.js +0 -1
- package/cjs/Button/Button.styles.js.map +1 -1
- package/cjs/ColorPicker/ColorPicker.js +2 -2
- package/cjs/ColorPicker/ColorPicker.js.map +1 -1
- package/cjs/ColorPicker/Swatches/Swatches.js +5 -6
- package/cjs/ColorPicker/Swatches/Swatches.js.map +1 -1
- package/cjs/Divider/Divider.js +2 -1
- package/cjs/Divider/Divider.js.map +1 -1
- package/cjs/Divider/Divider.styles.js +2 -2
- package/cjs/Divider/Divider.styles.js.map +1 -1
- package/cjs/Image/Image.js +6 -3
- package/cjs/Image/Image.js.map +1 -1
- package/cjs/Indicator/Indicator.styles.js +1 -1
- package/cjs/Indicator/Indicator.styles.js.map +1 -1
- package/cjs/Input/InputDescription/InputDescription.js +2 -1
- package/cjs/Input/InputDescription/InputDescription.js.map +1 -1
- package/cjs/Loader/Loader.js +5 -2
- package/cjs/Loader/Loader.js.map +1 -1
- package/cjs/Menu/MenuItem/MenuItem.styles.js +1 -1
- package/cjs/Menu/MenuItem/MenuItem.styles.js.map +1 -1
- package/cjs/MultiSelect/DefaultValue/DefaultValue.js +4 -2
- package/cjs/MultiSelect/DefaultValue/DefaultValue.js.map +1 -1
- package/cjs/MultiSelect/DefaultValue/DefaultValue.styles.js +2 -2
- package/cjs/MultiSelect/DefaultValue/DefaultValue.styles.js.map +1 -1
- package/cjs/MultiSelect/MultiSelect.js +50 -29
- package/cjs/MultiSelect/MultiSelect.js.map +1 -1
- package/cjs/NativeSelect/NativeSelect.js +2 -1
- package/cjs/NativeSelect/NativeSelect.js.map +1 -1
- package/cjs/Notification/Notification.styles.js +1 -1
- package/cjs/Notification/Notification.styles.js.map +1 -1
- package/cjs/NumberInput/NumberInput.js +1 -9
- package/cjs/NumberInput/NumberInput.js.map +1 -1
- package/cjs/Popover/PopoverDropdown/PopoverDropdown.js +2 -1
- package/cjs/Popover/PopoverDropdown/PopoverDropdown.js.map +1 -1
- package/cjs/Progress/Progress.js +5 -1
- package/cjs/Progress/Progress.js.map +1 -1
- package/cjs/Progress/Progress.styles.js +5 -1
- package/cjs/Progress/Progress.styles.js.map +1 -1
- package/cjs/Select/Select.js +50 -39
- package/cjs/Select/Select.js.map +1 -1
- package/cjs/Select/SelectRightSection/get-select-right-section-props.js +1 -1
- package/cjs/Select/SelectRightSection/get-select-right-section-props.js.map +1 -1
- package/cjs/Skeleton/Skeleton.styles.js +2 -1
- package/cjs/Skeleton/Skeleton.styles.js.map +1 -1
- package/cjs/Spoiler/Spoiler.js +5 -4
- package/cjs/Spoiler/Spoiler.js.map +1 -1
- package/cjs/Spoiler/Spoiler.styles.js +2 -0
- package/cjs/Spoiler/Spoiler.styles.js.map +1 -1
- package/cjs/Switch/Switch.styles.js +1 -1
- package/cjs/Switch/Switch.styles.js.map +1 -1
- package/cjs/Text/Text.js +12 -3
- package/cjs/Text/Text.js.map +1 -1
- package/cjs/Text/Text.styles.js +20 -4
- package/cjs/Text/Text.styles.js.map +1 -1
- package/esm/Accordion/AccordionControl/AccordionControl.js +1 -0
- package/esm/Accordion/AccordionControl/AccordionControl.js.map +1 -1
- package/esm/ActionIcon/ActionIcon.styles.js +3 -3
- package/esm/ActionIcon/ActionIcon.styles.js.map +1 -1
- package/esm/AppShell/HorizontalSection/HorizontalSection.js +4 -1
- package/esm/AppShell/HorizontalSection/HorizontalSection.js.map +1 -1
- package/esm/AppShell/HorizontalSection/HorizontalSection.styles.js +11 -2
- package/esm/AppShell/HorizontalSection/HorizontalSection.styles.js.map +1 -1
- package/esm/AppShell/VerticalSection/VerticalSection.js +3 -1
- package/esm/AppShell/VerticalSection/VerticalSection.js.map +1 -1
- package/esm/Badge/Badge.styles.js +1 -1
- package/esm/Badge/Badge.styles.js.map +1 -1
- package/esm/Burger/Burger.js.map +1 -1
- package/esm/Burger/Burger.styles.js +6 -6
- package/esm/Burger/Burger.styles.js.map +1 -1
- package/esm/Button/Button.styles.js +0 -1
- package/esm/Button/Button.styles.js.map +1 -1
- package/esm/ColorPicker/ColorPicker.js +2 -2
- package/esm/ColorPicker/ColorPicker.js.map +1 -1
- package/esm/ColorPicker/Swatches/Swatches.js +5 -6
- package/esm/ColorPicker/Swatches/Swatches.js.map +1 -1
- package/esm/Divider/Divider.js +2 -1
- package/esm/Divider/Divider.js.map +1 -1
- package/esm/Divider/Divider.styles.js +2 -2
- package/esm/Divider/Divider.styles.js.map +1 -1
- package/esm/Image/Image.js +6 -3
- package/esm/Image/Image.js.map +1 -1
- package/esm/Indicator/Indicator.styles.js +1 -1
- package/esm/Indicator/Indicator.styles.js.map +1 -1
- package/esm/Input/InputDescription/InputDescription.js +2 -1
- package/esm/Input/InputDescription/InputDescription.js.map +1 -1
- package/esm/Loader/Loader.js +5 -2
- package/esm/Loader/Loader.js.map +1 -1
- package/esm/Menu/MenuItem/MenuItem.styles.js +1 -1
- package/esm/Menu/MenuItem/MenuItem.styles.js.map +1 -1
- package/esm/MultiSelect/DefaultValue/DefaultValue.js +4 -2
- package/esm/MultiSelect/DefaultValue/DefaultValue.js.map +1 -1
- package/esm/MultiSelect/DefaultValue/DefaultValue.styles.js +2 -2
- package/esm/MultiSelect/DefaultValue/DefaultValue.styles.js.map +1 -1
- package/esm/MultiSelect/MultiSelect.js +50 -29
- package/esm/MultiSelect/MultiSelect.js.map +1 -1
- package/esm/NativeSelect/NativeSelect.js +2 -1
- package/esm/NativeSelect/NativeSelect.js.map +1 -1
- package/esm/Notification/Notification.styles.js +1 -1
- package/esm/Notification/Notification.styles.js.map +1 -1
- package/esm/NumberInput/NumberInput.js +1 -9
- package/esm/NumberInput/NumberInput.js.map +1 -1
- package/esm/Popover/PopoverDropdown/PopoverDropdown.js +2 -1
- package/esm/Popover/PopoverDropdown/PopoverDropdown.js.map +1 -1
- package/esm/Progress/Progress.js +5 -1
- package/esm/Progress/Progress.js.map +1 -1
- package/esm/Progress/Progress.styles.js +5 -1
- package/esm/Progress/Progress.styles.js.map +1 -1
- package/esm/Select/Select.js +50 -39
- package/esm/Select/Select.js.map +1 -1
- package/esm/Select/SelectRightSection/get-select-right-section-props.js +1 -1
- package/esm/Select/SelectRightSection/get-select-right-section-props.js.map +1 -1
- package/esm/Skeleton/Skeleton.styles.js +2 -1
- package/esm/Skeleton/Skeleton.styles.js.map +1 -1
- package/esm/Spoiler/Spoiler.js +6 -5
- package/esm/Spoiler/Spoiler.js.map +1 -1
- package/esm/Spoiler/Spoiler.styles.js +2 -0
- package/esm/Spoiler/Spoiler.styles.js.map +1 -1
- package/esm/Switch/Switch.styles.js +1 -1
- package/esm/Switch/Switch.styles.js.map +1 -1
- package/esm/Text/Text.js +12 -3
- package/esm/Text/Text.js.map +1 -1
- package/esm/Text/Text.styles.js +20 -4
- package/esm/Text/Text.styles.js.map +1 -1
- package/lib/Accordion/AccordionControl/AccordionControl.d.ts.map +1 -1
- package/lib/ActionIcon/ActionIcon.d.ts +7 -1
- package/lib/ActionIcon/ActionIcon.d.ts.map +1 -1
- package/lib/ActionIcon/ActionIcon.styles.d.ts.map +1 -1
- package/lib/Anchor/Anchor.d.ts +7 -1
- package/lib/Anchor/Anchor.d.ts.map +1 -1
- package/lib/AppShell/HorizontalSection/HorizontalSection.d.ts +3 -1
- package/lib/AppShell/HorizontalSection/HorizontalSection.d.ts.map +1 -1
- package/lib/AppShell/HorizontalSection/HorizontalSection.styles.d.ts +1 -0
- package/lib/AppShell/HorizontalSection/HorizontalSection.styles.d.ts.map +1 -1
- package/lib/AppShell/HorizontalSection/Section/Section.d.ts +7 -1
- package/lib/AppShell/HorizontalSection/Section/Section.d.ts.map +1 -1
- package/lib/AppShell/VerticalSection/VerticalSection.d.ts +2 -0
- package/lib/AppShell/VerticalSection/VerticalSection.d.ts.map +1 -1
- package/lib/Avatar/Avatar.d.ts +7 -1
- package/lib/Avatar/Avatar.d.ts.map +1 -1
- package/lib/BackgroundImage/BackgroundImage.d.ts +7 -1
- package/lib/BackgroundImage/BackgroundImage.d.ts.map +1 -1
- package/lib/Badge/Badge.d.ts +7 -1
- package/lib/Badge/Badge.d.ts.map +1 -1
- package/lib/Badge/Badge.styles.d.ts.map +1 -1
- package/lib/Box/Box.d.ts +7 -1
- package/lib/Box/Box.d.ts.map +1 -1
- package/lib/Burger/Burger.d.ts +2 -2
- package/lib/Burger/Burger.d.ts.map +1 -1
- package/lib/Button/Button.d.ts +7 -1
- package/lib/Button/Button.d.ts.map +1 -1
- package/lib/Button/Button.styles.d.ts.map +1 -1
- package/lib/Card/Card.d.ts +7 -1
- package/lib/Card/Card.d.ts.map +1 -1
- package/lib/Card/CardSection/CardSection.d.ts +7 -1
- package/lib/Card/CardSection/CardSection.d.ts.map +1 -1
- package/lib/Center/Center.d.ts +7 -1
- package/lib/Center/Center.d.ts.map +1 -1
- package/lib/ColorPicker/Swatches/Swatches.d.ts +2 -3
- package/lib/ColorPicker/Swatches/Swatches.d.ts.map +1 -1
- package/lib/ColorSwatch/ColorSwatch.d.ts +7 -1
- package/lib/ColorSwatch/ColorSwatch.d.ts.map +1 -1
- package/lib/Divider/Divider.d.ts.map +1 -1
- package/lib/Highlight/Highlight.d.ts +7 -1
- package/lib/Highlight/Highlight.d.ts.map +1 -1
- package/lib/Image/Image.d.ts.map +1 -1
- package/lib/Indicator/Indicator.styles.d.ts.map +1 -1
- package/lib/Input/Input.d.ts +7 -1
- package/lib/Input/Input.d.ts.map +1 -1
- package/lib/Input/InputDescription/InputDescription.d.ts.map +1 -1
- package/lib/InputBase/InputBase.d.ts +7 -1
- package/lib/InputBase/InputBase.d.ts.map +1 -1
- package/lib/Loader/Loader.d.ts.map +1 -1
- package/lib/Menu/Menu.d.ts +7 -1
- package/lib/Menu/MenuItem/MenuItem.d.ts +7 -1
- package/lib/Menu/MenuItem/MenuItem.d.ts.map +1 -1
- package/lib/MultiSelect/DefaultValue/DefaultValue.d.ts +2 -1
- package/lib/MultiSelect/DefaultValue/DefaultValue.d.ts.map +1 -1
- package/lib/MultiSelect/DefaultValue/DefaultValue.styles.d.ts +1 -0
- package/lib/MultiSelect/DefaultValue/DefaultValue.styles.d.ts.map +1 -1
- package/lib/MultiSelect/MultiSelect.d.ts.map +1 -1
- package/lib/NativeSelect/NativeSelect.d.ts.map +1 -1
- package/lib/NavLink/NavLink.d.ts +7 -1
- package/lib/NavLink/NavLink.d.ts.map +1 -1
- package/lib/NumberInput/NumberInput.d.ts.map +1 -1
- package/lib/Overlay/Overlay.d.ts +7 -1
- package/lib/Overlay/Overlay.d.ts.map +1 -1
- package/lib/Paper/Paper.d.ts +7 -1
- package/lib/Paper/Paper.d.ts.map +1 -1
- package/lib/Popover/PopoverDropdown/PopoverDropdown.d.ts.map +1 -1
- package/lib/Progress/Progress.d.ts.map +1 -1
- package/lib/Select/Select.d.ts.map +1 -1
- package/lib/Select/SelectRightSection/get-select-right-section-props.d.ts +1 -0
- package/lib/Select/SelectRightSection/get-select-right-section-props.d.ts.map +1 -1
- package/lib/Skeleton/Skeleton.styles.d.ts.map +1 -1
- package/lib/Spoiler/Spoiler.d.ts.map +1 -1
- package/lib/Spoiler/Spoiler.styles.d.ts.map +1 -1
- package/lib/Text/Text.d.ts +14 -1
- package/lib/Text/Text.d.ts.map +1 -1
- package/lib/Text/Text.styles.d.ts +2 -0
- package/lib/Text/Text.styles.d.ts.map +1 -1
- package/lib/UnstyledButton/UnstyledButton.d.ts +7 -1
- package/lib/UnstyledButton/UnstyledButton.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -22,7 +22,7 @@ var useStyles = createStyles((theme, { size, color, transitionDuration }) => {
|
|
|
22
22
|
position: "relative",
|
|
23
23
|
userSelect: "none",
|
|
24
24
|
boxSizing: "border-box",
|
|
25
|
-
"&,
|
|
25
|
+
"&, &::before, &::after": {
|
|
26
26
|
display: "block",
|
|
27
27
|
width: sizeValue,
|
|
28
28
|
height: Math.ceil(sizeValue / 12),
|
|
@@ -34,23 +34,23 @@ var useStyles = createStyles((theme, { size, color, transitionDuration }) => {
|
|
|
34
34
|
transitionDuration: theme.respectReducedMotion ? "0ms" : void 0
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
|
-
"
|
|
37
|
+
"&::before, &::after": {
|
|
38
38
|
position: "absolute",
|
|
39
39
|
content: '""',
|
|
40
40
|
left: 0
|
|
41
41
|
},
|
|
42
|
-
"
|
|
42
|
+
"&::before": {
|
|
43
43
|
top: sizeValue / 3 * -1
|
|
44
44
|
},
|
|
45
|
-
"
|
|
45
|
+
"&::after": {
|
|
46
46
|
top: sizeValue / 3
|
|
47
47
|
},
|
|
48
48
|
"&[data-opened]": {
|
|
49
49
|
backgroundColor: "transparent",
|
|
50
|
-
"
|
|
50
|
+
"&::before": {
|
|
51
51
|
transform: `translateY(${sizeValue / 3}px) rotate(45deg)`
|
|
52
52
|
},
|
|
53
|
-
"
|
|
53
|
+
"&::after": {
|
|
54
54
|
transform: `translateY(-${sizeValue / 3}px) rotate(-45deg)`
|
|
55
55
|
}
|
|
56
56
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Burger.styles.js","sources":["../../src/Burger/Burger.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor } from '@mantine/styles';\n\nexport interface BurgerStylesParams {\n size: MantineNumberSize;\n color: MantineColor;\n transitionDuration: number;\n}\n\nconst sizes = {\n xs: 12,\n sm: 18,\n md: 24,\n lg: 34,\n xl: 42,\n};\n\nexport default createStyles((theme, { size, color, transitionDuration }: BurgerStylesParams) => {\n const sizeValue = theme.fn.size({ size, sizes });\n const _color = color || (theme.colorScheme === 'dark' ? theme.white : theme.black);\n\n return {\n root: {\n borderRadius: theme.radius.sm,\n width: sizeValue + theme.spacing.xs,\n height: sizeValue + theme.spacing.xs,\n padding: theme.spacing.xs / 2,\n cursor: 'pointer',\n },\n\n burger: {\n position: 'relative',\n userSelect: 'none',\n boxSizing: 'border-box',\n\n '&,
|
|
1
|
+
{"version":3,"file":"Burger.styles.js","sources":["../../src/Burger/Burger.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor } from '@mantine/styles';\n\nexport interface BurgerStylesParams {\n size: MantineNumberSize;\n color: MantineColor;\n transitionDuration: number;\n}\n\nconst sizes = {\n xs: 12,\n sm: 18,\n md: 24,\n lg: 34,\n xl: 42,\n};\n\nexport default createStyles((theme, { size, color, transitionDuration }: BurgerStylesParams) => {\n const sizeValue = theme.fn.size({ size, sizes });\n const _color = color || (theme.colorScheme === 'dark' ? theme.white : theme.black);\n\n return {\n root: {\n borderRadius: theme.radius.sm,\n width: sizeValue + theme.spacing.xs,\n height: sizeValue + theme.spacing.xs,\n padding: theme.spacing.xs / 2,\n cursor: 'pointer',\n },\n\n burger: {\n position: 'relative',\n userSelect: 'none',\n boxSizing: 'border-box',\n\n '&, &::before, &::after': {\n display: 'block',\n width: sizeValue,\n height: Math.ceil(sizeValue / 12),\n backgroundColor: _color,\n outline: '1px solid transparent',\n transitionProperty: 'background-color, transform',\n transitionDuration: `${transitionDuration}ms`,\n\n '@media (prefers-reduced-motion)': {\n transitionDuration: theme.respectReducedMotion ? '0ms' : undefined,\n },\n },\n\n '&::before, &::after': {\n position: 'absolute',\n content: '\"\"',\n left: 0,\n },\n\n '&::before': {\n top: (sizeValue / 3) * -1,\n },\n\n '&::after': {\n top: sizeValue / 3,\n },\n\n '&[data-opened]': {\n backgroundColor: 'transparent',\n\n '&::before': {\n transform: `translateY(${sizeValue / 3}px) rotate(45deg)`,\n },\n\n '&::after': {\n transform: `translateY(-${sizeValue / 3}px) rotate(-45deg)`,\n },\n },\n },\n };\n});\n"],"names":[],"mappings":";;AACA,MAAM,KAAK,GAAG;AACd,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,CAAC,CAAC;AACF,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK;AAC5E,EAAE,MAAM,SAAS,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;AACnD,EAAE,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;AACrF,EAAE,OAAO;AACT,IAAI,IAAI,EAAE;AACV,MAAM,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE;AACnC,MAAM,KAAK,EAAE,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,EAAE;AACzC,MAAM,MAAM,EAAE,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,EAAE;AAC1C,MAAM,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC;AACnC,MAAM,MAAM,EAAE,SAAS;AACvB,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,MAAM,QAAQ,EAAE,UAAU;AAC1B,MAAM,UAAU,EAAE,MAAM;AACxB,MAAM,SAAS,EAAE,YAAY;AAC7B,MAAM,wBAAwB,EAAE;AAChC,QAAQ,OAAO,EAAE,OAAO;AACxB,QAAQ,KAAK,EAAE,SAAS;AACxB,QAAQ,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;AACzC,QAAQ,eAAe,EAAE,MAAM;AAC/B,QAAQ,OAAO,EAAE,uBAAuB;AACxC,QAAQ,kBAAkB,EAAE,6BAA6B;AACzD,QAAQ,kBAAkB,EAAE,CAAC,EAAE,kBAAkB,CAAC,EAAE,CAAC;AACrD,QAAQ,iCAAiC,EAAE;AAC3C,UAAU,kBAAkB,EAAE,KAAK,CAAC,oBAAoB,GAAG,KAAK,GAAG,KAAK,CAAC;AACzE,SAAS;AACT,OAAO;AACP,MAAM,qBAAqB,EAAE;AAC7B,QAAQ,QAAQ,EAAE,UAAU;AAC5B,QAAQ,OAAO,EAAE,IAAI;AACrB,QAAQ,IAAI,EAAE,CAAC;AACf,OAAO;AACP,MAAM,WAAW,EAAE;AACnB,QAAQ,GAAG,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;AAC/B,OAAO;AACP,MAAM,UAAU,EAAE;AAClB,QAAQ,GAAG,EAAE,SAAS,GAAG,CAAC;AAC1B,OAAO;AACP,MAAM,gBAAgB,EAAE;AACxB,QAAQ,eAAe,EAAE,aAAa;AACtC,QAAQ,WAAW,EAAE;AACrB,UAAU,SAAS,EAAE,CAAC,WAAW,EAAE,SAAS,GAAG,CAAC,CAAC,iBAAiB,CAAC;AACnE,SAAS;AACT,QAAQ,UAAU,EAAE;AACpB,UAAU,SAAS,EAAE,CAAC,YAAY,EAAE,SAAS,GAAG,CAAC,CAAC,kBAAkB,CAAC;AACrE,SAAS;AACT,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ,CAAC,CAAC;;;;"}
|
|
@@ -61,7 +61,6 @@ function getVariantStyles({ variant, theme, color, gradient }) {
|
|
|
61
61
|
return __spreadValues({
|
|
62
62
|
border: `1px solid ${colors.border}`,
|
|
63
63
|
backgroundColor: colors.background,
|
|
64
|
-
backgroundImage: colors.background,
|
|
65
64
|
color: colors.color
|
|
66
65
|
}, theme.fn.hover({
|
|
67
66
|
backgroundColor: colors.hover
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styles.js","sources":["../../src/Button/Button.styles.ts"],"sourcesContent":["import {\n createStyles,\n MantineSize,\n MantineNumberSize,\n MantineColor,\n MantineTheme,\n MantineGradient,\n CSSObject,\n} from '@mantine/styles';\nimport { INPUT_SIZES } from '../Input';\n\nexport type ButtonVariant =\n | 'filled'\n | 'outline'\n | 'light'\n | 'gradient'\n | 'white'\n | 'default'\n | 'subtle';\n\nexport interface ButtonStylesParams {\n color: MantineColor;\n size: MantineSize;\n radius: MantineNumberSize;\n fullWidth: boolean;\n compact: boolean;\n gradient: MantineGradient;\n variant: ButtonVariant;\n withRightIcon: boolean;\n withLeftIcon: boolean;\n}\n\nexport const sizes = {\n xs: { height: INPUT_SIZES.xs, paddingLeft: 14, paddingRight: 14 },\n sm: { height: INPUT_SIZES.sm, paddingLeft: 18, paddingRight: 18 },\n md: { height: INPUT_SIZES.md, paddingLeft: 22, paddingRight: 22 },\n lg: { height: INPUT_SIZES.lg, paddingLeft: 26, paddingRight: 26 },\n xl: { height: INPUT_SIZES.xl, paddingLeft: 32, paddingRight: 32 },\n 'compact-xs': { height: 22, paddingLeft: 7, paddingRight: 7 },\n 'compact-sm': { height: 26, paddingLeft: 8, paddingRight: 8 },\n 'compact-md': { height: 30, paddingLeft: 10, paddingRight: 10 },\n 'compact-lg': { height: 34, paddingLeft: 12, paddingRight: 12 },\n 'compact-xl': { height: 40, paddingLeft: 14, paddingRight: 14 },\n};\n\ninterface GetSizeStyles {\n compact: boolean;\n size: MantineSize;\n withLeftIcon: boolean;\n withRightIcon: boolean;\n}\n\nfunction getSizeStyles({ compact, size, withLeftIcon, withRightIcon }: GetSizeStyles): CSSObject {\n if (compact) {\n return sizes[`compact-${size}`];\n }\n\n const _sizes = sizes[size];\n\n return {\n ..._sizes,\n paddingLeft: withLeftIcon ? _sizes.paddingLeft / 1.5 : _sizes.paddingLeft,\n paddingRight: withRightIcon ? _sizes.paddingRight / 1.5 : _sizes.paddingRight,\n };\n}\n\nconst getWidthStyles = (fullWidth: boolean) => ({\n display: fullWidth ? 'block' : 'inline-block',\n width: fullWidth ? '100%' : 'auto',\n});\n\ninterface GetVariantStyles {\n theme: MantineTheme;\n color: MantineColor;\n variant: ButtonVariant;\n gradient: MantineGradient;\n}\n\nfunction getVariantStyles({ variant, theme, color, gradient }: GetVariantStyles) {\n const colors = theme.fn.variant({ color, variant, gradient });\n\n if (variant === 'gradient') {\n return {\n border: 0,\n backgroundImage: colors.background,\n color: colors.color,\n\n '&:hover': theme.fn.hover({\n backgroundSize: '200%',\n }),\n };\n }\n\n return {\n border: `1px solid ${colors.border}`,\n backgroundColor: colors.background,\n backgroundImage: colors.background,\n color: colors.color,\n ...theme.fn.hover({\n backgroundColor: colors.hover,\n }),\n };\n}\n\nexport default createStyles(\n (\n theme,\n {\n color,\n size,\n radius,\n fullWidth,\n compact,\n gradient,\n variant,\n withLeftIcon,\n withRightIcon,\n }: ButtonStylesParams\n ) => ({\n root: {\n ...getSizeStyles({ compact, size, withLeftIcon, withRightIcon }),\n ...theme.fn.fontStyles(),\n ...theme.fn.focusStyles(),\n ...getWidthStyles(fullWidth),\n borderRadius: theme.fn.radius(radius),\n fontWeight: 600,\n position: 'relative',\n lineHeight: 1,\n fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n userSelect: 'none',\n cursor: 'pointer',\n ...getVariantStyles({ variant, theme, color, gradient }),\n\n '&:active': theme.activeStyles,\n\n '&[data-disabled]': {\n borderColor: 'transparent',\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],\n cursor: 'not-allowed',\n\n '&:active': {\n transform: 'none',\n },\n },\n\n '&[data-loading]': {\n pointerEvents: 'none',\n\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: -1,\n left: -1,\n right: -1,\n bottom: -1,\n backgroundColor:\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors.dark[7], 0.5)\n : 'rgba(255, 255, 255, .5)',\n borderRadius: theme.fn.radius(radius),\n cursor: 'not-allowed',\n },\n },\n },\n\n icon: {\n display: 'flex',\n alignItems: 'center',\n },\n\n leftIcon: {\n marginRight: 10,\n },\n\n rightIcon: {\n marginLeft: 10,\n },\n\n inner: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '100%',\n overflow: 'visible',\n },\n\n label: {\n whiteSpace: 'nowrap',\n height: '100%',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n },\n })\n);\n"],"names":["INPUT_SIZES"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.styles.js","sources":["../../src/Button/Button.styles.ts"],"sourcesContent":["import {\n createStyles,\n MantineSize,\n MantineNumberSize,\n MantineColor,\n MantineTheme,\n MantineGradient,\n CSSObject,\n} from '@mantine/styles';\nimport { INPUT_SIZES } from '../Input';\n\nexport type ButtonVariant =\n | 'filled'\n | 'outline'\n | 'light'\n | 'gradient'\n | 'white'\n | 'default'\n | 'subtle';\n\nexport interface ButtonStylesParams {\n color: MantineColor;\n size: MantineSize;\n radius: MantineNumberSize;\n fullWidth: boolean;\n compact: boolean;\n gradient: MantineGradient;\n variant: ButtonVariant;\n withRightIcon: boolean;\n withLeftIcon: boolean;\n}\n\nexport const sizes = {\n xs: { height: INPUT_SIZES.xs, paddingLeft: 14, paddingRight: 14 },\n sm: { height: INPUT_SIZES.sm, paddingLeft: 18, paddingRight: 18 },\n md: { height: INPUT_SIZES.md, paddingLeft: 22, paddingRight: 22 },\n lg: { height: INPUT_SIZES.lg, paddingLeft: 26, paddingRight: 26 },\n xl: { height: INPUT_SIZES.xl, paddingLeft: 32, paddingRight: 32 },\n 'compact-xs': { height: 22, paddingLeft: 7, paddingRight: 7 },\n 'compact-sm': { height: 26, paddingLeft: 8, paddingRight: 8 },\n 'compact-md': { height: 30, paddingLeft: 10, paddingRight: 10 },\n 'compact-lg': { height: 34, paddingLeft: 12, paddingRight: 12 },\n 'compact-xl': { height: 40, paddingLeft: 14, paddingRight: 14 },\n};\n\ninterface GetSizeStyles {\n compact: boolean;\n size: MantineSize;\n withLeftIcon: boolean;\n withRightIcon: boolean;\n}\n\nfunction getSizeStyles({ compact, size, withLeftIcon, withRightIcon }: GetSizeStyles): CSSObject {\n if (compact) {\n return sizes[`compact-${size}`];\n }\n\n const _sizes = sizes[size];\n\n return {\n ..._sizes,\n paddingLeft: withLeftIcon ? _sizes.paddingLeft / 1.5 : _sizes.paddingLeft,\n paddingRight: withRightIcon ? _sizes.paddingRight / 1.5 : _sizes.paddingRight,\n };\n}\n\nconst getWidthStyles = (fullWidth: boolean) => ({\n display: fullWidth ? 'block' : 'inline-block',\n width: fullWidth ? '100%' : 'auto',\n});\n\ninterface GetVariantStyles {\n theme: MantineTheme;\n color: MantineColor;\n variant: ButtonVariant;\n gradient: MantineGradient;\n}\n\nfunction getVariantStyles({ variant, theme, color, gradient }: GetVariantStyles) {\n const colors = theme.fn.variant({ color, variant, gradient });\n\n if (variant === 'gradient') {\n return {\n border: 0,\n backgroundImage: colors.background,\n color: colors.color,\n\n '&:hover': theme.fn.hover({\n backgroundSize: '200%',\n }),\n };\n }\n\n return {\n border: `1px solid ${colors.border}`,\n backgroundColor: colors.background,\n color: colors.color,\n ...theme.fn.hover({\n backgroundColor: colors.hover,\n }),\n };\n}\n\nexport default createStyles(\n (\n theme,\n {\n color,\n size,\n radius,\n fullWidth,\n compact,\n gradient,\n variant,\n withLeftIcon,\n withRightIcon,\n }: ButtonStylesParams\n ) => ({\n root: {\n ...getSizeStyles({ compact, size, withLeftIcon, withRightIcon }),\n ...theme.fn.fontStyles(),\n ...theme.fn.focusStyles(),\n ...getWidthStyles(fullWidth),\n borderRadius: theme.fn.radius(radius),\n fontWeight: 600,\n position: 'relative',\n lineHeight: 1,\n fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),\n userSelect: 'none',\n cursor: 'pointer',\n ...getVariantStyles({ variant, theme, color, gradient }),\n\n '&:active': theme.activeStyles,\n\n '&[data-disabled]': {\n borderColor: 'transparent',\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],\n cursor: 'not-allowed',\n\n '&:active': {\n transform: 'none',\n },\n },\n\n '&[data-loading]': {\n pointerEvents: 'none',\n\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: -1,\n left: -1,\n right: -1,\n bottom: -1,\n backgroundColor:\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors.dark[7], 0.5)\n : 'rgba(255, 255, 255, .5)',\n borderRadius: theme.fn.radius(radius),\n cursor: 'not-allowed',\n },\n },\n },\n\n icon: {\n display: 'flex',\n alignItems: 'center',\n },\n\n leftIcon: {\n marginRight: 10,\n },\n\n rightIcon: {\n marginLeft: 10,\n },\n\n inner: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '100%',\n overflow: 'visible',\n },\n\n label: {\n whiteSpace: 'nowrap',\n height: '100%',\n overflow: 'hidden',\n display: 'flex',\n alignItems: 'center',\n },\n })\n);\n"],"names":["INPUT_SIZES"],"mappings":"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"}
|
|
@@ -171,13 +171,13 @@ const ColorPicker = forwardRef((props, ref) => {
|
|
|
171
171
|
className: classes.preview
|
|
172
172
|
}))), Array.isArray(swatches) && /* @__PURE__ */ React.createElement(Swatches, {
|
|
173
173
|
data: swatches,
|
|
174
|
-
onSelect: handleChange,
|
|
175
174
|
style: { marginTop: 5 },
|
|
176
175
|
swatchesPerRow,
|
|
177
176
|
focusable,
|
|
178
177
|
classNames,
|
|
179
178
|
styles,
|
|
180
|
-
__staticSelector
|
|
179
|
+
__staticSelector,
|
|
180
|
+
setValue
|
|
181
181
|
}));
|
|
182
182
|
});
|
|
183
183
|
ColorPicker.displayName = "@mantine/core/ColorPicker";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker.js","sources":["../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { ColorSliderStylesNames } from './ColorSlider/ColorSlider';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { Saturation, SaturationStylesNames } from './Saturation/Saturation';\nimport { Swatches, SwatchesStylesNames } from './Swatches/Swatches';\nimport { ThumbStylesNames } from './Thumb/Thumb';\nimport { HsvaColor } from './types';\nimport useStyles from './ColorPicker.styles';\n\nexport type ColorPickerStylesNames =\n | Selectors<typeof useStyles>\n | ColorSliderStylesNames\n | SwatchesStylesNames\n | SaturationStylesNames\n | ThumbStylesNames;\n\nexport interface ColorPickerBaseProps {\n /** Controlled component value */\n value?: string;\n\n /** Uncontrolled component default value */\n defaultValue?: string;\n\n /** Called when color changes */\n onChange?(color: string): void;\n\n /** Color format */\n format?: 'hex' | 'rgba' | 'rgb' | 'hsl' | 'hsla';\n\n /** Set to false to display swatches only */\n withPicker?: boolean;\n\n /** Predefined colors */\n swatches?: string[];\n\n /** Number of swatches displayed in one row */\n swatchesPerRow?: number;\n\n /** Predefined component size */\n size?: MantineSize;\n}\n\nexport interface ColorPickerProps\n extends DefaultProps<ColorPickerStylesNames>,\n ColorPickerBaseProps,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {\n /** Force picker to take 100% width of its container */\n fullWidth?: boolean;\n\n /** Should interactive elements be focusable */\n focusable?: boolean;\n\n /** Static selector base */\n __staticSelector?: string;\n\n /** Saturation slider aria-label */\n saturationLabel?: string;\n\n /** Hue slider aria-label */\n hueLabel?: string;\n\n /** Alpha slider aria-label */\n alphaLabel?: string;\n}\n\nconst SWATCH_SIZES = {\n xs: 26,\n sm: 34,\n md: 42,\n lg: 50,\n xl: 54,\n};\n\nconst defaultProps: Partial<ColorPickerProps> = {\n swatchesPerRow: 10,\n size: 'sm',\n withPicker: true,\n focusable: true,\n __staticSelector: 'ColorPicker',\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n (props: ColorPickerProps, ref) => {\n const {\n value,\n defaultValue,\n onChange,\n format,\n swatches,\n swatchesPerRow,\n size,\n withPicker,\n fullWidth,\n focusable,\n __staticSelector,\n saturationLabel,\n hueLabel,\n alphaLabel,\n className,\n styles,\n classNames,\n unstyled,\n ...others\n } = useComponentDefaultProps('ColorPicker', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { size, fullWidth },\n { classNames, styles, name: __staticSelector, unstyled }\n );\n const formatRef = useRef(format);\n const valueRef = useRef<string>(null);\n const updateRef = useRef(true);\n const withAlpha = format === 'rgba' || format === 'hsla';\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '#FFFFFF',\n onChange,\n });\n\n const [parsed, setParsed] = useState(parseColor(_value));\n\n const handleChange = (color: Partial<HsvaColor>) => {\n updateRef.current = false;\n setParsed((current) => {\n const next = { ...current, ...color };\n valueRef.current = convertHsvaTo(formatRef.current, next);\n return next;\n });\n\n setValue(valueRef.current);\n\n // Does not work any other way\n setTimeout(() => {\n updateRef.current = true;\n }, 0);\n };\n\n useDidUpdate(() => {\n if (isColorValid(value) && updateRef.current) {\n setParsed(parseColor(value));\n updateRef.current = true;\n }\n }, [value]);\n\n useDidUpdate(() => {\n formatRef.current = format;\n setValue(convertHsvaTo(format, parsed));\n }, [format]);\n\n return (\n <Box className={cx(classes.wrapper, className)} ref={ref} {...others}>\n {withPicker && (\n <>\n <Saturation\n value={parsed}\n onChange={handleChange}\n color={_value}\n styles={styles}\n classNames={classNames}\n size={size}\n focusable={focusable}\n saturationLabel={saturationLabel}\n __staticSelector={__staticSelector}\n />\n\n <div className={classes.body}>\n <div className={classes.sliders}>\n <HueSlider\n value={parsed.h}\n onChange={(h) => handleChange({ h })}\n size={size}\n styles={styles}\n classNames={classNames}\n focusable={focusable}\n aria-label={hueLabel}\n __staticSelector={__staticSelector}\n />\n\n {withAlpha && (\n <AlphaSlider\n value={parsed.a}\n onChange={(a) => handleChange({ a })}\n size={size}\n color={convertHsvaTo('hex', parsed)}\n style={{ marginTop: 6 }}\n styles={styles}\n classNames={classNames}\n focusable={focusable}\n aria-label={alphaLabel}\n __staticSelector={__staticSelector}\n />\n )}\n </div>\n\n {withAlpha && (\n <ColorSwatch\n color={_value}\n radius=\"sm\"\n size={theme.fn.size({ size, sizes: SWATCH_SIZES })}\n className={classes.preview}\n />\n )}\n </div>\n </>\n )}\n\n {Array.isArray(swatches) && (\n <Swatches\n data={swatches}\n onSelect={handleChange}\n style={{ marginTop: 5 }}\n swatchesPerRow={swatchesPerRow}\n focusable={focusable}\n classNames={classNames}\n styles={styles}\n __staticSelector={__staticSelector}\n />\n )}\n </Box>\n );\n }\n);\n\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ColorPicker.js","sources":["../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import React, { useState, useRef, forwardRef } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport { DefaultProps, MantineSize, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../Box';\nimport { ColorSwatch } from '../ColorSwatch/ColorSwatch';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { ColorSliderStylesNames } from './ColorSlider/ColorSlider';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { Saturation, SaturationStylesNames } from './Saturation/Saturation';\nimport { Swatches, SwatchesStylesNames } from './Swatches/Swatches';\nimport { ThumbStylesNames } from './Thumb/Thumb';\nimport { HsvaColor } from './types';\nimport useStyles from './ColorPicker.styles';\n\nexport type ColorPickerStylesNames =\n | Selectors<typeof useStyles>\n | ColorSliderStylesNames\n | SwatchesStylesNames\n | SaturationStylesNames\n | ThumbStylesNames;\n\nexport interface ColorPickerBaseProps {\n /** Controlled component value */\n value?: string;\n\n /** Uncontrolled component default value */\n defaultValue?: string;\n\n /** Called when color changes */\n onChange?(color: string): void;\n\n /** Color format */\n format?: 'hex' | 'rgba' | 'rgb' | 'hsl' | 'hsla';\n\n /** Set to false to display swatches only */\n withPicker?: boolean;\n\n /** Predefined colors */\n swatches?: string[];\n\n /** Number of swatches displayed in one row */\n swatchesPerRow?: number;\n\n /** Predefined component size */\n size?: MantineSize;\n}\n\nexport interface ColorPickerProps\n extends DefaultProps<ColorPickerStylesNames>,\n ColorPickerBaseProps,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {\n /** Force picker to take 100% width of its container */\n fullWidth?: boolean;\n\n /** Should interactive elements be focusable */\n focusable?: boolean;\n\n /** Static selector base */\n __staticSelector?: string;\n\n /** Saturation slider aria-label */\n saturationLabel?: string;\n\n /** Hue slider aria-label */\n hueLabel?: string;\n\n /** Alpha slider aria-label */\n alphaLabel?: string;\n}\n\nconst SWATCH_SIZES = {\n xs: 26,\n sm: 34,\n md: 42,\n lg: 50,\n xl: 54,\n};\n\nconst defaultProps: Partial<ColorPickerProps> = {\n swatchesPerRow: 10,\n size: 'sm',\n withPicker: true,\n focusable: true,\n __staticSelector: 'ColorPicker',\n};\n\nexport const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(\n (props: ColorPickerProps, ref) => {\n const {\n value,\n defaultValue,\n onChange,\n format,\n swatches,\n swatchesPerRow,\n size,\n withPicker,\n fullWidth,\n focusable,\n __staticSelector,\n saturationLabel,\n hueLabel,\n alphaLabel,\n className,\n styles,\n classNames,\n unstyled,\n ...others\n } = useComponentDefaultProps('ColorPicker', defaultProps, props);\n\n const { classes, cx, theme } = useStyles(\n { size, fullWidth },\n { classNames, styles, name: __staticSelector, unstyled }\n );\n const formatRef = useRef(format);\n const valueRef = useRef<string>(null);\n const updateRef = useRef(true);\n const withAlpha = format === 'rgba' || format === 'hsla';\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '#FFFFFF',\n onChange,\n });\n\n const [parsed, setParsed] = useState(parseColor(_value));\n\n const handleChange = (color: Partial<HsvaColor>) => {\n updateRef.current = false;\n setParsed((current) => {\n const next = { ...current, ...color };\n valueRef.current = convertHsvaTo(formatRef.current, next);\n return next;\n });\n\n setValue(valueRef.current);\n\n // Does not work any other way\n setTimeout(() => {\n updateRef.current = true;\n }, 0);\n };\n\n useDidUpdate(() => {\n if (isColorValid(value) && updateRef.current) {\n setParsed(parseColor(value));\n updateRef.current = true;\n }\n }, [value]);\n\n useDidUpdate(() => {\n formatRef.current = format;\n setValue(convertHsvaTo(format, parsed));\n }, [format]);\n\n return (\n <Box className={cx(classes.wrapper, className)} ref={ref} {...others}>\n {withPicker && (\n <>\n <Saturation\n value={parsed}\n onChange={handleChange}\n color={_value}\n styles={styles}\n classNames={classNames}\n size={size}\n focusable={focusable}\n saturationLabel={saturationLabel}\n __staticSelector={__staticSelector}\n />\n\n <div className={classes.body}>\n <div className={classes.sliders}>\n <HueSlider\n value={parsed.h}\n onChange={(h) => handleChange({ h })}\n size={size}\n styles={styles}\n classNames={classNames}\n focusable={focusable}\n aria-label={hueLabel}\n __staticSelector={__staticSelector}\n />\n\n {withAlpha && (\n <AlphaSlider\n value={parsed.a}\n onChange={(a) => handleChange({ a })}\n size={size}\n color={convertHsvaTo('hex', parsed)}\n style={{ marginTop: 6 }}\n styles={styles}\n classNames={classNames}\n focusable={focusable}\n aria-label={alphaLabel}\n __staticSelector={__staticSelector}\n />\n )}\n </div>\n\n {withAlpha && (\n <ColorSwatch\n color={_value}\n radius=\"sm\"\n size={theme.fn.size({ size, sizes: SWATCH_SIZES })}\n className={classes.preview}\n />\n )}\n </div>\n </>\n )}\n\n {Array.isArray(swatches) && (\n <Swatches\n data={swatches}\n style={{ marginTop: 5 }}\n swatchesPerRow={swatchesPerRow}\n focusable={focusable}\n classNames={classNames}\n styles={styles}\n __staticSelector={__staticSelector}\n setValue={setValue}\n />\n )}\n </Box>\n );\n }\n);\n\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ColorSwatch } from '../../ColorSwatch/ColorSwatch.js';
|
|
3
|
-
import { parseColor } from '../converters/parsers.js';
|
|
4
3
|
import useStyles from './Swatches.styles.js';
|
|
5
4
|
|
|
6
5
|
var __defProp = Object.defineProperty;
|
|
@@ -34,22 +33,22 @@ var __objRest = (source, exclude) => {
|
|
|
34
33
|
function Swatches(_a) {
|
|
35
34
|
var _b = _a, {
|
|
36
35
|
data,
|
|
37
|
-
onSelect,
|
|
38
36
|
swatchesPerRow = 10,
|
|
39
37
|
focusable = true,
|
|
40
38
|
classNames,
|
|
41
39
|
styles,
|
|
42
40
|
__staticSelector = "color-picker",
|
|
43
|
-
unstyled
|
|
41
|
+
unstyled,
|
|
42
|
+
setValue
|
|
44
43
|
} = _b, others = __objRest(_b, [
|
|
45
44
|
"data",
|
|
46
|
-
"onSelect",
|
|
47
45
|
"swatchesPerRow",
|
|
48
46
|
"focusable",
|
|
49
47
|
"classNames",
|
|
50
48
|
"styles",
|
|
51
49
|
"__staticSelector",
|
|
52
|
-
"unstyled"
|
|
50
|
+
"unstyled",
|
|
51
|
+
"setValue"
|
|
53
52
|
]);
|
|
54
53
|
const { classes } = useStyles({ swatchesPerRow }, { classNames, styles, name: __staticSelector, unstyled });
|
|
55
54
|
const colors = data.map((color, index) => /* @__PURE__ */ React.createElement(ColorSwatch, {
|
|
@@ -59,7 +58,7 @@ function Swatches(_a) {
|
|
|
59
58
|
color,
|
|
60
59
|
key: index,
|
|
61
60
|
radius: "sm",
|
|
62
|
-
onClick: () =>
|
|
61
|
+
onClick: () => setValue(color),
|
|
63
62
|
style: { cursor: "pointer" },
|
|
64
63
|
"aria-label": color,
|
|
65
64
|
tabIndex: focusable ? 0 : -1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Swatches.js","sources":["../../../src/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, Selectors } from '@mantine/styles';\nimport { ColorSwatch } from '../../ColorSwatch/ColorSwatch';\nimport
|
|
1
|
+
{"version":3,"file":"Swatches.js","sources":["../../../src/ColorPicker/Swatches/Swatches.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, Selectors } from '@mantine/styles';\nimport { ColorSwatch } from '../../ColorSwatch/ColorSwatch';\nimport useStyles from './Swatches.styles';\n\nexport type SwatchesStylesNames = Selectors<typeof useStyles>;\n\nexport interface SwatchesProps\n extends DefaultProps<SwatchesStylesNames>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'onSelect'> {\n data: string[];\n swatchesPerRow?: number;\n focusable?: boolean;\n __staticSelector?: string;\n setValue(value: string): void;\n}\n\nexport function Swatches({\n data,\n swatchesPerRow = 10,\n focusable = true,\n classNames,\n styles,\n __staticSelector = 'color-picker',\n unstyled,\n setValue,\n ...others\n}: SwatchesProps) {\n const { classes } = useStyles(\n { swatchesPerRow },\n { classNames, styles, name: __staticSelector, unstyled }\n );\n\n const colors = data.map((color, index) => (\n <ColorSwatch\n className={classes.swatch}\n component=\"button\"\n type=\"button\"\n color={color}\n key={index}\n radius=\"sm\"\n onClick={() => setValue(color)}\n style={{ cursor: 'pointer' }}\n aria-label={color}\n tabIndex={focusable ? 0 : -1}\n />\n ));\n\n return (\n <div className={classes.swatches} {...others}>\n {colors}\n </div>\n );\n}\n\nSwatches.displayName = '@mantine/core/Swatches';\n"],"names":[],"mappings":"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"}
|
package/esm/Divider/Divider.js
CHANGED
|
@@ -78,7 +78,8 @@ const Divider = forwardRef((props, ref) => {
|
|
|
78
78
|
[classes.vertical]: vertical,
|
|
79
79
|
[classes.horizontal]: horizontal,
|
|
80
80
|
[classes.withLabel]: withLabel
|
|
81
|
-
}, className)
|
|
81
|
+
}, className),
|
|
82
|
+
role: "separator"
|
|
82
83
|
}, others), withLabel && /* @__PURE__ */ React.createElement(Text, __spreadProps(__spreadValues({}, labelProps), {
|
|
83
84
|
size: (labelProps == null ? void 0 : labelProps.size) || "xs",
|
|
84
85
|
sx: { marginTop: 2 },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.js","sources":["../../src/Divider/Divider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineColor,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport useStyles from './Divider.styles';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\n\nexport type DividerStylesNames = 'label';\n\nexport interface DividerProps\n extends DefaultProps<DividerStylesNames>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Line color from theme, defaults to gray in light color scheme and to dark in dark color scheme */\n color?: MantineColor;\n\n /** Line orientation */\n orientation?: 'horizontal' | 'vertical';\n\n /** Sets height in horizontal orientation and width in vertical */\n size?: MantineNumberSize;\n\n /** Adds text after line in horizontal orientation */\n label?: React.ReactNode;\n\n /** Label position */\n labelPosition?: 'left' | 'center' | 'right';\n\n /** Props spread to Text component in label */\n labelProps?: Record<string, any>;\n\n /** Divider borderStyle */\n variant?: 'solid' | 'dashed' | 'dotted';\n}\n\nconst defaultProps: Partial<DividerProps> = {\n orientation: 'horizontal',\n size: 'xs',\n labelPosition: 'left',\n variant: 'solid',\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>((props: DividerProps, ref) => {\n const {\n className,\n color,\n orientation,\n size,\n label,\n labelPosition,\n labelProps,\n variant,\n styles,\n classNames,\n unstyled,\n ...others\n } = useComponentDefaultProps('Divider', defaultProps, props);\n\n const { classes, cx } = useStyles(\n { color, size, variant },\n { classNames, styles, unstyled, name: 'Divider' }\n );\n\n const vertical = orientation === 'vertical';\n const horizontal = orientation === 'horizontal';\n const withLabel = !!label && horizontal;\n\n const useLabelDefaultStyles = !labelProps?.color;\n\n return (\n <Box\n ref={ref}\n className={cx(\n classes.root,\n {\n [classes.vertical]: vertical,\n [classes.horizontal]: horizontal,\n [classes.withLabel]: withLabel,\n },\n className\n )}\n {...others}\n >\n {withLabel && (\n <Text\n {...labelProps}\n size={labelProps?.size || 'xs'}\n sx={{ marginTop: 2 }}\n className={cx(classes.label, classes[labelPosition], {\n [classes.labelDefaultStyles]: useLabelDefaultStyles,\n })}\n >\n {label}\n </Text>\n )}\n </Box>\n );\n});\n\nDivider.displayName = '@mantine/core/Divider';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Divider.js","sources":["../../src/Divider/Divider.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineColor,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport useStyles from './Divider.styles';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\n\nexport type DividerStylesNames = 'label';\n\nexport interface DividerProps\n extends DefaultProps<DividerStylesNames>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Line color from theme, defaults to gray in light color scheme and to dark in dark color scheme */\n color?: MantineColor;\n\n /** Line orientation */\n orientation?: 'horizontal' | 'vertical';\n\n /** Sets height in horizontal orientation and width in vertical */\n size?: MantineNumberSize;\n\n /** Adds text after line in horizontal orientation */\n label?: React.ReactNode;\n\n /** Label position */\n labelPosition?: 'left' | 'center' | 'right';\n\n /** Props spread to Text component in label */\n labelProps?: Record<string, any>;\n\n /** Divider borderStyle */\n variant?: 'solid' | 'dashed' | 'dotted';\n}\n\nconst defaultProps: Partial<DividerProps> = {\n orientation: 'horizontal',\n size: 'xs',\n labelPosition: 'left',\n variant: 'solid',\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>((props: DividerProps, ref) => {\n const {\n className,\n color,\n orientation,\n size,\n label,\n labelPosition,\n labelProps,\n variant,\n styles,\n classNames,\n unstyled,\n ...others\n } = useComponentDefaultProps('Divider', defaultProps, props);\n\n const { classes, cx } = useStyles(\n { color, size, variant },\n { classNames, styles, unstyled, name: 'Divider' }\n );\n\n const vertical = orientation === 'vertical';\n const horizontal = orientation === 'horizontal';\n const withLabel = !!label && horizontal;\n\n const useLabelDefaultStyles = !labelProps?.color;\n\n return (\n <Box\n ref={ref}\n className={cx(\n classes.root,\n {\n [classes.vertical]: vertical,\n [classes.horizontal]: horizontal,\n [classes.withLabel]: withLabel,\n },\n className\n )}\n role=\"separator\"\n {...others}\n >\n {withLabel && (\n <Text\n {...labelProps}\n size={labelProps?.size || 'xs'}\n sx={{ marginTop: 2 }}\n className={cx(classes.label, classes[labelPosition], {\n [classes.labelDefaultStyles]: useLabelDefaultStyles,\n })}\n >\n {label}\n </Text>\n )}\n </Box>\n );\n});\n\nDivider.displayName = '@mantine/core/Divider';\n"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ const sizes = {
|
|
|
9
9
|
};
|
|
10
10
|
function getColor(theme, color) {
|
|
11
11
|
const themeColor = theme.fn.variant({ variant: "outline", color }).border;
|
|
12
|
-
return color in theme.colors ? themeColor : color === void 0 ? theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4] : color;
|
|
12
|
+
return typeof color === "string" && (color in theme.colors || color.split(".")[0] in theme.colors) ? themeColor : color === void 0 ? theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4] : color;
|
|
13
13
|
}
|
|
14
14
|
var useStyles = createStyles((theme, { size, variant, color }) => ({
|
|
15
15
|
root: {},
|
|
@@ -56,7 +56,7 @@ var useStyles = createStyles((theme, { size, variant, color }) => ({
|
|
|
56
56
|
vertical: {
|
|
57
57
|
border: 0,
|
|
58
58
|
alignSelf: "stretch",
|
|
59
|
-
height: "
|
|
59
|
+
height: "auto",
|
|
60
60
|
borderLeftWidth: theme.fn.size({ size, sizes }),
|
|
61
61
|
borderLeftColor: getColor(theme, color),
|
|
62
62
|
borderLeftStyle: variant
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.styles.js","sources":["../../src/Divider/Divider.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, MantineTheme } from '@mantine/styles';\n\nexport interface DividerStylesParams {\n size: MantineNumberSize;\n variant: 'solid' | 'dashed' | 'dotted';\n color: MantineColor;\n}\n\nconst sizes = {\n xs: 1,\n sm: 2,\n md: 3,\n lg: 4,\n xl: 5,\n};\n\nfunction getColor(theme: MantineTheme, color: MantineColor) {\n const themeColor = theme.fn.variant({ variant: 'outline', color }).border;\n\n return color in theme.colors\n ? themeColor\n : color === undefined\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[4]\n : color;\n}\n\nexport default createStyles((theme, { size, variant, color }: DividerStylesParams) => ({\n root: {},\n\n withLabel: {\n borderTop: '0 !important',\n },\n\n left: {\n '&::before': {\n display: 'none',\n },\n },\n\n right: {\n '&::after': {\n display: 'none',\n },\n },\n\n label: {\n display: 'flex',\n alignItems: 'center',\n\n '&::before': {\n content: '\"\"',\n flex: 1,\n height: 1,\n borderTop: `${theme.fn.size({ size, sizes })}px ${variant} ${getColor(theme, color)}`,\n marginRight: theme.spacing.xs,\n },\n\n '&::after': {\n content: '\"\"',\n flex: 1,\n borderTop: `${theme.fn.size({ size, sizes })}px ${variant} ${getColor(theme, color)}`,\n marginLeft: theme.spacing.xs,\n },\n },\n\n labelDefaultStyles: {\n color:\n color === 'dark'\n ? theme.colors.dark[1]\n : theme.fn.themeColor(\n color,\n theme.colorScheme === 'dark' ? 5 : theme.fn.primaryShade(),\n false\n ),\n },\n\n horizontal: {\n border: 0,\n borderTopWidth: theme.fn.size({ size, sizes }),\n borderTopColor: getColor(theme, color),\n borderTopStyle: variant,\n margin: 0,\n },\n\n vertical: {\n border: 0,\n alignSelf: 'stretch',\n height: '
|
|
1
|
+
{"version":3,"file":"Divider.styles.js","sources":["../../src/Divider/Divider.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, MantineTheme } from '@mantine/styles';\n\nexport interface DividerStylesParams {\n size: MantineNumberSize;\n variant: 'solid' | 'dashed' | 'dotted';\n color: MantineColor;\n}\n\nconst sizes = {\n xs: 1,\n sm: 2,\n md: 3,\n lg: 4,\n xl: 5,\n};\n\nfunction getColor(theme: MantineTheme, color: MantineColor) {\n const themeColor = theme.fn.variant({ variant: 'outline', color }).border;\n\n return typeof color === 'string' && (color in theme.colors || color.split('.')[0] in theme.colors)\n ? themeColor\n : color === undefined\n ? theme.colorScheme === 'dark'\n ? theme.colors.dark[4]\n : theme.colors.gray[4]\n : color;\n}\n\nexport default createStyles((theme, { size, variant, color }: DividerStylesParams) => ({\n root: {},\n\n withLabel: {\n borderTop: '0 !important',\n },\n\n left: {\n '&::before': {\n display: 'none',\n },\n },\n\n right: {\n '&::after': {\n display: 'none',\n },\n },\n\n label: {\n display: 'flex',\n alignItems: 'center',\n\n '&::before': {\n content: '\"\"',\n flex: 1,\n height: 1,\n borderTop: `${theme.fn.size({ size, sizes })}px ${variant} ${getColor(theme, color)}`,\n marginRight: theme.spacing.xs,\n },\n\n '&::after': {\n content: '\"\"',\n flex: 1,\n borderTop: `${theme.fn.size({ size, sizes })}px ${variant} ${getColor(theme, color)}`,\n marginLeft: theme.spacing.xs,\n },\n },\n\n labelDefaultStyles: {\n color:\n color === 'dark'\n ? theme.colors.dark[1]\n : theme.fn.themeColor(\n color,\n theme.colorScheme === 'dark' ? 5 : theme.fn.primaryShade(),\n false\n ),\n },\n\n horizontal: {\n border: 0,\n borderTopWidth: theme.fn.size({ size, sizes }),\n borderTopColor: getColor(theme, color),\n borderTopStyle: variant,\n margin: 0,\n },\n\n vertical: {\n border: 0,\n alignSelf: 'stretch',\n height: 'auto',\n borderLeftWidth: theme.fn.size({ size, sizes }),\n borderLeftColor: getColor(theme, color),\n borderLeftStyle: variant,\n },\n}));\n"],"names":[],"mappings":"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"}
|
package/esm/Image/Image.js
CHANGED
|
@@ -56,7 +56,8 @@ const Image = forwardRef((props, ref) => {
|
|
|
56
56
|
classNames,
|
|
57
57
|
styles,
|
|
58
58
|
caption,
|
|
59
|
-
unstyled
|
|
59
|
+
unstyled,
|
|
60
|
+
style
|
|
60
61
|
} = _a, others = __objRest(_a, [
|
|
61
62
|
"className",
|
|
62
63
|
"alt",
|
|
@@ -72,7 +73,8 @@ const Image = forwardRef((props, ref) => {
|
|
|
72
73
|
"classNames",
|
|
73
74
|
"styles",
|
|
74
75
|
"caption",
|
|
75
|
-
"unstyled"
|
|
76
|
+
"unstyled",
|
|
77
|
+
"style"
|
|
76
78
|
]);
|
|
77
79
|
const { classes, cx } = useStyles({ radius }, { classNames, styles, unstyled, name: "Image" });
|
|
78
80
|
const [loaded, setLoaded] = useState(false);
|
|
@@ -84,7 +86,8 @@ const Image = forwardRef((props, ref) => {
|
|
|
84
86
|
}, [src]);
|
|
85
87
|
return /* @__PURE__ */ React.createElement(Box, __spreadValues({
|
|
86
88
|
className: cx(classes.root, className),
|
|
87
|
-
ref
|
|
89
|
+
ref,
|
|
90
|
+
style: __spreadValues({ width, height }, style)
|
|
88
91
|
}, others), /* @__PURE__ */ React.createElement("figure", {
|
|
89
92
|
className: classes.figure
|
|
90
93
|
}, /* @__PURE__ */ React.createElement("div", {
|
package/esm/Image/Image.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","sources":["../../src/Image/Image.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n Selectors,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { useDidUpdate } from '@mantine/hooks';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\nimport { ImageIcon } from './ImageIcon';\nimport useStyles, { ImageStylesParams } from './Image.styles';\n\nexport type ImageStylesNames = Selectors<typeof useStyles>;\n\nexport interface ImageProps\n extends DefaultProps<ImageStylesNames, ImageStylesParams>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'placeholder'> {\n /** Image src */\n src?: string;\n\n /** Image alt text, used as title for placeholder if image was not loaded */\n alt?: string;\n\n /** Image object-fit property */\n fit?: 'contain' | 'cover';\n\n /** Image width, defaults to 100%, cannot exceed 100% */\n width?: number | string;\n\n /** Image height, defaults to original image height adjusted to given width */\n height?: number | string;\n\n /** Predefined border-radius value from theme.radius or number for border-radius in px */\n radius?: MantineNumberSize;\n\n /** Enable placeholder when image is loading and when image fails to load */\n withPlaceholder?: boolean;\n\n /** Customize placeholder content */\n placeholder?: React.ReactNode;\n\n /** Props spread to img element */\n imageProps?: React.ComponentPropsWithoutRef<'img'>;\n\n /** Get image element ref */\n imageRef?: React.ForwardedRef<HTMLImageElement>;\n\n /** Image figcaption, displayed bellow image */\n caption?: React.ReactNode;\n}\n\nconst defaultProps: Partial<ImageProps> = {\n fit: 'cover',\n width: '100%',\n height: 'auto',\n radius: 0,\n};\n\nexport const Image = forwardRef<HTMLDivElement, ImageProps>((props: ImageProps, ref) => {\n const {\n className,\n alt,\n src,\n fit,\n width,\n height,\n radius,\n imageProps,\n withPlaceholder,\n placeholder,\n imageRef,\n classNames,\n styles,\n caption,\n unstyled,\n ...others\n } = useComponentDefaultProps('Image', defaultProps, props);\n const { classes, cx } = useStyles({ radius }, { classNames, styles, unstyled, name: 'Image' });\n const [loaded, setLoaded] = useState(false);\n const [error, setError] = useState(!src);\n const isPlaceholder = withPlaceholder && (!loaded || error);\n\n useDidUpdate(() => {\n setLoaded(false);\n setError(false);\n }, [src]);\n\n return (\n <Box
|
|
1
|
+
{"version":3,"file":"Image.js","sources":["../../src/Image/Image.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n Selectors,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { useDidUpdate } from '@mantine/hooks';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\nimport { ImageIcon } from './ImageIcon';\nimport useStyles, { ImageStylesParams } from './Image.styles';\n\nexport type ImageStylesNames = Selectors<typeof useStyles>;\n\nexport interface ImageProps\n extends DefaultProps<ImageStylesNames, ImageStylesParams>,\n Omit<React.ComponentPropsWithoutRef<'div'>, 'placeholder'> {\n /** Image src */\n src?: string;\n\n /** Image alt text, used as title for placeholder if image was not loaded */\n alt?: string;\n\n /** Image object-fit property */\n fit?: 'contain' | 'cover';\n\n /** Image width, defaults to 100%, cannot exceed 100% */\n width?: number | string;\n\n /** Image height, defaults to original image height adjusted to given width */\n height?: number | string;\n\n /** Predefined border-radius value from theme.radius or number for border-radius in px */\n radius?: MantineNumberSize;\n\n /** Enable placeholder when image is loading and when image fails to load */\n withPlaceholder?: boolean;\n\n /** Customize placeholder content */\n placeholder?: React.ReactNode;\n\n /** Props spread to img element */\n imageProps?: React.ComponentPropsWithoutRef<'img'>;\n\n /** Get image element ref */\n imageRef?: React.ForwardedRef<HTMLImageElement>;\n\n /** Image figcaption, displayed bellow image */\n caption?: React.ReactNode;\n}\n\nconst defaultProps: Partial<ImageProps> = {\n fit: 'cover',\n width: '100%',\n height: 'auto',\n radius: 0,\n};\n\nexport const Image = forwardRef<HTMLDivElement, ImageProps>((props: ImageProps, ref) => {\n const {\n className,\n alt,\n src,\n fit,\n width,\n height,\n radius,\n imageProps,\n withPlaceholder,\n placeholder,\n imageRef,\n classNames,\n styles,\n caption,\n unstyled,\n style,\n ...others\n } = useComponentDefaultProps('Image', defaultProps, props);\n const { classes, cx } = useStyles({ radius }, { classNames, styles, unstyled, name: 'Image' });\n const [loaded, setLoaded] = useState(false);\n const [error, setError] = useState(!src);\n const isPlaceholder = withPlaceholder && (!loaded || error);\n\n useDidUpdate(() => {\n setLoaded(false);\n setError(false);\n }, [src]);\n\n return (\n <Box\n className={cx(classes.root, className)}\n ref={ref}\n style={{ width, height, ...style }}\n {...others}\n >\n <figure className={classes.figure}>\n <div className={classes.imageWrapper}>\n <img\n className={classes.image}\n src={src}\n alt={alt}\n style={{ objectFit: fit, width, height }}\n ref={imageRef}\n onLoad={(event) => {\n setLoaded(true);\n typeof imageProps?.onLoad === 'function' && imageProps.onLoad(event);\n }}\n onError={(event) => {\n setError(true);\n typeof imageProps?.onError === 'function' && imageProps.onError(event);\n }}\n {...imageProps}\n />\n\n {isPlaceholder && (\n <div className={classes.placeholder} title={alt}>\n {placeholder || <ImageIcon style={{ width: 40, height: 40 }} />}\n </div>\n )}\n </div>\n\n {!!caption && (\n <Text component=\"figcaption\" size=\"sm\" align=\"center\" className={classes.caption}>\n {caption}\n </Text>\n )}\n </figure>\n </Box>\n );\n});\n\nImage.displayName = '@mantine/core/Image';\n"],"names":[],"mappings":"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"}
|
|
@@ -78,7 +78,7 @@ var useStyles = createStyles((theme, {
|
|
|
78
78
|
paddingLeft: withLabel ? theme.spacing.xs / 2 : 0,
|
|
79
79
|
paddingRight: withLabel ? theme.spacing.xs / 2 : 0,
|
|
80
80
|
borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
|
|
81
|
-
backgroundColor: theme.fn.
|
|
81
|
+
backgroundColor: theme.fn.variant({ variant: "filled", primaryFallback: false, color }).background,
|
|
82
82
|
border: withBorder ? `2px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}` : void 0,
|
|
83
83
|
color: theme.white,
|
|
84
84
|
whiteSpace: "nowrap"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Indicator.styles.js","sources":["../../src/Indicator/Indicator.styles.ts"],"sourcesContent":["import { createStyles, CSSObject, MantineColor, MantineNumberSize } from '@mantine/styles';\nimport { IndicatorPosition } from './Indicator.types';\n\nexport interface IndicatorStylesParams {\n radius: MantineNumberSize;\n size: number;\n color: MantineColor;\n position: IndicatorPosition;\n offset: number;\n inline: boolean;\n withBorder: boolean;\n withLabel: boolean;\n zIndex: React.CSSProperties['zIndex'];\n}\n\nfunction getPositionStyles(_position: IndicatorPosition, offset = 0) {\n const styles: CSSObject = {};\n const [position, placement] = _position.split('-');\n let translateX = '';\n let translateY = '';\n\n if (position === 'top') {\n styles.top = offset;\n translateY = '-50%';\n }\n\n if (position === 'middle') {\n styles.top = '50%';\n translateY = '-50%';\n }\n\n if (position === 'bottom') {\n styles.bottom = offset;\n translateY = '50%';\n }\n\n if (placement === 'start') {\n styles.left = offset;\n translateX = '-50%';\n }\n\n if (placement === 'center') {\n styles.left = '50%';\n translateX = '-50%';\n }\n\n if (placement === 'end') {\n styles.right = offset;\n translateX = '50%';\n }\n\n styles.transform = `translate(${translateX}, ${translateY})`;\n\n return styles;\n}\n\nexport default createStyles(\n (\n theme,\n {\n radius,\n size,\n color,\n position,\n offset,\n inline,\n withBorder,\n withLabel,\n zIndex,\n }: IndicatorStylesParams\n ) => ({\n root: {\n position: 'relative',\n display: inline ? 'inline-block' : 'block',\n },\n\n indicator: {\n ...getPositionStyles(position, offset),\n zIndex,\n position: 'absolute',\n [withLabel ? 'minWidth' : 'width']: size,\n height: size,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontSize: theme.fontSizes.xs,\n paddingLeft: withLabel ? theme.spacing.xs / 2 : 0,\n paddingRight: withLabel ? theme.spacing.xs / 2 : 0,\n borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n backgroundColor: theme.fn.
|
|
1
|
+
{"version":3,"file":"Indicator.styles.js","sources":["../../src/Indicator/Indicator.styles.ts"],"sourcesContent":["import { createStyles, CSSObject, MantineColor, MantineNumberSize } from '@mantine/styles';\nimport { IndicatorPosition } from './Indicator.types';\n\nexport interface IndicatorStylesParams {\n radius: MantineNumberSize;\n size: number;\n color: MantineColor;\n position: IndicatorPosition;\n offset: number;\n inline: boolean;\n withBorder: boolean;\n withLabel: boolean;\n zIndex: React.CSSProperties['zIndex'];\n}\n\nfunction getPositionStyles(_position: IndicatorPosition, offset = 0) {\n const styles: CSSObject = {};\n const [position, placement] = _position.split('-');\n let translateX = '';\n let translateY = '';\n\n if (position === 'top') {\n styles.top = offset;\n translateY = '-50%';\n }\n\n if (position === 'middle') {\n styles.top = '50%';\n translateY = '-50%';\n }\n\n if (position === 'bottom') {\n styles.bottom = offset;\n translateY = '50%';\n }\n\n if (placement === 'start') {\n styles.left = offset;\n translateX = '-50%';\n }\n\n if (placement === 'center') {\n styles.left = '50%';\n translateX = '-50%';\n }\n\n if (placement === 'end') {\n styles.right = offset;\n translateX = '50%';\n }\n\n styles.transform = `translate(${translateX}, ${translateY})`;\n\n return styles;\n}\n\nexport default createStyles(\n (\n theme,\n {\n radius,\n size,\n color,\n position,\n offset,\n inline,\n withBorder,\n withLabel,\n zIndex,\n }: IndicatorStylesParams\n ) => ({\n root: {\n position: 'relative',\n display: inline ? 'inline-block' : 'block',\n },\n\n indicator: {\n ...getPositionStyles(position, offset),\n zIndex,\n position: 'absolute',\n [withLabel ? 'minWidth' : 'width']: size,\n height: size,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n fontSize: theme.fontSizes.xs,\n paddingLeft: withLabel ? theme.spacing.xs / 2 : 0,\n paddingRight: withLabel ? theme.spacing.xs / 2 : 0,\n borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n backgroundColor: theme.fn.variant({ variant: 'filled', primaryFallback: false, color })\n .background,\n border: withBorder\n ? `2px solid ${theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white}`\n : undefined,\n color: theme.white,\n whiteSpace: 'nowrap',\n },\n })\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -36,7 +36,8 @@ const InputDescription = forwardRef((_a, ref) => {
|
|
|
36
36
|
return /* @__PURE__ */ React.createElement(Text, __spreadValues({
|
|
37
37
|
color: "dimmed",
|
|
38
38
|
className: cx(classes.description, className),
|
|
39
|
-
ref
|
|
39
|
+
ref,
|
|
40
|
+
unstyled
|
|
40
41
|
}, others), children);
|
|
41
42
|
});
|
|
42
43
|
InputDescription.displayName = "@mantine/core/InputDescription";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputDescription.js","sources":["../../../src/Input/InputDescription/InputDescription.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { Text } from '../../Text';\nimport useStyles, { InputDescriptionStylesParams } from './InputDescription.styles';\n\nexport type InputDescriptionStylesNames = Selectors<typeof useStyles>;\n\nexport interface InputDescriptionProps\n extends DefaultProps<InputDescriptionStylesNames, InputDescriptionStylesParams>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Description content */\n children?: React.ReactNode;\n\n /** Predefined size */\n size?: MantineSize;\n\n __staticSelector?: string;\n}\n\nexport const InputDescription = forwardRef<HTMLDivElement, InputDescriptionProps>(\n (\n { children, className, classNames, styles, unstyled, size = 'sm', __staticSelector, ...others },\n ref\n ) => {\n const { classes, cx } = useStyles(\n { size },\n { name: ['InputWrapper', __staticSelector], classNames, styles, unstyled }\n );\n return (\n <Text
|
|
1
|
+
{"version":3,"file":"InputDescription.js","sources":["../../../src/Input/InputDescription/InputDescription.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, MantineSize, Selectors } from '@mantine/styles';\nimport { Text } from '../../Text';\nimport useStyles, { InputDescriptionStylesParams } from './InputDescription.styles';\n\nexport type InputDescriptionStylesNames = Selectors<typeof useStyles>;\n\nexport interface InputDescriptionProps\n extends DefaultProps<InputDescriptionStylesNames, InputDescriptionStylesParams>,\n React.ComponentPropsWithoutRef<'div'> {\n /** Description content */\n children?: React.ReactNode;\n\n /** Predefined size */\n size?: MantineSize;\n\n __staticSelector?: string;\n}\n\nexport const InputDescription = forwardRef<HTMLDivElement, InputDescriptionProps>(\n (\n { children, className, classNames, styles, unstyled, size = 'sm', __staticSelector, ...others },\n ref\n ) => {\n const { classes, cx } = useStyles(\n { size },\n { name: ['InputWrapper', __staticSelector], classNames, styles, unstyled }\n );\n return (\n <Text\n color=\"dimmed\"\n className={cx(classes.description, className)}\n ref={ref}\n unstyled={unstyled}\n {...others}\n >\n {children}\n </Text>\n );\n }\n);\n\nInputDescription.displayName = '@mantine/core/InputDescription';\n"],"names":[],"mappings":"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"}
|
package/esm/Loader/Loader.js
CHANGED
|
@@ -52,12 +52,15 @@ function Loader(props) {
|
|
|
52
52
|
const _a = useComponentDefaultProps("Loader", defaultProps, props), { size, color, variant } = _a, others = __objRest(_a, ["size", "color", "variant"]);
|
|
53
53
|
const theme = useMantineTheme();
|
|
54
54
|
const defaultLoader = variant in LOADERS ? variant : theme.loader;
|
|
55
|
-
const _color = color || theme.primaryColor;
|
|
56
55
|
return /* @__PURE__ */ React.createElement(Box, __spreadValues({
|
|
57
56
|
role: "presentation",
|
|
58
57
|
component: LOADERS[defaultLoader] || LOADERS.bars,
|
|
59
58
|
size: theme.fn.size({ size, sizes }),
|
|
60
|
-
color:
|
|
59
|
+
color: theme.fn.variant({
|
|
60
|
+
variant: "filled",
|
|
61
|
+
primaryFallback: false,
|
|
62
|
+
color: color || theme.primaryColor
|
|
63
|
+
}).background
|
|
61
64
|
}, others));
|
|
62
65
|
}
|
|
63
66
|
Loader.displayName = "@mantine/core/Loader";
|
package/esm/Loader/Loader.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.js","sources":["../../src/Loader/Loader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineColor,\n MantineTheme,\n useMantineTheme,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport { Bars } from './loaders/Bars';\nimport { Oval } from './loaders/Oval';\nimport { Dots } from './loaders/Dots';\n\nconst LOADERS = {\n bars: Bars,\n oval: Oval,\n dots: Dots,\n};\n\nconst sizes = {\n xs: 18,\n sm: 22,\n md: 36,\n lg: 44,\n xl: 58,\n};\n\nexport interface LoaderProps extends DefaultProps, React.ComponentPropsWithoutRef<'svg'> {\n /** Defines width of loader */\n size?: MantineNumberSize;\n\n /** Loader color from theme */\n color?: MantineColor;\n\n /** Loader appearance */\n variant?: MantineTheme['loader'];\n}\n\nconst defaultProps: Partial<LoaderProps> = {\n size: 'md',\n};\n\nexport function Loader(props: LoaderProps) {\n const { size, color, variant, ...others } = useComponentDefaultProps(\n 'Loader',\n defaultProps,\n props\n );\n const theme = useMantineTheme();\n const defaultLoader = variant in LOADERS ? variant : theme.loader;\n
|
|
1
|
+
{"version":3,"file":"Loader.js","sources":["../../src/Loader/Loader.tsx"],"sourcesContent":["import React from 'react';\nimport {\n DefaultProps,\n MantineNumberSize,\n MantineColor,\n MantineTheme,\n useMantineTheme,\n useComponentDefaultProps,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport { Bars } from './loaders/Bars';\nimport { Oval } from './loaders/Oval';\nimport { Dots } from './loaders/Dots';\n\nconst LOADERS = {\n bars: Bars,\n oval: Oval,\n dots: Dots,\n};\n\nconst sizes = {\n xs: 18,\n sm: 22,\n md: 36,\n lg: 44,\n xl: 58,\n};\n\nexport interface LoaderProps extends DefaultProps, React.ComponentPropsWithoutRef<'svg'> {\n /** Defines width of loader */\n size?: MantineNumberSize;\n\n /** Loader color from theme */\n color?: MantineColor;\n\n /** Loader appearance */\n variant?: MantineTheme['loader'];\n}\n\nconst defaultProps: Partial<LoaderProps> = {\n size: 'md',\n};\n\nexport function Loader(props: LoaderProps) {\n const { size, color, variant, ...others } = useComponentDefaultProps(\n 'Loader',\n defaultProps,\n props\n );\n const theme = useMantineTheme();\n const defaultLoader = variant in LOADERS ? variant : theme.loader;\n\n return (\n <Box\n role=\"presentation\"\n component={LOADERS[defaultLoader] || LOADERS.bars}\n size={theme.fn.size({ size, sizes })}\n color={\n theme.fn.variant({\n variant: 'filled',\n primaryFallback: false,\n color: color || theme.primaryColor,\n }).background\n }\n {...others}\n />\n );\n}\n\nLoader.displayName = '@mantine/core/Loader';\n"],"names":[],"mappings":"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"}
|
|
@@ -33,7 +33,7 @@ var useStyles = createStyles((theme, { color, radius }) => ({
|
|
|
33
33
|
padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
|
|
34
34
|
cursor: "pointer",
|
|
35
35
|
borderRadius: theme.fn.radius(radius),
|
|
36
|
-
color: color ? theme.fn.
|
|
36
|
+
color: color ? theme.fn.variant({ variant: "filled", primaryFallback: false, color }).background : theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
|
|
37
37
|
display: "flex",
|
|
38
38
|
alignItems: "center",
|
|
39
39
|
"&:disabled": {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MenuItem.styles.js","sources":["../../../src/Menu/MenuItem/MenuItem.styles.ts"],"sourcesContent":["import { createStyles, MantineColor, MantineNumberSize } from '@mantine/styles';\n\ninterface MenuItemStylesParams {\n color: MantineColor;\n radius: MantineNumberSize;\n}\n\nexport default createStyles((theme, { color, radius }: MenuItemStylesParams) => ({\n item: {\n ...theme.fn.fontStyles(),\n WebkitTapHighlightColor: 'transparent',\n fontSize: theme.fontSizes.sm,\n border: 0,\n backgroundColor: 'transparent',\n outline: 0,\n width: '100%',\n textAlign: 'left',\n textDecoration: 'none',\n boxSizing: 'border-box',\n padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n cursor: 'pointer',\n borderRadius: theme.fn.radius(radius),\n color: color\n ? theme.fn.
|
|
1
|
+
{"version":3,"file":"MenuItem.styles.js","sources":["../../../src/Menu/MenuItem/MenuItem.styles.ts"],"sourcesContent":["import { createStyles, MantineColor, MantineNumberSize } from '@mantine/styles';\n\ninterface MenuItemStylesParams {\n color: MantineColor;\n radius: MantineNumberSize;\n}\n\nexport default createStyles((theme, { color, radius }: MenuItemStylesParams) => ({\n item: {\n ...theme.fn.fontStyles(),\n WebkitTapHighlightColor: 'transparent',\n fontSize: theme.fontSizes.sm,\n border: 0,\n backgroundColor: 'transparent',\n outline: 0,\n width: '100%',\n textAlign: 'left',\n textDecoration: 'none',\n boxSizing: 'border-box',\n padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n cursor: 'pointer',\n borderRadius: theme.fn.radius(radius),\n color: color\n ? theme.fn.variant({ variant: 'filled', primaryFallback: false, color }).background\n : theme.colorScheme === 'dark'\n ? theme.colors.dark[0]\n : theme.black,\n display: 'flex',\n alignItems: 'center',\n\n '&:disabled': {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n pointerEvents: 'none',\n userSelect: 'none',\n },\n\n '&[data-hovered]': {\n backgroundColor: color\n ? theme.fn.variant({ variant: 'light', color }).background\n : theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors.dark[3], 0.35)\n : theme.colors.gray[0],\n },\n },\n\n itemLabel: {\n flex: 1,\n },\n\n itemIcon: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n marginRight: theme.spacing.xs,\n },\n\n itemRightSection: {},\n}));\n"],"names":[],"mappings":"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"}
|