npm - @mantine/core - Versions diffs - 9.6.2 → 9.7.0 - Mend

@mantine/core 9.6.2 → 9.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (436) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.cjs","names":["createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","RadioIcon","useStyles","use","RadioGroupContext","extractStyleProps","useId","InlineInput","Box","classes","RadioGroup","RadioCard","RadioIndicator"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } 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, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n RadioCard,\n type RadioCardProps,\n type RadioCardStylesNames,\n type RadioCardFactory,\n type RadioCardCssVariables,\n type RadioCardContextValue,\n} from './RadioCard/RadioCard';\nimport {\n RadioGroup,\n RadioGroupContext,\n type RadioGroupProps,\n type RadioGroupStylesNames,\n type RadioGroupFactory,\n type RadioGroupContextValue,\n} from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport {\n RadioIndicator,\n type RadioIndicatorProps,\n type RadioIndicatorStylesNames,\n type RadioIndicatorFactory,\n type RadioIndicatorCssVariables,\n type RadioIndicatorVariant,\n} from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\nexport type RadioVariant = 'filled' \| 'outline';\nexport type RadioStylesNames = InlineInputStylesNames \| 'inner' \| 'radio' \| 'icon';\nexport type RadioCssVariables = {\n root:\n \| '--radio-size'\n \| '--radio-radius'\n \| '--radio-color'\n \| '--radio-icon-color'\n \| '--radio-icon-size';\n};\n\nexport interface RadioProps\n extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' \| 'children'> {\n /** Content of the `label` associated with the radio /\n label?: React.ReactNode;\n\n /* Key of theme.colors or any valid CSS color to set radio 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 /* A component that replaces the default radio icon (centered dot) /\n icon?: React.FC<RadioIconProps>;\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 displayed below the label /\n description?: React.ReactNode;\n\n /* Error displayed below the label /\n error?: React.ReactNode;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' /\n radius?: MantineRadius;\n\n /* Assigns ref of the root element /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting /\n iconColor?: MantineColor;\n\n /* If set, adjusts text color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* If set, applies error styles to the radio when `error` prop is set @default true */\n withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n props: RadioProps;\n ref: HTMLInputElement;\n stylesNames: RadioStylesNames;\n vars: RadioCssVariables;\n variant: RadioVariant;\n staticComponents: {\n Group: typeof RadioGroup;\n Card: typeof RadioCard;\n Indicator: typeof RadioIndicator;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n (theme, { size, radius, color, 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 '--radio-size': getSize(size, 'radio-size'),\n '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--radio-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n '--radio-icon-size': getSize(size, 'radio-icon-size'),\n },\n };\n }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n const props = useProps('Radio', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n id,\n size,\n label,\n labelPosition,\n description,\n error,\n radius,\n color,\n variant,\n disabled,\n wrapperProps,\n icon: Icon = RadioIcon,\n rootRef,\n iconColor,\n onChange,\n mod,\n attributes,\n withErrorStyles,\n checked,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioFactory>({\n name: 'Radio',\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(RadioGroupContext);\n\n const contextSize = ctx?.size ?? size;\n const componentSize = props.size ? size : contextSize;\n\n const { styleProps, rest } = extractStyleProps(others);\n const uuid = useId(id);\n const descriptionId = description ? `${uuid}-description` : undefined;\n const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n const describedBy =\n [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') \|\| undefined;\n\n const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n const withContextProps = {\n checked: contextChecked ?? checked,\n name: rest.name ?? ctx?.name,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx?.onChange(event);\n onChange?.(event);\n },\n disabled: ctx?.disabled ?? disabled,\n };\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Radio\"\n __stylesApiProps={props}\n id={uuid}\n size={componentSize}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={withContextProps.disabled}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={(contextChecked ?? checked) \|\| undefined}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n {...styleProps}\n {...wrapperProps}\n >\n <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n <Box\n {...getStyles('radio', { focusable: true, variant })}\n {...rest}\n {...withContextProps}\n component=\"input\"\n mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n id={uuid}\n type=\"radio\"\n aria-describedby={describedBy}\n />\n <Icon {...getStyles('icon')} aria-hidden />\n </Box>\n </InlineInput>\n );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n\nexport namespace Radio {\n export type Props = RadioProps;\n export type StylesNames = RadioStylesNames;\n export type Factory = RadioFactory;\n export type Variant = RadioVariant;\n\n export namespace Group {\n export type Props = RadioGroupProps;\n export type StylesNames = RadioGroupStylesNames;\n export type Factory = RadioGroupFactory;\n export type ContextValue = RadioGroupContextValue;\n }\n\n export namespace Card {\n export type Props = RadioCardProps;\n export type StylesNames = RadioCardStylesNames;\n export type Factory = RadioCardFactory;\n export type CssVariables = RadioCardCssVariables;\n export type ContextValue = RadioCardContextValue;\n }\n\n export namespace Indicator {\n export type Props = RadioIndicatorProps;\n export type StylesNames = RadioIndicatorStylesNames;\n export type Factory = RadioIndicatorFactory;\n export type CssVariables = RadioIndicatorCssVariables;\n export type Variant = RadioIndicatorVariant;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Radio.cjs","names":["createVarsResolver","parseThemeColor","getThemeColor","getSize","getRadius","getAutoContrastValue","getContrastColor","factory","useProps","RadioIcon","useStyles","use","RadioGroupContext","extractStyleProps","useId","InlineInput","Box","classes","RadioGroup","RadioCard","RadioIndicator"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } 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, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n RadioCard,\n type RadioCardProps,\n type RadioCardStylesNames,\n type RadioCardFactory,\n type RadioCardCssVariables,\n type RadioCardContextValue,\n} from './RadioCard/RadioCard';\nimport {\n RadioGroup,\n RadioGroupContext,\n type RadioGroupProps,\n type RadioGroupStylesNames,\n type RadioGroupFactory,\n type RadioGroupContextValue,\n} from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport {\n RadioIndicator,\n type RadioIndicatorProps,\n type RadioIndicatorStylesNames,\n type RadioIndicatorFactory,\n type RadioIndicatorCssVariables,\n type RadioIndicatorVariant,\n} from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\n\nexport type RadioVariant = 'filled' \| 'outline' \| 'light';\nexport type RadioStylesNames = InlineInputStylesNames \| 'inner' \| 'radio' \| 'icon';\nexport type RadioCssVariables = {\n root:\n \| '--radio-size'\n \| '--radio-radius'\n \| '--radio-color'\n \| '--radio-icon-color'\n \| '--radio-icon-size'\n \| '--radio-bg';\n};\n\nexport interface RadioProps\n extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' \| 'children'> {\n /** Content of the `label` associated with the radio /\n label?: React.ReactNode;\n\n /* Key of theme.colors or any valid CSS color to set radio 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 /* A component that replaces the default radio icon (centered dot) /\n icon?: React.FC<RadioIconProps>;\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 displayed below the label /\n description?: React.ReactNode;\n\n /* Error displayed below the label /\n error?: React.ReactNode;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' /\n radius?: MantineRadius;\n\n /* Assigns ref of the root element /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting /\n iconColor?: MantineColor;\n\n /* If set, adjusts text color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* If set, applies error styles to the radio when `error` prop is set @default true */\n withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n props: RadioProps;\n ref: HTMLInputElement;\n stylesNames: RadioStylesNames;\n vars: RadioCssVariables;\n variant: RadioVariant;\n staticComponents: {\n Group: typeof RadioGroup;\n Card: typeof RadioCard;\n Indicator: typeof RadioIndicator;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n (theme, { size, radius, color, 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 const lightColors =\n variant === 'light'\n ? theme.variantColorResolver({\n color: color \|\| theme.primaryColor,\n theme,\n variant: 'light',\n autoContrast,\n })\n : undefined;\n\n const resolvedColor =\n variant === 'outline'\n ? outlineColor\n : lightColors\n ? lightColors.color\n : getThemeColor(color, theme);\n\n return {\n root: {\n '--radio-size': getSize(size, 'radio-size'),\n '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n '--radio-color': resolvedColor,\n '--radio-bg': lightColors?.background,\n '--radio-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : lightColors\n ? lightColors.color\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n '--radio-icon-size': getSize(size, 'radio-icon-size'),\n },\n };\n }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n const props = useProps('Radio', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n id,\n size,\n label,\n labelPosition,\n description,\n error,\n radius,\n color,\n variant,\n disabled,\n wrapperProps,\n icon: Icon = RadioIcon,\n rootRef,\n iconColor,\n onChange,\n mod,\n attributes,\n withErrorStyles,\n checked,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioFactory>({\n name: 'Radio',\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(RadioGroupContext);\n\n const contextSize = ctx?.size ?? size;\n const componentSize = props.size ? size : contextSize;\n\n const { styleProps, rest } = extractStyleProps(others);\n const uuid = useId(id);\n const descriptionId = description ? `${uuid}-description` : undefined;\n const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n const describedBy =\n [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') \|\| undefined;\n\n const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n const withContextProps = {\n checked: contextChecked ?? checked,\n name: rest.name ?? ctx?.name,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx?.onChange(event);\n onChange?.(event);\n },\n disabled: ctx?.disabled ?? disabled,\n };\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Radio\"\n __stylesApiProps={props}\n id={uuid}\n size={componentSize}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={withContextProps.disabled}\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={(contextChecked ?? checked) \|\| undefined}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n {...styleProps}\n {...wrapperProps}\n >\n <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n <Box\n {...getStyles('radio', { focusable: true, variant })}\n {...rest}\n {...withContextProps}\n component=\"input\"\n mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n id={uuid}\n type=\"radio\"\n aria-describedby={describedBy}\n />\n <Icon {...getStyles('icon')} aria-hidden />\n </Box>\n </InlineInput>\n );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n\nexport namespace Radio {\n export type Props = RadioProps;\n export type StylesNames = RadioStylesNames;\n export type Factory = RadioFactory;\n export type Variant = RadioVariant;\n\n export namespace Group {\n export type Props = RadioGroupProps;\n export type StylesNames = RadioGroupStylesNames;\n export type Factory = RadioGroupFactory;\n export type ContextValue = RadioGroupContextValue;\n }\n\n export namespace Card {\n export type Props = RadioCardProps;\n export type StylesNames = RadioCardStylesNames;\n export type Factory = RadioCardFactory;\n export type CssVariables = RadioCardCssVariables;\n export type ContextValue = RadioCardContextValue;\n }\n\n export namespace Indicator {\n export type Props = RadioIndicatorProps;\n export type StylesNames = RadioIndicatorStylesNames;\n export type Factory = RadioIndicatorFactory;\n export type CssVariables = RadioIndicatorCssVariables;\n export type Variant = RadioIndicatorVariant;\n }\n}\n"],"mappings":"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"}

package/cjs/components/Radio/Radio.module.cjs CHANGED Viewed

@@ -5,6 +5,7 @@ var Radio_module_default = {
 	"inner": "m_89c4f5e4",
 	"icon": "m_f3ed6b2b",
 	"radio": "m_8a3dbb89",
+	"radio--light": "m_99d09bcd",
 	"radio--outline": "m_1bfe9d39"
 };
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.module.cjs","names":[],"sources":["../../../src/components/Radio/Radio.module.css"],"sourcesContent":[".root {\n --radio-size-xs: 16px;\n --radio-size-sm: 20px;\n --radio-size-md: 24px;\n --radio-size-lg: 30px;\n --radio-size-xl: 36px;\n --radio-size: var(--radio-size-sm);\n\n --radio-icon-size-xs: 6px;\n --radio-icon-size-sm: 8px;\n --radio-icon-size-md: 10px;\n --radio-icon-size-lg: 14px;\n --radio-icon-size-xl: 16px;\n --radio-icon-size: var(--radio-icon-size-sm);\n --radio-icon-color: var(--mantine-color-white);\n}\n\n.inner {\n position: relative;\n width: var(--radio-size);\n height: var(--radio-size);\n order: 1;\n\n &:where([data-label-position='left']) {\n order: 2;\n }\n}\n\n.icon {\n color: var(--radio-icon-color);\n opacity: var(--radio-icon-opacity, 0);\n translate: -50% -50%;\n transform: var(--radio-icon-transform, scale(0.2) translateY(rem(10px)));\n transition:\n opacity 100ms ease,\n transform 200ms ease;\n pointer-events: none;\n width: var(--radio-icon-size);\n height: var(--radio-icon-size);\n position: absolute;\n top: 50%;\n left: 50%;\n}\n\n.radio {\n border: 1px solid;\n position: relative;\n appearance: none;\n width: var(--radio-size);\n height: var(--radio-size);\n border-radius: var(--radio-radius, var(--radio-size));\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-property: background-color, border-color;\n transition-timing-function: ease;\n transition-duration: 100ms;\n cursor: var(--mantine-cursor-type);\n -webkit-tap-highlight-color: transparent;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:checked {\n background-color: var(--radio-color, var(--mantine-primary-color-filled));\n border-color: var(--radio-color, var(--mantine-primary-color-filled));\n\n & + .icon {\n --radio-icon-opacity: 1;\n --radio-icon-transform: scale(1);\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--mantine-color-disabled);\n border-color: var(--mantine-color-disabled-border);\n\n & + .icon {\n --radio-icon-color: var(--mantine-color-disabled-color);\n }\n }\n\n &:where([data-with-error-styles][data-error]) {\n border-color: var(--mantine-color-error);\n }\n}\n\n.radio--outline {\n & + .icon {\n --radio-icon-color: var(--radio-color);\n }\n\n &:checked:not(:disabled) {\n background-color: transparent;\n border-color: var(--radio-color);\n\n & + .icon {\n --radio-icon-color: var(--radio-color);\n --radio-icon-opacity: 1;\n --radio-icon-transform: none;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Radio.module.cjs","names":[],"sources":["../../../src/components/Radio/Radio.module.css"],"sourcesContent":[".root {\n --radio-size-xs: 16px;\n --radio-size-sm: 20px;\n --radio-size-md: 24px;\n --radio-size-lg: 30px;\n --radio-size-xl: 36px;\n --radio-size: var(--radio-size-sm);\n\n --radio-icon-size-xs: 6px;\n --radio-icon-size-sm: 8px;\n --radio-icon-size-md: 10px;\n --radio-icon-size-lg: 14px;\n --radio-icon-size-xl: 16px;\n --radio-icon-size: var(--radio-icon-size-sm);\n --radio-icon-color: var(--mantine-color-white);\n}\n\n.inner {\n position: relative;\n width: var(--radio-size);\n height: var(--radio-size);\n order: 1;\n\n &:where([data-label-position='left']) {\n order: 2;\n }\n}\n\n.icon {\n color: var(--radio-icon-color);\n opacity: var(--radio-icon-opacity, 0);\n translate: -50% -50%;\n transform: var(--radio-icon-transform, scale(0.2) translateY(rem(10px)));\n transition:\n opacity 100ms ease,\n transform 200ms ease;\n pointer-events: none;\n width: var(--radio-icon-size);\n height: var(--radio-icon-size);\n position: absolute;\n top: 50%;\n left: 50%;\n}\n\n.radio {\n border: 1px solid;\n position: relative;\n appearance: none;\n width: var(--radio-size);\n height: var(--radio-size);\n border-radius: var(--radio-radius, var(--radio-size));\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition-property: background-color, border-color;\n transition-timing-function: ease;\n transition-duration: 100ms;\n cursor: var(--mantine-cursor-type);\n -webkit-tap-highlight-color: transparent;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:checked {\n background-color: var(--radio-color, var(--mantine-primary-color-filled));\n border-color: var(--radio-color, var(--mantine-primary-color-filled));\n\n & + .icon {\n --radio-icon-opacity: 1;\n --radio-icon-transform: scale(1);\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--mantine-color-disabled);\n border-color: var(--mantine-color-disabled-border);\n\n & + .icon {\n --radio-icon-color: var(--mantine-color-disabled-color);\n }\n }\n\n &:where([data-with-error-styles][data-error]) {\n border-color: var(--mantine-color-error);\n }\n}\n\n.radio--light {\n &:checked:not(:disabled) {\n background-color: var(--radio-bg);\n border-color: transparent;\n\n & + .icon {\n --radio-icon-opacity: 1;\n --radio-icon-transform: none;\n }\n }\n}\n\n.radio--outline {\n & + .icon {\n --radio-icon-color: var(--radio-color);\n }\n\n &:checked:not(:disabled) {\n background-color: transparent;\n border-color: var(--radio-color);\n\n & + .icon {\n --radio-icon-color: var(--radio-color);\n --radio-icon-opacity: 1;\n --radio-icon-transform: none;\n }\n }\n}\n"],"mappings":""}

package/cjs/components/Radio/RadioIndicator/RadioIndicator.cjs CHANGED Viewed

@@ -22,12 +22,20 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { r
 		theme
 	});
 	const outlineColor = parsedColor.isThemeColor && parsedColor.shade === void 0 ? `var(--mantine-color-${parsedColor.color}-outline)` : parsedColor.color;
+	const lightColors = variant === "light" ? theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		variant: "light",
+		autoContrast
+	}) : void 0;
+	const resolvedColor = variant === "outline" ? outlineColor : lightColors ? lightColors.color : require_get_theme_color.getThemeColor(color, theme);
 	return { indicator: {
 		"--radio-size": require_get_size.getSize(size, "radio-size"),
 		"--radio-radius": radius === void 0 ? void 0 : require_get_size.getRadius(radius),
-		"--radio-color": variant === "outline" ? outlineColor : require_get_theme_color.getThemeColor(color, theme),
+		"--radio-color": resolvedColor,
+		"--radio-bg": lightColors?.background,
 		"--radio-icon-size": typeof size === "number" ? `calc(${require_get_size.getSize(size, "radio-size")} * 0.4)` : require_get_size.getSize(size, "radio-icon-size"),
-		"--radio-icon-color": iconColor ? require_get_theme_color.getThemeColor(iconColor, theme) : require_get_auto_contrast_value.getAutoContrastValue(autoContrast, theme) ? require_get_contrast_color.getContrastColor({
+		"--radio-icon-color": iconColor ? require_get_theme_color.getThemeColor(iconColor, theme) : lightColors ? lightColors.color : require_get_auto_contrast_value.getAutoContrastValue(autoContrast, theme) ? require_get_contrast_color.getContrastColor({
 			color,
 			theme,
 			autoContrast

package/cjs/components/Radio/RadioIndicator/RadioIndicator.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioIndicator.cjs","names":["RadioIcon","createVarsResolver","parseThemeColor","~~getSize~~","~~getRadius~~","~~getThemeColor~~","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","use","RadioCardContext","Box","classes"],"sources":["../../../../src/components/Radio/RadioIndicator/RadioIndicator.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 { RadioCardContext } from '../RadioCard/RadioCard';\nimport { RadioIcon, RadioIconProps } from '../RadioIcon';\nimport classes from './RadioIndicator.module.css';\n\nexport type RadioIndicatorStylesNames = 'indicator' \| 'icon';\nexport type RadioIndicatorVariant = 'filled' \| 'outline';\nexport type RadioIndicatorCssVariables = {\n indicator:\n \| '--radio-size'\n \| '--radio-radius'\n \| '--radio-color'\n \| '--radio-icon-color'\n \| '--radio-icon-size';\n};\n\nexport interface RadioIndicatorProps\n extends BoxProps, StylesApiProps<RadioIndicatorFactory>, ElementProps<'div'> {\n /** Key of theme.colors or any valid CSS color to set indicator background color in checked state @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the component @default 'sm' /\n size?: MantineSize \| (string & {}) \| number;\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. When not set, icon color is determined automatically based on theme.autoContrast setting /\n iconColor?: MantineColor;\n\n /* If set, adjusts text color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* A component that replaces the default radio icon (centered dot) /\n icon?: React.FC<RadioIconProps>;\n\n /* Checked state /\n checked?: boolean;\n\n /* Disabled state /\n disabled?: boolean;\n}\n\nexport type RadioIndicatorFactory = Factory<{\n props: RadioIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: RadioIndicatorStylesNames;\n vars: RadioIndicatorCssVariables;\n variant: RadioIndicatorVariant;\n}>;\n\nconst defaultProps = {\n icon: RadioIcon,\n} satisfies Partial<RadioIndicatorProps>;\n\nconst varsResolver = createVarsResolver<RadioIndicatorFactory>(\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 '--radio-size': getSize(size, 'radio-size'),\n '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n '--radio-color': ~~variant ===~~ '~~outline~~' ~~? outlineColor~~ : ~~getThemeColor(color, theme)~~,\n '--radio-icon-size':\n typeof size === 'number'\n ? `calc(${getSize(size, 'radio-size')} 0.4)`\n : getSize(size, 'radio-icon-size'),\n '--radio-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 RadioIndicator = factory<RadioIndicatorFactory>((_props) => {\n const props = useProps('RadioIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n icon: Icon,\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<RadioIndicatorFactory>({\n name: 'RadioIndicator',\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(RadioCardContext);\n const _checked = typeof checked === 'boolean' ? checked : 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 {...getStyles('icon')} />\n </Box>\n );\n});\n\nRadioIndicator.displayName = '@mantine/core/RadioIndicator';\nRadioIndicator.classes = classes;\nRadioIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;~~AAuEA~~,MAAM,eAAe,EACnB,MAAMA,kBAAAA,UACR;AAEA,MAAM,eAAeC,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAcC,0BAAAA,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,OAAO,EACL,WAAW;EACT,gBAAgBC,iBAAAA,QAAQ,MAAM,YAAY;EAC1C,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;EACrE,iBAAiB,~~YAAY,YAAY,eAAeC,wBAAAA,~~cAAc,~~OAAO,KAAK~~;~~EAClF~~,qBACE,OAAO,SAAS,WACZ,~~QAAQF~~,iBAAAA,QAAQ,MAAM,YAAY,EAAE,WACpCA,iBAAAA,QAAQ,MAAM,iBAAiB;EACrC,sBAAsB,~~YAClBE~~,wBAAAA,cAAc,WAAW,KAAK,~~IAC9BC~~,gCAAAA,qBAAqB,cAAc,KAAK,IACtCC,2BAAAA,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;~~CACR~~,EACF;AACF,CACF;AAEA,MAAa,iBAAiBC,gBAAAA,SAAgC,WAAW;CACvE,MAAM,QAAQC,kBAAAA,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAiC;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,OAAA,GAAMC,MAAAA,IAAAA,CAAIC,kBAAAA,gBAAgB;CAChC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,WAAW;CAE1E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAM,GAAI,UAAU,MAAM,EAAI,CAAA;CAC3B,CAAA;AAET,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUC,8BAAAA;AACzB,eAAe,eAAe"}
1	+ {"version":3,"file":"RadioIndicator.cjs","names":["RadioIcon","createVarsResolver","parseThemeColor","getThemeColor","getSize","getRadius","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","use","RadioCardContext","Box","classes"],"sources":["../../../../src/components/Radio/RadioIndicator/RadioIndicator.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 { RadioCardContext } from '../RadioCard/RadioCard';\nimport { RadioIcon, RadioIconProps } from '../RadioIcon';\nimport classes from './RadioIndicator.module.css';\n\nexport type RadioIndicatorStylesNames = 'indicator' \| 'icon';\nexport type RadioIndicatorVariant = 'filled' \| 'outline' \| 'light';\nexport type RadioIndicatorCssVariables = {\n indicator:\n \| '--radio-size'\n \| '--radio-radius'\n \| '--radio-color'\n \| '--radio-icon-color'\n \| '--radio-icon-size'\n \| '--radio-bg';\n};\n\nexport interface RadioIndicatorProps\n extends BoxProps, StylesApiProps<RadioIndicatorFactory>, ElementProps<'div'> {\n /** Key of theme.colors or any valid CSS color to set indicator background color in checked state @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the component @default 'sm' /\n size?: MantineSize \| (string & {}) \| number;\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. When not set, icon color is determined automatically based on theme.autoContrast setting /\n iconColor?: MantineColor;\n\n /* If set, adjusts text color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* A component that replaces the default radio icon (centered dot) /\n icon?: React.FC<RadioIconProps>;\n\n /* Checked state /\n checked?: boolean;\n\n /* Disabled state /\n disabled?: boolean;\n}\n\nexport type RadioIndicatorFactory = Factory<{\n props: RadioIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: RadioIndicatorStylesNames;\n vars: RadioIndicatorCssVariables;\n variant: RadioIndicatorVariant;\n}>;\n\nconst defaultProps = {\n icon: RadioIcon,\n} satisfies Partial<RadioIndicatorProps>;\n\nconst varsResolver = createVarsResolver<RadioIndicatorFactory>(\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 const lightColors =\n variant === 'light'\n ? theme.variantColorResolver({\n color: color \|\| theme.primaryColor,\n theme,\n variant: 'light',\n autoContrast,\n })\n : undefined;\n\n const resolvedColor =\n variant === 'outline'\n ? outlineColor\n : lightColors\n ? lightColors.color\n : getThemeColor(color, theme);\n\n return {\n indicator: {\n '--radio-size': getSize(size, 'radio-size'),\n '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n '--radio-color': resolvedColor,\n '--radio-bg': lightColors?.background,\n '--radio-icon-size':\n typeof size === 'number'\n ? `calc(${getSize(size, 'radio-size')} 0.4)`\n : getSize(size, 'radio-icon-size'),\n '--radio-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : lightColors\n ? lightColors.color\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const RadioIndicator = factory<RadioIndicatorFactory>((_props) => {\n const props = useProps('RadioIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n icon: Icon,\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<RadioIndicatorFactory>({\n name: 'RadioIndicator',\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(RadioCardContext);\n const _checked = typeof checked === 'boolean' ? checked : 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 {...getStyles('icon')} />\n </Box>\n );\n});\n\nRadioIndicator.displayName = '@mantine/core/RadioIndicator';\nRadioIndicator.classes = classes;\nRadioIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAwEA,MAAM,eAAe,EACnB,MAAMA,kBAAAA,UACR;AAEA,MAAM,eAAeC,6BAAAA,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAcC,0BAAAA,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,MAAM,cACJ,YAAY,UACR,MAAM,qBAAqB;EACzB,OAAO,SAAS,MAAM;EACtB;EACA,SAAS;EACT;CACF,CAAC,IACD,KAAA;CAEN,MAAM,gBACJ,YAAY,YACR,eACA,cACE,YAAY,QACZC,wBAAAA,cAAc,OAAO,KAAK;CAElC,OAAO,EACL,WAAW;EACT,gBAAgBC,iBAAAA,QAAQ,MAAM,YAAY;EAC1C,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;EACrE,iBAAiB;EACjB,cAAc,aAAa;EAC3B,qBACE,OAAO,SAAS,WACZ,QAAQD,iBAAAA,QAAQ,MAAM,YAAY,EAAE,WACpCA,iBAAAA,QAAQ,MAAM,iBAAiB;EACrC,sBAAsB,YAClBD,wBAAAA,cAAc,WAAW,KAAK,IAC9B,cACE,YAAY,QACZG,gCAAAA,qBAAqB,cAAc,KAAK,IACtCC,2BAAAA,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACV,EACF;AACF,CACF;AAEA,MAAa,iBAAiBC,gBAAAA,SAAgC,WAAW;CACvE,MAAM,QAAQC,kBAAAA,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAiC;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,OAAA,GAAMC,MAAAA,IAAAA,CAAIC,kBAAAA,gBAAgB;CAChC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,WAAW;CAE1E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD,EAAM,GAAI,UAAU,MAAM,EAAI,CAAA;CAC3B,CAAA;AAET,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUC,8BAAAA;AACzB,eAAe,eAAe"}

package/cjs/components/Radio/RadioIndicator/RadioIndicator.module.cjs CHANGED Viewed

@@ -3,6 +3,7 @@
 var RadioIndicator_module_default = {
 	"indicator": "m_717d7ff6",
 	"icon": "m_3e4da632",
+	"indicator--light": "m_7eec72c0",
 	"indicator--outline": "m_2980836c"
 };
 //#endregion

package/cjs/components/Radio/RadioIndicator/RadioIndicator.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioIndicator.module.cjs","names":[],"sources":["../../../../src/components/Radio/RadioIndicator/RadioIndicator.module.css"],"sourcesContent":[".indicator {\n --radio-size-xs: 16px;\n --radio-size-sm: 20px;\n --radio-size-md: 24px;\n --radio-size-lg: 30px;\n --radio-size-xl: 36px;\n\n --radio-icon-size-xs: 6px;\n --radio-icon-size-sm: 8px;\n --radio-icon-size-md: 10px;\n --radio-icon-size-lg: 14px;\n --radio-icon-size-xl: 16px;\n\n --radio-icon-size: var(--radio-icon-size-sm);\n --radio-size: var(--radio-size-sm);\n --radio-color: var(--mantine-primary-color-filled);\n --radio-icon-color: var(--mantine-color-white);\n\n position: relative;\n border: 1px solid transparent;\n width: var(--radio-size);\n min-width: var(--radio-size);\n height: var(--radio-size);\n min-height: var(--radio-size);\n border-radius: var(--radio-radius, 10000px);\n transition:\n border-color 100ms ease,\n background-color 100ms ease;\n cursor: var(--mantine-cursor-type);\n -webkit-tap-highlight-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &[data-checked] {\n background-color: var(--radio-color);\n border-color: var(--radio-color);\n\n & > .icon {\n opacity: 1;\n transform: none;\n color: var(--radio-icon-color);\n }\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n background-color: var(--mantine-color-disabled);\n border-color: var(--mantine-color-disabled-border);\n\n &[data-checked] > .icon {\n color: var(--mantine-color-disabled-color);\n }\n }\n}\n\n.indicator--outline {\n &[data-checked]:not([data-disabled]) {\n background-color: transparent;\n border-color: var(--radio-color);\n\n & > .icon {\n color: var(--radio-color);\n opacity: 1;\n transform: none;\n }\n }\n}\n\n.icon {\n display: block;\n width: var(--radio-icon-size);\n height: var(--radio-icon-size);\n color: transparent;\n pointer-events: none;\n transform: translateY(rem(5px)) scale(0.5);\n opacity: 1;\n transition:\n transform 100ms ease,\n opacity 100ms ease;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"RadioIndicator.module.cjs","names":[],"sources":["../../../../src/components/Radio/RadioIndicator/RadioIndicator.module.css"],"sourcesContent":[".indicator {\n --radio-size-xs: 16px;\n --radio-size-sm: 20px;\n --radio-size-md: 24px;\n --radio-size-lg: 30px;\n --radio-size-xl: 36px;\n\n --radio-icon-size-xs: 6px;\n --radio-icon-size-sm: 8px;\n --radio-icon-size-md: 10px;\n --radio-icon-size-lg: 14px;\n --radio-icon-size-xl: 16px;\n\n --radio-icon-size: var(--radio-icon-size-sm);\n --radio-size: var(--radio-size-sm);\n --radio-color: var(--mantine-primary-color-filled);\n --radio-icon-color: var(--mantine-color-white);\n\n position: relative;\n border: 1px solid transparent;\n width: var(--radio-size);\n min-width: var(--radio-size);\n height: var(--radio-size);\n min-height: var(--radio-size);\n border-radius: var(--radio-radius, 10000px);\n transition:\n border-color 100ms ease,\n background-color 100ms ease;\n cursor: var(--mantine-cursor-type);\n -webkit-tap-highlight-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &[data-checked] {\n background-color: var(--radio-color);\n border-color: var(--radio-color);\n\n & > .icon {\n opacity: 1;\n transform: none;\n color: var(--radio-icon-color);\n }\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n background-color: var(--mantine-color-disabled);\n border-color: var(--mantine-color-disabled-border);\n\n &[data-checked] > .icon {\n color: var(--mantine-color-disabled-color);\n }\n }\n}\n\n.indicator--light {\n &[data-checked]:not([data-disabled]) {\n background-color: var(--radio-bg);\n border-color: transparent;\n\n & > .icon {\n color: var(--radio-icon-color);\n opacity: 1;\n transform: none;\n }\n }\n}\n\n.indicator--outline {\n &[data-checked]:not([data-disabled]) {\n background-color: transparent;\n border-color: var(--radio-color);\n\n & > .icon {\n color: var(--radio-color);\n opacity: 1;\n transform: none;\n }\n }\n}\n\n.icon {\n display: block;\n width: var(--radio-icon-size);\n height: var(--radio-icon-size);\n color: transparent;\n pointer-events: none;\n transform: translateY(rem(5px)) scale(0.5);\n opacity: 1;\n transition:\n transform 100ms ease,\n opacity 100ms ease;\n}\n"],"mappings":""}

package/cjs/components/Rating/Rating.cjs CHANGED Viewed

@@ -19,6 +19,8 @@ function roundValueTo(value, to) {
 	const precision = `${to}`.split(".")[1]?.length || 0;
 	return Number(rounded.toFixed(precision));
 }
+const TOUCH_MOVE_THRESHOLD = 10;
+const EMULATED_CLICK_TIMEOUT = 500;
 const defaultProps = {
 	size: "sm",
 	getSymbolLabel: (value) => `${value}`,
@@ -32,7 +34,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { s
 } }));
 const Rating = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("Rating", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, name, id, value, defaultValue, onChange, fractions, count, onMouseEnter, readOnly, allowClear, onMouseMove, onHover, onMouseLeave, onTouchStart, onTouchEnd, size, variant, getSymbolLabel, color, emptySymbol, fullSymbol, highlightSelectedOnly, attributes, ref, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, name, id, value, defaultValue, onChange, fractions, count, onMouseEnter, readOnly, allowClear, onMouseMove, onHover, onMouseLeave, onTouchStart, onTouchMove, onTouchCancel, onTouchEnd, size, variant, getSymbolLabel, color, emptySymbol, fullSymbol, highlightSelectedOnly, attributes, ref, ...others } = props;
 	const getStyles = require_use_styles.useStyles({
 		name: "Rating",
 		classes: require_Rating_module.default,
@@ -50,6 +52,8 @@ const Rating = require_factory.factory((_props) => {
 	const _name = (0, _mantine_hooks.useId)(name);
 	const _id = (0, _mantine_hooks.useId)(id);
 	const rootRef = (0, react.useRef)(null);
+	const touchStartPosition = (0, react.useRef)(null);
+	const lastTouchTimestamp = (0, react.useRef)(0);
 	const [_value, setValue] = (0, _mantine_hooks.useUncontrolled)({
 		value,
 		defaultValue,
@@ -70,6 +74,10 @@ const Rating = require_factory.factory((_props) => {
 		const hoverValue = (dir === "rtl" ? right - x : x - left) / symbolWidth;
 		return (0, _mantine_hooks.clamp)(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);
 	};
+	const applyValue = (newValue) => {
+		if (allowClear && newValue === stableValueRounded) setValue(0);
+		else setValue(newValue);
+	};
 	const handleMouseEnter = (event) => {
 		onMouseEnter?.(event);
 		!readOnly && setOutside(false);
@@ -90,15 +98,31 @@ const Rating = require_factory.factory((_props) => {
 	};
 	const handleTouchStart = (event) => {
 		const { touches } = event;
-		if (touches.length !== 1) return;
-		if (!readOnly) {
-			const touch = touches[0];
-			setValue(getRatingFromCoordinates(touch.clientX));
-		}
+		touchStartPosition.current = touches.length === 1 ? {
+			x: touches[0].clientX,
+			y: touches[0].clientY
+		} : null;
 		onTouchStart?.(event);
 	};
+	const handleTouchMove = (event) => {
+		const startPosition = touchStartPosition.current;
+		const touch = event.touches[0];
+		if (startPosition && touch && Math.hypot(touch.clientX - startPosition.x, touch.clientY - startPosition.y) > TOUCH_MOVE_THRESHOLD) touchStartPosition.current = null;
+		onTouchMove?.(event);
+	};
+	const handleTouchCancel = (event) => {
+		touchStartPosition.current = null;
+		onTouchCancel?.(event);
+	};
 	const handleTouchEnd = (event) => {
-		event.preventDefault();
+		const startPosition = touchStartPosition.current;
+		const touch = event.changedTouches[0];
+		touchStartPosition.current = null;
+		if (startPosition && touch && !readOnly) {
+			event.preventDefault();
+			applyValue(getRatingFromCoordinates(touch.clientX));
+			lastTouchTimestamp.current = Date.now();
+		}
 		onTouchEnd?.(event);
 	};
 	const handleItemBlur = () => isOutside && setHovered(-1);
@@ -109,11 +133,8 @@ const Rating = require_factory.factory((_props) => {
 		}
 	};
 	const handleChange = (event) => {
-		if (!readOnly) {
-			const newValue = typeof event === "number" ? event : parseFloat(event.target.value);
-			if (allowClear && newValue === stableValueRounded) setValue(0);
-			else setValue(newValue);
-		}
+		if (readOnly || Date.now() - lastTouchTimestamp.current < EMULATED_CLICK_TIMEOUT) return;
+		applyValue(typeof event === "number" ? event : parseFloat(event.target.value));
 	};
 	const items = Array(_count).fill(0).map((_, index) => {
 		const integerValue = index + 1;
@@ -152,6 +173,8 @@ const Rating = require_factory.factory((_props) => {
 			onMouseEnter: handleMouseEnter,
 			onMouseLeave: handleMouseLeave,
 			onTouchStart: handleTouchStart,
+			onTouchMove: handleTouchMove,
+			onTouchCancel: handleTouchCancel,
 			onTouchEnd: handleTouchEnd,
 			variant,
 			size,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Rating.cjs","names":["createVarsResolver","getSize","getThemeColor","factory","useProps","useStyles","useDirection","useId","useRef","useUncontrolled","useState","clamp","RatingItem","RatingProvider","Box","useMergedRef","classes"],"sources":["../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clamp, useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n getThemeColor,\n MantineColor,\n MantineSize,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport { RatingProvider } from './Rating.context';\nimport { RatingItem } from './RatingItem/RatingItem';\nimport classes from './Rating.module.css';\n\nfunction roundValueTo(value: number, to: number) {\n const rounded = Math.round(value / to) * to;\n const precision = `${to}`.split('.')[1]?.length \|\| 0;\n return Number(rounded.toFixed(precision));\n}\n\nexport type RatingStylesNames =\n \| 'root'\n \| 'starSymbol'\n \| 'input'\n \| 'label'\n \| 'symbolBody'\n \| 'symbolGroup';\n\nexport type RatingCssVariables = {\n root: '--rating-size' \| '--rating-color';\n};\n\nexport interface RatingProps\n extends BoxProps, StylesApiProps<RatingFactory>, ElementProps<'div', 'onChange'> {\n /** Uncontrolled component default value /\n defaultValue?: number;\n\n /* Controlled component value /\n value?: number;\n\n /* Called when value changes /\n onChange?: (value: number) => void;\n\n /* Icon displayed for unselected rating items. Can be a function that receives the rating value. /\n emptySymbol?: React.ReactNode \| ((value: number) => React.ReactNode);\n\n /* Icon displayed for selected rating items. Can be a function that receives the rating value. /\n fullSymbol?: React.ReactNode \| ((value: number) => React.ReactNode);\n\n /* Number of fractions each item can be divided into, default is 1 /\n fractions?: number;\n\n /* Controls component size @default 'sm' /\n size?: MantineSize \| number \| (string & {});\n\n /* Number of rating items (stars), default is 5 /\n count?: number;\n\n /* Called when rating item is hovered. Receives -1 when hover ends. /\n onHover?: (value: number) => void;\n\n /* Function to generate aria-label for each rating value. Receives the rating value as argument, default is (value) => String(value) /\n getSymbolLabel?: (index: number) => string;\n\n /* Name attribute for form submission. If not provided, a unique id will be generated. /\n name?: string;\n\n /* When true, rating cannot be changed by user interaction, default is false /\n readOnly?: boolean;\n\n /* When true, clicking the same rating value clears the rating to 0, default is false /\n allowClear?: boolean;\n\n /* When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false /\n highlightSelectedOnly?: boolean;\n\n /* Key of theme.colors or any CSS color value, default is 'yellow' /\n color?: MantineColor;\n}\n\nexport type RatingFactory = Factory<{\n props: RatingProps;\n ref: HTMLDivElement;\n stylesNames: RatingStylesNames;\n vars: RatingCssVariables;\n}>;\n\nconst defaultProps = {\n size: 'sm',\n getSymbolLabel: (value) => `${value}`,\n count: 5,\n fractions: 1,\n color: 'yellow',\n} satisfies Partial<RatingProps>;\n\nconst varsResolver = createVarsResolver<RatingFactory>((theme, { size, color }) => ({\n root: {\n '--rating-size': getSize(size, 'rating-size'),\n '--rating-color': getThemeColor(color, theme),\n },\n}));\n\nexport const Rating = factory<RatingFactory>((_props) => {\n const props = useProps('Rating', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n name,\n id,\n value,\n defaultValue,\n onChange,\n fractions,\n count,\n onMouseEnter,\n readOnly,\n allowClear,\n onMouseMove,\n onHover,\n onMouseLeave,\n onTouchStart,\n onTouchEnd,\n size,\n variant,\n getSymbolLabel,\n color,\n emptySymbol,\n fullSymbol,\n highlightSelectedOnly,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<RatingFactory>({\n name: 'Rating',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { dir } = useDirection();\n\n const _name = useId(name);\n const _id = useId(id);\n const rootRef = useRef<HTMLDivElement>(null);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: 0,\n onChange,\n });\n\n const [hovered, setHovered] = useState(-1);\n const [isOutside, setOutside] = useState(true);\n\n const _fractions = Math.floor(fractions);\n const _count = Math.floor(count);\n\n const decimalUnit = 1 / _fractions;\n const stableValueRounded = roundValueTo(_value, decimalUnit);\n const finalValue = hovered !== -1 ? hovered : stableValueRounded;\n\n const getRatingFromCoordinates = (x: number) => {\n if (!rootRef.current) {\n return 0;\n }\n\n const { left, right, width } = rootRef.current.getBoundingClientRect();\n const symbolWidth = width / _count;\n\n const hoverPosition = dir === 'rtl' ? right - x : x - left;\n const hoverValue = hoverPosition / symbolWidth;\n\n return clamp(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);\n };\n\n const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n onMouseEnter?.(event);\n !readOnly && setOutside(false);\n };\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n onMouseMove?.(event);\n\n if (readOnly) {\n return;\n }\n\n const rounded = getRatingFromCoordinates(event.clientX);\n\n setHovered(rounded);\n rounded !== hovered && onHover?.(rounded);\n };\n\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n onMouseLeave?.(event);\n\n if (readOnly) {\n return;\n }\n\n setHovered(-1);\n setOutside(true);\n hovered !== -1 && onHover?.(-1);\n };\n\n const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n const { touches } = event;\n if (touches.length !== 1) {\n return;\n }\n\n if (!readOnly) {\n const touch = touches[0];\n setValue(getRatingFromCoordinates(touch.clientX));\n }\n\n onTouchStart?.(event);\n };\n\n const handleTouchEnd = (event: React.TouchEvent<HTMLDivElement>) => {\n event.preventDefault();\n\n onTouchEnd?.(event);\n };\n\n const handleItemBlur = () => isOutside && setHovered(-1);\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement> \| number) => {\n if (!readOnly) {\n if (typeof event === 'number') {\n setHovered(event);\n } else {\n setHovered(parseFloat(event.target.value));\n }\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement> \| number) => {\n if (!readOnly) {\n const newValue = typeof event === 'number' ? event : parseFloat(event.target.value);\n\n // If allowClear is true and clicking the same value, reset to 0\n if (allowClear && newValue === stableValueRounded) {\n setValue(0);\n } else {\n setValue(newValue);\n }\n }\n };\n\n const items = Array(_count)\n .fill(0)\n .map((_, index) => {\n const integerValue = index + 1;\n const fractionItems = Array.from(new Array(index === 0 ? _fractions + 1 : _fractions));\n const isGroupActive = !readOnly && Math.ceil(hovered) === integerValue;\n\n return (\n <div\n key={integerValue}\n data-active={isGroupActive \|\| undefined}\n {...getStyles('symbolGroup')}\n >\n {fractionItems.map((__, fractionIndex) => {\n const fractionValue = decimalUnit (index === 0 ? fractionIndex : fractionIndex + 1);\n const symbolValue = roundValueTo(integerValue - 1 + fractionValue, decimalUnit);\n\n return (\n <RatingItem\n key={`${integerValue}-${symbolValue}`}\n getSymbolLabel={getSymbolLabel}\n emptyIcon={emptySymbol}\n fullIcon={fullSymbol}\n full={\n highlightSelectedOnly ? symbolValue === finalValue : symbolValue <= finalValue\n }\n active={symbolValue === finalValue}\n checked={symbolValue === stableValueRounded}\n readOnly={readOnly}\n fractionValue={fractionValue}\n value={symbolValue}\n name={_name}\n onChange={handleChange}\n onBlur={handleItemBlur}\n onInputChange={handleInputChange}\n id={`${_id}-${index}-${fractionIndex}`}\n />\n );\n })}\n </div>\n );\n });\n\n return (\n <RatingProvider value={{ getStyles }}>\n <Box\n ref={useMergedRef(rootRef, ref)}\n {...getStyles('root')}\n onMouseMove={handleMouseMove}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n variant={variant}\n size={size}\n id={_id}\n {...others}\n >\n {items}\n </Box>\n </RatingProvider>\n );\n});\n\nRating.classes = classes;\nRating.varsResolver = varsResolver;\nRating.displayName = '@mantine/core/Rating';\n\nexport namespace Rating {\n export type Props = RatingProps;\n export type StylesNames = RatingStylesNames;\n export type Factory = RatingFactory;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Rating.cjs","names":["createVarsResolver","getSize","getThemeColor","factory","useProps","useStyles","useDirection","useId","useRef","useUncontrolled","useState","clamp","RatingItem","RatingProvider","Box","useMergedRef","classes"],"sources":["../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clamp, useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n getThemeColor,\n MantineColor,\n MantineSize,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport { RatingProvider } from './Rating.context';\nimport { RatingItem } from './RatingItem/RatingItem';\nimport classes from './Rating.module.css';\n\nfunction roundValueTo(value: number, to: number) {\n const rounded = Math.round(value / to) * to;\n const precision = `${to}`.split('.')[1]?.length \|\| 0;\n return Number(rounded.toFixed(precision));\n}\n\nconst TOUCH_MOVE_THRESHOLD = 10;\nconst EMULATED_CLICK_TIMEOUT = 500;\n\nexport type RatingStylesNames =\n \| 'root'\n \| 'starSymbol'\n \| 'input'\n \| 'label'\n \| 'symbolBody'\n \| 'symbolGroup';\n\nexport type RatingCssVariables = {\n root: '--rating-size' \| '--rating-color';\n};\n\nexport interface RatingProps\n extends BoxProps, StylesApiProps<RatingFactory>, ElementProps<'div', 'onChange'> {\n /** Uncontrolled component default value /\n defaultValue?: number;\n\n /* Controlled component value /\n value?: number;\n\n /* Called when value changes /\n onChange?: (value: number) => void;\n\n /* Icon displayed for unselected rating items. Can be a function that receives the rating value. /\n emptySymbol?: React.ReactNode \| ((value: number) => React.ReactNode);\n\n /* Icon displayed for selected rating items. Can be a function that receives the rating value. /\n fullSymbol?: React.ReactNode \| ((value: number) => React.ReactNode);\n\n /* Number of fractions each item can be divided into, default is 1 /\n fractions?: number;\n\n /* Controls component size @default 'sm' /\n size?: MantineSize \| number \| (string & {});\n\n /* Number of rating items (stars), default is 5 /\n count?: number;\n\n /* Called when rating item is hovered. Receives -1 when hover ends. /\n onHover?: (value: number) => void;\n\n /* Function to generate aria-label for each rating value. Receives the rating value as argument, default is (value) => String(value) /\n getSymbolLabel?: (index: number) => string;\n\n /* Name attribute for form submission. If not provided, a unique id will be generated. /\n name?: string;\n\n /* When true, rating cannot be changed by user interaction, default is false /\n readOnly?: boolean;\n\n /* When true, clicking the same rating value clears the rating to 0, default is false /\n allowClear?: boolean;\n\n /* When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false /\n highlightSelectedOnly?: boolean;\n\n /* Key of theme.colors or any CSS color value, default is 'yellow' /\n color?: MantineColor;\n}\n\nexport type RatingFactory = Factory<{\n props: RatingProps;\n ref: HTMLDivElement;\n stylesNames: RatingStylesNames;\n vars: RatingCssVariables;\n}>;\n\nconst defaultProps = {\n size: 'sm',\n getSymbolLabel: (value) => `${value}`,\n count: 5,\n fractions: 1,\n color: 'yellow',\n} satisfies Partial<RatingProps>;\n\nconst varsResolver = createVarsResolver<RatingFactory>((theme, { size, color }) => ({\n root: {\n '--rating-size': getSize(size, 'rating-size'),\n '--rating-color': getThemeColor(color, theme),\n },\n}));\n\nexport const Rating = factory<RatingFactory>((_props) => {\n const props = useProps('Rating', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n name,\n id,\n value,\n defaultValue,\n onChange,\n fractions,\n count,\n onMouseEnter,\n readOnly,\n allowClear,\n onMouseMove,\n onHover,\n onMouseLeave,\n onTouchStart,\n onTouchMove,\n onTouchCancel,\n onTouchEnd,\n size,\n variant,\n getSymbolLabel,\n color,\n emptySymbol,\n fullSymbol,\n highlightSelectedOnly,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<RatingFactory>({\n name: 'Rating',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const { dir } = useDirection();\n\n const _name = useId(name);\n const _id = useId(id);\n const rootRef = useRef<HTMLDivElement>(null);\n const touchStartPosition = useRef<{ x: number; y: number } \| null>(null);\n const lastTouchTimestamp = useRef(0);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: 0,\n onChange,\n });\n\n const [hovered, setHovered] = useState(-1);\n const [isOutside, setOutside] = useState(true);\n\n const _fractions = Math.floor(fractions);\n const _count = Math.floor(count);\n\n const decimalUnit = 1 / _fractions;\n const stableValueRounded = roundValueTo(_value, decimalUnit);\n const finalValue = hovered !== -1 ? hovered : stableValueRounded;\n\n const getRatingFromCoordinates = (x: number) => {\n if (!rootRef.current) {\n return 0;\n }\n\n const { left, right, width } = rootRef.current.getBoundingClientRect();\n const symbolWidth = width / _count;\n\n const hoverPosition = dir === 'rtl' ? right - x : x - left;\n const hoverValue = hoverPosition / symbolWidth;\n\n return clamp(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);\n };\n\n const applyValue = (newValue: number) => {\n // If allowClear is true and selecting the same value, reset to 0\n if (allowClear && newValue === stableValueRounded) {\n setValue(0);\n } else {\n setValue(newValue);\n }\n };\n\n const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n onMouseEnter?.(event);\n !readOnly && setOutside(false);\n };\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n onMouseMove?.(event);\n\n if (readOnly) {\n return;\n }\n\n const rounded = getRatingFromCoordinates(event.clientX);\n\n setHovered(rounded);\n rounded !== hovered && onHover?.(rounded);\n };\n\n const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n onMouseLeave?.(event);\n\n if (readOnly) {\n return;\n }\n\n setHovered(-1);\n setOutside(true);\n hovered !== -1 && onHover?.(-1);\n };\n\n const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n const { touches } = event;\n\n touchStartPosition.current =\n touches.length === 1 ? { x: touches[0].clientX, y: touches[0].clientY } : null;\n\n onTouchStart?.(event);\n };\n\n const handleTouchMove = (event: React.TouchEvent<HTMLDivElement>) => {\n const startPosition = touchStartPosition.current;\n const touch = event.touches[0];\n\n if (\n startPosition &&\n touch &&\n Math.hypot(touch.clientX - startPosition.x, touch.clientY - startPosition.y) >\n TOUCH_MOVE_THRESHOLD\n ) {\n touchStartPosition.current = null;\n }\n\n onTouchMove?.(event);\n };\n\n const handleTouchCancel = (event: React.TouchEvent<HTMLDivElement>) => {\n touchStartPosition.current = null;\n\n onTouchCancel?.(event);\n };\n\n const handleTouchEnd = (event: React.TouchEvent<HTMLDivElement>) => {\n const startPosition = touchStartPosition.current;\n const touch = event.changedTouches[0];\n touchStartPosition.current = null;\n\n if (startPosition && touch && !readOnly) {\n event.preventDefault();\n applyValue(getRatingFromCoordinates(touch.clientX));\n lastTouchTimestamp.current = Date.now();\n }\n\n onTouchEnd?.(event);\n };\n\n const handleItemBlur = () => isOutside && setHovered(-1);\n\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement> \| number) => {\n if (!readOnly) {\n if (typeof event === 'number') {\n setHovered(event);\n } else {\n setHovered(parseFloat(event.target.value));\n }\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement> \| number) => {\n if (readOnly \|\| Date.now() - lastTouchTimestamp.current < EMULATED_CLICK_TIMEOUT) {\n return;\n }\n\n applyValue(typeof event === 'number' ? event : parseFloat(event.target.value));\n };\n\n const items = Array(_count)\n .fill(0)\n .map((_, index) => {\n const integerValue = index + 1;\n const fractionItems = Array.from(new Array(index === 0 ? _fractions + 1 : _fractions));\n const isGroupActive = !readOnly && Math.ceil(hovered) === integerValue;\n\n return (\n <div\n key={integerValue}\n data-active={isGroupActive \|\| undefined}\n {...getStyles('symbolGroup')}\n >\n {fractionItems.map((__, fractionIndex) => {\n const fractionValue = decimalUnit (index === 0 ? fractionIndex : fractionIndex + 1);\n const symbolValue = roundValueTo(integerValue - 1 + fractionValue, decimalUnit);\n\n return (\n <RatingItem\n key={`${integerValue}-${symbolValue}`}\n getSymbolLabel={getSymbolLabel}\n emptyIcon={emptySymbol}\n fullIcon={fullSymbol}\n full={\n highlightSelectedOnly ? symbolValue === finalValue : symbolValue <= finalValue\n }\n active={symbolValue === finalValue}\n checked={symbolValue === stableValueRounded}\n readOnly={readOnly}\n fractionValue={fractionValue}\n value={symbolValue}\n name={_name}\n onChange={handleChange}\n onBlur={handleItemBlur}\n onInputChange={handleInputChange}\n id={`${_id}-${index}-${fractionIndex}`}\n />\n );\n })}\n </div>\n );\n });\n\n return (\n <RatingProvider value={{ getStyles }}>\n <Box\n ref={useMergedRef(rootRef, ref)}\n {...getStyles('root')}\n onMouseMove={handleMouseMove}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onTouchStart={handleTouchStart}\n onTouchMove={handleTouchMove}\n onTouchCancel={handleTouchCancel}\n onTouchEnd={handleTouchEnd}\n variant={variant}\n size={size}\n id={_id}\n {...others}\n >\n {items}\n </Box>\n </RatingProvider>\n );\n});\n\nRating.classes = classes;\nRating.varsResolver = varsResolver;\nRating.displayName = '@mantine/core/Rating';\n\nexport namespace Rating {\n export type Props = RatingProps;\n export type StylesNames = RatingStylesNames;\n export type Factory = RatingFactory;\n}\n"],"mappings":"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"}

package/cjs/components/Select/Select.cjs CHANGED Viewed

@@ -156,7 +156,7 @@ const Select = require_factory.genericFactory((_props) => {
 				},
 				onBlur: (event) => {
 					if (autoSelectOnBlur) combobox.clickSelectedOption();
-					searchable && combobox.closeDropdown();
+					combobox.closeDropdown();
 					const optionLockup = _value != null && (`${_value}` in optionsLockup ? optionsLockup[`${_value}`] : retainedSelectedOptions.current[`${_value}`]);
 					handleSearchChange(optionLockup ? optionLockup.label || "" : "");
 					onBlur?.(event);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.cjs","names":["genericFactory","useProps","useMemo","getParsedComboboxData","useRef","getOptionsLockup","useId","useUncontrolled","usePrevious","useCombobox","useResolvedStylesApi","Combobox","InputBase","isExternalInputChange","getOptionByLabel","OptionsDropdown"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n Factory,\n genericFactory,\n MantineColor,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport {\n Combobox,\n ComboboxItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport { getOptionByLabel } from '../Combobox/get-options-lockup/get-option-by-label';\nimport { isExternalInputChange } from '../Combobox/is-external-input-change/is-external-input-change';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames \| ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n extends\n BoxProps,\n __BaseInputProps,\n ComboboxLikeProps<Value>,\n StylesApiProps<SelectFactory>,\n ElementProps<'input', 'onChange' \| 'size' \| 'value' \| 'defaultValue'> {\n /** Controlled component value /\n value?: Value \| null;\n\n /* Uncontrolled component default value /\n defaultValue?: Value \| null;\n\n /* Called when value changes /\n onChange?: (value: Value \| null, option: ComboboxItem<Value>) => void;\n\n /* Called when the clear button is clicked /\n onClear?: () => void;\n\n /* Determines whether the select should be searchable @default false /\n searchable?: boolean;\n\n /* Displays check icon near the selected option label @default true /\n withCheckIcon?: boolean;\n\n /* Aligns unchecked labels with the checked one @default false /\n withAlignedLabels?: boolean;\n\n /* Position of the check icon relative to the option label @default 'left' /\n checkIconPosition?: 'left' \| 'right';\n\n /* Message displayed when no options match the search query or when there is no data /\n nothingFoundMessage?: React.ReactNode;\n\n /* Controlled search value /\n searchValue?: string;\n\n /* Default search value /\n defaultSearchValue?: string;\n\n /* Called when search changes /\n onSearchChange?: (value: string) => void;\n\n /* Allows deselecting the selected option by clicking it @default true /\n allowDeselect?: boolean;\n\n /* Displays clear button in the right section when component has value @default false /\n clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n clearSectionMode?: ClearSectionMode;\n\n /* Props passed down to the clear button /\n clearButtonProps?: InputClearButtonProps;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /* A function to render content of the option, replaces the default content of the option /\n renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n /* Props passed down to the underlying `ScrollArea` component in the dropdown /\n scrollAreaProps?: ScrollAreaProps;\n\n /* Controls color of the default chevron, by default depends on the color scheme /\n chevronColor?: MantineColor;\n\n /* Automatically selects the highlighted option when input loses focus @default false /\n autoSelectOnBlur?: boolean;\n\n /* Opens dropdown when input receives focus (requires searchable={true}) @default true */\n openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n props: SelectProps;\n ref: HTMLInputElement;\n stylesNames: SelectStylesNames;\n variant: InputVariant;\n signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n size: 'sm',\n withCheckIcon: true,\n allowDeselect: true,\n checkIconPosition: 'left',\n openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'Select'], defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownClose,\n onDropdownOpen,\n onFocus,\n onBlur,\n onClick,\n onChange,\n data,\n value,\n defaultValue,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n readOnly,\n disabled,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n floatingHeight,\n size,\n searchable,\n rightSection,\n checkIconPosition,\n withCheckIcon,\n withAlignedLabels,\n nothingFoundMessage,\n name,\n form,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n allowDeselect,\n error,\n rightSectionPointerEvents,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n renderOption,\n onClear,\n autoComplete,\n scrollAreaProps,\n __defaultRightSection,\n __clearSection,\n __clearable,\n chevronColor,\n autoSelectOnBlur,\n openOnFocus,\n attributes,\n ...others\n } = props;\n\n const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n const _id = useId(id);\n\n const [_value, setValue, controlled] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const selectedOption =\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]\n : undefined;\n const previousSelectedOption = usePrevious(selectedOption);\n\n const [search, setSearch, searchControlled] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: selectedOption ? selectedOption.label : '',\n onChange: onSearchChange,\n });\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n } else {\n combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n // Required for autoSelectOnBlur to work correctly\n setTimeout(combobox.resetSelectedOption, 0);\n },\n });\n\n const handleSearchChange = (value: string) => {\n setSearch(value);\n combobox.resetSelectedOption();\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n props,\n styles,\n classNames,\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, search]);\n\n useEffect(() => {\n if (value === null) {\n handleSearchChange('');\n }\n\n if (\n value != null &&\n selectedOption &&\n (previousSelectedOption?.value !== selectedOption.value \|\|\n previousSelectedOption?.label !== selectedOption.label)\n ) {\n handleSearchChange(selectedOption.label);\n }\n }, [value, selectedOption]);\n\n useEffect(() => {\n if (!controlled && !searchControlled) {\n handleSearchChange(\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]?.label\n : retainedSelectedOptions.current[`${_value}`]?.label \|\| ''\n : ''\n );\n }\n }, [optionsLockup, _value]);\n\n useEffect(() => {\n if (_value) {\n if (`${_value}` in optionsLockup) {\n retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n }\n }\n }, [optionsLockup, _value]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue(null, null);\n handleSearchChange('');\n onClear?.();\n }}\n />\n );\n\n const _clearable = clearable && _value != null && !disabled && !readOnly;\n\n return (\n <>\n <Combobox\n store={combobox}\n __staticSelector=\"Select\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n readOnly={readOnly}\n size={size}\n attributes={attributes}\n floatingHeight={floatingHeight}\n keepMounted={autoSelectOnBlur}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val as any);\n const optionLockup = allowDeselect\n ? `${optionsLockup[val].value}` === `${_value}`\n ? null\n : optionsLockup[val]\n : optionsLockup[val];\n\n const nextValue = optionLockup ? optionLockup.value : null;\n\n nextValue !== _value && setValue(nextValue as any, optionLockup);\n !controlled && handleSearchChange(nextValue != null ? optionLockup?.label \|\| '' : '');\n combobox.closeDropdown();\n }}\n {...comboboxProps}\n >\n <Combobox.Target\n targetType={searchable ? 'input' : 'button'}\n autoComplete={autoComplete}\n withExpandedAttribute\n >\n <InputBase\n id={_id}\n __defaultRightSection={\n <Combobox.Chevron\n size={size}\n error={error}\n unstyled={unstyled}\n color={chevronColor}\n />\n }\n __clearSection={clearButton}\n __clearable={_clearable}\n __clearSectionMode={clearSectionMode}\n rightSection={rightSection}\n rightSectionPointerEvents={rightSectionPointerEvents \|\| 'none'}\n {...others}\n size={size}\n __staticSelector=\"Select\"\n disabled={disabled}\n readOnly={readOnly \|\| !searchable}\n value={search}\n onChange={(event) => {\n if (isExternalInputChange(event)) {\n if (!readOnly) {\n const externalOption = getOptionByLabel(optionsLockup, event.currentTarget.value);\n\n if (externalOption && `${externalOption.value}` !== `${_value}`) {\n setValue(externalOption.value as any, externalOption);\n !controlled && handleSearchChange(externalOption.label);\n }\n }\n\n return;\n }\n\n handleSearchChange(event.currentTarget.value);\n combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n onFocus={(event) => {\n openOnFocus && !!searchable && combobox.openDropdown();\n onFocus?.(event);\n }}\n onBlur={(event) => {\n if (autoSelectOnBlur) {\n combobox.clickSelectedOption();\n }\n\n !!searchable && combobox.closeDropdown();\n const optionLockup =\n _value != null &&\n (`${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]);\n handleSearchChange(optionLockup ? optionLockup.label \|\| '' : '');\n onBlur?.(event);\n }}\n onClick={(event) => {\n searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n onClick?.(event);\n }}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n pointer={!searchable}\n error={error}\n attributes={attributes}\n />\n </Combobox.Target>\n <OptionsDropdown\n data={parsedData as any}\n hidden={readOnly \|\| disabled}\n filter={filter as OptionsFilter<Primitive> \| undefined}\n search={search}\n limit={limit}\n hiddenWhenEmpty={!nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n filterOptions={!!searchable && selectedOption?.label !== search}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n nothingFoundMessage={nothingFoundMessage}\n unstyled={unstyled}\n labelId={others.label ? `${_id}-label` : undefined}\n aria-label={others.label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n value={_value}\n name={name}\n form={form}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n export type Props<Value extends Primitive = string> = SelectProps<Value>;\n export type StylesNames = SelectStylesNames;\n export type Factory = SelectFactory;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Select.cjs","names":["genericFactory","useProps","useMemo","getParsedComboboxData","useRef","getOptionsLockup","useId","useUncontrolled","usePrevious","useCombobox","useResolvedStylesApi","Combobox","InputBase","isExternalInputChange","getOptionByLabel","OptionsDropdown"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n Factory,\n genericFactory,\n MantineColor,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport {\n Combobox,\n ComboboxItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n} from '../Combobox';\nimport { getOptionByLabel } from '../Combobox/get-options-lockup/get-option-by-label';\nimport { isExternalInputChange } from '../Combobox/is-external-input-change/is-external-input-change';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames \| ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n extends\n BoxProps,\n __BaseInputProps,\n ComboboxLikeProps<Value>,\n StylesApiProps<SelectFactory>,\n ElementProps<'input', 'onChange' \| 'size' \| 'value' \| 'defaultValue'> {\n /** Controlled component value /\n value?: Value \| null;\n\n /* Uncontrolled component default value /\n defaultValue?: Value \| null;\n\n /* Called when value changes /\n onChange?: (value: Value \| null, option: ComboboxItem<Value>) => void;\n\n /* Called when the clear button is clicked /\n onClear?: () => void;\n\n /* Determines whether the select should be searchable @default false /\n searchable?: boolean;\n\n /* Displays check icon near the selected option label @default true /\n withCheckIcon?: boolean;\n\n /* Aligns unchecked labels with the checked one @default false /\n withAlignedLabels?: boolean;\n\n /* Position of the check icon relative to the option label @default 'left' /\n checkIconPosition?: 'left' \| 'right';\n\n /* Message displayed when no options match the search query or when there is no data /\n nothingFoundMessage?: React.ReactNode;\n\n /* Controlled search value /\n searchValue?: string;\n\n /* Default search value /\n defaultSearchValue?: string;\n\n /* Called when search changes /\n onSearchChange?: (value: string) => void;\n\n /* Allows deselecting the selected option by clicking it @default true /\n allowDeselect?: boolean;\n\n /* Displays clear button in the right section when component has value @default false /\n clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n clearSectionMode?: ClearSectionMode;\n\n /* Props passed down to the clear button /\n clearButtonProps?: InputClearButtonProps;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /* A function to render content of the option, replaces the default content of the option /\n renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n /* Props passed down to the underlying `ScrollArea` component in the dropdown /\n scrollAreaProps?: ScrollAreaProps;\n\n /* Controls color of the default chevron, by default depends on the color scheme /\n chevronColor?: MantineColor;\n\n /* Automatically selects the highlighted option when input loses focus @default false /\n autoSelectOnBlur?: boolean;\n\n /* Opens dropdown when input receives focus (requires searchable={true}) @default true */\n openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n props: SelectProps;\n ref: HTMLInputElement;\n stylesNames: SelectStylesNames;\n variant: InputVariant;\n signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n size: 'sm',\n withCheckIcon: true,\n allowDeselect: true,\n checkIconPosition: 'left',\n openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'Select'], defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownClose,\n onDropdownOpen,\n onFocus,\n onBlur,\n onClick,\n onChange,\n data,\n value,\n defaultValue,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n readOnly,\n disabled,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n floatingHeight,\n size,\n searchable,\n rightSection,\n checkIconPosition,\n withCheckIcon,\n withAlignedLabels,\n nothingFoundMessage,\n name,\n form,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n allowDeselect,\n error,\n rightSectionPointerEvents,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n renderOption,\n onClear,\n autoComplete,\n scrollAreaProps,\n __defaultRightSection,\n __clearSection,\n __clearable,\n chevronColor,\n autoSelectOnBlur,\n openOnFocus,\n attributes,\n ...others\n } = props;\n\n const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n const _id = useId(id);\n\n const [_value, setValue, controlled] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const selectedOption =\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]\n : undefined;\n const previousSelectedOption = usePrevious(selectedOption);\n\n const [search, setSearch, searchControlled] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: selectedOption ? selectedOption.label : '',\n onChange: onSearchChange,\n });\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n } else {\n combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n // Required for autoSelectOnBlur to work correctly\n setTimeout(combobox.resetSelectedOption, 0);\n },\n });\n\n const handleSearchChange = (value: string) => {\n setSearch(value);\n combobox.resetSelectedOption();\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n props,\n styles,\n classNames,\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, search]);\n\n useEffect(() => {\n if (value === null) {\n handleSearchChange('');\n }\n\n if (\n value != null &&\n selectedOption &&\n (previousSelectedOption?.value !== selectedOption.value \|\|\n previousSelectedOption?.label !== selectedOption.label)\n ) {\n handleSearchChange(selectedOption.label);\n }\n }, [value, selectedOption]);\n\n useEffect(() => {\n if (!controlled && !searchControlled) {\n handleSearchChange(\n _value != null\n ? `${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]?.label\n : retainedSelectedOptions.current[`${_value}`]?.label \|\| ''\n : ''\n );\n }\n }, [optionsLockup, _value]);\n\n useEffect(() => {\n if (_value) {\n if (`${_value}` in optionsLockup) {\n retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n }\n }\n }, [optionsLockup, _value]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue(null, null);\n handleSearchChange('');\n onClear?.();\n }}\n />\n );\n\n const _clearable = clearable && _value != null && !disabled && !readOnly;\n\n return (\n <>\n <Combobox\n store={combobox}\n __staticSelector=\"Select\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n readOnly={readOnly}\n size={size}\n attributes={attributes}\n floatingHeight={floatingHeight}\n keepMounted={autoSelectOnBlur}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val as any);\n const optionLockup = allowDeselect\n ? `${optionsLockup[val].value}` === `${_value}`\n ? null\n : optionsLockup[val]\n : optionsLockup[val];\n\n const nextValue = optionLockup ? optionLockup.value : null;\n\n nextValue !== _value && setValue(nextValue as any, optionLockup);\n !controlled && handleSearchChange(nextValue != null ? optionLockup?.label \|\| '' : '');\n combobox.closeDropdown();\n }}\n {...comboboxProps}\n >\n <Combobox.Target\n targetType={searchable ? 'input' : 'button'}\n autoComplete={autoComplete}\n withExpandedAttribute\n >\n <InputBase\n id={_id}\n __defaultRightSection={\n <Combobox.Chevron\n size={size}\n error={error}\n unstyled={unstyled}\n color={chevronColor}\n />\n }\n __clearSection={clearButton}\n __clearable={_clearable}\n __clearSectionMode={clearSectionMode}\n rightSection={rightSection}\n rightSectionPointerEvents={rightSectionPointerEvents \|\| 'none'}\n {...others}\n size={size}\n __staticSelector=\"Select\"\n disabled={disabled}\n readOnly={readOnly \|\| !searchable}\n value={search}\n onChange={(event) => {\n if (isExternalInputChange(event)) {\n if (!readOnly) {\n const externalOption = getOptionByLabel(optionsLockup, event.currentTarget.value);\n\n if (externalOption && `${externalOption.value}` !== `${_value}`) {\n setValue(externalOption.value as any, externalOption);\n !controlled && handleSearchChange(externalOption.label);\n }\n }\n\n return;\n }\n\n handleSearchChange(event.currentTarget.value);\n combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n onFocus={(event) => {\n openOnFocus && !!searchable && combobox.openDropdown();\n onFocus?.(event);\n }}\n onBlur={(event) => {\n if (autoSelectOnBlur) {\n combobox.clickSelectedOption();\n }\n\n combobox.closeDropdown();\n const optionLockup =\n _value != null &&\n (`${_value}` in optionsLockup\n ? optionsLockup[`${_value}`]\n : retainedSelectedOptions.current[`${_value}`]);\n handleSearchChange(optionLockup ? optionLockup.label \|\| '' : '');\n onBlur?.(event);\n }}\n onClick={(event) => {\n searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n onClick?.(event);\n }}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n pointer={!searchable}\n error={error}\n attributes={attributes}\n />\n </Combobox.Target>\n <OptionsDropdown\n data={parsedData as any}\n hidden={readOnly \|\| disabled}\n filter={filter as OptionsFilter<Primitive> \| undefined}\n search={search}\n limit={limit}\n hiddenWhenEmpty={!nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n filterOptions={!!searchable && selectedOption?.label !== search}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n nothingFoundMessage={nothingFoundMessage}\n unstyled={unstyled}\n labelId={others.label ? `${_id}-label` : undefined}\n aria-label={others.label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n value={_value}\n name={name}\n form={form}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n export type Props<Value extends Primitive = string> = SelectProps<Value>;\n export type StylesNames = SelectStylesNames;\n export type Factory = SelectFactory;\n}\n"],"mappings":"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"}

package/cjs/components/Slider/Thumb/Thumb.cjs CHANGED Viewed

@@ -5,12 +5,13 @@ const require_Slider_context = require("../Slider.context.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Slider/Thumb/Thumb.tsx
-function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children = null, disabled, orientation = "horizontal", ref }) {
+function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children = null, disabled, orientation = "horizontal", className, style, ref, ...others }) {
 	const { getStyles } = require_Slider_context.useSliderContext();
 	const [focused, setFocused] = (0, react.useState)(false);
 	const isVisible = labelAlwaysOn || dragging || focused || showLabelOnHover && isHovered;
 	const valueText = typeof thumbValueText === "function" ? thumbValueText(value) : thumbValueText;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
+		...others,
 		tabIndex: disabled ? -1 : 0,
 		role: "slider",
 		"aria-label": thumbLabel,
@@ -22,7 +23,11 @@ function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyD
 		"aria-orientation": orientation,
 		ref,
 		__vars: { "--slider-thumb-offset": `${position}%` },
-		...getStyles("thumb", { focusable: true }),
+		...getStyles("thumb", {
+			focusable: true,
+			className,
+			style
+		}),
 		mod: {
 			dragging,
 			disabled

package/cjs/components/Slider/Thumb/Thumb.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Thumb.cjs","names":["useSliderContext","useState","Box","Transition"],"sources":["../../../../src/components/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box } from '../../../core';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {\n max: number;\n min: number;\n value: number;\n position: number;\n dragging: boolean;\n label: React.ReactNode;\n thumbValueText?: string \| ((value: number) => string);\n onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n onMouseDown?: (event: any) => void;\n labelTransitionProps: TransitionOverride \| undefined;\n labelAlwaysOn: boolean \| undefined;\n thumbLabel: string \| undefined;\n showLabelOnHover: boolean \| undefined;\n isHovered?: boolean;\n children?: React.ReactNode;\n disabled: boolean \| undefined;\n orientation?: 'horizontal' \| 'vertical';\n className?: string \| undefined;\n style?: React.CSSProperties;\n}\n\nexport function Thumb({\n max,\n min,\n value,\n position,\n label,\n dragging,\n onMouseDown,\n onKeyDownCapture,\n labelTransitionProps,\n labelAlwaysOn,\n thumbLabel,\n thumbValueText,\n onFocus,\n onBlur,\n showLabelOnHover,\n isHovered,\n children = null,\n disabled,\n orientation = 'horizontal',\n ref,\n}: ThumbProps) {\n const { getStyles } = useSliderContext();\n\n const [focused, setFocused] = useState(false);\n\n const isVisible = labelAlwaysOn \|\| dragging \|\| focused \|\| (showLabelOnHover && isHovered);\n const valueText = typeof thumbValueText === 'function' ? thumbValueText(value) : thumbValueText;\n\n return (\n <Box<'div'>\n tabIndex={disabled ? -1 : 0}\n role=\"slider\"\n aria-label={thumbLabel}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={value}\n aria-valuetext={valueText}\n aria-disabled={disabled}\n aria-orientation={orientation}\n ref={ref}\n __vars={{ '--slider-thumb-offset': `${position}%` }}\n {...getStyles('thumb', { focusable: true })}\n mod={{ dragging, disabled }}\n onFocus={(event) => {\n setFocused(true);\n typeof onFocus === 'function' && onFocus(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n typeof onBlur === 'function' && onBlur(event);\n }}\n onTouchStart={onMouseDown}\n onMouseDown={onMouseDown}\n onKeyDownCapture={onKeyDownCapture}\n onClick={(event) => event.stopPropagation()}\n >\n {children}\n <Transition\n mounted={label != null && !!isVisible}\n transition=\"fade\"\n duration={0}\n {...labelTransitionProps}\n >\n {(transitionStyles) => (\n <div {...getStyles('label', { style: transitionStyles })}>{label}</div>\n )}\n </Transition>\n </Box>\n );\n}\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"mappings":";;;;;;;AA2BA,SAAgB,MAAM,EACpB,KACA,KACA,OACA,UACA,OACA,UACA,aACA,kBACA,sBACA,eACA,YACA,gBACA,SACA,QACA,kBACA,WACA,WAAW,MACX,UACA,cAAc,cACd,~~OACa~~;CACb,MAAM,EAAE,cAAcA,uBAAAA,iBAAiB;CAEvC,MAAM,CAAC,SAAS,eAAA,GAAcC,MAAAA,SAAAA,CAAS,KAAK;CAE5C,MAAM,YAAY,iBAAiB,YAAY,WAAY,oBAAoB;CAC/E,MAAM,YAAY,OAAO,mBAAmB,aAAa,eAAe,KAAK,IAAI;CAEjF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,UAAU,WAAW,KAAK;EAC1B,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,iBAAe;EACf,oBAAkB;EACb;EACL,QAAQ,EAAE,yBAAyB,GAAG,SAAS,GAAG;EAClD,GAAI,UAAU,SAAS,~~EAAE,~~WAAW,~~KAAK,~~CAAC;~~EAC1C~~,KAAK;GAAE;GAAU;EAAS;EAC1B,UAAU,UAAU;GAClB,WAAW,IAAI;GACf,OAAO,YAAY,cAAc,QAAQ,KAAK;EAChD;EACA,SAAS,UAAU;GACjB,WAAW,KAAK;GAChB,OAAO,WAAW,cAAc,OAAO,KAAK;EAC9C;EACA,cAAc;EACD;EACK;EAClB,UAAU,UAAU,MAAM,gBAAgB;~~EAzB5C~~,UAAA,~~CA2BG~~,UACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GACE,SAAS,SAAS,QAAQ,CAAC,CAAC;GAC5B,YAAW;GACX,UAAU;GACV,GAAI;GAEF,WAAA,qBACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,GAAI,UAAU,SAAS,EAAE,OAAO,iBAAiB,CAAC;IAAI,UAAA;GAAW,CAAA;EAE9D,CAAA,CACT;;AAET;AAEA,MAAM,cAAc"}
1	+ {"version":3,"file":"Thumb.cjs","names":["useSliderContext","useState","Box","Transition"],"sources":["../../../../src/components/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box } from '../../../core';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {\n max: number;\n min: number;\n value: number;\n position: number;\n dragging: boolean;\n label: React.ReactNode;\n thumbValueText?: string \| ((value: number) => string);\n onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n onMouseDown?: (event: any) => void;\n labelTransitionProps: TransitionOverride \| undefined;\n labelAlwaysOn: boolean \| undefined;\n thumbLabel: string \| undefined;\n showLabelOnHover: boolean \| undefined;\n isHovered?: boolean;\n children?: React.ReactNode;\n disabled: boolean \| undefined;\n orientation?: 'horizontal' \| 'vertical';\n className?: string \| undefined;\n style?: React.CSSProperties;\n}\n\nexport function Thumb({\n max,\n min,\n value,\n position,\n label,\n dragging,\n onMouseDown,\n onKeyDownCapture,\n labelTransitionProps,\n labelAlwaysOn,\n thumbLabel,\n thumbValueText,\n onFocus,\n onBlur,\n showLabelOnHover,\n isHovered,\n children = null,\n disabled,\n orientation = 'horizontal',\n className,\n style,\n ref,\n ...others\n}: ThumbProps) {\n const { getStyles } = useSliderContext();\n\n const [focused, setFocused] = useState(false);\n\n const isVisible = labelAlwaysOn \|\| dragging \|\| focused \|\| (showLabelOnHover && isHovered);\n const valueText = typeof thumbValueText === 'function' ? thumbValueText(value) : thumbValueText;\n\n return (\n <Box<'div'>\n {...others}\n tabIndex={disabled ? -1 : 0}\n role=\"slider\"\n aria-label={thumbLabel}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={value}\n aria-valuetext={valueText}\n aria-disabled={disabled}\n aria-orientation={orientation}\n ref={ref}\n __vars={{ '--slider-thumb-offset': `${position}%` }}\n {...getStyles('thumb', { focusable: true, className, style })}\n mod={{ dragging, disabled }}\n onFocus={(event) => {\n setFocused(true);\n typeof onFocus === 'function' && onFocus(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n typeof onBlur === 'function' && onBlur(event);\n }}\n onTouchStart={onMouseDown}\n onMouseDown={onMouseDown}\n onKeyDownCapture={onKeyDownCapture}\n onClick={(event) => event.stopPropagation()}\n >\n {children}\n <Transition\n mounted={label != null && !!isVisible}\n transition=\"fade\"\n duration={0}\n {...labelTransitionProps}\n >\n {(transitionStyles) => (\n <div {...getStyles('label', { style: transitionStyles })}>{label}</div>\n )}\n </Transition>\n </Box>\n );\n}\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"mappings":";;;;;;;AA2BA,SAAgB,MAAM,EACpB,KACA,KACA,OACA,UACA,OACA,UACA,aACA,kBACA,sBACA,eACA,YACA,gBACA,SACA,QACA,kBACA,WACA,WAAW,MACX,UACA,cAAc,cACd,WACA,OACA,KACA,GAAG,UACU;CACb,MAAM,EAAE,cAAcA,uBAAAA,iBAAiB;CAEvC,MAAM,CAAC,SAAS,eAAA,GAAcC,MAAAA,SAAAA,CAAS,KAAK;CAE5C,MAAM,YAAY,iBAAiB,YAAY,WAAY,oBAAoB;CAC/E,MAAM,YAAY,OAAO,mBAAmB,aAAa,eAAe,KAAK,IAAI;CAEjF,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,GAAI;EACJ,UAAU,WAAW,KAAK;EAC1B,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,iBAAe;EACf,oBAAkB;EACb;EACL,QAAQ,EAAE,yBAAyB,GAAG,SAAS,GAAG;EAClD,GAAI,UAAU,SAAS;GAAE,WAAW;GAAM;GAAW;EAAM,CAAC;EAC5D,KAAK;GAAE;GAAU;EAAS;EAC1B,UAAU,UAAU;GAClB,WAAW,IAAI;GACf,OAAO,YAAY,cAAc,QAAQ,KAAK;EAChD;EACA,SAAS,UAAU;GACjB,WAAW,KAAK;GAChB,OAAO,WAAW,cAAc,OAAO,KAAK;EAC9C;EACA,cAAc;EACD;EACK;EAClB,UAAU,UAAU,MAAM,gBAAgB;EA1B5C,UAAA,CA4BG,UACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GACE,SAAS,SAAS,QAAQ,CAAC,CAAC;GAC5B,YAAW;GACX,UAAU;GACV,GAAI;GAEF,WAAA,qBACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,GAAI,UAAU,SAAS,EAAE,OAAO,iBAAiB,CAAC;IAAI,UAAA;GAAW,CAAA;EAE9D,CAAA,CACT;;AAET;AAEA,MAAM,cAAc"}

package/cjs/components/Table/Table.cjs CHANGED Viewed

@@ -12,6 +12,7 @@ const require_Table_module = require("./Table.module.cjs");
 const require_Table_components = require("./Table.components.cjs");
 const require_TableDataRenderer = require("./TableDataRenderer.cjs");
 const require_TableScrollContainer = require("./TableScrollContainer.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Table/Table.tsx
 const defaultProps = {
@@ -43,18 +44,30 @@ const Table = require_factory.factory((_props) => {
 		attributes,
 		rootSelector: "table",
 		vars,
-		varsResolver
+		varsResolver,
+		stable: true
 	});
+	const stripedValue = striped === true ? "odd" : striped || void 0;
+	const resolvedCaptionSide = captionSide || "bottom";
+	const contextValue = (0, react.useMemo)(() => ({
+		getStyles,
+		stickyHeader,
+		striped: stripedValue,
+		highlightOnHover,
+		withColumnBorders,
+		withRowBorders,
+		captionSide: resolvedCaptionSide
+	}), [
+		getStyles,
+		stickyHeader,
+		stripedValue,
+		highlightOnHover,
+		withColumnBorders,
+		withRowBorders,
+		resolvedCaptionSide
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Table_context.TableProvider, {
-		value: {
-			getStyles,
-			stickyHeader,
-			striped: striped === true ? "odd" : striped || void 0,
-			highlightOnHover,
-			withColumnBorders,
-			withRowBorders,
-			captionSide: captionSide || "bottom"
-		},
+		value: contextValue,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 			component: "table",
 			mod: [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.cjs","names":["createVarsResolver","getSpacing","getThemeColor","rem","factory","useProps","useStyles","TableProvider","Box","TableDataRenderer","classes","TableTd","TableTh","TableTr","TableThead","TableTbody","TableTfoot","TableCaption","TableScrollContainer"],"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n getThemeColor,\n MantineColor,\n MantineSpacing,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n TableCaption,\n TableTbody,\n TableTd,\n TableTfoot,\n TableTh,\n TableThead,\n TableTr,\n type TableCaptionProps,\n type TableTbodyProps,\n type TableTdProps,\n type TableThProps,\n type TableTrProps,\n type TableTheadProps,\n type TableTfootProps,\n} from './Table.components';\nimport { TableProvider, type TableContextValue } from './Table.context';\nimport { TableDataRenderer } from './TableDataRenderer';\nimport { TableScrollContainer, type TableScrollContainerProps } from './TableScrollContainer';\nimport classes from './Table.module.css';\nexport type TableVariant = 'default' \| 'vertical';\n\nexport type TableStylesNames =\n \| 'table'\n \| 'thead'\n \| 'tbody'\n \| 'tfoot'\n \| 'tr'\n \| 'th'\n \| 'td'\n \| 'caption';\n\nexport type TableCssVariables = {\n table:\n \| '--table-layout'\n \| '--table-border-color'\n \| '--table-caption-side'\n \| '--table-horizontal-spacing'\n \| '--table-vertical-spacing'\n \| '--table-striped-color'\n \| '--table-highlight-on-hover-color'\n \| '--table-sticky-header-offset';\n};\n\nexport interface TableData {\n head?: React.ReactNode[];\n body?: React.ReactNode[][];\n foot?: React.ReactNode[];\n caption?: string;\n}\n\nexport interface TableProps extends BoxProps, StylesApiProps<TableFactory>, ElementProps<'table'> {\n /** Value of `table-layout` style @default auto /\n layout?: React.CSSProperties['tableLayout'];\n\n /* Side of the `Table.Caption` @default bottom /\n captionSide?: 'top' \| 'bottom';\n\n /* Color of table borders, key of `theme.colors` or any valid CSS color /\n borderColor?: MantineColor;\n\n /* If set, the table has the outer border @default false /\n withTableBorder?: boolean;\n\n /* If set, the table has borders between columns @default false /\n withColumnBorders?: boolean;\n\n /* If set, the table has borders between rows @default true /\n withRowBorders?: boolean;\n\n /* Horizontal cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem @default xs /\n horizontalSpacing?: MantineSpacing;\n\n /* Vertical cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem @default xs /\n verticalSpacing?: MantineSpacing;\n\n /* If set, every odd/even row background changes to `stripedColor`, if set to `true`, then `odd` value will be used @default false /\n striped?: boolean \| 'odd' \| 'even';\n\n /* Background color of striped rows, key of `theme.colors` or any valid CSS color /\n stripedColor?: MantineColor;\n\n /* If set, table rows background changes to `highlightOnHoverColor` when hovered @default false /\n highlightOnHover?: boolean;\n\n /* Background color of table rows when hovered, key of `theme.colors` or any valid CSS color /\n highlightOnHoverColor?: MantineColor;\n\n /* Data used to generate table, ignored if `children` prop is set /\n data?: TableData;\n\n /* If set, `Table.Thead` is sticky @default false /\n stickyHeader?: boolean;\n\n /* Offset from top at which `Table.Thead` should become sticky @default 0 /\n stickyHeaderOffset?: number \| string;\n\n /* If set, `font-variant-numeric: tabular-nums` style is applied @default false */\n tabularNums?: boolean;\n}\n\nexport type TableFactory = Factory<{\n props: TableProps;\n ref: HTMLTableElement;\n stylesNames: TableStylesNames;\n vars: TableCssVariables;\n variant: TableVariant;\n staticComponents: {\n Thead: typeof TableThead;\n Tbody: typeof TableTbody;\n Tfoot: typeof TableTfoot;\n Td: typeof TableTd;\n Th: typeof TableTh;\n Tr: typeof TableTr;\n Caption: typeof TableCaption;\n ScrollContainer: typeof TableScrollContainer;\n DataRenderer: typeof TableDataRenderer;\n };\n}>;\n\nconst defaultProps = {\n withRowBorders: true,\n verticalSpacing: 7,\n} satisfies Partial<TableProps>;\n\nconst varsResolver = createVarsResolver<TableFactory>(\n (\n theme,\n {\n layout,\n captionSide,\n horizontalSpacing,\n verticalSpacing,\n borderColor,\n stripedColor,\n highlightOnHoverColor,\n striped,\n highlightOnHover,\n stickyHeaderOffset,\n stickyHeader,\n }\n ) => ({\n table: {\n '--table-layout': layout,\n '--table-caption-side': captionSide,\n '--table-horizontal-spacing': getSpacing(horizontalSpacing),\n '--table-vertical-spacing': getSpacing(verticalSpacing),\n '--table-border-color': borderColor ? getThemeColor(borderColor, theme) : undefined,\n '--table-striped-color':\n striped && stripedColor ? getThemeColor(stripedColor, theme) : undefined,\n '--table-highlight-on-hover-color':\n highlightOnHover && highlightOnHoverColor\n ? getThemeColor(highlightOnHoverColor, theme)\n : undefined,\n '--table-sticky-header-offset': stickyHeader ? rem(stickyHeaderOffset) : undefined,\n },\n })\n);\n\nexport const Table = factory<TableFactory>((_props) => {\n const props = useProps('Table', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n horizontalSpacing,\n verticalSpacing,\n captionSide,\n stripedColor,\n highlightOnHoverColor,\n striped,\n highlightOnHover,\n withColumnBorders,\n withRowBorders,\n withTableBorder,\n borderColor,\n layout,\n data,\n children,\n stickyHeader,\n stickyHeaderOffset,\n mod,\n tabularNums,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<TableFactory>({\n name: 'Table',\n props,\n className,\n style,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'table',\n vars,\n varsResolver,\n });\n\n return (\n <TableProvider\n value={{\n getStyles,\n stickyHeader,\n striped: striped === true ? 'odd' : striped \|\| undefined,\n highlightOnHover,\n withColumnBorders,\n withRowBorders,\n captionSide: captionSide \|\| 'bottom',\n }}\n >\n <Box\n component=\"table\"\n mod={[{ withTableBorder, tabularNums }, mod]}\n {...getStyles('table')}\n {...others}\n >\n {children \|\| (!!data && <TableDataRenderer data={data} />)}\n </Box>\n </TableProvider>\n );\n});\n\nTable.classes = classes;\nTable.varsResolver = varsResolver;\nTable.displayName = '@mantine/core/Table';\nTable.Td = TableTd;\nTable.Th = TableTh;\nTable.Tr = TableTr;\nTable.Thead = TableThead;\nTable.Tbody = TableTbody;\nTable.Tfoot = TableTfoot;\nTable.Caption = TableCaption;\nTable.ScrollContainer = TableScrollContainer;\nTable.DataRenderer = TableDataRenderer;\n\nexport namespace Table {\n export type Props = TableProps;\n export type StylesNames = TableStylesNames;\n export type CssVariables = TableCssVariables;\n export type Factory = TableFactory;\n export type Data = TableData;\n export type ContextValue = TableContextValue;\n\n export namespace Caption {\n export type Props = TableCaptionProps;\n }\n\n export namespace Tbody {\n export type Props = TableTbodyProps;\n }\n\n export namespace Td {\n export type Props = TableTdProps;\n }\n\n export namespace Th {\n export type Props = TableThProps;\n }\n\n export namespace Tr {\n export type Props = TableTrProps;\n }\n\n export namespace Thead {\n export type Props = TableTheadProps;\n }\n\n export namespace Tfoot {\n export type Props = TableTfootProps;\n }\n\n export namespace ScrollContainer {\n export type Props = TableScrollContainerProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAwIA,MAAM,eAAe;CACnB,gBAAgB;CAChB,iBAAiB;AACnB;AAEA,MAAM,eAAeA,6BAAAA,oBAEjB,OACA,EACE,QACA,aACA,mBACA,iBACA,aACA,cACA,uBACA,SACA,kBACA,oBACA,oBAEE,EACJ,OAAO;CACL,kBAAkB;CAClB,wBAAwB;CACxB,8BAA8BC,iBAAAA,WAAW,iBAAiB;CAC1D,4BAA4BA,iBAAAA,WAAW,eAAe;CACtD,wBAAwB,cAAcC,wBAAAA,cAAc,aAAa,KAAK,IAAI,KAAA;CAC1E,yBACE,WAAW,eAAeA,wBAAAA,cAAc,cAAc,KAAK,IAAI,KAAA;CACjE,oCACE,oBAAoB,wBAChBA,wBAAAA,cAAc,uBAAuB,KAAK,IAC1C,KAAA;CACN,gCAAgC,eAAeC,YAAAA,IAAI,kBAAkB,IAAI,KAAA;AAC3E,EACF,EACF;AAEA,MAAa,QAAQC,gBAAAA,SAAuB,WAAW;CACrD,MAAM,QAAQC,kBAAAA,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,mBACA,iBACA,aACA,cACA,uBACA,SACA,kBACA,mBACA,gBACA,iBACA,aACA,QACA,MACA,UACA,cACA,oBACA,KACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAwB;EACxC,MAAM;EACN;EACA;EACA;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,eAAD;EACE,OAAO;GACL;GACA;GACA,SAAS,YAAY,OAAO,QAAQ,WAAW,KAAA;GAC/C;GACA;GACA;GACA,aAAa,eAAe;EAC9B;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,WAAU;GACV,KAAK,CAAC;IAAE;IAAiB;GAAY,GAAG,GAAG;GAC3C,GAAI,UAAU,OAAO;GACrB,GAAI;GAEH,UAAA,YAAa,CAAC,CAAC,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD,EAAyB,KAAO,CAAA;EACrD,CAAA;CACQ,CAAA;AAEnB,CAAC;AAED,MAAM,UAAUC,qBAAAA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,KAAKC,yBAAAA;AACX,MAAM,KAAKC,yBAAAA;AACX,MAAM,KAAKC,yBAAAA;AACX,MAAM,QAAQC,yBAAAA;AACd,MAAM,QAAQC,yBAAAA;AACd,MAAM,QAAQC,yBAAAA;AACd,MAAM,UAAUC,yBAAAA;AAChB,MAAM,kBAAkBC,6BAAAA;AACxB,MAAM,eAAeT,0BAAAA"}
1	+ {"version":3,"file":"Table.cjs","names":["createVarsResolver","getSpacing","getThemeColor","rem","factory","useProps","useStyles","useMemo","TableProvider","Box","TableDataRenderer","classes","TableTd","TableTh","TableTr","TableThead","TableTbody","TableTfoot","TableCaption","TableScrollContainer"],"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n getThemeColor,\n MantineColor,\n MantineSpacing,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n TableCaption,\n TableTbody,\n TableTd,\n TableTfoot,\n TableTh,\n TableThead,\n TableTr,\n type TableCaptionProps,\n type TableTbodyProps,\n type TableTdProps,\n type TableThProps,\n type TableTrProps,\n type TableTheadProps,\n type TableTfootProps,\n} from './Table.components';\nimport { TableProvider, type TableContextValue } from './Table.context';\nimport { TableDataRenderer } from './TableDataRenderer';\nimport { TableScrollContainer, type TableScrollContainerProps } from './TableScrollContainer';\nimport classes from './Table.module.css';\nexport type TableVariant = 'default' \| 'vertical';\n\nexport type TableStylesNames =\n \| 'table'\n \| 'thead'\n \| 'tbody'\n \| 'tfoot'\n \| 'tr'\n \| 'th'\n \| 'td'\n \| 'caption';\n\nexport type TableCssVariables = {\n table:\n \| '--table-layout'\n \| '--table-border-color'\n \| '--table-caption-side'\n \| '--table-horizontal-spacing'\n \| '--table-vertical-spacing'\n \| '--table-striped-color'\n \| '--table-highlight-on-hover-color'\n \| '--table-sticky-header-offset';\n};\n\nexport interface TableData {\n head?: React.ReactNode[];\n body?: React.ReactNode[][];\n foot?: React.ReactNode[];\n caption?: string;\n}\n\nexport interface TableProps extends BoxProps, StylesApiProps<TableFactory>, ElementProps<'table'> {\n /** Value of `table-layout` style @default auto /\n layout?: React.CSSProperties['tableLayout'];\n\n /* Side of the `Table.Caption` @default bottom /\n captionSide?: 'top' \| 'bottom';\n\n /* Color of table borders, key of `theme.colors` or any valid CSS color /\n borderColor?: MantineColor;\n\n /* If set, the table has the outer border @default false /\n withTableBorder?: boolean;\n\n /* If set, the table has borders between columns @default false /\n withColumnBorders?: boolean;\n\n /* If set, the table has borders between rows @default true /\n withRowBorders?: boolean;\n\n /* Horizontal cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem @default xs /\n horizontalSpacing?: MantineSpacing;\n\n /* Vertical cells spacing, key of `theme.spacing` or any valid CSS value for padding, numbers are converted to rem @default xs /\n verticalSpacing?: MantineSpacing;\n\n /* If set, every odd/even row background changes to `stripedColor`, if set to `true`, then `odd` value will be used @default false /\n striped?: boolean \| 'odd' \| 'even';\n\n /* Background color of striped rows, key of `theme.colors` or any valid CSS color /\n stripedColor?: MantineColor;\n\n /* If set, table rows background changes to `highlightOnHoverColor` when hovered @default false /\n highlightOnHover?: boolean;\n\n /* Background color of table rows when hovered, key of `theme.colors` or any valid CSS color /\n highlightOnHoverColor?: MantineColor;\n\n /* Data used to generate table, ignored if `children` prop is set /\n data?: TableData;\n\n /* If set, `Table.Thead` is sticky @default false /\n stickyHeader?: boolean;\n\n /* Offset from top at which `Table.Thead` should become sticky @default 0 /\n stickyHeaderOffset?: number \| string;\n\n /* If set, `font-variant-numeric: tabular-nums` style is applied @default false */\n tabularNums?: boolean;\n}\n\nexport type TableFactory = Factory<{\n props: TableProps;\n ref: HTMLTableElement;\n stylesNames: TableStylesNames;\n vars: TableCssVariables;\n variant: TableVariant;\n staticComponents: {\n Thead: typeof TableThead;\n Tbody: typeof TableTbody;\n Tfoot: typeof TableTfoot;\n Td: typeof TableTd;\n Th: typeof TableTh;\n Tr: typeof TableTr;\n Caption: typeof TableCaption;\n ScrollContainer: typeof TableScrollContainer;\n DataRenderer: typeof TableDataRenderer;\n };\n}>;\n\nconst defaultProps = {\n withRowBorders: true,\n verticalSpacing: 7,\n} satisfies Partial<TableProps>;\n\nconst varsResolver = createVarsResolver<TableFactory>(\n (\n theme,\n {\n layout,\n captionSide,\n horizontalSpacing,\n verticalSpacing,\n borderColor,\n stripedColor,\n highlightOnHoverColor,\n striped,\n highlightOnHover,\n stickyHeaderOffset,\n stickyHeader,\n }\n ) => ({\n table: {\n '--table-layout': layout,\n '--table-caption-side': captionSide,\n '--table-horizontal-spacing': getSpacing(horizontalSpacing),\n '--table-vertical-spacing': getSpacing(verticalSpacing),\n '--table-border-color': borderColor ? getThemeColor(borderColor, theme) : undefined,\n '--table-striped-color':\n striped && stripedColor ? getThemeColor(stripedColor, theme) : undefined,\n '--table-highlight-on-hover-color':\n highlightOnHover && highlightOnHoverColor\n ? getThemeColor(highlightOnHoverColor, theme)\n : undefined,\n '--table-sticky-header-offset': stickyHeader ? rem(stickyHeaderOffset) : undefined,\n },\n })\n);\n\nexport const Table = factory<TableFactory>((_props) => {\n const props = useProps('Table', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n horizontalSpacing,\n verticalSpacing,\n captionSide,\n stripedColor,\n highlightOnHoverColor,\n striped,\n highlightOnHover,\n withColumnBorders,\n withRowBorders,\n withTableBorder,\n borderColor,\n layout,\n data,\n children,\n stickyHeader,\n stickyHeaderOffset,\n mod,\n tabularNums,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<TableFactory>({\n name: 'Table',\n props,\n className,\n style,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'table',\n vars,\n varsResolver,\n stable: true,\n });\n\n const stripedValue = striped === true ? 'odd' : striped \|\| undefined;\n const resolvedCaptionSide = captionSide \|\| 'bottom';\n\n const contextValue = useMemo<TableContextValue>(\n () => ({\n getStyles,\n stickyHeader,\n striped: stripedValue,\n highlightOnHover,\n withColumnBorders,\n withRowBorders,\n captionSide: resolvedCaptionSide,\n }),\n [\n getStyles,\n stickyHeader,\n stripedValue,\n highlightOnHover,\n withColumnBorders,\n withRowBorders,\n resolvedCaptionSide,\n ]\n );\n\n return (\n <TableProvider value={contextValue}>\n <Box\n component=\"table\"\n mod={[{ withTableBorder, tabularNums }, mod]}\n {...getStyles('table')}\n {...others}\n >\n {children \|\| (!!data && <TableDataRenderer data={data} />)}\n </Box>\n </TableProvider>\n );\n});\n\nTable.classes = classes;\nTable.varsResolver = varsResolver;\nTable.displayName = '@mantine/core/Table';\nTable.Td = TableTd;\nTable.Th = TableTh;\nTable.Tr = TableTr;\nTable.Thead = TableThead;\nTable.Tbody = TableTbody;\nTable.Tfoot = TableTfoot;\nTable.Caption = TableCaption;\nTable.ScrollContainer = TableScrollContainer;\nTable.DataRenderer = TableDataRenderer;\n\nexport namespace Table {\n export type Props = TableProps;\n export type StylesNames = TableStylesNames;\n export type CssVariables = TableCssVariables;\n export type Factory = TableFactory;\n export type Data = TableData;\n export type ContextValue = TableContextValue;\n\n export namespace Caption {\n export type Props = TableCaptionProps;\n }\n\n export namespace Tbody {\n export type Props = TableTbodyProps;\n }\n\n export namespace Td {\n export type Props = TableTdProps;\n }\n\n export namespace Th {\n export type Props = TableThProps;\n }\n\n export namespace Tr {\n export type Props = TableTrProps;\n }\n\n export namespace Thead {\n export type Props = TableTheadProps;\n }\n\n export namespace Tfoot {\n export type Props = TableTfootProps;\n }\n\n export namespace ScrollContainer {\n export type Props = TableScrollContainerProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyIA,MAAM,eAAe;CACnB,gBAAgB;CAChB,iBAAiB;AACnB;AAEA,MAAM,eAAeA,6BAAAA,oBAEjB,OACA,EACE,QACA,aACA,mBACA,iBACA,aACA,cACA,uBACA,SACA,kBACA,oBACA,oBAEE,EACJ,OAAO;CACL,kBAAkB;CAClB,wBAAwB;CACxB,8BAA8BC,iBAAAA,WAAW,iBAAiB;CAC1D,4BAA4BA,iBAAAA,WAAW,eAAe;CACtD,wBAAwB,cAAcC,wBAAAA,cAAc,aAAa,KAAK,IAAI,KAAA;CAC1E,yBACE,WAAW,eAAeA,wBAAAA,cAAc,cAAc,KAAK,IAAI,KAAA;CACjE,oCACE,oBAAoB,wBAChBA,wBAAAA,cAAc,uBAAuB,KAAK,IAC1C,KAAA;CACN,gCAAgC,eAAeC,YAAAA,IAAI,kBAAkB,IAAI,KAAA;AAC3E,EACF,EACF;AAEA,MAAa,QAAQC,gBAAAA,SAAuB,WAAW;CACrD,MAAM,QAAQC,kBAAAA,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,mBACA,iBACA,aACA,cACA,uBACA,SACA,kBACA,mBACA,gBACA,iBACA,aACA,QACA,MACA,UACA,cACA,oBACA,KACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAwB;EACxC,MAAM;EACN;EACA;EACA;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;EACA,QAAQ;CACV,CAAC;CAED,MAAM,eAAe,YAAY,OAAO,QAAQ,WAAW,KAAA;CAC3D,MAAM,sBAAsB,eAAe;CAE3C,MAAM,gBAAA,GAAeC,MAAAA,QAAAA,QACZ;EACL;EACA;EACA,SAAS;EACT;EACA;EACA;EACA,aAAa;CACf,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,eAAD;EAAe,OAAO;EACpB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,WAAU;GACV,KAAK,CAAC;IAAE;IAAiB;GAAY,GAAG,GAAG;GAC3C,GAAI,UAAU,OAAO;GACrB,GAAI;GAEH,UAAA,YAAa,CAAC,CAAC,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAACC,0BAAAA,mBAAD,EAAyB,KAAO,CAAA;EACrD,CAAA;CACQ,CAAA;AAEnB,CAAC;AAED,MAAM,UAAUC,qBAAAA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,KAAKC,yBAAAA;AACX,MAAM,KAAKC,yBAAAA;AACX,MAAM,KAAKC,yBAAAA;AACX,MAAM,QAAQC,yBAAAA;AACd,MAAM,QAAQC,yBAAAA;AACd,MAAM,QAAQC,yBAAAA;AACd,MAAM,UAAUC,yBAAAA;AAChB,MAAM,kBAAkBC,6BAAAA;AACxB,MAAM,eAAeT,0BAAAA"}