npm - @mantine/core - Versions diffs - 9.0.0-alpha.7 → 9.0.1 - Mend

@mantine/core 9.0.0-alpha.7 → 9.0.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.

Files changed (505) hide show

package/cjs/components/Button/Button.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.cjs","names":["rem","createVarsResolver","getSize","getFontSize","getRadius","polymorphicFactory","useProps","useStyles","UnstyledButton","Transition","Box","Loader","classes","ButtonGroup","ButtonGroupSection"],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n getFontSize,\n getRadius,\n getSize,\n MantineColor,\n MantineGradient,\n MantineRadius,\n MantineSize,\n polymorphicFactory,\n PolymorphicFactory,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Loader, LoaderProps } from '../Loader';\nimport { MantineTransition, Transition } from '../Transition';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { ButtonGroup } from './ButtonGroup/ButtonGroup';\nimport { ButtonGroupSection } from './ButtonGroupSection/ButtonGroupSection';\nimport classes from './Button.module.css';\n\nexport type ButtonSize = MantineSize \| `compact-${MantineSize}` \| (string & {});\n\nexport type ButtonStylesNames = 'root' \| 'inner' \| 'loader' \| 'section' \| 'label';\nexport type ButtonVariant =\n \| 'filled'\n \| 'light'\n \| 'outline'\n \| 'transparent'\n \| 'white'\n \| 'subtle'\n \| 'default'\n \| 'gradient';\n\nexport type ButtonCssVariables = {\n root:\n \| '--button-justify'\n \| '--button-height'\n \| '--button-padding-x'\n \| '--button-fz'\n \| '--button-radius'\n \| '--button-bg'\n \| '--button-hover'\n \| '--button-hover-color'\n \| '--button-color'\n \| '--button-bd';\n};\n\nexport interface ButtonProps extends BoxProps, StylesApiProps<ButtonFactory> {\n 'data-disabled'?: boolean;\n\n /** Controls button `height`, `font-size` and horizontal `padding` @default 'sm' /\n size?: ButtonSize;\n\n /* Key of `theme.colors` or any valid CSS color @default theme.primaryColor /\n color?: MantineColor;\n\n /* Sets `justify-content` of `inner` element, can be used to change distribution of sections and label @default 'center' /\n justify?: React.CSSProperties['justifyContent'];\n\n /* Content on the left side of the button label /\n leftSection?: React.ReactNode;\n\n /* Content on the right side of the button label /\n rightSection?: React.ReactNode;\n\n /* Sets `width: 100%` @default false /\n fullWidth?: boolean;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Gradient configuration used for `variant=\"gradient\"` @default theme.defaultGradient /\n gradient?: MantineGradient;\n\n /* Sets `disabled` attribute, applies disabled styles /\n disabled?: boolean;\n\n /* Button content /\n children?: React.ReactNode;\n\n /* If set, the `Loader` component is displayed over the button /\n loading?: boolean;\n\n /* Props added to the `Loader` component (only visible when `loading` prop is set) /\n loaderProps?: LoaderProps;\n\n /* If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n}\n\nexport type ButtonFactory = PolymorphicFactory<{\n props: ButtonProps;\n defaultRef: HTMLButtonElement;\n defaultComponent: 'button';\n stylesNames: ButtonStylesNames;\n vars: ButtonCssVariables;\n variant: ButtonVariant;\n staticComponents: {\n Group: typeof ButtonGroup;\n GroupSection: typeof ButtonGroupSection;\n };\n}>;\n\nconst loaderTransition: MantineTransition = {\n in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },\n out: { opacity: 0, transform: 'translate(-50%, -200%)' },\n common: { transformOrigin: 'center' },\n transitionProperty: 'transform, opacity',\n};\n\nconst varsResolver = createVarsResolver<ButtonFactory>(\n (theme, { radius, color, gradient, variant, size, justify, autoContrast }) => {\n const colors = theme.variantColorResolver({\n color: color \|\| theme.primaryColor,\n theme,\n gradient,\n variant: variant \|\| 'filled',\n autoContrast,\n });\n\n return {\n root: {\n '--button-justify': justify,\n '--button-height': getSize(size, 'button-height'),\n '--button-padding-x': getSize(size, 'button-padding-x'),\n '--button-fz': size?.includes('compact')\n ? getFontSize(size.replace('compact-', ''))\n : getFontSize(size),\n '--button-radius': radius === undefined ? undefined : getRadius(radius),\n '--button-bg': color \|\| variant ? colors.background : undefined,\n '--button-hover': color \|\| variant ? colors.hover : undefined,\n '--button-color': colors.color,\n '--button-bd': color \|\| variant ? colors.border : undefined,\n '--button-hover-color': color \|\| variant ? colors.hoverColor : undefined,\n },\n };\n }\n);\n\nexport const Button = polymorphicFactory<ButtonFactory>((_props) => {\n const props = useProps('Button', null, _props);\n const {\n style,\n vars,\n className,\n color,\n disabled,\n children,\n leftSection,\n rightSection,\n fullWidth,\n variant,\n radius,\n loading,\n loaderProps,\n gradient,\n classNames,\n styles,\n unstyled,\n 'data-disabled': dataDisabled,\n autoContrast,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<ButtonFactory>({\n name: 'Button',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const hasLeftSection = !!leftSection;\n const hasRightSection = !!rightSection;\n\n return (\n <UnstyledButton\n {...getStyles('root', { active: !disabled && !loading && !dataDisabled })}\n unstyled={unstyled}\n variant={variant}\n disabled={disabled \|\| loading}\n mod={[\n {\n disabled: disabled \|\| dataDisabled,\n loading,\n block: fullWidth,\n 'with-left-section': hasLeftSection,\n 'with-right-section': hasRightSection,\n },\n mod,\n ]}\n {...others}\n >\n {typeof loading === 'boolean' && (\n <Transition mounted={loading} transition={loaderTransition} duration={150}>\n {(transitionStyles) => (\n <Box component=\"span\" {...getStyles('loader', { style: transitionStyles })} aria-hidden>\n <Loader\n color=\"var(--button-color)\"\n size=\"calc(var(--button-height) / 1.8)\"\n {...loaderProps}\n />\n </Box>\n )}\n </Transition>\n )}\n\n <span {...getStyles('inner')}>\n {leftSection && (\n <Box component=\"span\" {...getStyles('section')} mod={{ position: 'left' }}>\n {leftSection}\n </Box>\n )}\n\n <Box component=\"span\" mod={{ loading }} {...getStyles('label')}>\n {children}\n </Box>\n\n {rightSection && (\n <Box component=\"span\" {...getStyles('section')} mod={{ position: 'right' }}>\n {rightSection}\n </Box>\n )}\n </span>\n </UnstyledButton>\n );\n});\n\nButton.classes = classes;\nButton.varsResolver = varsResolver;\nButton.displayName = '@mantine/core/Button';\nButton.Group = ButtonGroup;\nButton.GroupSection = ButtonGroupSection;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Button.cjs","names":["rem","createVarsResolver","getSize","getFontSize","getRadius","polymorphicFactory","useProps","useStyles","UnstyledButton","Transition","Box","Loader","classes","ButtonGroup","ButtonGroupSection"],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n getFontSize,\n getRadius,\n getSize,\n MantineColor,\n MantineGradient,\n MantineRadius,\n MantineSize,\n polymorphicFactory,\n PolymorphicFactory,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Loader, LoaderProps } from '../Loader';\nimport { MantineTransition, Transition } from '../Transition';\nimport { UnstyledButton } from '../UnstyledButton';\nimport {\n ButtonGroup,\n type ButtonGroupProps,\n type ButtonGroupStylesNames,\n type ButtonGroupCssVariables,\n type ButtonGroupFactory,\n} from './ButtonGroup/ButtonGroup';\nimport {\n ButtonGroupSection,\n type ButtonGroupSectionProps,\n type ButtonGroupSectionStylesNames,\n type ButtonGroupSectionCssVariables,\n type ButtonGroupSectionFactory,\n} from './ButtonGroupSection/ButtonGroupSection';\nimport classes from './Button.module.css';\nexport type ButtonSize = MantineSize \| `compact-${MantineSize}` \| (string & {});\n\nexport type ButtonStylesNames = 'root' \| 'inner' \| 'loader' \| 'section' \| 'label';\nexport type ButtonVariant =\n \| 'filled'\n \| 'light'\n \| 'outline'\n \| 'transparent'\n \| 'white'\n \| 'subtle'\n \| 'default'\n \| 'gradient';\n\nexport type ButtonCssVariables = {\n root:\n \| '--button-justify'\n \| '--button-height'\n \| '--button-padding-x'\n \| '--button-fz'\n \| '--button-radius'\n \| '--button-bg'\n \| '--button-hover'\n \| '--button-hover-color'\n \| '--button-color'\n \| '--button-bd';\n};\n\nexport interface ButtonProps extends BoxProps, StylesApiProps<ButtonFactory> {\n 'data-disabled'?: boolean;\n\n /** Controls button `height`, `font-size` and horizontal `padding` @default 'sm' /\n size?: ButtonSize;\n\n /* Key of `theme.colors` or any valid CSS color @default theme.primaryColor /\n color?: MantineColor;\n\n /* Sets `justify-content` of `inner` element, can be used to change distribution of sections and label @default 'center' /\n justify?: React.CSSProperties['justifyContent'];\n\n /* Content on the left side of the button label /\n leftSection?: React.ReactNode;\n\n /* Content on the right side of the button label /\n rightSection?: React.ReactNode;\n\n /* Sets `width: 100%` @default false /\n fullWidth?: boolean;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Gradient configuration used for `variant=\"gradient\"` @default theme.defaultGradient /\n gradient?: MantineGradient;\n\n /* Sets `disabled` attribute, applies disabled styles /\n disabled?: boolean;\n\n /* Button content /\n children?: React.ReactNode;\n\n /* If set, the `Loader` component is displayed over the button /\n loading?: boolean;\n\n /* Props added to the `Loader` component (only visible when `loading` prop is set) /\n loaderProps?: LoaderProps;\n\n /* If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n}\n\nexport type ButtonFactory = PolymorphicFactory<{\n props: ButtonProps;\n defaultRef: HTMLButtonElement;\n defaultComponent: 'button';\n stylesNames: ButtonStylesNames;\n vars: ButtonCssVariables;\n variant: ButtonVariant;\n staticComponents: {\n Group: typeof ButtonGroup;\n GroupSection: typeof ButtonGroupSection;\n };\n}>;\n\nconst loaderTransition: MantineTransition = {\n in: { opacity: 1, transform: `translate(-50%, calc(-50% + ${rem(1)}))` },\n out: { opacity: 0, transform: 'translate(-50%, -200%)' },\n common: { transformOrigin: 'center' },\n transitionProperty: 'transform, opacity',\n};\n\nconst varsResolver = createVarsResolver<ButtonFactory>(\n (theme, { radius, color, gradient, variant, size, justify, autoContrast }) => {\n const colors = theme.variantColorResolver({\n color: color \|\| theme.primaryColor,\n theme,\n gradient,\n variant: variant \|\| 'filled',\n autoContrast,\n });\n\n return {\n root: {\n '--button-justify': justify,\n '--button-height': getSize(size, 'button-height'),\n '--button-padding-x': getSize(size, 'button-padding-x'),\n '--button-fz': size?.includes('compact')\n ? getFontSize(size.replace('compact-', ''))\n : getFontSize(size),\n '--button-radius': radius === undefined ? undefined : getRadius(radius),\n '--button-bg': color \|\| variant ? colors.background : undefined,\n '--button-hover': color \|\| variant ? colors.hover : undefined,\n '--button-color': colors.color,\n '--button-bd': color \|\| variant ? colors.border : undefined,\n '--button-hover-color': color \|\| variant ? colors.hoverColor : undefined,\n },\n };\n }\n);\n\nexport const Button = polymorphicFactory<ButtonFactory>((_props) => {\n const props = useProps('Button', null, _props);\n const {\n style,\n vars,\n className,\n color,\n disabled,\n children,\n leftSection,\n rightSection,\n fullWidth,\n variant,\n radius,\n loading,\n loaderProps,\n gradient,\n classNames,\n styles,\n unstyled,\n 'data-disabled': dataDisabled,\n autoContrast,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<ButtonFactory>({\n name: 'Button',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const hasLeftSection = !!leftSection;\n const hasRightSection = !!rightSection;\n\n return (\n <UnstyledButton\n {...getStyles('root', { active: !disabled && !loading && !dataDisabled })}\n unstyled={unstyled}\n variant={variant}\n disabled={disabled \|\| loading}\n mod={[\n {\n disabled: disabled \|\| dataDisabled,\n loading,\n block: fullWidth,\n 'with-left-section': hasLeftSection,\n 'with-right-section': hasRightSection,\n },\n mod,\n ]}\n {...others}\n >\n {typeof loading === 'boolean' && (\n <Transition mounted={loading} transition={loaderTransition} duration={150}>\n {(transitionStyles) => (\n <Box component=\"span\" {...getStyles('loader', { style: transitionStyles })} aria-hidden>\n <Loader\n color=\"var(--button-color)\"\n size=\"calc(var(--button-height) / 1.8)\"\n {...loaderProps}\n />\n </Box>\n )}\n </Transition>\n )}\n\n <span {...getStyles('inner')}>\n {leftSection && (\n <Box component=\"span\" {...getStyles('section')} mod={{ position: 'left' }}>\n {leftSection}\n </Box>\n )}\n\n <Box component=\"span\" mod={{ loading }} {...getStyles('label')}>\n {children}\n </Box>\n\n {rightSection && (\n <Box component=\"span\" {...getStyles('section')} mod={{ position: 'right' }}>\n {rightSection}\n </Box>\n )}\n </span>\n </UnstyledButton>\n );\n});\n\nButton.classes = classes;\nButton.varsResolver = varsResolver;\nButton.displayName = '@mantine/core/Button';\nButton.Group = ButtonGroup;\nButton.GroupSection = ButtonGroupSection;\n\nexport namespace Button {\n export type Props = ButtonProps;\n export type StylesNames = ButtonStylesNames;\n export type CssVariables = ButtonCssVariables;\n export type Factory = ButtonFactory;\n export type Variant = ButtonVariant;\n export type Size = ButtonSize;\n\n export namespace Group {\n export type Props = ButtonGroupProps;\n export type StylesNames = ButtonGroupStylesNames;\n export type CssVariables = ButtonGroupCssVariables;\n export type Factory = ButtonGroupFactory;\n }\n\n export namespace GroupSection {\n export type Props = ButtonGroupSectionProps;\n export type StylesNames = ButtonGroupSectionStylesNames;\n export type CssVariables = ButtonGroupSectionCssVariables;\n export type Factory = ButtonGroupSectionFactory;\n }\n}\n"],"mappings":"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"}

package/cjs/components/Button/Button.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.module.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".root {\n --button-height-xs: 30px;\n --button-height-sm: 36px;\n --button-height-md: 42px;\n --button-height-lg: 50px;\n --button-height-xl: 60px;\n\n --button-height-compact-xs: 22px;\n --button-height-compact-sm: 26px;\n --button-height-compact-md: 30px;\n --button-height-compact-lg: 34px;\n --button-height-compact-xl: 40px;\n\n --button-padding-x-xs: 14px;\n --button-padding-x-sm: 18px;\n --button-padding-x-md: 22px;\n --button-padding-x-lg: 26px;\n --button-padding-x-xl: 32px;\n\n --button-padding-x-compact-xs: 7px;\n --button-padding-x-compact-sm: 8px;\n --button-padding-x-compact-md: 10px;\n --button-padding-x-compact-lg: 12px;\n --button-padding-x-compact-xl: 14px;\n\n --button-height: var(--button-height-sm);\n --button-padding-x: var(--button-padding-x-sm);\n --button-color: var(--mantine-color-white);\n\n user-select: none;\n font-weight: var(--mantine-font-weight-medium);\n position: relative;\n line-height: 1;\n text-align: center;\n overflow: hidden;\n\n width: auto;\n cursor: pointer;\n display: inline-block;\n border-radius: var(--button-radius, var(--mantine-radius-default));\n font-size: var(--button-fz, var(--mantine-font-size-sm));\n background: var(--button-bg, var(--mantine-primary-color-filled));\n border: var(--button-bd, rem(1px) solid transparent);\n color: var(--button-color, var(--mantine-color-white));\n height: var(--button-height, var(--button-height-sm));\n padding-inline: var(--button-padding-x, var(--button-padding-x-sm));\n vertical-align: middle;\n\n &:where([data-block]) {\n display: block;\n width: 100%;\n }\n\n &:where([data-with-left-section]) {\n padding-inline-start: calc(var(--button-padding-x) / 1.5);\n }\n\n &:where([data-with-right-section]) {\n padding-inline-end: calc(var(--button-padding-x) / 1.5);\n }\n\n &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {\n cursor: not-allowed;\n border: 1px solid transparent;\n transform: none;\n color: var(--mantine-color-disabled-color);\n background: var(--mantine-color-disabled);\n }\n\n &::before {\n content: '';\n pointer-events: none;\n position: absolute;\n inset: -1px;\n border-radius: var(--button-radius, var(--mantine-radius-default));\n transform: translateY(-100%);\n opacity: 0;\n filter: blur(12px);\n transition:\n transform 150ms ease,\n opacity 100ms ease;\n\n @mixin where-light {\n background-color: rgba(255, 255, 255, 0.15);\n }\n\n @mixin where-dark {\n background-color: rgba(0, 0, 0, 0.15);\n }\n }\n\n &:where([data-loading]) {\n cursor: not-allowed;\n transform: none;\n\n &::before {\n transform: translateY(0);\n opacity: 1;\n }\n\n & .inner {\n opacity: 0;\n transform: translateY(100%);\n }\n }\n\n @mixin hover {\n &:where(:not([data-loading], :disabled, [data-disabled])) {\n background-color: var(--button-hover, var(--mantine-primary-color-filled-hover));\n color: var(--button-hover-color, var(--button-color));\n }\n }\n}\n\n.inner {\n display: flex;\n align-items: center;\n justify-content: var(--button-justify, center);\n height: 100%;\n overflow: visible;\n transition:\n transform 150ms ease,\n opacity 100ms ease;\n}\n\n.label {\n white-space: nowrap;\n height: 100%;\n overflow: hidden;\n display: flex;\n align-items: center;\n opacity: 1;\n\n &:where([data-loading]) {\n opacity: 0.2;\n }\n}\n\n.section {\n display: flex;\n align-items: center;\n\n &:where([data-position='left']) {\n margin-inline-end: var(--mantine-spacing-xs);\n }\n\n &:where([data-position='right']) {\n margin-inline-start: var(--mantine-spacing-xs);\n }\n}\n\n.loader {\n position: absolute;\n left: 50%;\n top: 50%;\n}\n\n.group {\n --button-border-width: 1px;\n display: flex;\n\n & :where(.root) {\n &:focus {\n position: relative;\n z-index: 1;\n }\n }\n\n &[data-orientation='horizontal'] {\n flex-direction: row;\n\n & .root,\n & .groupSection {\n &:not(:only-child):first-child {\n border-end-end-radius: 0;\n border-start-end-radius: 0;\n border-inline-end-width: calc(var(--button-border-width) / 2);\n }\n\n &:not(:only-child):last-child {\n border-end-start-radius: 0;\n border-start-start-radius: 0;\n border-inline-start-width: calc(var(--button-border-width) / 2);\n }\n\n &:not(:only-child):not(:first-child):not(:last-child) {\n border-radius: 0;\n border-inline-width: calc(var(--button-border-width) / 2);\n }\n }\n }\n\n &[data-orientation='vertical'] {\n flex-direction: column;\n\n & .root,\n & .groupSection {\n &:not(:only-child):first-child {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n border-bottom-width: calc(var(--button-border-width) / 2);\n }\n\n &:not(:only-child):last-child {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n border-top-width: calc(var(--button-border-width) / 2);\n }\n\n &:not(:only-child):not(:first-child):not(:last-child) {\n border-radius: 0;\n border-bottom-width: calc(var(--button-border-width) / 2);\n border-top-width: calc(var(--button-border-width) / 2);\n }\n }\n }\n}\n\n.groupSection {\n --section-height-xs: 30px;\n --section-height-sm: 36px;\n --section-height-md: 42px;\n --section-height-lg: 50px;\n --section-height-xl: 60px;\n\n --section-height-compact-xs: 22px;\n --section-height-compact-sm: 26px;\n --section-height-compact-md: 30px;\n --section-height-compact-lg: 34px;\n --section-height-compact-xl: 40px;\n\n --section-padding-x-xs: 14px;\n --section-padding-x-sm: 18px;\n --section-padding-x-md: 22px;\n --section-padding-x-lg: 26px;\n --section-padding-x-xl: 32px;\n\n --section-padding-x-compact-xs: 7px;\n --section-padding-x-compact-sm: 8px;\n --section-padding-x-compact-md: 10px;\n --section-padding-x-compact-lg: 12px;\n --section-padding-x-compact-xl: 14px;\n\n --section-height: var(--section-height-sm);\n --section-padding-x: var(--section-padding-x-sm);\n --section-color: var(--mantine-color-white);\n\n font-weight: var(--mantine-font-weight-medium);\n width: auto;\n border-radius: var(--section-radius, var(--mantine-radius-default));\n font-size: var(--section-fz, var(--mantine-font-size-sm));\n background: var(--section-bg, var(--mantine-primary-color-filled));\n border: var(--section-bd, rem(1px) solid transparent);\n color: var(--section-color, var(--mantine-color-white));\n height: var(--section-height, var(--section-height-sm));\n padding-inline: var(--section-padding-x, var(--section-padding-x-sm));\n vertical-align: middle;\n line-height: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Button.module.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".root {\n --button-height-xs: 30px;\n --button-height-sm: 36px;\n --button-height-md: 42px;\n --button-height-lg: 50px;\n --button-height-xl: 60px;\n\n --button-height-compact-xs: 22px;\n --button-height-compact-sm: 26px;\n --button-height-compact-md: 30px;\n --button-height-compact-lg: 34px;\n --button-height-compact-xl: 40px;\n\n --button-padding-x-xs: 14px;\n --button-padding-x-sm: 18px;\n --button-padding-x-md: 22px;\n --button-padding-x-lg: 26px;\n --button-padding-x-xl: 32px;\n\n --button-padding-x-compact-xs: 7px;\n --button-padding-x-compact-sm: 8px;\n --button-padding-x-compact-md: 10px;\n --button-padding-x-compact-lg: 12px;\n --button-padding-x-compact-xl: 14px;\n\n --button-height: var(--button-height-sm);\n --button-padding-x: var(--button-padding-x-sm);\n --button-color: var(--mantine-color-white);\n\n user-select: none;\n font-weight: var(--mantine-font-weight-medium);\n position: relative;\n line-height: 1;\n text-align: center;\n overflow: hidden;\n\n width: auto;\n cursor: pointer;\n display: inline-block;\n border-radius: var(--button-radius, var(--mantine-radius-default));\n font-size: var(--button-fz, var(--mantine-font-size-sm));\n background: var(--button-bg, var(--mantine-primary-color-filled));\n border: var(--button-bd, rem(1px) solid transparent);\n color: var(--button-color, var(--mantine-color-white));\n height: var(--button-height, var(--button-height-sm));\n padding-inline: var(--button-padding-x, var(--button-padding-x-sm));\n vertical-align: middle;\n\n &:where([data-block]) {\n display: block;\n width: 100%;\n }\n\n &:where([data-with-left-section]) {\n padding-inline-start: calc(var(--button-padding-x) / 1.5);\n }\n\n &:where([data-with-right-section]) {\n padding-inline-end: calc(var(--button-padding-x) / 1.5);\n }\n\n &:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {\n cursor: not-allowed;\n border: 1px solid transparent;\n transform: none;\n color: var(--mantine-color-disabled-color);\n background: var(--mantine-color-disabled);\n }\n\n &::before {\n content: '';\n pointer-events: none;\n position: absolute;\n inset: -1px;\n border-radius: var(--button-radius, var(--mantine-radius-default));\n transform: translateY(-100%);\n opacity: 0;\n filter: blur(12px);\n transition:\n transform 150ms ease,\n opacity 100ms ease;\n\n @mixin where-light {\n background-color: rgba(255, 255, 255, 0.15);\n }\n\n @mixin where-dark {\n background-color: rgba(0, 0, 0, 0.15);\n }\n }\n\n &:where([data-loading]) {\n cursor: not-allowed;\n transform: none;\n\n &::before {\n transform: translateY(0);\n opacity: 1;\n }\n\n & .inner {\n opacity: 0;\n transform: translateY(100%);\n }\n }\n\n @mixin hover {\n &:where(:not([data-loading], :disabled, [data-disabled])) {\n background-color: var(--button-hover, var(--mantine-primary-color-filled-hover));\n color: var(--button-hover-color, var(--button-color));\n }\n }\n}\n\n.inner {\n display: flex;\n align-items: center;\n justify-content: var(--button-justify, center);\n height: 100%;\n overflow: visible;\n transition:\n transform 150ms ease,\n opacity 100ms ease;\n}\n\n.label {\n white-space: nowrap;\n height: 100%;\n overflow: hidden;\n display: flex;\n align-items: center;\n opacity: 1;\n text-box-trim: trim-both;\n text-box-edge: cap alphabetic;\n\n &:where([data-loading]) {\n opacity: 0.2;\n }\n}\n\n.section {\n display: flex;\n align-items: center;\n\n &:where([data-position='left']) {\n margin-inline-end: var(--mantine-spacing-xs);\n }\n\n &:where([data-position='right']) {\n margin-inline-start: var(--mantine-spacing-xs);\n }\n}\n\n.loader {\n position: absolute;\n left: 50%;\n top: 50%;\n}\n\n.group {\n --button-border-width: 1px;\n display: flex;\n\n & :where(.root) {\n &:focus {\n position: relative;\n z-index: 1;\n }\n }\n\n &[data-orientation='horizontal'] {\n flex-direction: row;\n\n & .root,\n & .groupSection {\n &:not(:only-child):first-child {\n border-end-end-radius: 0;\n border-start-end-radius: 0;\n border-inline-end-width: calc(var(--button-border-width) / 2);\n }\n\n &:not(:only-child):last-child {\n border-end-start-radius: 0;\n border-start-start-radius: 0;\n border-inline-start-width: calc(var(--button-border-width) / 2);\n }\n\n &:not(:only-child):not(:first-child):not(:last-child) {\n border-radius: 0;\n border-inline-width: calc(var(--button-border-width) / 2);\n }\n }\n }\n\n &[data-orientation='vertical'] {\n flex-direction: column;\n\n & .root,\n & .groupSection {\n &:not(:only-child):first-child {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n border-bottom-width: calc(var(--button-border-width) / 2);\n }\n\n &:not(:only-child):last-child {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n border-top-width: calc(var(--button-border-width) / 2);\n }\n\n &:not(:only-child):not(:first-child):not(:last-child) {\n border-radius: 0;\n border-bottom-width: calc(var(--button-border-width) / 2);\n border-top-width: calc(var(--button-border-width) / 2);\n }\n }\n }\n}\n\n.groupSection {\n --section-height-xs: 30px;\n --section-height-sm: 36px;\n --section-height-md: 42px;\n --section-height-lg: 50px;\n --section-height-xl: 60px;\n\n --section-height-compact-xs: 22px;\n --section-height-compact-sm: 26px;\n --section-height-compact-md: 30px;\n --section-height-compact-lg: 34px;\n --section-height-compact-xl: 40px;\n\n --section-padding-x-xs: 14px;\n --section-padding-x-sm: 18px;\n --section-padding-x-md: 22px;\n --section-padding-x-lg: 26px;\n --section-padding-x-xl: 32px;\n\n --section-padding-x-compact-xs: 7px;\n --section-padding-x-compact-sm: 8px;\n --section-padding-x-compact-md: 10px;\n --section-padding-x-compact-lg: 12px;\n --section-padding-x-compact-xl: 14px;\n\n --section-height: var(--section-height-sm);\n --section-padding-x: var(--section-padding-x-sm);\n --section-color: var(--mantine-color-white);\n\n font-weight: var(--mantine-font-weight-medium);\n width: auto;\n border-radius: var(--section-radius, var(--mantine-radius-default));\n font-size: var(--section-fz, var(--mantine-font-size-sm));\n background: var(--section-bg, var(--mantine-primary-color-filled));\n border: var(--section-bd, rem(1px) solid transparent);\n color: var(--section-color, var(--mantine-color-white));\n height: var(--section-height, var(--section-height-sm));\n padding-inline: var(--section-padding-x, var(--section-padding-x-sm));\n vertical-align: middle;\n line-height: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n"],"mappings":""}

package/cjs/components/Card/Card.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.cjs","names":["createVarsResolver","getSpacing","polymorphicFactory","useProps","useStyles","Children","CardSection","CardProvider","Paper","classes"],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n BoxProps,\n createVarsResolver,\n getSpacing,\n MantineRadius,\n MantineShadow,\n MantineSpacing,\n polymorphicFactory,\n PolymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Paper } from '../Paper';\nimport { CardProvider } from './Card.context';\nimport { CardSection } from './CardSection/CardSection';\nimport classes from './Card.module.css';\n\nexport type CardStylesNames = 'root' \| 'section';\nexport type CardCssVariables = {\n root: '--card-padding';\n};\n\nexport interface CardProps extends BoxProps, StylesApiProps<CardFactory> {\n /** Key of `theme.shadows` or any valid CSS value to set `box-shadow` /\n shadow?: MantineShadow;\n\n /* Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Adds border to the card /\n withBorder?: boolean;\n\n /* Key of `theme.spacing` or any valid CSS value to set padding @default 'md' /\n padding?: MantineSpacing;\n\n /* Card content /\n children?: React.ReactNode;\n\n /* Card orientation @default 'vertical' */\n orientation?: 'horizontal' \| 'vertical';\n}\n\nexport type CardFactory = PolymorphicFactory<{\n props: CardProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: CardStylesNames;\n vars: CardCssVariables;\n staticComponents: {\n Section: typeof CardSection;\n };\n}>;\n\nconst varsResolver = createVarsResolver<CardFactory>((_, { padding }) => ({\n root: {\n '--card-padding': getSpacing(padding),\n },\n}));\n\nconst defaultProps = {\n orientation: 'vertical',\n} satisfies Partial<CardProps>;\n\nexport const Card = polymorphicFactory<CardFactory>((_props) => {\n const props = useProps('Card', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n padding,\n attributes,\n orientation,\n ...others\n } = props;\n\n const getStyles = useStyles<CardFactory>({\n name: 'Card',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _children = Children.toArray(children);\n const content = _children.map((child, index) => {\n if (typeof child === 'object' && child && 'type' in child && child.type === CardSection) {\n return cloneElement(child, {\n 'data-orientation': orientation,\n 'data-first-section': index === 0 \|\| undefined,\n 'data-last-section': index === _children.length - 1 \|\| undefined,\n } as any);\n }\n\n return child;\n });\n\n return (\n <CardProvider value={{ getStyles }}>\n <Paper unstyled={unstyled} data-orientation={orientation} {...getStyles('root')} {...others}>\n {content}\n </Paper>\n </CardProvider>\n );\n});\n\nCard.classes = classes;\nCard.varsResolver = varsResolver;\nCard.displayName = '@mantine/core/Card';\nCard.Section = CardSection;\n"],"mappings":";;;;;;;;;;;;;;~~AAuDA~~,MAAM,eAAeA,6BAAAA,oBAAiC,GAAG,EAAE,eAAe,EACxE,MAAM,EACJ,kBAAkBC,iBAAAA,WAAW,QAAQ,EACtC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,aAAa,YACd;AAED,MAAa,OAAOC,4BAAAA,oBAAiC,WAAW;CAC9D,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,SACA,YACA,aACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN;EACA,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAYC,MAAAA,SAAS,QAAQ,SAAS;CAC5C,MAAM,UAAU,UAAU,KAAK,OAAO,UAAU;AAC9C,MAAI,OAAO,UAAU,YAAY,SAAS,UAAU,SAAS,MAAM,SAASC,oBAAAA,YAC1E,SAAA,GAAA,MAAA,cAAoB,OAAO;GACzB,oBAAoB;GACpB,sBAAsB,UAAU,KAAK,KAAA;GACrC,qBAAqB,UAAU,UAAU,SAAS,KAAK,KAAA;GACxD,CAAQ;AAGX,SAAO;GACP;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EAAc,OAAO,EAAE,WAAW;YAChC,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;GAAiB;GAAU,oBAAkB;GAAa,GAAI,UAAU,OAAO;GAAE,GAAI;aAClF;GACK,CAAA;EACK,CAAA;EAEjB;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,UAAUH,oBAAAA"}
1	+ {"version":3,"file":"Card.cjs","names":["createVarsResolver","getSpacing","polymorphicFactory","useProps","useStyles","Children","CardSection","CardProvider","Paper","classes"],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n BoxProps,\n createVarsResolver,\n getSpacing,\n MantineRadius,\n MantineShadow,\n MantineSpacing,\n polymorphicFactory,\n PolymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Paper } from '../Paper';\nimport { CardProvider } from './Card.context';\nimport { CardSection, type CardSectionProps } from './CardSection/CardSection';\nimport classes from './Card.module.css';\nexport type CardStylesNames = 'root' \| 'section';\nexport type CardCssVariables = {\n root: '--card-padding';\n};\n\nexport interface CardProps extends BoxProps, StylesApiProps<CardFactory> {\n /** Key of `theme.shadows` or any valid CSS value to set `box-shadow` /\n shadow?: MantineShadow;\n\n /* Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Adds border to the card /\n withBorder?: boolean;\n\n /* Key of `theme.spacing` or any valid CSS value to set padding @default 'md' /\n padding?: MantineSpacing;\n\n /* Card content /\n children?: React.ReactNode;\n\n /* Card orientation @default 'vertical' */\n orientation?: 'horizontal' \| 'vertical';\n}\n\nexport type CardFactory = PolymorphicFactory<{\n props: CardProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: CardStylesNames;\n vars: CardCssVariables;\n staticComponents: {\n Section: typeof CardSection;\n };\n}>;\n\nconst varsResolver = createVarsResolver<CardFactory>((_, { padding }) => ({\n root: {\n '--card-padding': getSpacing(padding),\n },\n}));\n\nconst defaultProps = {\n orientation: 'vertical',\n} satisfies Partial<CardProps>;\n\nexport const Card = polymorphicFactory<CardFactory>((_props) => {\n const props = useProps('Card', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n padding,\n attributes,\n orientation,\n ...others\n } = props;\n\n const getStyles = useStyles<CardFactory>({\n name: 'Card',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _children = Children.toArray(children);\n const content = _children.map((child, index) => {\n if (typeof child === 'object' && child && 'type' in child && child.type === CardSection) {\n return cloneElement(child, {\n 'data-orientation': orientation,\n 'data-first-section': index === 0 \|\| undefined,\n 'data-last-section': index === _children.length - 1 \|\| undefined,\n } as any);\n }\n\n return child;\n });\n\n return (\n <CardProvider value={{ getStyles }}>\n <Paper unstyled={unstyled} data-orientation={orientation} {...getStyles('root')} {...others}>\n {content}\n </Paper>\n </CardProvider>\n );\n});\n\nCard.classes = classes;\nCard.varsResolver = varsResolver;\nCard.displayName = '@mantine/core/Card';\nCard.Section = CardSection;\n\nexport namespace Card {\n export type Props = CardProps;\n export type StylesNames = CardStylesNames;\n export type CssVariables = CardCssVariables;\n export type Factory = CardFactory;\n export type SectionProps = CardSectionProps;\n\n export namespace Section {\n export type Props = CardSectionProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;AAsDA,MAAM,eAAeA,6BAAAA,oBAAiC,GAAG,EAAE,eAAe,EACxE,MAAM,EACJ,kBAAkBC,iBAAAA,WAAW,QAAQ,EACtC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,aAAa,YACd;AAED,MAAa,OAAOC,4BAAAA,oBAAiC,WAAW;CAC9D,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,SACA,YACA,aACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN;EACA,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAYC,MAAAA,SAAS,QAAQ,SAAS;CAC5C,MAAM,UAAU,UAAU,KAAK,OAAO,UAAU;AAC9C,MAAI,OAAO,UAAU,YAAY,SAAS,UAAU,SAAS,MAAM,SAASC,oBAAAA,YAC1E,SAAA,GAAA,MAAA,cAAoB,OAAO;GACzB,oBAAoB;GACpB,sBAAsB,UAAU,KAAK,KAAA;GACrC,qBAAqB,UAAU,UAAU,SAAS,KAAK,KAAA;GACxD,CAAQ;AAGX,SAAO;GACP;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EAAc,OAAO,EAAE,WAAW;YAChC,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;GAAiB;GAAU,oBAAkB;GAAa,GAAI,UAAU,OAAO;GAAE,GAAI;aAClF;GACK,CAAA;EACK,CAAA;EAEjB;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,UAAUH,oBAAAA"}

package/cjs/components/Center/Center.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Center.cjs","names":["polymorphicFactory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Center/Center.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n polymorphicFactory,\n PolymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Center.module.css';\n\nexport type CenterStylesNames = 'root';\n\nexport interface CenterProps extends BoxProps, StylesApiProps<CenterFactory> {\n /** Content to center /\n children?: React.ReactNode;\n\n /* If set, `inline-flex` is used instead of `flex` */\n inline?: boolean;\n}\n\nexport type CenterFactory = PolymorphicFactory<{\n props: CenterProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: CenterStylesNames;\n}>;\n\nexport const Center = polymorphicFactory<CenterFactory>((_props) => {\n const props = useProps('Center', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n inline,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CenterFactory>({\n name: 'Center',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n return <Box mod={[{ inline }, mod]} {...getStyles('root')} {...others} />;\n});\n\nCenter.classes = classes;\nCenter.displayName = '@mantine/core/Center';\n"],"mappings":";;;;;;;;;AA4BA,MAAa,SAASA,4BAAAA,oBAAmC,WAAW;CAClE,MAAM,QAAQC,kBAAAA,SAAS,UAAU,MAAM,OAAO;CAC9C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAyB;EACzC,MAAM;EACN;EACA,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAI;EAAE,GAAI,UAAU,OAAO;EAAE,GAAI;EAAU,CAAA;EACzE;AAEF,OAAO,UAAUC,sBAAAA;AACjB,OAAO,cAAc"}
1	+ {"version":3,"file":"Center.cjs","names":["polymorphicFactory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Center/Center.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n polymorphicFactory,\n PolymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Center.module.css';\n\nexport type CenterStylesNames = 'root';\n\nexport interface CenterProps extends BoxProps, StylesApiProps<CenterFactory> {\n /** Content to center /\n children?: React.ReactNode;\n\n /* If set, `inline-flex` is used instead of `flex` */\n inline?: boolean;\n}\n\nexport type CenterFactory = PolymorphicFactory<{\n props: CenterProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: CenterStylesNames;\n}>;\n\nexport const Center = polymorphicFactory<CenterFactory>((_props) => {\n const props = useProps('Center', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n inline,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CenterFactory>({\n name: 'Center',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n return <Box mod={[{ inline }, mod]} {...getStyles('root')} {...others} />;\n});\n\nCenter.classes = classes;\nCenter.displayName = '@mantine/core/Center';\n\nexport namespace Center {\n export type Props = CenterProps;\n export type Factory = CenterFactory;\n export type StylesNames = CenterStylesNames;\n}\n"],"mappings":";;;;;;;;;AA4BA,MAAa,SAASA,4BAAAA,oBAAmC,WAAW;CAClE,MAAM,QAAQC,kBAAAA,SAAS,UAAU,MAAM,OAAO;CAC9C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAyB;EACzC,MAAM;EACN;EACA,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAI;EAAE,GAAI,UAAU,OAAO;EAAE,GAAI;EAAU,CAAA;EACzE;AAEF,OAAO,UAAUC,sBAAAA;AACjB,OAAO,cAAc"}

package/cjs/components/Checkbox/Checkbox.cjs CHANGED Viewed

@@ -25,7 +25,8 @@ const defaultProps = {
 	labelPosition: "right",
 	icon: require_CheckIcon.CheckboxIcon,
 	withErrorStyles: true,
-	variant: "filled"
+	variant: "filled",
+	radius: "sm"
 };
 const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color, size, iconColor, variant, autoContrast }) => {
 	const parsedColor = require_parse_theme_color.parseThemeColor({

package/cjs/components/Checkbox/Checkbox.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","CheckboxGroupContext","useStyles","extractStyleProps","InlineInput","Box","classes","InlineInputClasses","CheckboxGroup","CheckboxIndicator","CheckboxCard"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { CheckboxCard } from './CheckboxCard/CheckboxCard';\nimport { CheckboxGroup, CheckboxGroupContext } from './CheckboxGroup/CheckboxGroup';\nimport { CheckboxIndicator } from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\n\nexport type CheckboxVariant = 'filled' \| 'outline';\nexport type CheckboxStylesNames = 'icon' \| 'inner' \| 'input' \| InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n root: '--checkbox-size' \| '--checkbox-radius' \| '--checkbox-color' \| '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n indeterminate: boolean \| undefined;\n className: string;\n}>;\n\nexport interface CheckboxProps\n extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' \| 'children'> {\n /** Unique input id /\n id?: string;\n\n /* `label` associated with the checkbox /\n label?: React.ReactNode;\n\n /* Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the component @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Props passed down to the root element /\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /* Position of the label relative to the input @default 'right' /\n labelPosition?: 'left' \| 'right';\n\n /* Description below the label /\n description?: React.ReactNode;\n\n /* Error message below the label /\n error?: React.ReactNode;\n\n /* Indeterminate state of the checkbox. If set, `checked` prop is dismissed. /\n indeterminate?: boolean;\n\n /* Icon for checked or indeterminate state /\n icon?: CheckboxIconComponent;\n\n /* Root element ref /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. /\n iconColor?: MantineColor;\n\n /* If set, adjusts icon color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* If set, applies error styles to the checkbox when `error` prop is set @default true */\n withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n props: CheckboxProps;\n ref: HTMLInputElement;\n stylesNames: CheckboxStylesNames;\n vars: CheckboxCssVariables;\n variant: CheckboxVariant;\n staticComponents: {\n Group: typeof CheckboxGroup;\n Indicator: typeof CheckboxIndicator;\n Card: typeof CheckboxCard;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n icon: CheckboxIcon,\n withErrorStyles: true,\n variant: 'filled',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color \|\| theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n root: {\n '--checkbox-size': getSize(size, 'checkbox-size'),\n '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--checkbox-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n const props = useProps('Checkbox', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n label,\n id,\n size,\n radius,\n wrapperProps,\n checked,\n labelPosition,\n description,\n error,\n disabled,\n variant,\n indeterminate,\n icon: Icon,\n rootRef,\n iconColor,\n onChange,\n autoContrast,\n mod,\n attributes,\n readOnly,\n onClick,\n withErrorStyles,\n ref,\n ...others\n } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const ctx = use(CheckboxGroupContext);\n const _size = size \|\| ctx?.size;\n\n const getStyles = useStyles<CheckboxFactory>({\n name: 'Checkbox',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { styleProps, rest } = extractStyleProps(others);\n const uuid = useId(id);\n\n const withContextProps = {\n checked: ctx?.value.includes(rest.value as string) ?? checked,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx?.onChange(event);\n onChange?.(event);\n },\n };\n\n const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n const finalDisabled = disabled \|\| isDisabledByGroup;\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate \|\| false;\n\n if (indeterminate) {\n inputRef.current.setAttribute('data-indeterminate', 'true');\n } else {\n inputRef.current.removeAttribute('data-indeterminate');\n }\n }\n }, [indeterminate]);\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Checkbox\"\n __stylesApiProps={props}\n id={uuid}\n size={_size}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={finalDisabled}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={withContextProps.checked \|\| checked \|\| undefined}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n inert={rest.inert}\n {...styleProps}\n {...wrapperProps}\n >\n <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n <Box\n component=\"input\"\n id={uuid}\n ref={useMergedRef(inputRef, ref)}\n mod={{ error: !!error }}\n {...getStyles('input', { focusable: true, variant })}\n {...rest}\n {...withContextProps}\n disabled={finalDisabled}\n inert={rest.inert}\n type=\"checkbox\"\n onClick={(event) => {\n if (readOnly) {\n event.preventDefault();\n }\n\n onClick?.(event);\n }}\n />\n\n <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n </Box>\n </InlineInput>\n );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","CheckboxGroupContext","useStyles","extractStyleProps","InlineInput","Box","classes","InlineInputClasses","CheckboxGroup","CheckboxIndicator","CheckboxCard"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n CheckboxCard,\n type CheckboxCardProps,\n type CheckboxCardStylesNames,\n type CheckboxCardCssVariables,\n type CheckboxCardFactory,\n} from './CheckboxCard/CheckboxCard';\nimport {\n CheckboxGroup,\n CheckboxGroupContext,\n type CheckboxGroupProps,\n type CheckboxGroupStylesNames,\n type CheckboxGroupFactory,\n} from './CheckboxGroup/CheckboxGroup';\nimport {\n CheckboxIndicator,\n type CheckboxIndicatorProps,\n type CheckboxIndicatorStylesNames,\n type CheckboxIndicatorCssVariables,\n type CheckboxIndicatorFactory,\n type CheckboxIndicatorVariant,\n} from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\nexport type CheckboxVariant = 'filled' \| 'outline';\nexport type CheckboxStylesNames = 'icon' \| 'inner' \| 'input' \| InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n root: '--checkbox-size' \| '--checkbox-radius' \| '--checkbox-color' \| '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n indeterminate: boolean \| undefined;\n className: string;\n}>;\n\nexport interface CheckboxProps\n extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' \| 'children'> {\n /** Unique input id /\n id?: string;\n\n /* `label` associated with the checkbox /\n label?: React.ReactNode;\n\n /* Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the component @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Props passed down to the root element /\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /* Position of the label relative to the input @default 'right' /\n labelPosition?: 'left' \| 'right';\n\n /* Description below the label /\n description?: React.ReactNode;\n\n /* Error message below the label /\n error?: React.ReactNode;\n\n /* Indeterminate state of the checkbox. If set, `checked` prop is dismissed. /\n indeterminate?: boolean;\n\n /* Icon for checked or indeterminate state /\n icon?: CheckboxIconComponent;\n\n /* Root element ref /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. /\n iconColor?: MantineColor;\n\n /* If set, adjusts icon color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* If set, applies error styles to the checkbox when `error` prop is set @default true */\n withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n props: CheckboxProps;\n ref: HTMLInputElement;\n stylesNames: CheckboxStylesNames;\n vars: CheckboxCssVariables;\n variant: CheckboxVariant;\n staticComponents: {\n Group: typeof CheckboxGroup;\n Indicator: typeof CheckboxIndicator;\n Card: typeof CheckboxCard;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n icon: CheckboxIcon,\n withErrorStyles: true,\n variant: 'filled',\n radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color \|\| theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n root: {\n '--checkbox-size': getSize(size, 'checkbox-size'),\n '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--checkbox-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n const props = useProps('Checkbox', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n label,\n id,\n size,\n radius,\n wrapperProps,\n checked,\n labelPosition,\n description,\n error,\n disabled,\n variant,\n indeterminate,\n icon: Icon,\n rootRef,\n iconColor,\n onChange,\n autoContrast,\n mod,\n attributes,\n readOnly,\n onClick,\n withErrorStyles,\n ref,\n ...others\n } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const ctx = use(CheckboxGroupContext);\n const _size = size \|\| ctx?.size;\n\n const getStyles = useStyles<CheckboxFactory>({\n name: 'Checkbox',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { styleProps, rest } = extractStyleProps(others);\n const uuid = useId(id);\n\n const withContextProps = {\n checked: ctx?.value.includes(rest.value as string) ?? checked,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx?.onChange(event);\n onChange?.(event);\n },\n };\n\n const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n const finalDisabled = disabled \|\| isDisabledByGroup;\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = indeterminate \|\| false;\n\n if (indeterminate) {\n inputRef.current.setAttribute('data-indeterminate', 'true');\n } else {\n inputRef.current.removeAttribute('data-indeterminate');\n }\n }\n }, [indeterminate]);\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Checkbox\"\n __stylesApiProps={props}\n id={uuid}\n size={_size}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={finalDisabled}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={withContextProps.checked \|\| checked \|\| undefined}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n inert={rest.inert}\n {...styleProps}\n {...wrapperProps}\n >\n <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n <Box\n component=\"input\"\n id={uuid}\n ref={useMergedRef(inputRef, ref)}\n mod={{ error: !!error }}\n {...getStyles('input', { focusable: true, variant })}\n {...rest}\n {...withContextProps}\n disabled={finalDisabled}\n inert={rest.inert}\n type=\"checkbox\"\n onClick={(event) => {\n if (readOnly) {\n event.preventDefault();\n }\n\n onClick?.(event);\n }}\n />\n\n <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n </Box>\n </InlineInput>\n );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n\nexport namespace Checkbox {\n export type Props = CheckboxProps;\n export type StylesNames = CheckboxStylesNames;\n export type CssVariables = CheckboxCssVariables;\n export type Factory = CheckboxFactory;\n export type Variant = CheckboxVariant;\n export type IconComponent = CheckboxIconComponent;\n\n export namespace Group {\n export type Props = CheckboxGroupProps;\n export type StylesNames = CheckboxGroupStylesNames;\n export type Factory = CheckboxGroupFactory;\n }\n\n export namespace Indicator {\n export type Props = CheckboxIndicatorProps;\n export type StylesNames = CheckboxIndicatorStylesNames;\n export type CssVariables = CheckboxIndicatorCssVariables;\n export type Factory = CheckboxIndicatorFactory;\n export type Variant = CheckboxIndicatorVariant;\n }\n\n export namespace Card {\n export type Props = CheckboxCardProps;\n export type StylesNames = CheckboxCardStylesNames;\n export type CssVariables = CheckboxCardCssVariables;\n export type Factory = CheckboxCardFactory;\n }\n}\n"],"mappings":"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"}

package/cjs/components/Checkbox/CheckboxGroup/CheckboxGroup.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxGroup.cjs","names":["genericFactory","useProps","Input","InputsGroupFieldset"],"sources":["../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { DataAttributes, Factory, genericFactory, MantineSize, useProps } from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface CheckboxGroupContextValue<Value extends ~~string~~ = string> {\n value: Value[];\n onChange: (event: React.ChangeEvent<HTMLInputElement> \| string) => void;\n size: MantineSize \| (string & {}) \| undefined;\n isDisabled?: (value: Value) => boolean;\n}\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue \| null>(null);\n\nexport type CheckboxGroupStylesNames = InputWrapperStylesNames;\n\nexport interface CheckboxGroupProps<Value extends ~~string~~ = string> extends Omit<\n InputWrapperProps,\n 'onChange'\n> {\n /** `Checkbox` components and any other elements /\n children: React.ReactNode;\n\n /* Controlled component value /\n value?: Value[];\n\n /* Default value for uncontrolled component /\n defaultValue?: Value[];\n\n /* Called with an array of selected checkboxes values when value changes /\n onChange?: (value: Value[]) => void;\n\n /* Props passed down to the root element (`Input.Wrapper` component) /\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /* Controls size of the `Input.Wrapper` @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* If set, value cannot be changed /\n readOnly?: boolean;\n\n /* `name` attribute of the hidden input for uncontrolled forms /\n name?: string;\n\n /* Props passed down to the hidden input for uncontrolled forms /\n hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n /* Separator for values in the hidden input for uncontrolled forms @default ',' /\n hiddenInputValuesSeparator?: string;\n\n /* Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled /\n\n maxSelectedValues?: number;\n\n /* Sets `disabled` attribute, prevents interactions */\n disabled?: boolean;\n}\n\nexport type CheckboxGroupFactory = Factory<{\n props: CheckboxGroupProps;\n ref: HTMLDivElement;\n stylesNames: CheckboxGroupStylesNames;\n signature: <Value extends ~~string~~ = string>(props: CheckboxGroupProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n hiddenInputValuesSeparator: ',',\n} satisfies Partial<CheckboxGroupProps>;\n\nexport const CheckboxGroup = genericFactory<CheckboxGroupFactory>(((\n props: CheckboxGroupProps<string>\n) => {\n const {\n value,\n defaultValue,\n onChange,\n size,\n wrapperProps,\n children,\n readOnly,\n name,\n hiddenInputValuesSeparator,\n hiddenInputProps,\n maxSelectedValues,\n disabled,\n ...others\n } = useProps('CheckboxGroup', defaultProps, props);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement> \| string) => {\n const itemValue = typeof event === 'string' ? event : event.currentTarget.value;\n\n if (readOnly) {\n return;\n }\n\n const isCurrentlySelected = _value.includes(itemValue);\n\n if (!isCurrentlySelected && maxSelectedValues && _value.length >= maxSelectedValues) {\n return;\n }\n\n setValue(\n isCurrentlySelected ? _value.filter((item) => item !== itemValue) : [..._value, itemValue]\n );\n };\n\n const isDisabled = (checkboxValue: string) => {\n if (disabled) {\n return true;\n }\n\n if (!maxSelectedValues) {\n return false;\n }\n\n const isCurrentlySelected = _value.includes(checkboxValue);\n const hasReachedLimit = _value.length >= maxSelectedValues;\n return !isCurrentlySelected && hasReachedLimit;\n };\n\n const hiddenInputValue = _value.join(hiddenInputValuesSeparator);\n\n return (\n <CheckboxGroupContext value={{ value: _value, onChange: handleChange, size, isDisabled }}>\n <Input.Wrapper\n size={size}\n {...wrapperProps}\n {...others}\n labelElement=\"div\"\n __staticSelector=\"CheckboxGroup\"\n >\n <InputsGroupFieldset role=\"group\">{children}</InputsGroupFieldset>\n <input type=\"hidden\" name={name} value={hiddenInputValue} {...hiddenInputProps} />\n </Input.Wrapper>\n </CheckboxGroupContext>\n );\n}) as any);\n\nCheckboxGroup.classes = Input.Wrapper.classes;\nCheckboxGroup.displayName = '@mantine/core/CheckboxGroup';\n"],"mappings":";;;;;;;;;;~~AAaA~~,MAAa,wBAAA,GAAA,MAAA,eAAuE,KAAK;~~AAqDzF~~,MAAM,eAAe,EACnB,4BAA4B,KAC7B;AAED,MAAa,gBAAgBA,gBAAAA,iBAC3B,UACG;CACH,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,UACA,MACA,4BACA,kBACA,mBACA,UACA,GAAG,WACDC,kBAAAA,SAAS,iBAAiB,cAAc,MAAM;CAElD,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC;EACA;EACA,YAAY,EAAE;EACd;EACD,CAAC;CAEF,MAAM,gBAAgB,UAAwD;EAC5E,MAAM,YAAY,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc;AAE1E,MAAI,SACF;EAGF,MAAM,sBAAsB,OAAO,SAAS,UAAU;AAEtD,MAAI,CAAC,uBAAuB,qBAAqB,OAAO,UAAU,kBAChE;AAGF,WACE,sBAAsB,OAAO,QAAQ,SAAS,SAAS,UAAU,GAAG,CAAC,GAAG,QAAQ,UAAU,CAC3F;;CAGH,MAAM,cAAc,kBAA0B;AAC5C,MAAI,SACF,QAAO;AAGT,MAAI,CAAC,kBACH,QAAO;EAGT,MAAM,sBAAsB,OAAO,SAAS,cAAc;EAC1D,MAAM,kBAAkB,OAAO,UAAU;AACzC,SAAO,CAAC,uBAAuB;;CAGjC,MAAM,mBAAmB,OAAO,KAAK,2BAA2B;AAEhE,QACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;EAAsB,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM;GAAY;YACtF,iBAAA,GAAA,kBAAA,MAACC,cAAAA,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;aALnB,CAOE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,qBAAD;IAAqB,MAAK;IAAS;IAA+B,CAAA,EAClE,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAkB,GAAI;IAAoB,CAAA,CACpE;;EACK,CAAA;GAEjB;AAEV,cAAc,UAAUD,cAAAA,MAAM,QAAQ;AACtC,cAAc,cAAc"}
1	+ {"version":3,"file":"CheckboxGroup.cjs","names":["genericFactory","useProps","Input","InputsGroupFieldset"],"sources":["../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n DataAttributes,\n Factory,\n genericFactory,\n MantineSize,\n Primitive,\n useProps,\n} from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface CheckboxGroupContextValue<Value extends Primitive = string> {\n value: Value[];\n onChange: (event: React.ChangeEvent<HTMLInputElement> \| string) => void;\n size: MantineSize \| (string & {}) \| undefined;\n isDisabled?: (value: Value) => boolean;\n}\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue \| null>(null);\n\nexport type CheckboxGroupStylesNames = InputWrapperStylesNames;\n\nexport interface CheckboxGroupProps<Value extends Primitive = string> extends Omit<\n InputWrapperProps,\n 'onChange' \| 'value' \| 'defaultValue'\n> {\n /** `Checkbox` components and any other elements /\n children: React.ReactNode;\n\n /* Controlled component value /\n value?: Value[];\n\n /* Default value for uncontrolled component /\n defaultValue?: Value[];\n\n /* Called with an array of selected checkboxes values when value changes /\n onChange?: (value: Value[]) => void;\n\n /* Props passed down to the root element (`Input.Wrapper` component) /\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /* Controls size of the `Input.Wrapper` @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* If set, value cannot be changed /\n readOnly?: boolean;\n\n /* `name` attribute of the hidden input for uncontrolled forms /\n name?: string;\n\n /* Props passed down to the hidden input for uncontrolled forms /\n hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n /* Separator for values in the hidden input for uncontrolled forms @default ',' /\n hiddenInputValuesSeparator?: string;\n\n /* Maximum number of checkboxes that can be selected. When the limit is reached, unselected checkboxes will be disabled /\n\n maxSelectedValues?: number;\n\n /* Sets `disabled` attribute, prevents interactions */\n disabled?: boolean;\n}\n\nexport type CheckboxGroupFactory = Factory<{\n props: CheckboxGroupProps;\n ref: HTMLDivElement;\n stylesNames: CheckboxGroupStylesNames;\n signature: <Value extends Primitive = string>(\n props: CheckboxGroupProps<Value>\n ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n hiddenInputValuesSeparator: ',',\n} satisfies Partial<CheckboxGroupProps>;\n\nexport const CheckboxGroup = genericFactory<CheckboxGroupFactory>(((\n props: CheckboxGroupProps<string>\n) => {\n const {\n value,\n defaultValue,\n onChange,\n size,\n wrapperProps,\n children,\n readOnly,\n name,\n hiddenInputValuesSeparator,\n hiddenInputProps,\n maxSelectedValues,\n disabled,\n ...others\n } = useProps('CheckboxGroup', defaultProps, props);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement> \| string) => {\n const itemValue = typeof event === 'string' ? event : event.currentTarget.value;\n\n if (readOnly) {\n return;\n }\n\n const isCurrentlySelected = _value.includes(itemValue);\n\n if (!isCurrentlySelected && maxSelectedValues && _value.length >= maxSelectedValues) {\n return;\n }\n\n setValue(\n isCurrentlySelected ? _value.filter((item) => item !== itemValue) : [..._value, itemValue]\n );\n };\n\n const isDisabled = (checkboxValue: string) => {\n if (disabled) {\n return true;\n }\n\n if (!maxSelectedValues) {\n return false;\n }\n\n const isCurrentlySelected = _value.includes(checkboxValue);\n const hasReachedLimit = _value.length >= maxSelectedValues;\n return !isCurrentlySelected && hasReachedLimit;\n };\n\n const hiddenInputValue = _value.join(hiddenInputValuesSeparator);\n\n return (\n <CheckboxGroupContext value={{ value: _value, onChange: handleChange, size, isDisabled }}>\n <Input.Wrapper\n size={size}\n {...wrapperProps}\n {...others}\n labelElement=\"div\"\n __staticSelector=\"CheckboxGroup\"\n >\n <InputsGroupFieldset role=\"group\">{children}</InputsGroupFieldset>\n <input type=\"hidden\" name={name} value={hiddenInputValue} {...hiddenInputProps} />\n </Input.Wrapper>\n </CheckboxGroupContext>\n );\n}) as any);\n\nCheckboxGroup.classes = Input.Wrapper.classes;\nCheckboxGroup.displayName = '@mantine/core/CheckboxGroup';\n"],"mappings":";;;;;;;;;;AAoBA,MAAa,wBAAA,GAAA,MAAA,eAAuE,KAAK;AAuDzF,MAAM,eAAe,EACnB,4BAA4B,KAC7B;AAED,MAAa,gBAAgBA,gBAAAA,iBAC3B,UACG;CACH,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,UACA,MACA,4BACA,kBACA,mBACA,UACA,GAAG,WACDC,kBAAAA,SAAS,iBAAiB,cAAc,MAAM;CAElD,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC;EACA;EACA,YAAY,EAAE;EACd;EACD,CAAC;CAEF,MAAM,gBAAgB,UAAwD;EAC5E,MAAM,YAAY,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc;AAE1E,MAAI,SACF;EAGF,MAAM,sBAAsB,OAAO,SAAS,UAAU;AAEtD,MAAI,CAAC,uBAAuB,qBAAqB,OAAO,UAAU,kBAChE;AAGF,WACE,sBAAsB,OAAO,QAAQ,SAAS,SAAS,UAAU,GAAG,CAAC,GAAG,QAAQ,UAAU,CAC3F;;CAGH,MAAM,cAAc,kBAA0B;AAC5C,MAAI,SACF,QAAO;AAGT,MAAI,CAAC,kBACH,QAAO;EAGT,MAAM,sBAAsB,OAAO,SAAS,cAAc;EAC1D,MAAM,kBAAkB,OAAO,UAAU;AACzC,SAAO,CAAC,uBAAuB;;CAGjC,MAAM,mBAAmB,OAAO,KAAK,2BAA2B;AAEhE,QACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;EAAsB,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM;GAAY;YACtF,iBAAA,GAAA,kBAAA,MAACC,cAAAA,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;aALnB,CAOE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,qBAAD;IAAqB,MAAK;IAAS;IAA+B,CAAA,EAClE,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAkB,GAAI;IAAoB,CAAA,CACpE;;EACK,CAAA;GAEjB;AAEV,cAAc,UAAUD,cAAAA,MAAM,QAAQ;AACtC,cAAc,cAAc"}

package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs CHANGED Viewed

@@ -18,7 +18,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx
 const defaultProps = {
 	icon: require_CheckIcon.CheckboxIcon,
-	variant: "filled"
+	variant: "filled",
+	radius: "sm"
 };
 const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color, size, iconColor, variant, autoContrast }) => {
 	const parsedColor = require_parse_theme_color.parseThemeColor({

package/cjs/components/Checkbox/CheckboxIndicator/CheckboxIndicator.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxIndicator.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","CheckboxCardContext","Box","classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' \| 'icon';\nexport type CheckboxIndicatorVariant = 'filled' \| 'outline';\nexport type CheckboxIndicatorCssVariables = {\n indicator: '--checkbox-size' \| '--checkbox-radius' \| '--checkbox-color' \| '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the component @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` /\n iconColor?: MantineColor;\n\n /* If set, adjusts icon color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* Indeterminate state of the checkbox. If set, `checked` prop is ignored. /\n indeterminate?: boolean;\n\n /* Icon for checked or indeterminate state /\n icon?: CheckboxIconComponent;\n\n /* Determines whether the component should have checked styles /\n checked?: boolean;\n\n /* Indicates disabled state */\n disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n props: CheckboxIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: CheckboxIndicatorStylesNames;\n vars: CheckboxIndicatorCssVariables;\n variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n icon: CheckboxIcon,\n variant: 'filled',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color \|\| theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n indicator: {\n '--checkbox-size': getSize(size, 'checkbox-size'),\n '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--checkbox-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n const props = useProps('CheckboxIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n icon: Icon,\n indeterminate,\n radius,\n color,\n iconColor,\n autoContrast,\n checked,\n mod,\n variant,\n disabled,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CheckboxIndicatorFactory>({\n name: 'CheckboxIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'indicator',\n });\n\n const ctx = use(CheckboxCardContext);\n const _checked =\n typeof checked === 'boolean' \|\| typeof indeterminate === 'boolean'\n ? checked \|\| indeterminate\n : ctx?.checked \|\| false;\n\n return (\n <Box\n {...getStyles('indicator', { variant })}\n variant={variant}\n mod={[{ checked: _checked, disabled }, mod]}\n {...others}\n >\n <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n </Box>\n );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAMA,kBAAAA;CACN,SAAS;~~CACV~~;AAED,MAAM,eAAeC,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAcC,0BAAAA,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,WAAW;EACT,mBAAmBC,iBAAAA,QAAQ,MAAM,gBAAgB;EACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;EACzE,oBAAoB,YAAY,YAAY,eAAeC,wBAAAA,cAAc,OAAO,MAAM;EACtF,yBAAyB,YACrBA,wBAAAA,cAAc,WAAW,MAAM,GAC/BC,gCAAAA,qBAAqB,cAAc,MAAM,GACvCC,2BAAAA,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACP,EACF;EAEJ;AAED,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,cAAc,OAAO;CACjE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,OAAA,GAAA,MAAA,KAAUC,qBAAAA,oBAAoB;CACpC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;AAEtB,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,SAAS,CAAC;EAC9B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;GAAU,EAAE,IAAI;EAC3C,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,OAAO;GAAI,CAAA;EACzD,CAAA;EAER;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}
1	+ {"version":3,"file":"CheckboxIndicator.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","CheckboxCardContext","Box","classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' \| 'icon';\nexport type CheckboxIndicatorVariant = 'filled' \| 'outline';\nexport type CheckboxIndicatorCssVariables = {\n indicator: '--checkbox-size' \| '--checkbox-radius' \| '--checkbox-color' \| '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the component @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` /\n iconColor?: MantineColor;\n\n /* If set, adjusts icon color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* Indeterminate state of the checkbox. If set, `checked` prop is ignored. /\n indeterminate?: boolean;\n\n /* Icon for checked or indeterminate state /\n icon?: CheckboxIconComponent;\n\n /* Determines whether the component should have checked styles /\n checked?: boolean;\n\n /* Indicates disabled state */\n disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n props: CheckboxIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: CheckboxIndicatorStylesNames;\n vars: CheckboxIndicatorCssVariables;\n variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n icon: CheckboxIcon,\n variant: 'filled',\n radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color \|\| theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n indicator: {\n '--checkbox-size': getSize(size, 'checkbox-size'),\n '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--checkbox-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n const props = useProps('CheckboxIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n icon: Icon,\n indeterminate,\n radius,\n color,\n iconColor,\n autoContrast,\n checked,\n mod,\n variant,\n disabled,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CheckboxIndicatorFactory>({\n name: 'CheckboxIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'indicator',\n });\n\n const ctx = use(CheckboxCardContext);\n const _checked =\n typeof checked === 'boolean' \|\| typeof indeterminate === 'boolean'\n ? checked \|\| indeterminate\n : ctx?.checked \|\| false;\n\n return (\n <Box\n {...getStyles('indicator', { variant })}\n variant={variant}\n mod={[{ checked: _checked, disabled }, mod]}\n {...others}\n >\n <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n </Box>\n );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAMA,kBAAAA;CACN,SAAS;CACT,QAAQ;CACT;AAED,MAAM,eAAeC,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAcC,0BAAAA,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,WAAW;EACT,mBAAmBC,iBAAAA,QAAQ,MAAM,gBAAgB;EACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;EACzE,oBAAoB,YAAY,YAAY,eAAeC,wBAAAA,cAAc,OAAO,MAAM;EACtF,yBAAyB,YACrBA,wBAAAA,cAAc,WAAW,MAAM,GAC/BC,gCAAAA,qBAAqB,cAAc,MAAM,GACvCC,2BAAAA,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACP,EACF;EAEJ;AAED,MAAa,oBAAoBC,gBAAAA,SAAmC,WAAW;CAC7E,MAAM,QAAQC,kBAAAA,SAAS,qBAAqB,cAAc,OAAO;CACjE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAoC;EACpD,MAAM;EACN,SAAA,iCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACf,CAAC;CAEF,MAAM,OAAA,GAAA,MAAA,KAAUC,qBAAAA,oBAAoB;CACpC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;AAEtB,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,SAAS,CAAC;EAC9B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;GAAU,EAAE,IAAI;EAC3C,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,OAAO;GAAI,CAAA;EACzD,CAAA;EAER;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUC,iCAAAA;AAC5B,kBAAkB,eAAe"}

package/cjs/components/Chip/Chip.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chip.cjs","names":["createVarsResolver","getFontSize","getSize","getRadius","factory","useProps","useStyles","ChipGroupContext","extractStyleProps","Box","CheckIcon","classes","ChipGroup"],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getFontSize,\n getRadius,\n getSize,\n MantineColor,\n MantineRadius,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport { ChipGroup, ChipGroupContext } from './ChipGroup/ChipGroup';\nimport classes from './Chip.module.css';\n\nexport type ChipStylesNames = 'root' \| 'input' \| 'iconWrapper' \| 'checkIcon' \| 'label';\nexport type ChipVariant = 'outline' \| 'filled' \| 'light';\nexport type ChipCssVariables = {\n root:\n \| '--chip-fz'\n \| '--chip-size'\n \| '--chip-icon-size'\n \| '--chip-padding'\n \| '--chip-checked-padding'\n \| '--chip-radius'\n \| '--chip-bg'\n \| '--chip-hover'\n \| '--chip-color'\n \| '--chip-bd'\n \| '--chip-spacing';\n};\n\nexport interface ChipProps\n extends BoxProps, StylesApiProps<ChipFactory>, ElementProps<'input', 'size' \| 'onChange'> {\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' /\n radius?: MantineRadius;\n\n /* Controls various properties related to the component size @default 'sm' /\n size?: MantineSize;\n\n /* Chip input type @default 'checkbox' /\n type?: 'radio' \| 'checkbox';\n\n /* `label` element associated with the input /\n children: React.ReactNode;\n\n /* Controlled checked state /\n checked?: boolean;\n\n /* Uncontrolled checked state initial value /\n defaultChecked?: boolean;\n\n /* Calls when checked state changes /\n onChange?: (checked: boolean) => void;\n\n /* Key of `theme.colors` or any valid CSS color. @default theme.primaryColor /\n color?: MantineColor;\n\n /* Unique input id, generated randomly if not provided /\n id?: string;\n\n /* Props passed down to the root element /\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /* Any element or component to replace the default icon /\n icon?: React.ReactNode;\n\n /* Assigns ref of the root element /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* If set, adjusts text color based on the chip background color for `filled` variant */\n autoContrast?: boolean;\n}\n\nexport type ChipFactory = Factory<{\n props: ChipProps;\n ref: HTMLInputElement;\n stylesNames: ChipStylesNames;\n vars: ChipCssVariables;\n variant: ChipVariant;\n staticComponents: {\n Group: typeof ChipGroup;\n };\n}>;\n\nconst defaultProps = {\n type: 'checkbox',\n} satisfies Partial<ChipProps>;\n\nconst varsResolver = createVarsResolver<ChipFactory>(\n (theme, { size, radius, variant, color, autoContrast }) => {\n const colors = theme.variantColorResolver({\n color: color \|\| theme.primaryColor,\n theme,\n variant: variant \|\| 'filled',\n autoContrast,\n });\n\n return {\n root: {\n '--chip-fz': getFontSize(size),\n '--chip-size': getSize(size, 'chip-size'),\n '--chip-radius': radius === undefined ? undefined : getRadius(radius),\n '--chip-checked-padding': getSize(size, 'chip-checked-padding'),\n '--chip-padding': getSize(size, 'chip-padding'),\n '--chip-icon-size': getSize(size, 'chip-icon-size'),\n '--chip-bg': color \|\| variant ? colors.background : undefined,\n '--chip-hover': color \|\| variant ? colors.hover : undefined,\n '--chip-color': color \|\| variant ? colors.color : undefined,\n '--chip-bd': color \|\| variant ? colors.border : undefined,\n '--chip-spacing': getSize(size, 'chip-spacing'),\n },\n };\n }\n);\n\nexport const Chip = factory<ChipFactory>((_props) => {\n const props = useProps('Chip', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n id,\n checked,\n defaultChecked,\n onChange,\n value,\n wrapperProps,\n type,\n disabled,\n children,\n size,\n variant,\n icon,\n rootRef,\n autoContrast,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<ChipFactory>({\n name: 'Chip',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const ctx = use(ChipGroupContext);\n const uuid = useId(id);\n const { styleProps, rest } = extractStyleProps(others);\n\n const [_value, setValue] = useUncontrolled({\n value: checked,\n defaultValue: defaultChecked,\n finalValue: false,\n onChange,\n });\n\n const contextProps = ctx\n ? {\n checked: ctx.isChipSelected(value as string),\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx.onChange(event);\n onChange?.(event.currentTarget.checked);\n },\n type: ctx.multiple ? 'checkbox' : 'radio',\n }\n : {};\n\n const _checked = contextProps.checked \|\| _value;\n\n return (\n <Box\n size={size}\n variant={variant}\n ref={rootRef}\n mod={mod}\n {...getStyles('root')}\n {...styleProps}\n {...wrapperProps}\n >\n <input\n type={type}\n {...getStyles('input')}\n checked={_checked}\n onChange={(event) => setValue(event.currentTarget.checked)}\n id={uuid}\n disabled={disabled}\n value={value}\n {...contextProps}\n {...rest}\n />\n\n <Box\n component=\"label\"\n htmlFor={uuid}\n mod={{ checked: _checked, disabled }}\n {...getStyles('label', { variant: variant \|\| 'filled' })}\n >\n {_checked && icon !== null && icon !== false && (\n <span {...getStyles('iconWrapper')}>\n {icon === undefined ? <CheckIcon {...getStyles('checkIcon')} /> : icon}\n </span>\n )}\n <span>{children}</span>\n </Box>\n </Box>\n );\n});\n\nChip.classes = classes;\nChip.varsResolver = varsResolver;\nChip.displayName = '@mantine/core/Chip';\nChip.Group = ChipGroup;\n"],"mappings":";;;;;;;;;;;;;;;;~~AA+FA~~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"}
1	+ {"version":3,"file":"Chip.cjs","names":["createVarsResolver","getFontSize","getSize","getRadius","factory","useProps","useStyles","ChipGroupContext","extractStyleProps","Box","CheckIcon","classes","ChipGroup"],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getFontSize,\n getRadius,\n getSize,\n MantineColor,\n MantineRadius,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox';\nimport {\n ChipGroup,\n ChipGroupContext,\n type ChipGroupProps,\n type ChipGroupContextValue,\n} from './ChipGroup/ChipGroup';\nimport classes from './Chip.module.css';\n\nexport type ChipStylesNames = 'root' \| 'input' \| 'iconWrapper' \| 'checkIcon' \| 'label';\nexport type ChipVariant = 'outline' \| 'filled' \| 'light';\nexport type ChipCssVariables = {\n root:\n \| '--chip-fz'\n \| '--chip-size'\n \| '--chip-icon-size'\n \| '--chip-padding'\n \| '--chip-checked-padding'\n \| '--chip-radius'\n \| '--chip-bg'\n \| '--chip-hover'\n \| '--chip-color'\n \| '--chip-bd'\n \| '--chip-spacing';\n};\n\nexport interface ChipProps\n extends BoxProps, StylesApiProps<ChipFactory>, ElementProps<'input', 'size' \| 'onChange'> {\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' /\n radius?: MantineRadius;\n\n /* Controls various properties related to the component size @default 'sm' /\n size?: MantineSize;\n\n /* Chip input type @default 'checkbox' /\n type?: 'radio' \| 'checkbox';\n\n /* `label` element associated with the input /\n children: React.ReactNode;\n\n /* Controlled checked state /\n checked?: boolean;\n\n /* Uncontrolled checked state initial value /\n defaultChecked?: boolean;\n\n /* Calls when checked state changes /\n onChange?: (checked: boolean) => void;\n\n /* Key of `theme.colors` or any valid CSS color. @default theme.primaryColor /\n color?: MantineColor;\n\n /* Unique input id, generated randomly if not provided /\n id?: string;\n\n /* Props passed down to the root element /\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /* Any element or component to replace the default icon /\n icon?: React.ReactNode;\n\n /* Assigns ref of the root element /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* If set, adjusts text color based on the chip background color for `filled` variant */\n autoContrast?: boolean;\n}\n\nexport type ChipFactory = Factory<{\n props: ChipProps;\n ref: HTMLInputElement;\n stylesNames: ChipStylesNames;\n vars: ChipCssVariables;\n variant: ChipVariant;\n staticComponents: {\n Group: typeof ChipGroup;\n };\n}>;\n\nconst defaultProps = {\n type: 'checkbox',\n} satisfies Partial<ChipProps>;\n\nconst varsResolver = createVarsResolver<ChipFactory>(\n (theme, { size, radius, variant, color, autoContrast }) => {\n const colors = theme.variantColorResolver({\n color: color \|\| theme.primaryColor,\n theme,\n variant: variant \|\| 'filled',\n autoContrast,\n });\n\n return {\n root: {\n '--chip-fz': getFontSize(size),\n '--chip-size': getSize(size, 'chip-size'),\n '--chip-radius': radius === undefined ? undefined : getRadius(radius),\n '--chip-checked-padding': getSize(size, 'chip-checked-padding'),\n '--chip-padding': getSize(size, 'chip-padding'),\n '--chip-icon-size': getSize(size, 'chip-icon-size'),\n '--chip-bg': color \|\| variant ? colors.background : undefined,\n '--chip-hover': color \|\| variant ? colors.hover : undefined,\n '--chip-color': color \|\| variant ? colors.color : undefined,\n '--chip-bd': color \|\| variant ? colors.border : undefined,\n '--chip-spacing': getSize(size, 'chip-spacing'),\n },\n };\n }\n);\n\nexport const Chip = factory<ChipFactory>((_props) => {\n const props = useProps('Chip', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n id,\n checked,\n defaultChecked,\n onChange,\n value,\n wrapperProps,\n type,\n disabled,\n children,\n size,\n variant,\n icon,\n rootRef,\n autoContrast,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<ChipFactory>({\n name: 'Chip',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const ctx = use(ChipGroupContext);\n const uuid = useId(id);\n const { styleProps, rest } = extractStyleProps(others);\n\n const [_value, setValue] = useUncontrolled({\n value: checked,\n defaultValue: defaultChecked,\n finalValue: false,\n onChange,\n });\n\n const contextProps = ctx\n ? {\n checked: ctx.isChipSelected(value as string),\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx.onChange(event);\n onChange?.(event.currentTarget.checked);\n },\n type: ctx.multiple ? 'checkbox' : 'radio',\n }\n : {};\n\n const _checked = contextProps.checked \|\| _value;\n\n return (\n <Box\n size={size}\n variant={variant}\n ref={rootRef}\n mod={mod}\n {...getStyles('root')}\n {...styleProps}\n {...wrapperProps}\n >\n <input\n type={type}\n {...getStyles('input')}\n checked={_checked}\n onChange={(event) => setValue(event.currentTarget.checked)}\n id={uuid}\n disabled={disabled}\n value={value}\n {...contextProps}\n {...rest}\n />\n\n <Box\n component=\"label\"\n htmlFor={uuid}\n mod={{ checked: _checked, disabled }}\n {...getStyles('label', { variant: variant \|\| 'filled' })}\n >\n {_checked && icon !== null && icon !== false && (\n <span {...getStyles('iconWrapper')}>\n {icon === undefined ? <CheckIcon {...getStyles('checkIcon')} /> : icon}\n </span>\n )}\n <span>{children}</span>\n </Box>\n </Box>\n );\n});\n\nChip.classes = classes;\nChip.varsResolver = varsResolver;\nChip.displayName = '@mantine/core/Chip';\nChip.Group = ChipGroup;\n\nexport namespace Chip {\n export type Props = ChipProps;\n export type StylesNames = ChipStylesNames;\n export type CssVariables = ChipCssVariables;\n export type Factory = ChipFactory;\n export type Variant = ChipVariant;\n\n export namespace Group {\n export type Props<\n Multiple extends boolean = false,\n Value extends string = string,\n > = ChipGroupProps<Multiple, Value>;\n\n export type ContextValue<Value extends string = string> = ChipGroupContextValue<Value>;\n }\n}\n"],"mappings":"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"}

package/cjs/components/Chip/Chip.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Chip.module.cjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":[".root {\n --chip-size-xs: 23px;\n --chip-size-sm: 28px;\n --chip-size-md: 32px;\n --chip-size-lg: 36px;\n --chip-size-xl: 40px;\n\n --chip-icon-size-xs: 9px;\n --chip-icon-size-sm: 12px;\n --chip-icon-size-md: 14px;\n --chip-icon-size-lg: 16px;\n --chip-icon-size-xl: 18px;\n\n --chip-padding-xs: 16px;\n --chip-padding-sm: 20px;\n --chip-padding-md: 24px;\n --chip-padding-lg: 28px;\n --chip-padding-xl: 32px;\n\n --chip-checked-padding-xs: 8.2px;\n --chip-checked-padding-sm: 10px;\n --chip-checked-padding-md: 11.7px;\n --chip-checked-padding-lg: 13.5px;\n --chip-checked-padding-xl: 15.7px;\n\n --chip-spacing-xs: 10px;\n --chip-spacing-sm: 12px;\n --chip-spacing-md: 16px;\n --chip-spacing-lg: 20px;\n --chip-spacing-xl: 22px;\n\n --chip-size: var(--chip-size-sm);\n --chip-icon-size: var(--chip-icon-size-sm);\n --chip-padding: var(--chip-padding-sm);\n --chip-spacing: var(--chip-spacing-sm);\n --chip-checked-padding: var(--chip-checked-padding-sm);\n --chip-bg: var(--mantine-primary-color-filled);\n --chip-hover: var(--mantine-primary-color-filled-hover);\n --chip-color: var(--mantine-color-white);\n --chip-bd: 1px solid transparent;\n}\n\n.label {\n display: inline-flex;\n align-items: center;\n user-select: none;\n border-radius: var(--chip-radius, 1000rem);\n height: var(--chip-size);\n font-size: var(--chip-fz, var(--mantine-font-size-sm));\n line-height: calc(var(--chip-size) - rem(2px));\n padding-inline: var(--chip-padding);\n cursor: pointer;\n white-space: nowrap;\n -webkit-tap-highlight-color: transparent;\n border: 1px solid transparent;\n color: var(--mantine-color-text);\n\n &:where([data-checked]) {\n padding-inline: var(--chip-checked-padding);\n }\n\n &:where([data-disabled]) {\n cursor: not-allowed;\n background-color: var(--mantine-color-disabled);\n color: var(--mantine-color-disabled-color);\n }\n}\n\n.label--outline:not([data-disabled]) {\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border: 1px solid var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border: 1px solid var(--mantine-color-dark-4);\n }\n\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n }\n\n &:where([data-checked]) {\n --chip-icon-color: var(--chip-color);\n border: var(--chip-bd);\n\n @mixin hover {\n background-color: var(--chip-hover);\n }\n }\n}\n\n.label--filled:not([data-disabled]),\n.label--light:not([data-disabled]) {\n border: 1px solid transparent;\n color: var(--mantine-color-text);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-4);\n }\n }\n\n &:where([data-checked]) {\n --chip-icon-color: var(--chip-color);\n color: var(--chip-color);\n background-color: var(--chip-bg);\n\n @mixin hover {\n background-color: var(--chip-hover);\n }\n }\n}\n\n.iconWrapper {\n width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n height: var(--chip-icon-size);\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n\n.checkIcon {\n width: var(--chip-icon-size);\n height: var(--chip-icon-size);\n display: block;\n color: var(--chip-icon-color, inherit);\n}\n\n.input {\n width: 0;\n height: 0;\n padding: 0;\n opacity: 0;\n margin: 0;\n\n &:focus-visible + .label {\n outline: 2px solid var(--mantine-primary-color-filled);\n outline-offset: 2px;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Chip.module.cjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":[".root {\n --chip-size-xs: 23px;\n --chip-size-sm: 28px;\n --chip-size-md: 32px;\n --chip-size-lg: 36px;\n --chip-size-xl: 40px;\n\n --chip-icon-size-xs: 9px;\n --chip-icon-size-sm: 12px;\n --chip-icon-size-md: 14px;\n --chip-icon-size-lg: 16px;\n --chip-icon-size-xl: 18px;\n\n --chip-padding-xs: 16px;\n --chip-padding-sm: 20px;\n --chip-padding-md: 24px;\n --chip-padding-lg: 28px;\n --chip-padding-xl: 32px;\n\n --chip-checked-padding-xs: 8.2px;\n --chip-checked-padding-sm: 10px;\n --chip-checked-padding-md: 11.7px;\n --chip-checked-padding-lg: 13.5px;\n --chip-checked-padding-xl: 15.7px;\n\n --chip-spacing-xs: 10px;\n --chip-spacing-sm: 12px;\n --chip-spacing-md: 16px;\n --chip-spacing-lg: 20px;\n --chip-spacing-xl: 22px;\n\n --chip-size: var(--chip-size-sm);\n --chip-icon-size: var(--chip-icon-size-sm);\n --chip-padding: var(--chip-padding-sm);\n --chip-spacing: var(--chip-spacing-sm);\n --chip-checked-padding: var(--chip-checked-padding-sm);\n --chip-bg: var(--mantine-primary-color-filled);\n --chip-hover: var(--mantine-primary-color-filled-hover);\n --chip-color: var(--mantine-color-white);\n --chip-bd: 1px solid transparent;\n}\n\n.label {\n display: inline-flex;\n align-items: center;\n user-select: none;\n border-radius: var(--chip-radius, 1000rem);\n height: var(--chip-size);\n font-size: var(--chip-fz, var(--mantine-font-size-sm));\n line-height: calc(var(--chip-size) - rem(2px));\n padding-inline: var(--chip-padding);\n cursor: pointer;\n white-space: nowrap;\n -webkit-tap-highlight-color: transparent;\n border: 1px solid transparent;\n color: var(--mantine-color-text);\n text-box-trim: trim-both;\n text-box-edge: cap alphabetic;\n\n &:where([data-checked]) {\n padding-inline: var(--chip-checked-padding);\n }\n\n &:where([data-disabled]) {\n cursor: not-allowed;\n background-color: var(--mantine-color-disabled);\n color: var(--mantine-color-disabled-color);\n }\n}\n\n.label--outline:not([data-disabled]) {\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border: 1px solid var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border: 1px solid var(--mantine-color-dark-4);\n }\n\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n }\n\n &:where([data-checked]) {\n --chip-icon-color: var(--chip-color);\n border: var(--chip-bd);\n\n @mixin hover {\n background-color: var(--chip-hover);\n }\n }\n}\n\n.label--filled:not([data-disabled]),\n.label--light:not([data-disabled]) {\n border: 1px solid transparent;\n color: var(--mantine-color-text);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-4);\n }\n }\n\n &:where([data-checked]) {\n --chip-icon-color: var(--chip-color);\n color: var(--chip-color);\n background-color: var(--chip-bg);\n\n @mixin hover {\n background-color: var(--chip-hover);\n }\n }\n}\n\n.iconWrapper {\n width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));\n height: var(--chip-icon-size);\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n\n.checkIcon {\n width: var(--chip-icon-size);\n height: var(--chip-icon-size);\n display: block;\n color: var(--chip-icon-color, inherit);\n}\n\n.input {\n width: 0;\n height: 0;\n padding: 0;\n opacity: 0;\n margin: 0;\n\n &:focus-visible + .label {\n outline: 2px solid var(--mantine-primary-color-filled);\n outline-offset: 2px;\n }\n}\n"],"mappings":""}

package/cjs/components/Chip/ChipGroup/ChipGroup.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChipGroup.cjs","names":["genericFactory","useProps"],"sources":["../../../../src/components/Chip/ChipGroup/ChipGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { Factory, genericFactory, useProps } from '../../../core';\n\nexport interface ChipGroupProps<Multiple extends boolean = false, Value extends ~~string~~ = string> {\n /** If set, multiple values can be selected /\n multiple?: Multiple;\n\n /* Controlled component value /\n value?: Multiple extends true ? Value[] : Value \| null;\n\n /* Uncontrolled component initial value /\n defaultValue?: Multiple extends true ? Value[] : Value \| null;\n\n /* Called when value changes. If `multiple` prop is set, called with an array of selected values. If not, called with a string value of selected chip. /\n onChange?: (value: Multiple extends true ? Value[] : Value) => void;\n\n /* `Chip` components and any other elements */\n children?: React.ReactNode;\n}\n\nexport type ChipGroupFactory = Factory<{\n props: ChipGroupProps;\n signature: <Multiple extends boolean = false, Value extends ~~string~~ = string>(\n props: ChipGroupProps<Multiple, Value>\n ) => React.JSX.Element;\n}>;\n\nexport const ChipGroup = genericFactory<ChipGroupFactory>((props) => {\n const { value, defaultValue, onChange, multiple, children } = useProps('ChipGroup', null, props);\n\n const [_value, setValue] = useUncontrolled<~~string~~ \| null \| ~~string~~[]>({\n value,\n defaultValue,\n finalValue: multiple ? ([] as ~~string~~[]) : null,\n onChange: onChange as any,\n });\n\n const isChipSelected = (val: string) =>\n Array.isArray(_value) ? _value.includes(val) : val === _value;\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const val = event.currentTarget.value;\n if (Array.isArray(_value)) {\n setValue(_value.includes(val) ? _value.filter((v) => v !== val) : [..._value, val]);\n } else {\n setValue(val);\n }\n };\n\n return (\n <ChipGroupContext value={{ isChipSelected, onChange: handleChange, multiple }}>\n {children}\n </ChipGroupContext>\n );\n});\n\nChipGroup.displayName = '@mantine/core/ChipGroup';\n\nexport interface ChipGroupContextValue<Value extends ~~string~~ = string> {\n isChipSelected: (value: Value) => boolean;\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n multiple: boolean \| undefined;\n}\n\nexport const ChipGroupContext = createContext<ChipGroupContextValue \| null>(null);\n"],"mappings":";;;;;;;;~~AA4BA~~,MAAa,YAAYA,gBAAAA,gBAAkC,UAAU;CACnE,MAAM,EAAE,OAAO,cAAc,UAAU,UAAU,aAAaC,kBAAAA,SAAS,aAAa,MAAM,MAAM;CAEhG,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,~~iBAAsD~~;~~EACnE~~;EACA;EACA,YAAY,WAAY,EAAE,~~GAAgB~~;~~EAChC~~;EACX,CAAC;CAEF,MAAM,kBAAkB,QACtB,MAAM,QAAQ,OAAO,GAAG,OAAO,SAAS,IAAI,GAAG,QAAQ;CAEzD,MAAM,gBAAgB,UAA+C;EACnE,MAAM,MAAM,MAAM,cAAc;AAChC,MAAI,MAAM,QAAQ,OAAO,CACvB,UAAS,OAAO,SAAS,IAAI,GAAG,OAAO,QAAQ,MAAM,MAAM,IAAI,GAAG,CAAC,GAAG,QAAQ,IAAI,CAAC;MAEnF,UAAS,IAAI;;AAIjB,QACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD;EAAkB,OAAO;GAAE;GAAgB,UAAU;GAAc;GAAU;EAC1E;EACgB,CAAA;EAErB;AAEF,UAAU,cAAc;AAQxB,MAAa,oBAAA,GAAA,MAAA,eAA+D,KAAK"}
1	+ {"version":3,"file":"ChipGroup.cjs","names":["genericFactory","useProps"],"sources":["../../../../src/components/Chip/ChipGroup/ChipGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { Factory, genericFactory, Primitive, useProps } from '../../../core';\n\nexport interface ChipGroupProps<\n Multiple extends boolean = false,\n Value extends Primitive = string,\n> {\n /** If set, multiple values can be selected /\n multiple?: Multiple;\n\n /* Controlled component value /\n value?: Multiple extends true ? Value[] : Value \| null;\n\n /* Uncontrolled component initial value /\n defaultValue?: Multiple extends true ? Value[] : Value \| null;\n\n /* Called when value changes. If `multiple` prop is set, called with an array of selected values. If not, called with a string value of selected chip. /\n onChange?: (value: Multiple extends true ? Value[] : Value) => void;\n\n /* `Chip` components and any other elements */\n children?: React.ReactNode;\n}\n\nexport type ChipGroupFactory = Factory<{\n props: ChipGroupProps;\n signature: <Multiple extends boolean = false, Value extends Primitive = string>(\n props: ChipGroupProps<Multiple, Value>\n ) => React.JSX.Element;\n}>;\n\nexport const ChipGroup = genericFactory<ChipGroupFactory>((props) => {\n const { value, defaultValue, onChange, multiple, children } = useProps('ChipGroup', null, props);\n\n const [_value, setValue] = useUncontrolled<Primitive \| null \| Primitive[]>({\n value,\n defaultValue,\n finalValue: multiple ? ([] as Primitive[]) : null,\n onChange: onChange as any,\n });\n\n const isChipSelected = (val: string) =>\n Array.isArray(_value) ? _value.includes(val) : val === _value;\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const val = event.currentTarget.value;\n if (Array.isArray(_value)) {\n setValue(_value.includes(val) ? _value.filter((v) => v !== val) : [..._value, val]);\n } else {\n setValue(val);\n }\n };\n\n return (\n <ChipGroupContext value={{ isChipSelected, onChange: handleChange, multiple }}>\n {children}\n </ChipGroupContext>\n );\n});\n\nChipGroup.displayName = '@mantine/core/ChipGroup';\n\nexport interface ChipGroupContextValue<Value extends Primitive = string> {\n isChipSelected: (value: Value) => boolean;\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n multiple: boolean \| undefined;\n}\n\nexport const ChipGroupContext = createContext<ChipGroupContextValue \| null>(null);\n"],"mappings":";;;;;;;;AA+BA,MAAa,YAAYA,gBAAAA,gBAAkC,UAAU;CACnE,MAAM,EAAE,OAAO,cAAc,UAAU,UAAU,aAAaC,kBAAAA,SAAS,aAAa,MAAM,MAAM;CAEhG,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4D;EACzE;EACA;EACA,YAAY,WAAY,EAAE,GAAmB;EACnC;EACX,CAAC;CAEF,MAAM,kBAAkB,QACtB,MAAM,QAAQ,OAAO,GAAG,OAAO,SAAS,IAAI,GAAG,QAAQ;CAEzD,MAAM,gBAAgB,UAA+C;EACnE,MAAM,MAAM,MAAM,cAAc;AAChC,MAAI,MAAM,QAAQ,OAAO,CACvB,UAAS,OAAO,SAAS,IAAI,GAAG,OAAO,QAAQ,MAAM,MAAM,IAAI,GAAG,CAAC,GAAG,QAAQ,IAAI,CAAC;MAEnF,UAAS,IAAI;;AAIjB,QACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD;EAAkB,OAAO;GAAE;GAAgB,UAAU;GAAc;GAAU;EAC1E;EACgB,CAAA;EAErB;AAEF,UAAU,cAAc;AAQxB,MAAa,oBAAA,GAAA,MAAA,eAA+D,KAAK"}

package/cjs/components/CloseButton/CloseButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CloseButton.cjs","names":["createVarsResolver","getSize","getRadius","rem","polymorphicFactory","useProps","useStyles","UnstyledButton","CloseIcon","classes"],"sources":["../../../src/components/CloseButton/CloseButton.tsx"],"sourcesContent":["import {\n BoxProps,\n createVarsResolver,\n getRadius,\n getSize,\n MantineRadius,\n MantineSize,\n polymorphicFactory,\n PolymorphicFactory,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { CloseIcon } from './CloseIcon';\nimport classes from './CloseButton.module.css';\n\nexport type CloseButtonVariant = 'subtle' \| 'transparent';\nexport type CloseButtonStylesNames = 'root';\nexport type CloseButtonCssVariables = {\n root: '--cb-icon-size' \| '--cb-size' \| '--cb-radius';\n};\n\nexport interface __CloseButtonProps {\n 'data-disabled'?: boolean;\n\n /** Controls width and height of the button. Numbers are converted to rem. @default 'md' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Sets `disabled` attribute, assigns disabled styles /\n disabled?: boolean;\n\n /* `X` icon `width` and `height` @default 70% /\n iconSize?: number \| string;\n\n /* Content rendered inside the button. For example `VisuallyHidden` with label for screen readers. /\n children?: React.ReactNode;\n\n /* React node to replace the default close icon. If set, `iconSize` prop is ignored. */\n icon?: React.ReactNode;\n}\n\nexport interface CloseButtonProps\n extends __CloseButtonProps, BoxProps, StylesApiProps<CloseButtonFactory> {\n __staticSelector?: string;\n}\n\nexport type CloseButtonFactory = PolymorphicFactory<{\n props: CloseButtonProps;\n defaultComponent: 'button';\n defaultRef: HTMLButtonElement;\n stylesNames: CloseButtonStylesNames;\n variant: CloseButtonVariant;\n vars: CloseButtonCssVariables;\n}>;\n\nconst defaultProps = {\n variant: 'subtle',\n} satisfies Partial<CloseButtonProps>;\n\nconst varsResolver = createVarsResolver<CloseButtonFactory>((_, { size, radius, iconSize }) => ({\n root: {\n '--cb-size': getSize(size, 'cb-size'),\n '--cb-radius': radius === undefined ? undefined : getRadius(radius),\n '--cb-icon-size': rem(iconSize),\n },\n}));\n\nexport const CloseButton = polymorphicFactory<CloseButtonFactory>((_props) => {\n const props = useProps('CloseButton', defaultProps, _props);\n const {\n iconSize,\n children,\n vars,\n radius,\n className,\n classNames,\n style,\n styles,\n unstyled,\n 'data-disabled': dataDisabled,\n disabled,\n variant,\n icon,\n mod,\n attributes,\n __staticSelector,\n ...others\n } = props;\n\n const getStyles = useStyles<CloseButtonFactory>({\n name: __staticSelector \|\| 'CloseButton',\n props,\n className,\n style,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <UnstyledButton\n {...others}\n unstyled={unstyled}\n variant={variant}\n disabled={disabled}\n mod={[{ disabled: disabled \|\| dataDisabled }, mod]}\n {...getStyles('root', { variant, active: !disabled && !dataDisabled })}\n >\n {icon \|\| <CloseIcon />}\n {children}\n </UnstyledButton>\n );\n});\n\nCloseButton.classes = classes;\nCloseButton.varsResolver = varsResolver;\nCloseButton.displayName = '@mantine/core/CloseButton';\n"],"mappings":";;;;;;;;;;;;;AA4DA,MAAM,eAAe,EACnB,SAAS,UACV;AAED,MAAM,eAAeA,6BAAAA,oBAAwC,GAAG,EAAE,MAAM,QAAQ,gBAAgB,EAC9F,MAAM;CACJ,aAAaC,iBAAAA,QAAQ,MAAM,UAAU;CACrC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;CACnE,kBAAkBC,YAAAA,IAAI,SAAS;CAChC,EACF,EAAE;AAEH,MAAa,cAAcC,4BAAAA,oBAAwC,WAAW;CAC5E,MAAM,QAAQC,kBAAAA,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,UACA,UACA,MACA,QACA,WACA,YACA,OACA,QACA,UACA,iBAAiB,cACjB,UACA,SACA,MACA,KACA,YACA,kBACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA8B;EAC9C,MAAM,oBAAoB;EAC1B;EACA;EACA;EACA,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAACC,uBAAAA,gBAAD;EACE,GAAI;EACM;EACD;EACC;EACV,KAAK,CAAC,EAAE,UAAU,YAAY,cAAc,EAAE,IAAI;EAClD,GAAI,UAAU,QAAQ;GAAE;GAAS,QAAQ,CAAC,YAAY,CAAC;GAAc,CAAC;YANxE,CAQG,QAAQ,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD,EAAa,CAAA,EACrB,SACc;;EAEnB;AAEF,YAAY,UAAUC,2BAAAA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
1	+ {"version":3,"file":"CloseButton.cjs","names":["createVarsResolver","getSize","getRadius","rem","polymorphicFactory","useProps","useStyles","UnstyledButton","CloseIcon","classes"],"sources":["../../../src/components/CloseButton/CloseButton.tsx"],"sourcesContent":["import {\n BoxProps,\n createVarsResolver,\n getRadius,\n getSize,\n MantineRadius,\n MantineSize,\n polymorphicFactory,\n PolymorphicFactory,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { UnstyledButton } from '../UnstyledButton';\nimport { CloseIcon } from './CloseIcon';\nimport classes from './CloseButton.module.css';\n\nexport type CloseButtonVariant = 'subtle' \| 'transparent';\nexport type CloseButtonStylesNames = 'root';\nexport type CloseButtonCssVariables = {\n root: '--cb-icon-size' \| '--cb-size' \| '--cb-radius';\n};\n\nexport interface __CloseButtonProps {\n 'data-disabled'?: boolean;\n\n /** Controls width and height of the button. Numbers are converted to rem. @default 'md' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Sets `disabled` attribute, assigns disabled styles /\n disabled?: boolean;\n\n /* `X` icon `width` and `height` @default 70% /\n iconSize?: number \| string;\n\n /* Content rendered inside the button. For example `VisuallyHidden` with label for screen readers. /\n children?: React.ReactNode;\n\n /* React node to replace the default close icon. If set, `iconSize` prop is ignored. */\n icon?: React.ReactNode;\n}\n\nexport interface CloseButtonProps\n extends __CloseButtonProps, BoxProps, StylesApiProps<CloseButtonFactory> {\n __staticSelector?: string;\n}\n\nexport type CloseButtonFactory = PolymorphicFactory<{\n props: CloseButtonProps;\n defaultComponent: 'button';\n defaultRef: HTMLButtonElement;\n stylesNames: CloseButtonStylesNames;\n variant: CloseButtonVariant;\n vars: CloseButtonCssVariables;\n}>;\n\nconst defaultProps = {\n variant: 'subtle',\n} satisfies Partial<CloseButtonProps>;\n\nconst varsResolver = createVarsResolver<CloseButtonFactory>((_, { size, radius, iconSize }) => ({\n root: {\n '--cb-size': getSize(size, 'cb-size'),\n '--cb-radius': radius === undefined ? undefined : getRadius(radius),\n '--cb-icon-size': rem(iconSize),\n },\n}));\n\nexport const CloseButton = polymorphicFactory<CloseButtonFactory>((_props) => {\n const props = useProps('CloseButton', defaultProps, _props);\n const {\n iconSize,\n children,\n vars,\n radius,\n className,\n classNames,\n style,\n styles,\n unstyled,\n 'data-disabled': dataDisabled,\n disabled,\n variant,\n icon,\n mod,\n attributes,\n __staticSelector,\n ...others\n } = props;\n\n const getStyles = useStyles<CloseButtonFactory>({\n name: __staticSelector \|\| 'CloseButton',\n props,\n className,\n style,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <UnstyledButton\n {...others}\n unstyled={unstyled}\n variant={variant}\n disabled={disabled}\n mod={[{ disabled: disabled \|\| dataDisabled }, mod]}\n {...getStyles('root', { variant, active: !disabled && !dataDisabled })}\n >\n {icon \|\| <CloseIcon />}\n {children}\n </UnstyledButton>\n );\n});\n\nCloseButton.classes = classes;\nCloseButton.varsResolver = varsResolver;\nCloseButton.displayName = '@mantine/core/CloseButton';\n\nexport namespace CloseButton {\n export type Props = CloseButtonProps;\n export type StylesNames = CloseButtonStylesNames;\n export type Factory = CloseButtonFactory;\n export type Variant = CloseButtonVariant;\n export type CssVariables = CloseButtonCssVariables;\n}\n"],"mappings":";;;;;;;;;;;;;AA4DA,MAAM,eAAe,EACnB,SAAS,UACV;AAED,MAAM,eAAeA,6BAAAA,oBAAwC,GAAG,EAAE,MAAM,QAAQ,gBAAgB,EAC9F,MAAM;CACJ,aAAaC,iBAAAA,QAAQ,MAAM,UAAU;CACrC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;CACnE,kBAAkBC,YAAAA,IAAI,SAAS;CAChC,EACF,EAAE;AAEH,MAAa,cAAcC,4BAAAA,oBAAwC,WAAW;CAC5E,MAAM,QAAQC,kBAAAA,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,UACA,UACA,MACA,QACA,WACA,YACA,OACA,QACA,UACA,iBAAiB,cACjB,UACA,SACA,MACA,KACA,YACA,kBACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA8B;EAC9C,MAAM,oBAAoB;EAC1B;EACA;EACA;EACA,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAACC,uBAAAA,gBAAD;EACE,GAAI;EACM;EACD;EACC;EACV,KAAK,CAAC,EAAE,UAAU,YAAY,cAAc,EAAE,IAAI;EAClD,GAAI,UAAU,QAAQ;GAAE;GAAS,QAAQ,CAAC,YAAY,CAAC;GAAc,CAAC;YANxE,CAQG,QAAQ,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD,EAAa,CAAA,EACrB,SACc;;EAEnB;AAEF,YAAY,UAAUC,2BAAAA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/cjs/components/Code/Code.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Code.cjs","names":["createVarsResolver","getThemeColor","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Code.module.css';\n\nexport type CodeStylesNames = 'root';\nexport type CodeCssVariables = {\n root: '--code-bg';\n};\n\nexport interface CodeProps extends BoxProps, StylesApiProps<CodeFactory>, ElementProps<'code'> {\n /** Key of `theme.colors` or any valid CSS color, controls `background-color` of the code. By default, calculated based on the color scheme. /\n color?: MantineColor;\n\n /* If set, code is rendered in `pre` */\n block?: boolean;\n}\n\nexport type CodeFactory = Factory<{\n props: CodeProps;\n ref: HTMLElement;\n stylesNames: CodeStylesNames;\n vars: CodeCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<CodeFactory>((theme, { color }) => ({\n root: {\n '--code-bg': color ? getThemeColor(color, theme) : undefined,\n },\n}));\n\nexport const Code = factory<CodeFactory>((_props) => {\n const props = useProps('Code', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n block,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeFactory>({\n name: 'Code',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box<any>\n component={block ? 'pre' : 'code'}\n mod={[{ block }, mod]}\n {...getStyles('root')}\n {...others}\n dir=\"ltr\"\n />\n );\n});\n\nCode.classes = classes;\nCode.varsResolver = varsResolver;\nCode.displayName = '@mantine/core/Code';\n"],"mappings":";;;;;;;;;;;AAmCA,MAAM,eAAeA,6BAAAA,oBAAiC,OAAO,EAAE,aAAa,EAC1E,MAAM,EACJ,aAAa,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA,GACpD,EACF,EAAE;AAEH,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN;EACA,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,WAAW,QAAQ,QAAQ;EAC3B,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI;EACrB,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,KAAI;EACJ,CAAA;EAEJ;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc"}
1	+ {"version":3,"file":"Code.cjs","names":["createVarsResolver","getThemeColor","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Code.module.css';\n\nexport type CodeStylesNames = 'root';\nexport type CodeCssVariables = {\n root: '--code-bg';\n};\n\nexport interface CodeProps extends BoxProps, StylesApiProps<CodeFactory>, ElementProps<'code'> {\n /** Key of `theme.colors` or any valid CSS color, controls `background-color` of the code. By default, calculated based on the color scheme. /\n color?: MantineColor;\n\n /* If set, code is rendered in `pre` */\n block?: boolean;\n}\n\nexport type CodeFactory = Factory<{\n props: CodeProps;\n ref: HTMLElement;\n stylesNames: CodeStylesNames;\n vars: CodeCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<CodeFactory>((theme, { color }) => ({\n root: {\n '--code-bg': color ? getThemeColor(color, theme) : undefined,\n },\n}));\n\nexport const Code = factory<CodeFactory>((_props) => {\n const props = useProps('Code', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n block,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeFactory>({\n name: 'Code',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box<any>\n component={block ? 'pre' : 'code'}\n mod={[{ block }, mod]}\n {...getStyles('root')}\n {...others}\n dir=\"ltr\"\n />\n );\n});\n\nCode.classes = classes;\nCode.varsResolver = varsResolver;\nCode.displayName = '@mantine/core/Code';\n\nexport namespace Code {\n export type Props = CodeProps;\n export type CssVariables = CodeCssVariables;\n export type Factory = CodeFactory;\n export type StylesNames = CodeStylesNames;\n}\n"],"mappings":";;;;;;;;;;;AAmCA,MAAM,eAAeA,6BAAAA,oBAAiC,OAAO,EAAE,aAAa,EAC1E,MAAM,EACJ,aAAa,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA,GACpD,EACF,EAAE;AAEH,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN;EACA,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,WAAW,QAAQ,QAAQ;EAC3B,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI;EACrB,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,KAAI;EACJ,CAAA;EAEJ;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc"}

package/cjs/components/Collapse/Collapse.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Collapse.cjs","names":["factory","useProps","useMantineEnv","useMantineTheme","useHorizontalCollapse","useCollapse","Activity","Box","getStyleObject"],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n Factory,\n factory,\n getStyleObject,\n useMantineEnv,\n useMantineTheme,\n useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n /** Collapse orientation @default 'vertical' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* Expanded state /\n expanded: boolean;\n\n /* Called when the transition ends /\n onTransitionEnd?: () => void;\n\n /* Called when transition starts /\n onTransitionStart?: () => void;\n\n /* Transition duration in ms @default 200 /\n transitionDuration?: number;\n\n /* Transition timing function @default ease /\n transitionTimingFunction?: string;\n\n /* Determines whether the opacity is animated @default true /\n animateOpacity?: boolean;\n\n /* If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default false */\n keepMounted?: boolean;\n}\n\nexport type CollapseFactory = Factory<{\n props: CollapseProps;\n ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n transitionDuration: 200,\n transitionTimingFunction: 'ease',\n animateOpacity: true,\n orientation: 'vertical',\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n const {\n children,\n expanded,\n transitionDuration,\n transitionTimingFunction,\n style,\n onTransitionEnd,\n onTransitionStart,\n animateOpacity,\n keepMounted,\n ref,\n orientation,\n ...others\n } = useProps('Collapse', defaultProps, props);\n\n const env = useMantineEnv();\n const theme = useMantineTheme();\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion ? 0 : transitionDuration;\n const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n const collapse = hook({\n expanded,\n transitionDuration: duration,\n transitionTimingFunction,\n onTransitionEnd,\n onTransitionStart,\n keepMounted: false,\n });\n\n if (duration === 0) {\n if (keepMounted === true && env !== 'test') {\n return (\n <Activity mode={expanded ? 'visible' : 'hidden'}>\n <Box {...others}>{children}</Box>\n </Activity>\n );\n }\n return expanded ? <Box {...others}>{children}</Box> : null;\n }\n\n const isExited = collapse.state === 'exited';\n\n let content: React.ReactNode;\n if (keepMounted === false) {\n content = isExited ? null : children;\n } else if (keepMounted === true) {\n content = <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>;\n } else {\n content = children;\n }\n\n return (\n <Box\n {...others}\n {...collapse.getCollapseProps({\n style: {\n opacity: expanded \|\| !animateOpacity ? 1 : 0,\n transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n ...getStyleObject(style, theme),\n },\n ref,\n })}\n >\n {content}\n </Box>\n );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n"],"mappings":";;;;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACd;AAED,MAAa,WAAWA,gBAAAA,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACDC,kBAAAA,SAAS,YAAY,cAAc,MAAM;CAE7C,MAAM,MAAMC,wBAAAA,eAAe;CAC3B,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,sBAAA,GAAA,eAAA,mBAAuC;CAE7C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAeC,eAAAA,wBAAwBC,eAAAA,aAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;EACd,CAAC;AAEF,KAAI,aAAa,GAAG;AAClB,MAAI,gBAAgB,QAAQ,QAAQ,OAClC,QACE,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;IAAK,GAAI;IAAS;IAAe,CAAA;GACxB,CAAA;AAGf,SAAO,WAAW,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;GAAK,GAAI;GAAS;GAAe,CAAA,GAAG;;CAGxD,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;AACJ,KAAI,gBAAgB,MAClB,WAAU,WAAW,OAAO;UACnB,gBAAgB,KACzB,WAAU,iBAAA,GAAA,kBAAA,KAACD,MAAAA,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;EAAoB,CAAA;KAEhF,WAAU;AAGZ,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAGC,yBAAAA,eAAe,OAAO,MAAM;IAChC;GACD;GACD,CAAC;YAED;EACG,CAAA;EAER;AAEF,SAAS,cAAc"}
1	+ {"version":3,"file":"Collapse.cjs","names":["factory","useProps","useMantineEnv","useMantineTheme","useHorizontalCollapse","useCollapse","Activity","Box","getStyleObject"],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n Factory,\n factory,\n getStyleObject,\n useMantineEnv,\n useMantineTheme,\n useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n /** Collapse orientation @default 'vertical' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* Expanded state /\n expanded: boolean;\n\n /* Called when the transition ends /\n onTransitionEnd?: () => void;\n\n /* Called when transition starts /\n onTransitionStart?: () => void;\n\n /* Transition duration in ms @default 200 /\n transitionDuration?: number;\n\n /* Transition timing function @default ease /\n transitionTimingFunction?: string;\n\n /* Determines whether the opacity is animated @default true /\n animateOpacity?: boolean;\n\n /* If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default false */\n keepMounted?: boolean;\n}\n\nexport type CollapseFactory = Factory<{\n props: CollapseProps;\n ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n transitionDuration: 200,\n transitionTimingFunction: 'ease',\n animateOpacity: true,\n orientation: 'vertical',\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n const {\n children,\n expanded,\n transitionDuration,\n transitionTimingFunction,\n style,\n onTransitionEnd,\n onTransitionStart,\n animateOpacity,\n keepMounted,\n ref,\n orientation,\n ...others\n } = useProps('Collapse', defaultProps, props);\n\n const env = useMantineEnv();\n const theme = useMantineTheme();\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion ? 0 : transitionDuration;\n const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n const collapse = hook({\n expanded,\n transitionDuration: duration,\n transitionTimingFunction,\n onTransitionEnd,\n onTransitionStart,\n keepMounted: false,\n });\n\n if (duration === 0) {\n if (keepMounted === true && env !== 'test') {\n return (\n <Activity mode={expanded ? 'visible' : 'hidden'}>\n <Box {...others}>{children}</Box>\n </Activity>\n );\n }\n return expanded ? <Box {...others}>{children}</Box> : null;\n }\n\n const isExited = collapse.state === 'exited';\n\n let content: React.ReactNode;\n if (keepMounted === false) {\n content = isExited ? null : children;\n } else if (keepMounted === true) {\n content = <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>;\n } else {\n content = children;\n }\n\n return (\n <Box\n {...others}\n {...collapse.getCollapseProps({\n style: {\n opacity: expanded \|\| !animateOpacity ? 1 : 0,\n transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n ...getStyleObject(style, theme),\n },\n ref,\n })}\n >\n {content}\n </Box>\n );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n\nexport namespace Collapse {\n export type Props = CollapseProps;\n export type Factory = CollapseFactory;\n}\n"],"mappings":";;;;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACd;AAED,MAAa,WAAWA,gBAAAA,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACDC,kBAAAA,SAAS,YAAY,cAAc,MAAM;CAE7C,MAAM,MAAMC,wBAAAA,eAAe;CAC3B,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,sBAAA,GAAA,eAAA,mBAAuC;CAE7C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAeC,eAAAA,wBAAwBC,eAAAA,aAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;EACd,CAAC;AAEF,KAAI,aAAa,GAAG;AAClB,MAAI,gBAAgB,QAAQ,QAAQ,OAClC,QACE,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;IAAK,GAAI;IAAS;IAAe,CAAA;GACxB,CAAA;AAGf,SAAO,WAAW,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;GAAK,GAAI;GAAS;GAAe,CAAA,GAAG;;CAGxD,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;AACJ,KAAI,gBAAgB,MAClB,WAAU,WAAW,OAAO;UACnB,gBAAgB,KACzB,WAAU,iBAAA,GAAA,kBAAA,KAACD,MAAAA,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;EAAoB,CAAA;KAEhF,WAAU;AAGZ,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAGC,yBAAAA,eAAe,OAAO,MAAM;IAChC;GACD;GACD,CAAC;YAED;EACG,CAAA;EAER;AAEF,SAAS,cAAc"}

package/cjs/components/ColorInput/ColorInput.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorInput.cjs","names":["createVarsResolver","getSize","factory","useProps","useInputProps","useStyles","useResolvedStylesApi","ActionIcon","convertHsvaTo","parseColor","EyeDropperIcon","isColorValid","Input","Popover","ColorSwatch","classes","ColorPicker","InputBase"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n __ColorPickerProps,\n ColorPicker,\n ColorPickerStylesNames,\n convertHsvaTo,\n isColorValid,\n parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n \| 'dropdown'\n \| 'eyeDropperButton'\n \| 'eyeDropperIcon'\n \| 'colorPreview'\n \| ColorPickerStylesNames\n \| __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n eyeDropperIcon: '--ci-eye-dropper-icon-size';\n eyeDropperButton: '--ci-button-size';\n colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n extends\n BoxProps,\n __BaseInputProps,\n __ColorPickerProps,\n StylesApiProps<ColorInputFactory>,\n ElementProps<'input', 'size' \| 'onChange' \| 'value' \| 'defaultValue'> {\n /** If input is not allowed, the user can only pick value with color picker and swatches /\n disallowInput?: boolean;\n\n /* If set, the input value resets to the last known valid value when the input loses focus @default true /\n fixOnBlur?: boolean;\n\n /* Props passed down to the `Popover` component /\n popoverProps?: PopoverProps;\n\n /* If set, the preview color swatch is displayed in the left section of the input @default true /\n withPreview?: boolean;\n\n /* If set, the eye dropper button is displayed in the right section @default true /\n withEyeDropper?: boolean;\n\n /* An icon to replace the default eye dropper icon /\n eyeDropperIcon?: React.ReactNode;\n\n /* If set, the dropdown is closed when one of the color swatches is clicked @default false /\n closeOnColorSwatchClick?: boolean;\n\n /* Props passed down to the eye dropper button */\n eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n props: ColorInputProps;\n ref: HTMLInputElement;\n stylesNames: ColorInputStylesNames;\n vars: ColorInputCssVariables;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n format: 'hex',\n fixOnBlur: true,\n withPreview: true,\n swatchesPerRow: 7,\n withPicker: true,\n popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n withEyeDropper: true,\n size: 'sm',\n leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n eyeDropperIcon: {\n '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n },\n\n eyeDropperButton: {\n '--ci-button-size': getSize(size, 'ci-button-size'),\n },\n\n colorPreview: {\n '--ci-preview-size': getSize(size, 'ci-preview-size'),\n },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n const props = useProps('ColorInput', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n disallowInput,\n fixOnBlur,\n popoverProps,\n withPreview,\n withEyeDropper,\n eyeDropperIcon,\n closeOnColorSwatchClick,\n eyeDropperButtonProps,\n value,\n defaultValue,\n onChange,\n onChangeEnd,\n onClick,\n onFocus,\n onBlur,\n inputProps,\n format = 'hex',\n wrapperProps,\n readOnly,\n withPicker,\n swatches,\n disabled,\n leftSection,\n rightSection,\n swatchesPerRow,\n ...others\n } = useInputProps('ColorInput', defaultProps, _props);\n\n const getStyles = useStyles<ColorInputFactory>({\n name: 'ColorInput',\n props,\n classes,\n classNames,\n styles,\n unstyled,\n rootSelector: 'wrapper',\n vars: props.vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const [dropdownOpened, setDropdownOpened] = useState(false);\n const [lastValidValue, setLastValidValue] = useState('');\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '',\n onChange,\n });\n\n const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n const eyeDropper = (\n <ActionIcon\n {...eyeDropperButtonProps}\n {...getStyles('eyeDropperButton', {\n className: eyeDropperButtonProps?.className,\n style: eyeDropperButtonProps?.style,\n })}\n variant=\"subtle\"\n color=\"gray\"\n unstyled={unstyled}\n onClick={() =>\n openEyeDropper()\n .then((payload) => {\n if (payload?.sRGBHex) {\n const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n setValue(color);\n onChangeEnd?.(color);\n }\n })\n .catch(() => {})\n }\n >\n {eyeDropperIcon \|\| <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n </ActionIcon>\n );\n\n const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setDropdownOpened(true);\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n fixOnBlur && setValue(lastValidValue);\n onBlur?.(event);\n setDropdownOpened(false);\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n onClick?.(event);\n setDropdownOpened(true);\n };\n\n useEffect(() => {\n if (isColorValid(_value) \|\| _value.trim() === '') {\n setLastValidValue(_value);\n }\n }, [_value]);\n\n useDidUpdate(() => {\n if (isColorValid(_value)) {\n setValue(convertHsvaTo(format, parseColor(_value)));\n }\n }, [format]);\n\n return (\n <Input.Wrapper\n {...wrapperProps}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n __staticSelector=\"ColorInput\"\n >\n <Popover\n __staticSelector=\"ColorInput\"\n position=\"bottom-start\"\n offset={5}\n opened={dropdownOpened}\n {...popoverProps}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n withRoles={false}\n disabled={\n readOnly \|\| (withPicker === false && (!Array.isArray(swatches) \|\| swatches.length === 0))\n }\n >\n <Popover.Target>\n <Input<'input'>\n autoComplete=\"off\"\n {...others}\n {...inputProps}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n disabled={disabled}\n __staticSelector=\"ColorInput\"\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onClick={handleInputClick}\n spellCheck={false}\n value={_value}\n onChange={(event) => {\n const inputValue = event.currentTarget.value;\n setValue(inputValue);\n if (isColorValid(inputValue)) {\n onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n }\n }}\n leftSection={\n leftSection \|\|\n (withPreview ? (\n <ColorSwatch\n color={isColorValid(_value) ? _value : '#fff'}\n size=\"var(--ci-preview-size)\"\n {...getStyles('colorPreview')}\n />\n ) : null)\n }\n readOnly={disallowInput \|\| readOnly}\n pointer={disallowInput}\n unstyled={unstyled}\n rightSection={\n rightSection \|\|\n (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n }\n />\n </Popover.Target>\n\n <Popover.Dropdown\n onMouseDown={(event) => event.preventDefault()}\n className={classes.dropdown}\n >\n <ColorPicker\n __staticSelector=\"ColorInput\"\n value={_value}\n onChange={setValue}\n onChangeEnd={onChangeEnd}\n format={format}\n swatches={swatches}\n swatchesPerRow={swatchesPerRow}\n withPicker={withPicker}\n size={inputProps.size}\n focusable={false}\n unstyled={unstyled}\n styles={resolvedStyles}\n classNames={resolvedClassNames}\n onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n attributes={wrapperProps.attributes}\n />\n </Popover.Dropdown>\n </Popover>\n </Input.Wrapper>\n );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoFA,MAAM,eAAe;CACnB,QAAQ;CACR,WAAW;CACX,aAAa;CACb,gBAAgB;CAChB,YAAY;CACZ,cAAc,EAAE,iBAAiB;EAAE,YAAY;EAAQ,UAAU;EAAG,EAAE;CACtE,gBAAgB;CAChB,MAAM;CACN,0BAA0B;CAC3B;AAED,MAAM,eAAeA,6BAAAA,oBAAuC,GAAG,EAAE,YAAY;CAC3E,gBAAgB,EACd,8BAA8BC,iBAAAA,QAAQ,MAAM,2BAA2B,EACxE;CAED,kBAAkB,EAChB,oBAAoBA,iBAAAA,QAAQ,MAAM,iBAAiB,EACpD;CAED,cAAc,EACZ,qBAAqBA,iBAAAA,QAAQ,MAAM,kBAAkB,EACtD;CACF,EAAE;AAEH,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,QACA,UACA,eACA,WACA,cACA,aACA,gBACA,gBACA,yBACA,uBACA,OACA,cACA,UACA,aACA,SACA,SACA,QACA,YACA,SAAS,OACT,cACA,UACA,YACA,UACA,UACA,aACA,cACA,gBACA,GAAG,WACDC,wBAAAA,cAAc,cAAc,cAAc,OAAO;CAErD,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN;EACA,SAAA,0BAAA;EACA;EACA;EACA;EACA,cAAc;EACd,MAAM,MAAM;EACZ;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAAwC;EACrF;EACA;EACA;EACD,CAAC;CAEF,MAAM,CAAC,gBAAgB,sBAAA,GAAA,MAAA,UAA8B,MAAM;CAC3D,MAAM,CAAC,gBAAgB,sBAAA,GAAA,MAAA,UAA8B,GAAG;CACxD,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,EAAE,WAAW,qBAAqB,MAAM,oBAAA,GAAA,eAAA,gBAAkC;CAEhF,MAAM,aACJ,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;EACE,GAAI;EACJ,GAAI,UAAU,oBAAoB;GAChC,WAAW,uBAAuB;GAClC,OAAO,uBAAuB;GAC/B,CAAC;EACF,SAAQ;EACR,OAAM;EACI;EACV,eACE,gBAAgB,CACb,MAAM,YAAY;AACjB,OAAI,SAAS,SAAS;IACpB,MAAM,QAAQC,mBAAAA,cAAc,QAAQC,gBAAAA,WAAW,QAAQ,QAAQ,CAAC;AAChE,aAAS,MAAM;AACf,kBAAc,MAAM;;IAEtB,CACD,YAAY,GAAG;YAGnB,kBAAkB,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD,EAAgB,GAAI,UAAU,iBAAiB,EAAI,CAAA;EAC3D,CAAA;CAGf,MAAM,oBAAoB,UAA8C;AACtE,YAAU,MAAM;AAChB,oBAAkB,KAAK;;CAGzB,MAAM,mBAAmB,UAA8C;AACrE,eAAa,SAAS,eAAe;AACrC,WAAS,MAAM;AACf,oBAAkB,MAAM;;CAG1B,MAAM,oBAAoB,UAA8C;AACtE,YAAU,MAAM;AAChB,oBAAkB,KAAK;;AAGzB,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAIC,gBAAAA,aAAa,OAAO,IAAI,OAAO,MAAM,KAAK,GAC5C,mBAAkB,OAAO;IAE1B,CAAC,OAAO,CAAC;AAEZ,EAAA,GAAA,eAAA,oBAAmB;AACjB,MAAIA,gBAAAA,aAAa,OAAO,CACtB,UAASH,mBAAAA,cAAc,QAAQC,gBAAAA,WAAW,OAAO,CAAC,CAAC;IAEpD,CAAC,OAAO,CAAC;AAEZ,QACE,iBAAA,GAAA,kBAAA,KAACG,cAAAA,MAAM,SAAP;EACE,GAAI;EACJ,YAAY;EACZ,QAAQ;EACR,kBAAiB;YAEjB,iBAAA,GAAA,kBAAA,MAACC,gBAAAA,SAAD;GACE,kBAAiB;GACjB,UAAS;GACT,QAAQ;GACR,QAAQ;GACR,GAAI;GACJ,YAAY;GACZ,QAAQ;GACE;GACV,WAAW;GACX,UACE,YAAa,eAAe,UAAU,CAAC,MAAM,QAAQ,SAAS,IAAI,SAAS,WAAW;aAX1F,CAcE,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,QAAQ,QAAT,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACD,cAAAA,OAAD;IACE,cAAa;IACb,GAAI;IACJ,GAAI;IACJ,YAAY;IACZ,QAAQ;IACE;IACV,kBAAiB;IACjB,SAAS;IACT,QAAQ;IACR,SAAS;IACT,YAAY;IACZ,OAAO;IACP,WAAW,UAAU;KACnB,MAAM,aAAa,MAAM,cAAc;AACvC,cAAS,WAAW;AACpB,SAAID,gBAAAA,aAAa,WAAW,CAC1B,eAAcH,mBAAAA,cAAc,QAAQC,gBAAAA,WAAW,WAAW,CAAC,CAAC;;IAGhE,aACE,gBACC,cACC,iBAAA,GAAA,kBAAA,KAACK,oBAAAA,aAAD;KACE,OAAOH,gBAAAA,aAAa,OAAO,GAAG,SAAS;KACvC,MAAK;KACL,GAAI,UAAU,eAAe;KAC7B,CAAA,GACA;IAEN,UAAU,iBAAiB;IAC3B,SAAS;IACC;IACV,cACE,iBACC,kBAAkB,CAAC,YAAY,CAAC,YAAY,sBAAsB,aAAa;IAElF,CAAA,EACa,CAAA,EAEjB,iBAAA,GAAA,kBAAA,KAACE,gBAAAA,QAAQ,UAAT;IACE,cAAc,UAAU,MAAM,gBAAgB;IAC9C,WAAWE,0BAAAA,QAAQ;cAEnB,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;KACE,kBAAiB;KACjB,OAAO;KACP,UAAU;KACG;KACL;KACE;KACM;KACJ;KACZ,MAAM,WAAW;KACjB,WAAW;KACD;KACV,QAAQ;KACR,YAAY;KACZ,0BAA0B,2BAA2B,kBAAkB,MAAM;KAC7E,YAAY,aAAa;KACzB,CAAA;IACe,CAAA,CACX;;EACI,CAAA;EAElB;AAEF,WAAW,UAAUC,kBAAAA,UAAU;AAC/B,WAAW,eAAe;AAC1B,WAAW,cAAc"}
1	+ {"version":3,"file":"ColorInput.cjs","names":["createVarsResolver","getSize","factory","useProps","useInputProps","useStyles","useResolvedStylesApi","ActionIcon","convertHsvaTo","parseColor","EyeDropperIcon","isColorValid","Input","Popover","ColorSwatch","classes","ColorPicker","InputBase"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n __ColorPickerProps,\n ColorPicker,\n ColorPickerStylesNames,\n convertHsvaTo,\n isColorValid,\n parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n \| 'dropdown'\n \| 'eyeDropperButton'\n \| 'eyeDropperIcon'\n \| 'colorPreview'\n \| ColorPickerStylesNames\n \| __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n eyeDropperIcon: '--ci-eye-dropper-icon-size';\n eyeDropperButton: '--ci-button-size';\n colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n extends\n BoxProps,\n __BaseInputProps,\n __ColorPickerProps,\n StylesApiProps<ColorInputFactory>,\n ElementProps<'input', 'size' \| 'onChange' \| 'value' \| 'defaultValue'> {\n /** If input is not allowed, the user can only pick value with color picker and swatches /\n disallowInput?: boolean;\n\n /* If set, the input value resets to the last known valid value when the input loses focus @default true /\n fixOnBlur?: boolean;\n\n /* Props passed down to the `Popover` component /\n popoverProps?: PopoverProps;\n\n /* If set, the preview color swatch is displayed in the left section of the input @default true /\n withPreview?: boolean;\n\n /* If set, the eye dropper button is displayed in the right section @default true /\n withEyeDropper?: boolean;\n\n /* An icon to replace the default eye dropper icon /\n eyeDropperIcon?: React.ReactNode;\n\n /* If set, the dropdown is closed when one of the color swatches is clicked @default false /\n closeOnColorSwatchClick?: boolean;\n\n /* Props passed down to the eye dropper button */\n eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n props: ColorInputProps;\n ref: HTMLInputElement;\n stylesNames: ColorInputStylesNames;\n vars: ColorInputCssVariables;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n format: 'hex',\n fixOnBlur: true,\n withPreview: true,\n swatchesPerRow: 7,\n withPicker: true,\n popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n withEyeDropper: true,\n size: 'sm',\n leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n eyeDropperIcon: {\n '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n },\n\n eyeDropperButton: {\n '--ci-button-size': getSize(size, 'ci-button-size'),\n },\n\n colorPreview: {\n '--ci-preview-size': getSize(size, 'ci-preview-size'),\n },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n const props = useProps('ColorInput', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n disallowInput,\n fixOnBlur,\n popoverProps,\n withPreview,\n withEyeDropper,\n eyeDropperIcon,\n closeOnColorSwatchClick,\n eyeDropperButtonProps,\n value,\n defaultValue,\n onChange,\n onChangeEnd,\n onClick,\n onFocus,\n onBlur,\n inputProps,\n format = 'hex',\n wrapperProps,\n readOnly,\n withPicker,\n swatches,\n disabled,\n leftSection,\n rightSection,\n swatchesPerRow,\n ...others\n } = useInputProps('ColorInput', defaultProps, _props);\n\n const getStyles = useStyles<ColorInputFactory>({\n name: 'ColorInput',\n props,\n classes,\n classNames,\n styles,\n unstyled,\n rootSelector: 'wrapper',\n vars: props.vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const [dropdownOpened, setDropdownOpened] = useState(false);\n const [lastValidValue, setLastValidValue] = useState('');\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '',\n onChange,\n });\n\n const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n const eyeDropper = (\n <ActionIcon\n {...eyeDropperButtonProps}\n {...getStyles('eyeDropperButton', {\n className: eyeDropperButtonProps?.className,\n style: eyeDropperButtonProps?.style,\n })}\n variant=\"subtle\"\n color=\"gray\"\n unstyled={unstyled}\n onClick={() =>\n openEyeDropper()\n .then((payload) => {\n if (payload?.sRGBHex) {\n const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n setValue(color);\n onChangeEnd?.(color);\n }\n })\n .catch(() => {})\n }\n >\n {eyeDropperIcon \|\| <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n </ActionIcon>\n );\n\n const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setDropdownOpened(true);\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n fixOnBlur && setValue(lastValidValue);\n onBlur?.(event);\n setDropdownOpened(false);\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n onClick?.(event);\n setDropdownOpened(true);\n };\n\n useEffect(() => {\n if (isColorValid(_value) \|\| _value.trim() === '') {\n setLastValidValue(_value);\n }\n }, [_value]);\n\n useDidUpdate(() => {\n if (isColorValid(_value)) {\n setValue(convertHsvaTo(format, parseColor(_value)));\n }\n }, [format]);\n\n return (\n <Input.Wrapper\n {...wrapperProps}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n __staticSelector=\"ColorInput\"\n >\n <Popover\n __staticSelector=\"ColorInput\"\n position=\"bottom-start\"\n offset={5}\n opened={dropdownOpened}\n {...popoverProps}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n withRoles={false}\n disabled={\n readOnly \|\| (withPicker === false && (!Array.isArray(swatches) \|\| swatches.length === 0))\n }\n >\n <Popover.Target>\n <Input<'input'>\n autoComplete=\"off\"\n {...others}\n {...inputProps}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n disabled={disabled}\n __staticSelector=\"ColorInput\"\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onClick={handleInputClick}\n spellCheck={false}\n value={_value}\n onChange={(event) => {\n const inputValue = event.currentTarget.value;\n setValue(inputValue);\n if (isColorValid(inputValue)) {\n onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n }\n }}\n leftSection={\n leftSection \|\|\n (withPreview ? (\n <ColorSwatch\n color={isColorValid(_value) ? _value : '#fff'}\n size=\"var(--ci-preview-size)\"\n {...getStyles('colorPreview')}\n />\n ) : null)\n }\n readOnly={disallowInput \|\| readOnly}\n pointer={disallowInput}\n unstyled={unstyled}\n rightSection={\n rightSection \|\|\n (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n }\n />\n </Popover.Target>\n\n <Popover.Dropdown\n onMouseDown={(event) => event.preventDefault()}\n className={classes.dropdown}\n >\n <ColorPicker\n __staticSelector=\"ColorInput\"\n value={_value}\n onChange={setValue}\n onChangeEnd={onChangeEnd}\n format={format}\n swatches={swatches}\n swatchesPerRow={swatchesPerRow}\n withPicker={withPicker}\n size={inputProps.size}\n focusable={false}\n unstyled={unstyled}\n styles={resolvedStyles}\n classNames={resolvedClassNames}\n onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n attributes={wrapperProps.attributes}\n />\n </Popover.Dropdown>\n </Popover>\n </Input.Wrapper>\n );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n export type Props = ColorInputProps;\n export type StylesNames = ColorInputStylesNames;\n export type CssVariables = ColorInputCssVariables;\n export type Factory = ColorInputFactory;\n}\n"],"mappings":"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"}

package/cjs/components/ColorPicker/AlphaSlider/AlphaSlider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AlphaSlider.cjs","names":["factory","useProps","ColorSlider","round","rem"],"sources":["../../../../src/components/ColorPicker/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["import { Factory, factory, rem, useProps } from '../../../core';\nimport {\n ColorSlider,\n ColorSliderOptions,\n ColorSliderStylesNames,\n} from '../ColorSlider/ColorSlider';\nimport { round } from '../converters/parsers';\n\nexport interface AlphaSliderProps extends ColorSliderOptions {\n color: string;\n}\n\nexport type AlphaSliderFactory = Factory<{\n props: AlphaSliderProps;\n ref: HTMLDivElement;\n stylesNames: ColorSliderStylesNames;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'AlphaSlider',\n} satisfies Partial<AlphaSliderProps>;\n\nexport const AlphaSlider = factory<AlphaSliderFactory>((props: AlphaSliderProps) => {\n const { value, onChange, onChangeEnd, color, ...others } = useProps(\n 'AlphaSlider',\n defaultProps,\n props\n );\n\n return (\n <ColorSlider\n {...others}\n value={value}\n onChange={(val) => onChange?.(round(val, 2))}\n onChangeEnd={(val) => onChangeEnd?.(round(val, 2))}\n maxValue={1}\n round={false}\n data-alpha\n overlays={[\n {\n backgroundImage:\n 'linear-gradient(45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--slider-checkers) 75%), linear-gradient(-45deg, var(--mantine-color-body) 75%, var(--slider-checkers) 75%)',\n backgroundSize: `${rem(8)} ${rem(8)}`,\n backgroundPosition: `0 0, 0 ${rem(4)}, ${rem(4)} ${rem(-4)}, ${rem(-4)} 0`,\n },\n {\n backgroundImage: `linear-gradient(90deg, transparent, ${color})`,\n },\n {\n boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(\n 4\n )} inset`,\n },\n ]}\n />\n );\n});\n\nAlphaSlider.displayName = '@mantine/core/AlphaSlider';\nAlphaSlider.classes = ColorSlider.classes;\n"],"mappings":";;;;;;;;;AAkBA,MAAM,eAAe,EACnB,kBAAkB,eACnB;AAED,MAAa,cAAcA,gBAAAA,SAA6B,UAA4B;CAClF,MAAM,EAAE,OAAO,UAAU,aAAa,OAAO,GAAG,WAAWC,kBAAAA,SACzD,eACA,cACA,MACD;AAED,QACE,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;EACE,GAAI;EACG;EACP,WAAW,QAAQ,WAAWC,gBAAAA,MAAM,KAAK,EAAE,CAAC;EAC5C,cAAc,QAAQ,cAAcA,gBAAAA,MAAM,KAAK,EAAE,CAAC;EAClD,UAAU;EACV,OAAO;EACP,cAAA;EACA,UAAU;GACR;IACE,iBACE;IACF,gBAAgB,GAAGC,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE;IACnC,oBAAoB,UAAUA,YAAAA,IAAI,EAAE,CAAC,IAAIA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,IAAIA,YAAAA,IAAI,GAAG,CAAC;IACxE;GACD,EACE,iBAAiB,uCAAuC,MAAM,IAC/D;GACD,EACE,WAAW,2BAA2BA,YAAAA,IAAI,EAAE,CAAC,gCAAgCA,YAAAA,IAC3E,EACD,CAAC,SACH;GACF;EACD,CAAA;EAEJ;AAEF,YAAY,cAAc;AAC1B,YAAY,UAAUF,oBAAAA,YAAY"}
1	+ {"version":3,"file":"AlphaSlider.cjs","names":["factory","useProps","ColorSlider","round","rem"],"sources":["../../../../src/components/ColorPicker/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["import { Factory, factory, rem, useProps } from '../../../core';\nimport {\n ColorSlider,\n ColorSliderOptions,\n ColorSliderStylesNames,\n} from '../ColorSlider/ColorSlider';\nimport { round } from '../converters/parsers';\n\nexport interface AlphaSliderProps extends ColorSliderOptions {\n color: string;\n}\n\nexport type AlphaSliderFactory = Factory<{\n props: AlphaSliderProps;\n ref: HTMLDivElement;\n stylesNames: ColorSliderStylesNames;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'AlphaSlider',\n} satisfies Partial<AlphaSliderProps>;\n\nexport const AlphaSlider = factory<AlphaSliderFactory>((props: AlphaSliderProps) => {\n const { value, onChange, onChangeEnd, color, ...others } = useProps(\n 'AlphaSlider',\n defaultProps,\n props\n );\n\n return (\n <ColorSlider\n {...others}\n value={value}\n onChange={(val) => onChange?.(round(val, 2))}\n onChangeEnd={(val) => onChangeEnd?.(round(val, 2))}\n maxValue={1}\n round={false}\n data-alpha\n overlays={[\n {\n backgroundImage:\n 'linear-gradient(45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--slider-checkers) 75%), linear-gradient(-45deg, var(--mantine-color-body) 75%, var(--slider-checkers) 75%)',\n backgroundSize: `${rem(8)} ${rem(8)}`,\n backgroundPosition: `0 0, 0 ${rem(4)}, ${rem(4)} ${rem(-4)}, ${rem(-4)} 0`,\n },\n {\n backgroundImage: `linear-gradient(90deg, transparent, ${color})`,\n },\n {\n boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(\n 4\n )} inset`,\n },\n ]}\n />\n );\n});\n\nAlphaSlider.displayName = '@mantine/core/AlphaSlider';\nAlphaSlider.classes = ColorSlider.classes;\n\nexport namespace AlphaSlider {\n export type Props = AlphaSliderProps;\n export type Factory = AlphaSliderFactory;\n}\n"],"mappings":";;;;;;;;;AAkBA,MAAM,eAAe,EACnB,kBAAkB,eACnB;AAED,MAAa,cAAcA,gBAAAA,SAA6B,UAA4B;CAClF,MAAM,EAAE,OAAO,UAAU,aAAa,OAAO,GAAG,WAAWC,kBAAAA,SACzD,eACA,cACA,MACD;AAED,QACE,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;EACE,GAAI;EACG;EACP,WAAW,QAAQ,WAAWC,gBAAAA,MAAM,KAAK,EAAE,CAAC;EAC5C,cAAc,QAAQ,cAAcA,gBAAAA,MAAM,KAAK,EAAE,CAAC;EAClD,UAAU;EACV,OAAO;EACP,cAAA;EACA,UAAU;GACR;IACE,iBACE;IACF,gBAAgB,GAAGC,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,EAAE;IACnC,oBAAoB,UAAUA,YAAAA,IAAI,EAAE,CAAC,IAAIA,YAAAA,IAAI,EAAE,CAAC,GAAGA,YAAAA,IAAI,GAAG,CAAC,IAAIA,YAAAA,IAAI,GAAG,CAAC;IACxE;GACD,EACE,iBAAiB,uCAAuC,MAAM,IAC/D;GACD,EACE,WAAW,2BAA2BA,YAAAA,IAAI,EAAE,CAAC,gCAAgCA,YAAAA,IAC3E,EACD,CAAC,SACH;GACF;EACD,CAAA;EAEJ;AAEF,YAAY,cAAc;AAC1B,YAAY,UAAUF,oBAAAA,YAAY"}