npm - @mantine/core - Versions diffs - 9.5.2 → 9.6.0 - Mend

@mantine/core 9.5.2 → 9.6.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 (874) 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","RadioGroupContext","extractStyleProps","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","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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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioCard.cjs","names":["createVarsResolver","getRadius","factory","useProps","useStyles","useDirection","RadioGroupContext","UnstyledButton","classes"],"sources":["../../../../src/components/Radio/RadioCard/RadioCard.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { RadioGroupContext } from '../RadioGroup/RadioGroup';\nimport classes from './RadioCard.module.css';\n\nexport interface RadioCardContextValue {\n checked: boolean;\n}\n\nexport const RadioCardContext = createContext<RadioCardContextValue \| null>(null);\n\nexport type RadioCardStylesNames = 'card';\nexport type RadioCardCssVariables = {\n card: '--card-radius';\n};\n\nexport interface RadioCardProps\n extends BoxProps, StylesApiProps<RadioCardFactory>, ElementProps<'button', 'onChange'> {\n /** Checked state /\n checked?: boolean;\n\n /* Adds border to the root element /\n withBorder?: boolean;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Value of the radio, used with Radio.Group /\n value?: string;\n\n /* Value used to associate all related radio cards, required for accessibility if used outside of `Radio.Group` /\n name?: string;\n}\n\nexport type RadioCardFactory = Factory<{\n props: RadioCardProps;\n ref: HTMLButtonElement;\n stylesNames: RadioCardStylesNames;\n vars: RadioCardCssVariables;\n}>;\n\nconst defaultProps = {\n withBorder: true,\n} satisfies Partial<RadioCardProps>;\n\nconst varsResolver = createVarsResolver<RadioCardFactory>((_, { radius }) => ({\n card: {\n '--card-radius': getRadius(radius),\n },\n}));\n\nexport const RadioCard = factory<RadioCardFactory>((_props) => {\n const props = useProps('RadioCard', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n checked,\n mod,\n withBorder,\n value,\n onClick,\n name,\n onKeyDown,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioCardFactory>({\n name: 'RadioCard',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'card',\n });\n\n const { dir } = useDirection();\n const ctx = use(RadioGroupContext);\n const _checked = typeof checked === 'boolean' ? checked : ctx?.value === value \|\| false;\n const _name = name \|\| ctx?.name;\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (!_name) {\n return;\n }\n\n if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.nativeEvent.code)) {\n event.preventDefault();\n\n const siblings = Array.from(\n document.querySelectorAll<HTMLButtonElement>(`[role=\"radio\"][name=\"${_name}\"]`)\n );\n\n const currentIndex = siblings.findIndex((element) => element === event.target);\n const nextIndex = currentIndex + 1 >= siblings.length ? 0 : currentIndex + 1;\n const prevIndex = currentIndex - 1 < 0 ? siblings.length - 1 : currentIndex - 1;\n\n if (event.nativeEvent.code === 'ArrowDown') {\n siblings[nextIndex].focus();\n siblings[nextIndex].click();\n }\n\n if (event.nativeEvent.code === 'ArrowUp') {\n siblings[prevIndex].focus();\n siblings[prevIndex].click();\n }\n\n if (event.nativeEvent.code === 'ArrowLeft') {\n siblings[dir === 'ltr' ? prevIndex : nextIndex].focus();\n siblings[dir === 'ltr' ? prevIndex : nextIndex].click();\n }\n\n if (event.nativeEvent.code === 'ArrowRight') {\n siblings[dir === 'ltr' ? nextIndex : prevIndex].focus();\n siblings[dir === 'ltr' ? nextIndex : prevIndex].click();\n }\n }\n };\n\n return (\n <RadioCardContext value={{ checked: _checked }}>\n {/ eslint-disable-next-line jsx-a11y/interactive-supports-focus -- UnstyledButton renders a native <button> which is focusable */}\n <UnstyledButton\n mod={[{ 'with-border': withBorder, checked: _checked }, mod]}\n {...getStyles('card')}\n {...others}\n role=\"radio\"\n aria-checked={_checked}\n name={_name}\n onClick={(event) => {\n onClick?.(event);\n ctx?.onChange(value \|\| '');\n }}\n onKeyDown={handleKeyDown}\n />\n </RadioCardContext>\n );\n});\n\nRadioCard.displayName = '@mantine/core/RadioCard';\nRadioCard.classes = classes;\nRadioCard.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,oBAAA,~~GAAA~~,~~MAAA~~,~~cAAA~~,~~CAA+D~~,IAAI;AAgChF,MAAM,eAAe,EACnB,YAAY,KACd;AAEA,MAAM,~~eAAeA~~,6BAAAA,oBAAsC,GAAG,EAAE,cAAc,EAC5E,MAAM,EACJ,iBAAiBC,iBAAAA,UAAU,MAAM,EACnC,EACF,EAAE;AAEF,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,KACA,YACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAA,yBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAC7B,MAAM,OAAA,~~GAAA~~,~~MAAA~~,~~IAAA~~,~~CAAUC~~,mBAAAA,iBAAiB;CACjC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,UAAU,SAAS;CAClF,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,iBAAiB,UAAkD;EACvE,YAAY,KAAK;EAEjB,IAAI,CAAC,OACH;EAGF,IAAI;GAAC;GAAa;GAAW;GAAa;EAAY,CAAC,CAAC,SAAS,MAAM,YAAY,IAAI,GAAG;GACxF,MAAM,eAAe;GAErB,MAAM,WAAW,MAAM,KACrB,SAAS,iBAAoC,wBAAwB,MAAM,GAAG,CAChF;GAEA,MAAM,eAAe,SAAS,WAAW,YAAY,YAAY,MAAM,MAAM;GAC7E,MAAM,YAAY,eAAe,KAAK,SAAS,SAAS,IAAI,eAAe;GAC3E,MAAM,YAAY,eAAe,IAAI,IAAI,SAAS,SAAS,IAAI,eAAe;GAE9E,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,SAAS,UAAU,CAAC,MAAM;IAC1B,SAAS,UAAU,CAAC,MAAM;GAC5B;GAEA,IAAI,MAAM,YAAY,SAAS,WAAW;IACxC,SAAS,UAAU,CAAC,MAAM;IAC1B,SAAS,UAAU,CAAC,MAAM;GAC5B;GAEA,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;IACtD,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;GACxD;GAEA,IAAI,MAAM,YAAY,SAAS,cAAc;IAC3C,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;IACtD,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;GACxD;EACF;CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;EAAkB,OAAO,EAAE,SAAS,SAAS;~~YAE3C~~,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD;GACE,KAAK,CAAC;IAAE,eAAe;IAAY,SAAS;GAAS,GAAG,GAAG;GAC3D,GAAI,UAAU,MAAM;GACpB,GAAI;GACJ,MAAK;GACL,gBAAc;GACd,MAAM;GACN,UAAU,UAAU;IAClB,UAAU,KAAK;IACf,KAAK,SAAS,SAAS,EAAE;GAC3B;GACA,WAAW;EACZ,CAAA;CACe,CAAA;AAEtB,CAAC;AAED,UAAU,cAAc;AACxB,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe"}
1	+ {"version":3,"file":"RadioCard.cjs","names":["createContext","createVarsResolver","getRadius","factory","useProps","useStyles","useDirection","use","RadioGroupContext","UnstyledButton","classes"],"sources":["../../../../src/components/Radio/RadioCard/RadioCard.tsx"],"sourcesContent":["import { createContext, use } from 'react';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { RadioGroupContext } from '../RadioGroup/RadioGroup';\nimport classes from './RadioCard.module.css';\n\nexport interface RadioCardContextValue {\n checked: boolean;\n}\n\nexport const RadioCardContext = createContext<RadioCardContextValue \| null>(null);\n\nexport type RadioCardStylesNames = 'card';\nexport type RadioCardCssVariables = {\n card: '--card-radius';\n};\n\nexport interface RadioCardProps\n extends BoxProps, StylesApiProps<RadioCardFactory>, ElementProps<'button', 'onChange'> {\n /** Checked state /\n checked?: boolean;\n\n /* Adds border to the root element /\n withBorder?: boolean;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Value of the radio, used with Radio.Group /\n value?: string;\n\n /* Value used to associate all related radio cards, required for accessibility if used outside of `Radio.Group` /\n name?: string;\n}\n\nexport type RadioCardFactory = Factory<{\n props: RadioCardProps;\n ref: HTMLButtonElement;\n stylesNames: RadioCardStylesNames;\n vars: RadioCardCssVariables;\n}>;\n\nconst defaultProps = {\n withBorder: true,\n} satisfies Partial<RadioCardProps>;\n\nconst varsResolver = createVarsResolver<RadioCardFactory>((_, { radius }) => ({\n card: {\n '--card-radius': getRadius(radius),\n },\n}));\n\nexport const RadioCard = factory<RadioCardFactory>((_props) => {\n const props = useProps('RadioCard', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n checked,\n mod,\n withBorder,\n value,\n onClick,\n name,\n onKeyDown,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RadioCardFactory>({\n name: 'RadioCard',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'card',\n });\n\n const { dir } = useDirection();\n const ctx = use(RadioGroupContext);\n const _checked = typeof checked === 'boolean' ? checked : ctx?.value === value \|\| false;\n const _name = name \|\| ctx?.name;\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n\n if (!_name) {\n return;\n }\n\n if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.nativeEvent.code)) {\n event.preventDefault();\n\n const siblings = Array.from(\n document.querySelectorAll<HTMLButtonElement>(`[role=\"radio\"][name=\"${_name}\"]`)\n );\n\n const currentIndex = siblings.findIndex((element) => element === event.target);\n const nextIndex = currentIndex + 1 >= siblings.length ? 0 : currentIndex + 1;\n const prevIndex = currentIndex - 1 < 0 ? siblings.length - 1 : currentIndex - 1;\n\n if (event.nativeEvent.code === 'ArrowDown') {\n siblings[nextIndex].focus();\n siblings[nextIndex].click();\n }\n\n if (event.nativeEvent.code === 'ArrowUp') {\n siblings[prevIndex].focus();\n siblings[prevIndex].click();\n }\n\n if (event.nativeEvent.code === 'ArrowLeft') {\n siblings[dir === 'ltr' ? prevIndex : nextIndex].focus();\n siblings[dir === 'ltr' ? prevIndex : nextIndex].click();\n }\n\n if (event.nativeEvent.code === 'ArrowRight') {\n siblings[dir === 'ltr' ? nextIndex : prevIndex].focus();\n siblings[dir === 'ltr' ? nextIndex : prevIndex].click();\n }\n }\n };\n\n return (\n <RadioCardContext value={{ checked: _checked }}>\n {/ eslint-disable-next-line jsx-a11y/interactive-supports-focus -- UnstyledButton renders a native <button> which is focusable */}\n <UnstyledButton\n mod={[{ 'with-border': withBorder, checked: _checked }, mod]}\n {...getStyles('card')}\n {...others}\n role=\"radio\"\n aria-checked={_checked}\n name={_name}\n onClick={(event) => {\n onClick?.(event);\n ctx?.onChange(value \|\| '');\n }}\n onKeyDown={handleKeyDown}\n />\n </RadioCardContext>\n );\n});\n\nRadioCard.displayName = '@mantine/core/RadioCard';\nRadioCard.classes = classes;\nRadioCard.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;AAsBA,MAAa,oBAAA,GAAmBA,MAAAA,cAAAA,CAA4C,IAAI;AAgChF,MAAM,eAAe,EACnB,YAAY,KACd;AAEA,MAAM,eAAeC,6BAAAA,oBAAsC,GAAG,EAAE,cAAc,EAC5E,MAAM,EACJ,iBAAiBC,iBAAAA,UAAU,MAAM,EACnC,EACF,EAAE;AAEF,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,cAAc,MAAM;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SACA,KACA,YACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAA,yBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAC7B,MAAM,OAAA,GAAMC,MAAAA,IAAAA,CAAIC,mBAAAA,iBAAiB;CACjC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,UAAU,SAAS;CAClF,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,iBAAiB,UAAkD;EACvE,YAAY,KAAK;EAEjB,IAAI,CAAC,OACH;EAGF,IAAI;GAAC;GAAa;GAAW;GAAa;EAAY,CAAC,CAAC,SAAS,MAAM,YAAY,IAAI,GAAG;GACxF,MAAM,eAAe;GAErB,MAAM,WAAW,MAAM,KACrB,SAAS,iBAAoC,wBAAwB,MAAM,GAAG,CAChF;GAEA,MAAM,eAAe,SAAS,WAAW,YAAY,YAAY,MAAM,MAAM;GAC7E,MAAM,YAAY,eAAe,KAAK,SAAS,SAAS,IAAI,eAAe;GAC3E,MAAM,YAAY,eAAe,IAAI,IAAI,SAAS,SAAS,IAAI,eAAe;GAE9E,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,SAAS,UAAU,CAAC,MAAM;IAC1B,SAAS,UAAU,CAAC,MAAM;GAC5B;GAEA,IAAI,MAAM,YAAY,SAAS,WAAW;IACxC,SAAS,UAAU,CAAC,MAAM;IAC1B,SAAS,UAAU,CAAC,MAAM;GAC5B;GAEA,IAAI,MAAM,YAAY,SAAS,aAAa;IAC1C,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;IACtD,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;GACxD;GAEA,IAAI,MAAM,YAAY,SAAS,cAAc;IAC3C,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;IACtD,SAAS,QAAQ,QAAQ,YAAY,UAAU,CAAC,MAAM;GACxD;EACF;CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;EAAkB,OAAO,EAAE,SAAS,SAAS;EAE3C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD;GACE,KAAK,CAAC;IAAE,eAAe;IAAY,SAAS;GAAS,GAAG,GAAG;GAC3D,GAAI,UAAU,MAAM;GACpB,GAAI;GACJ,MAAK;GACL,gBAAc;GACd,MAAM;GACN,UAAU,UAAU;IAClB,UAAU,KAAK;IACf,KAAK,SAAS,SAAS,EAAE;GAC3B;GACA,WAAW;EACZ,CAAA;CACe,CAAA;AAEtB,CAAC;AAED,UAAU,cAAc;AACxB,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.cjs","names":["genericFactory","useProps","Input","InputsGroupFieldset"],"sources":["../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n DataAttributes,\n Factory,\n genericFactory,\n MantineSize,\n Primitive,\n useProps,\n} from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface RadioGroupContextValue<Value extends Primitive = string> {\n size: MantineSize \| undefined;\n value: Value \| null;\n onChange: (event: React.ChangeEvent<HTMLInputElement> \| string) => void;\n name: string;\n disabled: boolean \| undefined;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue \| null>(null);\n\nexport type RadioGroupStylesNames = InputWrapperStylesNames;\n\nexport interface RadioGroupProps<Value extends Primitive = string> extends Omit<\n InputWrapperProps,\n 'onChange' \| 'value' \| 'defaultValue'\n> {\n /** `Radio` components and any other elements /\n children: React.ReactNode;\n\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) => void;\n\n /* Props passed down to the `Input.Wrapper` /\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /* Controls size of the `Input.Wrapper` @default 'sm' /\n size?: MantineSize;\n\n /* `name` attribute of child radio inputs. By default, `name` is generated randomly. /\n name?: string;\n\n /* If set, value cannot be changed /\n readOnly?: boolean;\n\n /* Sets `disabled` attribute, prevents interactions */\n disabled?: boolean;\n}\n\nexport type RadioGroupFactory = Factory<{\n props: RadioGroupProps;\n ref: HTMLDivElement;\n stylesNames: RadioGroupStylesNames;\n signature: <Value extends Primitive = string>(props: RadioGroupProps<Value>) => React.JSX.Element;\n}>;\n\nexport const RadioGroup = genericFactory<RadioGroupFactory>(((props: RadioGroupProps<string>) => {\n const {\n value,\n defaultValue,\n onChange,\n size,\n wrapperProps,\n children,\n name,\n readOnly,\n disabled,\n ...others\n } = useProps('RadioGroup', null, props);\n\n const _name = useId(name);\n\n const [_value, setValue] = useUncontrolled<string \| null>({\n value,\n defaultValue,\n finalValue: '',\n onChange: onChange as any,\n });\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement> \| string) =>\n !readOnly && setValue(typeof event === 'string' ? event : event.currentTarget.value);\n\n return (\n <RadioGroupContext\n value={{ value: _value, onChange: handleChange, size, name: _name, disabled }}\n >\n <Input.Wrapper\n size={size}\n {...wrapperProps}\n {...others}\n labelElement=\"div\"\n __staticSelector=\"RadioGroup\"\n >\n <InputsGroupFieldset role=\"radiogroup\">{children}</InputsGroupFieldset>\n </Input.Wrapper>\n </RadioGroupContext>\n );\n}) as any);\n\nRadioGroup.classes = Input.Wrapper.classes;\nRadioGroup.displayName = '@mantine/core/RadioGroup';\n"],"mappings":";;;;;;;;;AAqBA,MAAa,qBAAA,~~GAAA~~,~~MAAA~~,~~cAAA~~,~~CAAiE~~,IAAI;AA2ClF,MAAa,~~aAAaA~~,gBAAAA,iBAAoC,UAAmC;CAC/F,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,MACA,UACA,UACA,GAAG,WACDC,kBAAAA,SAAS,cAAc,MAAM,KAAK;CAEtC,MAAM,SAAA,~~GAAA~~,~~eAAA~~,~~MAAA~~,~~CAAc~~,IAAI;CAExB,MAAM,CAAC,QAAQ,aAAA,~~GAAA~~,~~eAAA~~,~~gBAAA~~,~~CAA2C~~;EACxD;EACA;EACA,YAAY;EACF;CACZ,CAAC;CAED,MAAM,gBAAgB,UACpB,CAAC,YAAY,SAAS,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc,KAAK;CAErF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;EACE,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM,MAAM;GAAO;EAAS;~~YAE5E~~,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;~~aAEjB~~,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,qBAAD;IAAqB,MAAK;IAAc;GAA8B,CAAA;EACzD,CAAA;CACE,CAAA;AAEvB,EAAS;AAET,WAAW,UAAUD,cAAAA,MAAM,QAAQ;AACnC,WAAW,cAAc"}
1	+ {"version":3,"file":"RadioGroup.cjs","names":["createContext","genericFactory","useProps","useId","useUncontrolled","Input","InputsGroupFieldset"],"sources":["../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n DataAttributes,\n Factory,\n genericFactory,\n MantineSize,\n Primitive,\n useProps,\n} from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface RadioGroupContextValue<Value extends Primitive = string> {\n size: MantineSize \| undefined;\n value: Value \| null;\n onChange: (event: React.ChangeEvent<HTMLInputElement> \| string) => void;\n name: string;\n disabled: boolean \| undefined;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue \| null>(null);\n\nexport type RadioGroupStylesNames = InputWrapperStylesNames;\n\nexport interface RadioGroupProps<Value extends Primitive = string> extends Omit<\n InputWrapperProps,\n 'onChange' \| 'value' \| 'defaultValue'\n> {\n /** `Radio` components and any other elements /\n children: React.ReactNode;\n\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) => void;\n\n /* Props passed down to the `Input.Wrapper` /\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /* Controls size of the `Input.Wrapper` @default 'sm' /\n size?: MantineSize;\n\n /* `name` attribute of child radio inputs. By default, `name` is generated randomly. /\n name?: string;\n\n /* If set, value cannot be changed /\n readOnly?: boolean;\n\n /* Sets `disabled` attribute, prevents interactions */\n disabled?: boolean;\n}\n\nexport type RadioGroupFactory = Factory<{\n props: RadioGroupProps;\n ref: HTMLDivElement;\n stylesNames: RadioGroupStylesNames;\n signature: <Value extends Primitive = string>(props: RadioGroupProps<Value>) => React.JSX.Element;\n}>;\n\nexport const RadioGroup = genericFactory<RadioGroupFactory>(((props: RadioGroupProps<string>) => {\n const {\n value,\n defaultValue,\n onChange,\n size,\n wrapperProps,\n children,\n name,\n readOnly,\n disabled,\n ...others\n } = useProps('RadioGroup', null, props);\n\n const _name = useId(name);\n\n const [_value, setValue] = useUncontrolled<string \| null>({\n value,\n defaultValue,\n finalValue: '',\n onChange: onChange as any,\n });\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement> \| string) =>\n !readOnly && setValue(typeof event === 'string' ? event : event.currentTarget.value);\n\n return (\n <RadioGroupContext\n value={{ value: _value, onChange: handleChange, size, name: _name, disabled }}\n >\n <Input.Wrapper\n size={size}\n {...wrapperProps}\n {...others}\n labelElement=\"div\"\n __staticSelector=\"RadioGroup\"\n >\n <InputsGroupFieldset role=\"radiogroup\">{children}</InputsGroupFieldset>\n </Input.Wrapper>\n </RadioGroupContext>\n );\n}) as any);\n\nRadioGroup.classes = Input.Wrapper.classes;\nRadioGroup.displayName = '@mantine/core/RadioGroup';\n"],"mappings":";;;;;;;;;AAqBA,MAAa,qBAAA,GAAoBA,MAAAA,cAAAA,CAA6C,IAAI;AA2ClF,MAAa,aAAaC,gBAAAA,iBAAoC,UAAmC;CAC/F,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,MACA,UACA,UACA,GAAG,WACDC,kBAAAA,SAAS,cAAc,MAAM,KAAK;CAEtC,MAAM,SAAA,GAAQC,eAAAA,MAAAA,CAAM,IAAI;CAExB,MAAM,CAAC,QAAQ,aAAA,GAAYC,eAAAA,gBAAAA,CAA+B;EACxD;EACA;EACA,YAAY;EACF;CACZ,CAAC;CAED,MAAM,gBAAgB,UACpB,CAAC,YAAY,SAAS,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc,KAAK;CAErF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;EACE,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM,MAAM;GAAO;EAAS;EAE5E,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;GAEjB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,qBAAD;IAAqB,MAAK;IAAc;GAA8B,CAAA;EACzD,CAAA;CACE,CAAA;AAEvB,EAAS;AAET,WAAW,UAAUD,cAAAA,MAAM,QAAQ;AACnC,WAAW,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioIcon.cjs","names":["rem"],"sources":["../../../src/components/Radio/RadioIcon.tsx"],"sourcesContent":["import { rem } from '../../core';\n\nexport interface RadioIconProps extends React.ComponentProps<'svg'> {\n size?: string \| number;\n}\n\nexport function RadioIcon({ size, style, ...others }: RadioIconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 5 5\"\n style={{ width: rem(size), height: rem(size), ...style }}\n aria-hidden\n {...others}\n >\n <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"currentColor\" />\n </svg>\n );\n}\n"],"mappings":";;;;AAMA,SAAgB,UAAU,EAAE,MAAM,OAAO,GAAG,UAA0B;CACpE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,OAAM;EACN,MAAK;EACL,SAAQ;EACR,OAAO;GAAE,OAAOA,YAAAA,IAAI,IAAI;GAAG,QAAQA,YAAAA,IAAI,IAAI;GAAG,GAAG;EAAM;EACvD,eAAA;EACA,GAAI;~~YAEJ~~,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GAAQ,IAAG;GAAM,IAAG;GAAM,GAAE;GAAM,MAAK;EAAgB,CAAA;CACpD,CAAA;AAET"}
1	+ {"version":3,"file":"RadioIcon.cjs","names":["rem"],"sources":["../../../src/components/Radio/RadioIcon.tsx"],"sourcesContent":["import { rem } from '../../core';\n\nexport interface RadioIconProps extends React.ComponentProps<'svg'> {\n size?: string \| number;\n}\n\nexport function RadioIcon({ size, style, ...others }: RadioIconProps) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 5 5\"\n style={{ width: rem(size), height: rem(size), ...style }}\n aria-hidden\n {...others}\n >\n <circle cx=\"2.5\" cy=\"2.5\" r=\"2.5\" fill=\"currentColor\" />\n </svg>\n );\n}\n"],"mappings":";;;;AAMA,SAAgB,UAAU,EAAE,MAAM,OAAO,GAAG,UAA0B;CACpE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,OAAM;EACN,MAAK;EACL,SAAQ;EACR,OAAO;GAAE,OAAOA,YAAAA,IAAI,IAAI;GAAG,QAAQA,YAAAA,IAAI,IAAI;GAAG,GAAG;EAAM;EACvD,eAAA;EACA,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;GAAQ,IAAG;GAAM,IAAG;GAAM,GAAE;GAAM,MAAK;EAAgB,CAAA;CACpD,CAAA;AAET"}

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","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,~~GAAA~~,~~MAAA~~,~~IAAA~~,~~CAAUC~~,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;~~YAEJ~~,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","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"}

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

@@ -67,7 +67,8 @@ const Rating = require_factory.factory((_props) => {
 		if (!rootRef.current) return 0;
 		const { left, right, width } = rootRef.current.getBoundingClientRect();
 		const symbolWidth = width / _count;
-		return (0, _mantine_hooks.clamp)(roundValueTo((dir === "rtl" ? right - x : x - left) / symbolWidth + decimalUnit / 2, decimalUnit), decimalUnit, _count);
+		const hoverValue = (dir === "rtl" ? right - x : x - left) / symbolWidth;
+		return (0, _mantine_hooks.clamp)(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);
 	};
 	const handleMouseEnter = (event) => {
 		onMouseEnter?.(event);
@@ -102,8 +103,10 @@ const Rating = require_factory.factory((_props) => {
 	};
 	const handleItemBlur = () => isOutside && setHovered(-1);
 	const handleInputChange = (event) => {
-		if (!readOnly) if (typeof event === "number") setHovered(event);
-		else setHovered(parseFloat(event.target.value));
+		if (!readOnly) {
+			if (typeof event === "number") setHovered(event);
+			else setHovered(parseFloat(event.target.value));
+		}
 	};
 	const handleChange = (event) => {
 		if (!readOnly) {

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","RatingItem","RatingProvider","Box","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\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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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RatingItem.cjs","names":["useRatingContext","useDirection","Box","StarSymbol"],"sources":["../../../../src/components/Rating/RatingItem/RatingItem.tsx"],"sourcesContent":["import { Box, BoxProps, ElementProps, useDirection } from '../../../core';\nimport { useRatingContext } from '../Rating.context';\nimport { StarSymbol } from '../StarSymbol/StarSymbol';\n\nexport interface RatingItemProps extends BoxProps, ElementProps<'input', 'value' \| 'size'> {\n getSymbolLabel: ((value: number) => string) \| undefined;\n emptyIcon?: React.ReactNode \| ((value: number) => React.ReactNode);\n fullIcon?: React.ReactNode \| ((value: number) => React.ReactNode);\n full: boolean;\n active: boolean;\n fractionValue: number;\n value: number;\n id: string;\n onChange: (event: React.ChangeEvent<HTMLInputElement> \| number) => void;\n onInputChange: (event: React.ChangeEvent<HTMLInputElement> \| number) => void;\n}\n\nexport function RatingItem({\n getSymbolLabel,\n emptyIcon,\n fullIcon,\n full,\n active,\n value,\n readOnly,\n fractionValue,\n color,\n id,\n onBlur,\n onChange,\n onInputChange,\n style,\n ...others\n}: RatingItemProps) {\n const ctx = useRatingContext();\n const _fullIcon = typeof fullIcon === 'function' ? fullIcon(value) : fullIcon;\n const _emptyIcon = typeof emptyIcon === 'function' ? emptyIcon(value) : emptyIcon;\n const { dir } = useDirection();\n\n return (\n <>\n {!readOnly && (\n <input\n {...ctx.getStyles('input')}\n onKeyDown={(event) => (event.key === ' ' \|\| event.key === 'Enter') && onChange(value)}\n id={id}\n type=\"radio\"\n data-active={active \|\| undefined}\n aria-label={getSymbolLabel?.(value)}\n value={value}\n onBlur={onBlur}\n onChange={onInputChange}\n {...others}\n />\n )}\n\n <Box\n component={readOnly ? 'div' : 'label'}\n {...ctx.getStyles('label')}\n data-read-only={readOnly \|\| undefined}\n htmlFor={id}\n onClick={readOnly ? undefined : () => onChange(value)}\n __vars={{\n '--rating-item-z-index': (fractionValue === 1 ? undefined : active ? 2 : 0)?.toString(),\n }}\n >\n <Box\n {...ctx.getStyles('symbolBody')}\n __vars={{\n '--rating-symbol-clip-path':\n fractionValue === 1\n ? undefined\n : dir === 'ltr'\n ? `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)`\n : `inset(0 0 0 ${active ? 100 - fractionValue * 100 : 100}% )`,\n }}\n >\n {full\n ? _fullIcon \|\| <StarSymbol type=\"full\" />\n : _emptyIcon \|\| <StarSymbol type=\"empty\" />}\n </Box>\n </Box>\n </>\n );\n}\n\nRatingItem.displayName = '@mantine/core/RatingItem';\n"],"mappings":";;;;;;;AAiBA,SAAgB,WAAW,EACzB,gBACA,WACA,UACA,MACA,QACA,OACA,UACA,eACA,OACA,IACA,QACA,UACA,eACA,OACA,GAAG,UACe;CAClB,MAAM,MAAMA,uBAAAA,iBAAiB;CAC7B,MAAM,YAAY,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;CACrE,MAAM,aAAa,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI;CACxE,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAE7B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACG,CAAC,YACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EACE,GAAI,IAAI,UAAU,OAAO;EACzB,YAAY,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,YAAY,SAAS,KAAK;EAChF;EACJ,MAAK;EACL,eAAa,UAAU,KAAA;EACvB,cAAY,iBAAiB,KAAK;EAC3B;EACC;EACR,UAAU;EACV,GAAI;CACL,CAAA,GAGH,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAW,WAAW,QAAQ;EAC9B,GAAI,IAAI,UAAU,OAAO;EACzB,kBAAgB,YAAY,KAAA;EAC5B,SAAS;EACT,SAAS,WAAW,KAAA,UAAkB,SAAS,KAAK;EACpD,QAAQ,EACN,0BAA0B,kBAAkB,IAAI,KAAA,IAAY,SAAS,IAAI,EAAA,EAAI,SAAS,EACxF;~~YAEA~~,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;GACE,GAAI,IAAI,UAAU,YAAY;GAC9B,QAAQ,EACN,6BACE,kBAAkB,IACd,KAAA,IACA,QAAQ,QACN,WAAW,SAAS,MAAM,gBAAgB,MAAM,IAAI,UACpD,eAAe,SAAS,MAAM,gBAAgB,MAAM,IAAI,KAClE;~~aAEC~~,OACG,aAAa,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD,EAAY,MAAK,OAAQ,CAAA,IACtC,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD,EAAY,MAAK,QAAS,CAAA;EACzC,CAAA;CACF,CAAA,CACL,EAAA,CAAA;AAEN;AAEA,WAAW,cAAc"}
1	+ {"version":3,"file":"RatingItem.cjs","names":["useRatingContext","useDirection","Box","StarSymbol"],"sources":["../../../../src/components/Rating/RatingItem/RatingItem.tsx"],"sourcesContent":["import { Box, BoxProps, ElementProps, useDirection } from '../../../core';\nimport { useRatingContext } from '../Rating.context';\nimport { StarSymbol } from '../StarSymbol/StarSymbol';\n\nexport interface RatingItemProps extends BoxProps, ElementProps<'input', 'value' \| 'size'> {\n getSymbolLabel: ((value: number) => string) \| undefined;\n emptyIcon?: React.ReactNode \| ((value: number) => React.ReactNode);\n fullIcon?: React.ReactNode \| ((value: number) => React.ReactNode);\n full: boolean;\n active: boolean;\n fractionValue: number;\n value: number;\n id: string;\n onChange: (event: React.ChangeEvent<HTMLInputElement> \| number) => void;\n onInputChange: (event: React.ChangeEvent<HTMLInputElement> \| number) => void;\n}\n\nexport function RatingItem({\n getSymbolLabel,\n emptyIcon,\n fullIcon,\n full,\n active,\n value,\n readOnly,\n fractionValue,\n color,\n id,\n onBlur,\n onChange,\n onInputChange,\n style,\n ...others\n}: RatingItemProps) {\n const ctx = useRatingContext();\n const _fullIcon = typeof fullIcon === 'function' ? fullIcon(value) : fullIcon;\n const _emptyIcon = typeof emptyIcon === 'function' ? emptyIcon(value) : emptyIcon;\n const { dir } = useDirection();\n\n return (\n <>\n {!readOnly && (\n <input\n {...ctx.getStyles('input')}\n onKeyDown={(event) => (event.key === ' ' \|\| event.key === 'Enter') && onChange(value)}\n id={id}\n type=\"radio\"\n data-active={active \|\| undefined}\n aria-label={getSymbolLabel?.(value)}\n value={value}\n onBlur={onBlur}\n onChange={onInputChange}\n {...others}\n />\n )}\n\n <Box\n component={readOnly ? 'div' : 'label'}\n {...ctx.getStyles('label')}\n data-read-only={readOnly \|\| undefined}\n htmlFor={id}\n onClick={readOnly ? undefined : () => onChange(value)}\n __vars={{\n '--rating-item-z-index': (fractionValue === 1 ? undefined : active ? 2 : 0)?.toString(),\n }}\n >\n <Box\n {...ctx.getStyles('symbolBody')}\n __vars={{\n '--rating-symbol-clip-path':\n fractionValue === 1\n ? undefined\n : dir === 'ltr'\n ? `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)`\n : `inset(0 0 0 ${active ? 100 - fractionValue * 100 : 100}% )`,\n }}\n >\n {full\n ? _fullIcon \|\| <StarSymbol type=\"full\" />\n : _emptyIcon \|\| <StarSymbol type=\"empty\" />}\n </Box>\n </Box>\n </>\n );\n}\n\nRatingItem.displayName = '@mantine/core/RatingItem';\n"],"mappings":";;;;;;;AAiBA,SAAgB,WAAW,EACzB,gBACA,WACA,UACA,MACA,QACA,OACA,UACA,eACA,OACA,IACA,QACA,UACA,eACA,OACA,GAAG,UACe;CAClB,MAAM,MAAMA,uBAAAA,iBAAiB;CAC7B,MAAM,YAAY,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;CACrE,MAAM,aAAa,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI;CACxE,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAE7B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACG,CAAC,YACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;EACE,GAAI,IAAI,UAAU,OAAO;EACzB,YAAY,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,YAAY,SAAS,KAAK;EAChF;EACJ,MAAK;EACL,eAAa,UAAU,KAAA;EACvB,cAAY,iBAAiB,KAAK;EAC3B;EACC;EACR,UAAU;EACV,GAAI;CACL,CAAA,GAGH,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,WAAW,WAAW,QAAQ;EAC9B,GAAI,IAAI,UAAU,OAAO;EACzB,kBAAgB,YAAY,KAAA;EAC5B,SAAS;EACT,SAAS,WAAW,KAAA,UAAkB,SAAS,KAAK;EACpD,QAAQ,EACN,0BAA0B,kBAAkB,IAAI,KAAA,IAAY,SAAS,IAAI,EAAA,EAAI,SAAS,EACxF;EAEA,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;GACE,GAAI,IAAI,UAAU,YAAY;GAC9B,QAAQ,EACN,6BACE,kBAAkB,IACd,KAAA,IACA,QAAQ,QACN,WAAW,SAAS,MAAM,gBAAgB,MAAM,IAAI,UACpD,eAAe,SAAS,MAAM,gBAAgB,MAAM,IAAI,KAClE;GAEC,UAAA,OACG,aAAa,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD,EAAY,MAAK,OAAQ,CAAA,IACtC,cAAc,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD,EAAY,MAAK,QAAS,CAAA;EACzC,CAAA;CACF,CAAA,CACL,EAAA,CAAA;AAEN;AAEA,WAAW,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StarIcon.cjs","names":[],"sources":["../../../../src/components/Rating/StarSymbol/StarIcon.tsx"],"sourcesContent":["export function StarIcon(props: React.ComponentProps<'svg'>) {\n const { width, height, style, ...others } = props;\n return (\n <svg\n viewBox=\"0 0 24 24\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{ width, height, ...style }}\n {...others}\n >\n <path d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\" />\n </svg>\n );\n}\n\nStarIcon.displayName = '@mantine/core/StarIcon';\n"],"mappings":";;;AAAA,SAAgB,SAAS,OAAoC;CAC3D,MAAM,EAAE,OAAO,QAAQ,OAAO,GAAG,WAAW;CAC5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,SAAQ;EACR,eAAc;EACd,gBAAe;EACf,MAAK;EACL,OAAM;EACN,OAAO;GAAE;GAAO;GAAQ,GAAG;EAAM;EACjC,GAAI;~~YAEJ~~,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,GAAE,4GAA6G,CAAA;CAClH,CAAA;AAET;AAEA,SAAS,cAAc"}
1	+ {"version":3,"file":"StarIcon.cjs","names":[],"sources":["../../../../src/components/Rating/StarSymbol/StarIcon.tsx"],"sourcesContent":["export function StarIcon(props: React.ComponentProps<'svg'>) {\n const { width, height, style, ...others } = props;\n return (\n <svg\n viewBox=\"0 0 24 24\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n style={{ width, height, ...style }}\n {...others}\n >\n <path d=\"M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\" />\n </svg>\n );\n}\n\nStarIcon.displayName = '@mantine/core/StarIcon';\n"],"mappings":";;;AAAA,SAAgB,SAAS,OAAoC;CAC3D,MAAM,EAAE,OAAO,QAAQ,OAAO,GAAG,WAAW;CAC5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,SAAQ;EACR,eAAc;EACd,gBAAe;EACf,MAAK;EACL,OAAM;EACN,OAAO;GAAE;GAAO;GAAQ,GAAG;EAAM;EACjC,GAAI;EAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,GAAE,4GAA6G,CAAA;CAClH,CAAA;AAET;AAEA,SAAS,cAAc"}

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

@@ -4,8 +4,9 @@ const require_StarIcon = require("./StarIcon.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Rating/StarSymbol/StarSymbol.tsx
 function StarSymbol({ type }) {
+	const ctx = require_Rating_context.useRatingContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_StarIcon.StarIcon, {
-		...require_Rating_context.useRatingContext().getStyles("starSymbol"),
+		...ctx.getStyles("starSymbol"),
 		"data-filled": type === "full" || void 0
 	});
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"StarSymbol.cjs","names":["~~StarIcon~~","~~useRatingContext~~"],"sources":["../../../../src/components/Rating/StarSymbol/StarSymbol.tsx"],"sourcesContent":["import { useRatingContext } from '../Rating.context';\nimport { StarIcon } from './StarIcon';\n\nexport interface StarSymbolProps {\n type: 'empty' \| 'full';\n}\n\nexport function StarSymbol({ type }: StarSymbolProps) {\n const ctx = useRatingContext();\n return <StarIcon {...ctx.getStyles('starSymbol')} data-filled={type === 'full' \|\| undefined} />;\n}\n\nStarSymbol.displayName = '@mantine/core/StarSymbol';\n"],"mappings":";;;;;AAOA,SAAgB,WAAW,EAAE,QAAyB;~~CAEpD~~,OAAO,iBAAA,GAAA,kBAAA,IAAA,~~CAACA~~,iBAAAA,UAAD;EAAU,~~GADLC~~,~~uBAAAA~~,~~iBACW,CAAC,CAAC,~~UAAU,YAAY;EAAG,eAAa,SAAS,UAAU,KAAA;CAAY,CAAA;AAChG;AAEA,WAAW,cAAc"}
1	+ {"version":3,"file":"StarSymbol.cjs","names":["useRatingContext","StarIcon"],"sources":["../../../../src/components/Rating/StarSymbol/StarSymbol.tsx"],"sourcesContent":["import { useRatingContext } from '../Rating.context';\nimport { StarIcon } from './StarIcon';\n\nexport interface StarSymbolProps {\n type: 'empty' \| 'full';\n}\n\nexport function StarSymbol({ type }: StarSymbolProps) {\n const ctx = useRatingContext();\n return <StarIcon {...ctx.getStyles('starSymbol')} data-filled={type === 'full' \|\| undefined} />;\n}\n\nStarSymbol.displayName = '@mantine/core/StarSymbol';\n"],"mappings":";;;;;AAOA,SAAgB,WAAW,EAAE,QAAyB;CACpD,MAAM,MAAMA,uBAAAA,iBAAiB;CAC7B,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;EAAU,GAAI,IAAI,UAAU,YAAY;EAAG,eAAa,SAAS,UAAU,KAAA;CAAY,CAAA;AAChG;AAEA,WAAW,cAAc"}

package/cjs/components/RingProgress/Curve/Curve.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Curve.cjs","names":["useMantineTheme","Tooltip","Box","getThemeColor","getCurveProps"],"sources":["../../../../src/components/RingProgress/Curve/Curve.tsx"],"sourcesContent":["import { Box, GetStylesApi, getThemeColor, MantineColor, useMantineTheme } from '../../../core';\nimport { Tooltip } from '../../Tooltip';\nimport type { RingProgressFactory } from '../RingProgress';\nimport { getCurveProps } from './get-curve-props';\n\ninterface CurveProps extends React.ComponentProps<'circle'> {\n value?: number;\n size: number;\n offset: number;\n sum: number;\n thickness: number;\n lineRoundCaps: boolean \| undefined;\n root?: boolean;\n color?: MantineColor;\n tooltip?: React.ReactNode;\n getStyles: GetStylesApi<RingProgressFactory>;\n}\n\nexport function Curve({\n size,\n value,\n offset,\n sum,\n thickness,\n root,\n color,\n lineRoundCaps,\n tooltip,\n getStyles,\n display,\n ...others\n}: CurveProps) {\n const theme = useMantineTheme();\n\n return (\n <Tooltip.Floating disabled={!tooltip} label={tooltip}>\n <Box\n component=\"circle\"\n {...others}\n {...getStyles('curve')}\n __vars={{ '--curve-color': color ? getThemeColor(color, theme) : undefined }}\n fill=\"none\"\n strokeLinecap={lineRoundCaps ? 'round' : 'butt'}\n {...getCurveProps({ sum, size, thickness, value, offset, root })}\n />\n </Tooltip.Floating>\n );\n}\n\nCurve.displayName = '@mantine/core/Curve';\n"],"mappings":";;;;;;;;AAkBA,SAAgB,MAAM,EACpB,MACA,OACA,QACA,KACA,WACA,MACA,OACA,eACA,SACA,WACA,SACA,GAAG,UACU;CACb,MAAM,QAAQA,6BAAAA,gBAAgB;CAE9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,QAAQ,UAAT;EAAkB,UAAU,CAAC;EAAS,OAAO;~~YAC3C~~,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,WAAU;GACV,GAAI;GACJ,GAAI,UAAU,OAAO;GACrB,QAAQ,EAAE,iBAAiB,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA,EAAU;GAC3E,MAAK;GACL,eAAe,gBAAgB,UAAU;GACzC,GAAIC,wBAAAA,cAAc;IAAE;IAAK;IAAM;IAAW;IAAO;IAAQ;GAAK,CAAC;EAChE,CAAA;CACe,CAAA;AAEtB;AAEA,MAAM,cAAc"}
1	+ {"version":3,"file":"Curve.cjs","names":["useMantineTheme","Tooltip","Box","getThemeColor","getCurveProps"],"sources":["../../../../src/components/RingProgress/Curve/Curve.tsx"],"sourcesContent":["import { Box, GetStylesApi, getThemeColor, MantineColor, useMantineTheme } from '../../../core';\nimport { Tooltip } from '../../Tooltip';\nimport type { RingProgressFactory } from '../RingProgress';\nimport { getCurveProps } from './get-curve-props';\n\ninterface CurveProps extends React.ComponentProps<'circle'> {\n value?: number;\n size: number;\n offset: number;\n sum: number;\n thickness: number;\n lineRoundCaps: boolean \| undefined;\n root?: boolean;\n color?: MantineColor;\n tooltip?: React.ReactNode;\n getStyles: GetStylesApi<RingProgressFactory>;\n}\n\nexport function Curve({\n size,\n value,\n offset,\n sum,\n thickness,\n root,\n color,\n lineRoundCaps,\n tooltip,\n getStyles,\n display,\n ...others\n}: CurveProps) {\n const theme = useMantineTheme();\n\n return (\n <Tooltip.Floating disabled={!tooltip} label={tooltip}>\n <Box\n component=\"circle\"\n {...others}\n {...getStyles('curve')}\n __vars={{ '--curve-color': color ? getThemeColor(color, theme) : undefined }}\n fill=\"none\"\n strokeLinecap={lineRoundCaps ? 'round' : 'butt'}\n {...getCurveProps({ sum, size, thickness, value, offset, root })}\n />\n </Tooltip.Floating>\n );\n}\n\nCurve.displayName = '@mantine/core/Curve';\n"],"mappings":";;;;;;;;AAkBA,SAAgB,MAAM,EACpB,MACA,OACA,QACA,KACA,WACA,MACA,OACA,eACA,SACA,WACA,SACA,GAAG,UACU;CACb,MAAM,QAAQA,6BAAAA,gBAAgB;CAE9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,QAAQ,UAAT;EAAkB,UAAU,CAAC;EAAS,OAAO;EAC3C,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACE,WAAU;GACV,GAAI;GACJ,GAAI,UAAU,OAAO;GACrB,QAAQ,EAAE,iBAAiB,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA,EAAU;GAC3E,MAAK;GACL,eAAe,gBAAgB,UAAU;GACzC,GAAIC,wBAAAA,cAAc;IAAE;IAAK;IAAM;IAAW;IAAO;IAAQ;GAAK,CAAC;EAChE,CAAA;CACe,CAAA;AAEtB;AAEA,MAAM,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RingProgress.cjs","names":["createVarsResolver","rem","factory","useProps","useStyles","getCurves","Curve","Box","classes"],"sources":["../../../src/components/RingProgress/RingProgress.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n MantineColor,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Curve } from './Curve/Curve';\nimport { getCurves } from './get-curves/get-curves';\nimport classes from './RingProgress.module.css';\n\nfunction getClampedThickness(thickness: number, size: number) {\n return Math.min(thickness \|\| 12, (size \|\| 120) / 4);\n}\n\nexport interface RingProgressSection extends React.ComponentProps<'circle'>, DataAttributes {\n value: number;\n color: MantineColor;\n tooltip?: React.ReactNode;\n}\n\nexport type RingProgressStylesNames = 'root' \| 'svg' \| 'label' \| 'curve';\nexport type RingProgressCssVariables = {\n root: '--rp-size' \| '--rp-label-offset' \| '--rp-transition-duration';\n svg: '--rp-start-angle';\n};\n\nexport interface RingProgressProps\n extends BoxProps, StylesApiProps<RingProgressFactory>, ElementProps<'div'> {\n /** Label displayed in the center of the ring /\n label?: React.ReactNode;\n\n /* Ring thickness in pixels. Cannot exceed size / 4 and will be automatically clamped if necessary @default 12 /\n thickness?: number;\n\n /* Width and height of the progress ring @default 120 /\n size?: number;\n\n /* Applies rounded line caps to the start and end of visible sections @default false /\n roundCaps?: boolean;\n\n /\n Array of sections to display in the ring. Each section should have a `value` (0-100),\n * `color`, and optional `tooltip`. Sections can also receive any valid SVG circle element props.\n /\n sections: RingProgressSection[];\n\n /* Color of the unfilled portion of the ring (background). Defaults to gray-2 in light mode, dark-4 in dark mode /\n rootColor?: MantineColor;\n\n /* Transition duration in milliseconds for section value and color changes @default 0 /\n transitionDuration?: number;\n\n /* Gap between sections in degrees. Reduces the visual size of each section @default 0 /\n sectionGap?: number;\n\n /* Starting angle in degrees. 0 = right, 90 = bottom, 180 = left, 270 = top @default 270 /\n startAngle?: number;\n}\n\nexport type RingProgressFactory = Factory<{\n props: RingProgressProps;\n ref: HTMLDivElement;\n stylesNames: RingProgressStylesNames;\n vars: RingProgressCssVariables;\n}>;\n\nconst defaultProps = {\n size: 120,\n thickness: 12,\n startAngle: 270,\n} satisfies Partial<RingProgressProps>;\n\nconst varsResolver = createVarsResolver<RingProgressFactory>(\n (_, { size, thickness, transitionDuration, startAngle }) => ({\n root: {\n '--rp-size': rem(size),\n '--rp-label-offset': rem(thickness! 2),\n '--rp-transition-duration': transitionDuration ? `${transitionDuration}ms` : undefined,\n },\n svg: {\n '--rp-start-angle': `${startAngle}deg`,\n },\n })\n);\n\nexport const RingProgress = factory<RingProgressFactory>((_props) => {\n const props = useProps('RingProgress', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n label,\n sections,\n size,\n thickness,\n roundCaps,\n rootColor,\n transitionDuration,\n sectionGap,\n startAngle,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RingProgressFactory>({\n name: 'RingProgress',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const clampedThickness = getClampedThickness(thickness, size);\n\n const curves = getCurves({\n size,\n thickness: clampedThickness,\n sections,\n renderRoundedLineCaps: roundCaps,\n rootColor,\n sectionGap,\n }).map(({ data, sum, root, lineRoundCaps, offset }, index) => (\n <Curve\n {...data}\n key={index}\n size={size}\n thickness={clampedThickness}\n sum={sum}\n offset={offset}\n color={data?.color}\n root={root}\n lineRoundCaps={lineRoundCaps}\n getStyles={getStyles}\n />\n ));\n\n return (\n <Box {...getStyles('root')} size={size} {...others}>\n <svg {...getStyles('svg')} viewBox={`0 0 ${size} ${size}`}>\n {curves}\n </svg>\n {label && <div {...getStyles('label')}>{label}</div>}\n </Box>\n );\n});\n\nRingProgress.classes = classes;\nRingProgress.varsResolver = varsResolver;\nRingProgress.displayName = '@mantine/core/RingProgress';\n\nexport namespace RingProgress {\n export type Props = RingProgressProps;\n export type StylesNames = RingProgressStylesNames;\n export type Factory = RingProgressFactory;\n export type CssVariables = RingProgressCssVariables;\n export type Section = RingProgressSection;\n}\n"],"mappings":";;;;;;;;;;;;;AAkBA,SAAS,oBAAoB,WAAmB,MAAc;CAC5D,OAAO,KAAK,IAAI,aAAa,KAAK,QAAQ,OAAO,CAAC;AACpD;AAsDA,MAAM,eAAe;CACnB,MAAM;CACN,WAAW;CACX,YAAY;AACd;AAEA,MAAM,eAAeA,6BAAAA,oBAClB,GAAG,EAAE,MAAM,WAAW,oBAAoB,kBAAkB;CAC3D,MAAM;EACJ,aAAaC,YAAAA,IAAI,IAAI;EACrB,qBAAqBA,YAAAA,IAAI,YAAa,CAAC;EACvC,4BAA4B,qBAAqB,GAAG,mBAAmB,MAAM,KAAA;CAC/E;CACA,KAAK,EACH,oBAAoB,GAAG,WAAW,KACpC;AACF,EACF;AAEA,MAAa,eAAeC,gBAAAA,SAA8B,WAAW;CACnE,MAAM,QAAQC,kBAAAA,SAAS,gBAAgB,cAAc,MAAM;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,UACA,MACA,WACA,WACA,WACA,oBACA,YACA,YACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA+B;EAC/C,MAAM;EACN,SAAA,4BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,oBAAoB,WAAW,IAAI;CAE5D,MAAM,SAASC,mBAAAA,UAAU;EACvB;EACA,WAAW;EACX;EACA,uBAAuB;EACvB;EACA;CACF,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,eAAe,UAAU,UAClD,iBAAA,GAAA,MAAA,cAAA,CAACC,cAAAA,OAAD;EACE,GAAI;EACJ,KAAK;EACC;EACN,WAAW;EACN;EACG;EACR,OAAO,MAAM;EACP;EACS;EACJ;CACZ,CAAA,CACF;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,MAAM;EAAS;EAAM,GAAI;~~YAA5C~~,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI,UAAU,KAAK;GAAG,SAAS,OAAO,KAAK,GAAG;~~aAChD~~;EACE,CAAA,GACJ,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI,UAAU,OAAO;~~aAAI~~;EAAW,CAAA,CAChD;;AAET,CAAC;AAED,aAAa,UAAUC,4BAAAA;AACvB,aAAa,eAAe;AAC5B,aAAa,cAAc"}
1	+ {"version":3,"file":"RingProgress.cjs","names":["createVarsResolver","rem","factory","useProps","useStyles","getCurves","Curve","Box","classes"],"sources":["../../../src/components/RingProgress/RingProgress.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n MantineColor,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Curve } from './Curve/Curve';\nimport { getCurves } from './get-curves/get-curves';\nimport classes from './RingProgress.module.css';\n\nfunction getClampedThickness(thickness: number, size: number) {\n return Math.min(thickness \|\| 12, (size \|\| 120) / 4);\n}\n\nexport interface RingProgressSection extends React.ComponentProps<'circle'>, DataAttributes {\n value: number;\n color: MantineColor;\n tooltip?: React.ReactNode;\n}\n\nexport type RingProgressStylesNames = 'root' \| 'svg' \| 'label' \| 'curve';\nexport type RingProgressCssVariables = {\n root: '--rp-size' \| '--rp-label-offset' \| '--rp-transition-duration';\n svg: '--rp-start-angle';\n};\n\nexport interface RingProgressProps\n extends BoxProps, StylesApiProps<RingProgressFactory>, ElementProps<'div'> {\n /** Label displayed in the center of the ring /\n label?: React.ReactNode;\n\n /* Ring thickness in pixels. Cannot exceed size / 4 and will be automatically clamped if necessary @default 12 /\n thickness?: number;\n\n /* Width and height of the progress ring @default 120 /\n size?: number;\n\n /* Applies rounded line caps to the start and end of visible sections @default false /\n roundCaps?: boolean;\n\n /\n Array of sections to display in the ring. Each section should have a `value` (0-100),\n * `color`, and optional `tooltip`. Sections can also receive any valid SVG circle element props.\n /\n sections: RingProgressSection[];\n\n /* Color of the unfilled portion of the ring (background). Defaults to gray-2 in light mode, dark-4 in dark mode /\n rootColor?: MantineColor;\n\n /* Transition duration in milliseconds for section value and color changes @default 0 /\n transitionDuration?: number;\n\n /* Gap between sections in degrees. Reduces the visual size of each section @default 0 /\n sectionGap?: number;\n\n /* Starting angle in degrees. 0 = right, 90 = bottom, 180 = left, 270 = top @default 270 /\n startAngle?: number;\n}\n\nexport type RingProgressFactory = Factory<{\n props: RingProgressProps;\n ref: HTMLDivElement;\n stylesNames: RingProgressStylesNames;\n vars: RingProgressCssVariables;\n}>;\n\nconst defaultProps = {\n size: 120,\n thickness: 12,\n startAngle: 270,\n} satisfies Partial<RingProgressProps>;\n\nconst varsResolver = createVarsResolver<RingProgressFactory>(\n (_, { size, thickness, transitionDuration, startAngle }) => ({\n root: {\n '--rp-size': rem(size),\n '--rp-label-offset': rem(thickness! 2),\n '--rp-transition-duration': transitionDuration ? `${transitionDuration}ms` : undefined,\n },\n svg: {\n '--rp-start-angle': `${startAngle}deg`,\n },\n })\n);\n\nexport const RingProgress = factory<RingProgressFactory>((_props) => {\n const props = useProps('RingProgress', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n label,\n sections,\n size,\n thickness,\n roundCaps,\n rootColor,\n transitionDuration,\n sectionGap,\n startAngle,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RingProgressFactory>({\n name: 'RingProgress',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const clampedThickness = getClampedThickness(thickness, size);\n\n const curves = getCurves({\n size,\n thickness: clampedThickness,\n sections,\n renderRoundedLineCaps: roundCaps,\n rootColor,\n sectionGap,\n }).map(({ data, sum, root, lineRoundCaps, offset }, index) => (\n <Curve\n {...data}\n key={index}\n size={size}\n thickness={clampedThickness}\n sum={sum}\n offset={offset}\n color={data?.color}\n root={root}\n lineRoundCaps={lineRoundCaps}\n getStyles={getStyles}\n />\n ));\n\n return (\n <Box {...getStyles('root')} size={size} {...others}>\n <svg {...getStyles('svg')} viewBox={`0 0 ${size} ${size}`}>\n {curves}\n </svg>\n {label && <div {...getStyles('label')}>{label}</div>}\n </Box>\n );\n});\n\nRingProgress.classes = classes;\nRingProgress.varsResolver = varsResolver;\nRingProgress.displayName = '@mantine/core/RingProgress';\n\nexport namespace RingProgress {\n export type Props = RingProgressProps;\n export type StylesNames = RingProgressStylesNames;\n export type Factory = RingProgressFactory;\n export type CssVariables = RingProgressCssVariables;\n export type Section = RingProgressSection;\n}\n"],"mappings":";;;;;;;;;;;;;AAkBA,SAAS,oBAAoB,WAAmB,MAAc;CAC5D,OAAO,KAAK,IAAI,aAAa,KAAK,QAAQ,OAAO,CAAC;AACpD;AAsDA,MAAM,eAAe;CACnB,MAAM;CACN,WAAW;CACX,YAAY;AACd;AAEA,MAAM,eAAeA,6BAAAA,oBAClB,GAAG,EAAE,MAAM,WAAW,oBAAoB,kBAAkB;CAC3D,MAAM;EACJ,aAAaC,YAAAA,IAAI,IAAI;EACrB,qBAAqBA,YAAAA,IAAI,YAAa,CAAC;EACvC,4BAA4B,qBAAqB,GAAG,mBAAmB,MAAM,KAAA;CAC/E;CACA,KAAK,EACH,oBAAoB,GAAG,WAAW,KACpC;AACF,EACF;AAEA,MAAa,eAAeC,gBAAAA,SAA8B,WAAW;CACnE,MAAM,QAAQC,kBAAAA,SAAS,gBAAgB,cAAc,MAAM;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,UACA,MACA,WACA,WACA,WACA,oBACA,YACA,YACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA+B;EAC/C,MAAM;EACN,SAAA,4BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,oBAAoB,WAAW,IAAI;CAE5D,MAAM,SAASC,mBAAAA,UAAU;EACvB;EACA,WAAW;EACX;EACA,uBAAuB;EACvB;EACA;CACF,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,eAAe,UAAU,UAClD,iBAAA,GAAA,MAAA,cAAA,CAACC,cAAAA,OAAD;EACE,GAAI;EACJ,KAAK;EACC;EACN,WAAW;EACN;EACG;EACR,OAAO,MAAM;EACP;EACS;EACJ;CACZ,CAAA,CACF;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,MAAM;EAAS;EAAM,GAAI;EAA5C,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI,UAAU,KAAK;GAAG,SAAS,OAAO,KAAK,GAAG;GAChD,UAAA;EACE,CAAA,GACJ,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI,UAAU,OAAO;GAAI,UAAA;EAAW,CAAA,CAChD;;AAET,CAAC;AAED,aAAa,UAAUC,4BAAAA;AACvB,aAAa,eAAe;AAC5B,aAAa,cAAc"}

package/cjs/components/RollingNumber/DigitColumn.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DigitColumn.cjs","names":[],"sources":["../../../src/components/RollingNumber/DigitColumn.tsx"],"sourcesContent":["import { useStyles } from '../../core';\nimport type { RollingNumberFactory } from './RollingNumber';\n\nconst STRIP_CELLS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '1'];\n\ninterface DigitColumnProps {\n digit: string;\n getStyles: ReturnType<typeof useStyles<RollingNumberFactory>>;\n previousDigit: string \| null;\n empty?: boolean;\n valueDirection: 'up' \| 'down';\n}\n\nexport function DigitColumn({\n digit,\n getStyles,\n previousDigit,\n empty,\n valueDirection,\n}: DigitColumnProps) {\n const digitIndex = parseInt(digit, 10);\n const previousDigitIndex = previousDigit !== null ? parseInt(previousDigit, 10) : digitIndex;\n\n const wrapsForward =\n valueDirection === 'up' &&\n previousDigit !== null &&\n digitIndex < previousDigitIndex &&\n digitIndex <= 1;\n\n const animateToIndex = wrapsForward ? digitIndex + 10 : digitIndex;\n const direction = digitIndex >= previousDigitIndex ? 'up' : 'down';\n\n const digitStyles = getStyles('digit');\n const columnStyles = getStyles('digitColumn');\n\n return (\n <span {...digitStyles} data-empty={empty \|\| undefined} aria-hidden=\"true\">\n <span\n key={digit}\n {...columnStyles}\n style={{\n ...columnStyles.style,\n transform: `translateY(${-digitIndex}em)`,\n ['--rn-roll-from' as any]: `translateY(${-previousDigitIndex}em)`,\n ['--rn-roll-to' as any]: `translateY(${-animateToIndex}em)`,\n }}\n data-direction={direction}\n >\n {STRIP_CELLS.map((d, i) => (\n <span key={i}>{d}</span>\n ))}\n </span>\n </span>\n );\n}\n"],"mappings":";;;AAGA,MAAM,cAAc;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG;AAU/E,SAAgB,YAAY,EAC1B,OACA,WACA,eACA,OACA,kBACmB;CACnB,MAAM,aAAa,SAAS,OAAO,EAAE;CACrC,MAAM,qBAAqB,kBAAkB,OAAO,SAAS,eAAe,EAAE,IAAI;CAQlF,MAAM,iBALJ,mBAAmB,QACnB,kBAAkB,QAClB,aAAa,sBACb,cAAc,IAEsB,aAAa,KAAK;CACxD,MAAM,YAAY,cAAc,qBAAqB,OAAO;CAE5D,MAAM,cAAc,UAAU,OAAO;CACrC,MAAM,eAAe,UAAU,aAAa;CAE5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,GAAI;EAAa,cAAY,SAAS,KAAA;EAAW,eAAY;~~YACjE~~,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAEE,GAAI;GACJ,OAAO;IACL,GAAG,aAAa;IAChB,WAAW,cAAc,CAAC,WAAW;KACpC,mBAA0B,cAAc,CAAC,mBAAmB;KAC5D,iBAAwB,cAAc,CAAC,eAAe;GACzD;GACA,kBAAgB;~~aAEf~~,YAAY,KAAK,GAAG,MACnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAe,EAAQ,GAAZ,CAAY,CACxB;EACG,GAbC,KAaD;CACF,CAAA;AAEV"}
1	+ {"version":3,"file":"DigitColumn.cjs","names":[],"sources":["../../../src/components/RollingNumber/DigitColumn.tsx"],"sourcesContent":["import { useStyles } from '../../core';\nimport type { RollingNumberFactory } from './RollingNumber';\n\nconst STRIP_CELLS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '1'];\n\ninterface DigitColumnProps {\n digit: string;\n getStyles: ReturnType<typeof useStyles<RollingNumberFactory>>;\n previousDigit: string \| null;\n empty?: boolean;\n valueDirection: 'up' \| 'down';\n}\n\nexport function DigitColumn({\n digit,\n getStyles,\n previousDigit,\n empty,\n valueDirection,\n}: DigitColumnProps) {\n const digitIndex = parseInt(digit, 10);\n const previousDigitIndex = previousDigit !== null ? parseInt(previousDigit, 10) : digitIndex;\n\n const wrapsForward =\n valueDirection === 'up' &&\n previousDigit !== null &&\n digitIndex < previousDigitIndex &&\n digitIndex <= 1;\n\n const animateToIndex = wrapsForward ? digitIndex + 10 : digitIndex;\n const direction = digitIndex >= previousDigitIndex ? 'up' : 'down';\n\n const digitStyles = getStyles('digit');\n const columnStyles = getStyles('digitColumn');\n\n return (\n <span {...digitStyles} data-empty={empty \|\| undefined} aria-hidden=\"true\">\n <span\n key={digit}\n {...columnStyles}\n style={{\n ...columnStyles.style,\n transform: `translateY(${-digitIndex}em)`,\n ['--rn-roll-from' as any]: `translateY(${-previousDigitIndex}em)`,\n ['--rn-roll-to' as any]: `translateY(${-animateToIndex}em)`,\n }}\n data-direction={direction}\n >\n {STRIP_CELLS.map((d, i) => (\n <span key={i}>{d}</span>\n ))}\n </span>\n </span>\n );\n}\n"],"mappings":";;;AAGA,MAAM,cAAc;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG;AAU/E,SAAgB,YAAY,EAC1B,OACA,WACA,eACA,OACA,kBACmB;CACnB,MAAM,aAAa,SAAS,OAAO,EAAE;CACrC,MAAM,qBAAqB,kBAAkB,OAAO,SAAS,eAAe,EAAE,IAAI;CAQlF,MAAM,iBALJ,mBAAmB,QACnB,kBAAkB,QAClB,aAAa,sBACb,cAAc,IAEsB,aAAa,KAAK;CACxD,MAAM,YAAY,cAAc,qBAAqB,OAAO;CAE5D,MAAM,cAAc,UAAU,OAAO;CACrC,MAAM,eAAe,UAAU,aAAa;CAE5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,GAAI;EAAa,cAAY,SAAS,KAAA;EAAW,eAAY;EACjE,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAEE,GAAI;GACJ,OAAO;IACL,GAAG,aAAa;IAChB,WAAW,cAAc,CAAC,WAAW;KACpC,mBAA0B,cAAc,CAAC,mBAAmB;KAC5D,iBAAwB,cAAc,CAAC,eAAe;GACzD;GACA,kBAAgB;GAEf,UAAA,YAAY,KAAK,GAAG,MACnB,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAe,EAAQ,GAAZ,CAAY,CACxB;EACG,GAbC,KAaD;CACF,CAAA;AAEV"}

package/cjs/components/RollingNumber/RollingNumber.cjs CHANGED Viewed

@@ -44,17 +44,19 @@ const RollingNumber = require_factory.factory((_props) => {
 		previousValueRef.current = value;
 	});
 	const valueDirection = value >= previousValue ? "up" : "down";
+	const current = require_get_digit_parts.getDigitParts({
+		value,
+		decimalScale,
+		fixedDecimalScale
+	});
+	const prev = require_get_digit_parts.getDigitParts({
+		value: previousValue,
+		decimalScale,
+		fixedDecimalScale
+	});
 	const slots = require_get_render_slots.getRenderSlots({
-		current: require_get_digit_parts.getDigitParts({
-			value,
-			decimalScale,
-			fixedDecimalScale
-		}),
-		previous: require_get_digit_parts.getDigitParts({
-			value: previousValue,
-			decimalScale,
-			fixedDecimalScale
-		}),
+		current,
+		previous: prev,
 		prefix,
 		suffix,
 		decimalSeparator,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RollingNumber.cjs","names":["createVarsResolver","factory","useProps","useStyles","~~getRenderSlots~~","getDigitParts","buildValue","Box","DigitColumn","classes"],"sources":["../../../src/components/RollingNumber/RollingNumber.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { buildValue } from './build-value';\nimport { DigitColumn } from './DigitColumn';\nimport { getDigitParts } from './get-digit-parts';\nimport { getRenderSlots } from './get-render-slots';\nimport classes from './RollingNumber.module.css';\n\nexport type RollingNumberStylesNames = 'root' \| 'copyValue' \| 'digit' \| 'digitColumn' \| 'char';\nexport type RollingNumberCssVariables = {\n root: '--rn-duration' \| '--rn-timing-function';\n};\n\nexport interface RollingNumberProps\n extends BoxProps, StylesApiProps<RollingNumberFactory>, ElementProps<'div'> {\n /** Number value to display /\n value: number;\n\n /* Prefix added before the value /\n prefix?: string;\n\n /* Suffix added after the value /\n suffix?: string;\n\n /* Character used as a decimal separator @default '.' /\n decimalSeparator?: string;\n\n /* Character used to separate thousands, set to `true` for `,` @default false /\n thousandSeparator?: string \| boolean;\n\n /* Number of decimal places to display /\n decimalScale?: number;\n\n /* If set, trailing zeros are added to match `decimalScale` @default false /\n fixedDecimalScale?: boolean;\n\n /* Animation duration in milliseconds @default 600 /\n animationDuration?: number;\n\n /* CSS timing function for animation @default 'ease' /\n timingFunction?: string;\n\n /* If set, use tabular (monospace) numbers @default true /\n tabularNumbers?: boolean;\n\n /* If set, the root element acts as an `aria-live=\"polite\"` region (`role=\"status\"`) and screen readers announce every value change. When `false`, the root uses `role=\"img\"` so the current value is still accessible but updates are not announced. @default false */\n withLiveRegion?: boolean;\n}\n\nexport type RollingNumberFactory = Factory<{\n props: RollingNumberProps;\n ref: HTMLDivElement;\n stylesNames: RollingNumberStylesNames;\n vars: RollingNumberCssVariables;\n}>;\n\nconst defaultProps = {\n animationDuration: 600,\n timingFunction: 'ease',\n decimalSeparator: '.',\n tabularNumbers: true,\n} satisfies Partial<RollingNumberProps>;\n\nconst varsResolver = createVarsResolver<RollingNumberFactory>(\n (_, { animationDuration, timingFunction }) => ({\n root: {\n '--rn-duration': `${animationDuration}ms`,\n '--rn-timing-function': timingFunction,\n },\n })\n);\n\nexport const RollingNumber = factory<RollingNumberFactory>((_props) => {\n const props = useProps('RollingNumber', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n value,\n prefix,\n suffix,\n decimalSeparator,\n thousandSeparator,\n decimalScale,\n fixedDecimalScale,\n animationDuration,\n timingFunction,\n tabularNumbers,\n withLiveRegion,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RollingNumberFactory>({\n name: 'RollingNumber',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const previousValueRef = useRef(value);\n const previousValue = previousValueRef.current;\n\n useEffect(() => {\n previousValueRef.current = value;\n });\n\n const valueDirection: 'up' \| 'down' = value >= previousValue ? 'up' : 'down';\n\n const current = getDigitParts({ value, decimalScale, fixedDecimalScale });\n const prev = getDigitParts({ value: previousValue, decimalScale, fixedDecimalScale });\n\n const slots = getRenderSlots({\n current,\n previous: prev,\n prefix,\n suffix,\n decimalSeparator,\n thousandSeparator,\n });\n\n const accessibleValue = buildValue({\n value,\n prefix,\n suffix,\n decimalSeparator,\n thousandSeparator,\n decimalScale,\n fixedDecimalScale,\n });\n\n return (\n <Box\n {...getStyles('root')}\n mod={[{ 'tabular-numbers': tabularNumbers }, mod]}\n role={withLiveRegion ? 'status' : 'img'}\n aria-label={accessibleValue}\n {...others}\n >\n <span {...getStyles('copyValue')} aria-hidden=\"true\">\n {accessibleValue}\n </span>\n {slots.map((slot) => {\n if (slot.type === 'digit') {\n return (\n <DigitColumn\n key={slot.key}\n digit={slot.digit}\n previousDigit={slot.previousDigit}\n getStyles={getStyles}\n empty={slot.empty}\n valueDirection={valueDirection}\n />\n );\n }\n\n return (\n <span\n key={slot.key}\n {...getStyles('char')}\n data-empty={slot.empty \|\| undefined}\n aria-hidden=\"true\"\n >\n {slot.char}\n </span>\n );\n })}\n </Box>\n );\n});\n\nRollingNumber.classes = classes;\nRollingNumber.varsResolver = varsResolver;\nRollingNumber.displayName = '@mantine/core/RollingNumber';\n"],"mappings":";;;;;;;;;;;;;;AAkEA,MAAM,eAAe;CACnB,mBAAmB;CACnB,gBAAgB;CAChB,kBAAkB;CAClB,gBAAgB;AAClB;AAEA,MAAM,eAAeA,6BAAAA,oBAClB,GAAG,EAAE,mBAAmB,sBAAsB,EAC7C,MAAM;CACJ,iBAAiB,GAAG,kBAAkB;CACtC,wBAAwB;AAC1B,EACF,EACF;AAEA,MAAa,gBAAgBC,gBAAAA,SAA+B,WAAW;CACrE,MAAM,QAAQC,kBAAAA,SAAS,iBAAiB,cAAc,MAAM;CAC5D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,QACA,QACA,kBACA,mBACA,cACA,mBACA,mBACA,gBACA,gBACA,gBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAgC;EAChD,MAAM;EACN,SAAA,6BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,oBAAA,~~GAAA~~,~~MAAA~~,~~OAAA~~,~~CAA0B~~,KAAK;CACrC,MAAM,gBAAgB,iBAAiB;CAEvC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,iBAAiB,UAAU;CAC7B,CAAC;CAED,MAAM,iBAAgC,SAAS,gBAAgB,OAAO;~~CAKtE~~,MAAM,~~QAAQC~~,~~yBAAAA,eAAe;EAC3B,SAJcC,~~wBAAAA,cAAc;~~GAAE~~;~~GAAO~~;~~GAAc~~;~~EAAkB~~,~~CAI/D~~;~~EACN~~,~~UAJWA~~,wBAAAA,cAAc;~~GAAE~~,OAAO;~~GAAe~~;~~GAAc~~;~~EAAkB~~,~~CAIpE~~;~~EACb~~;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAkBC,oBAAAA,WAAW;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,GAAI,UAAU,MAAM;EACpB,KAAK,CAAC,EAAE,mBAAmB,eAAe,GAAG,GAAG;EAChD,MAAM,iBAAiB,WAAW;EAClC,cAAY;EACZ,GAAI;~~YALN~~,CAOE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,GAAI,UAAU,WAAW;GAAG,eAAY;~~aAC3C~~;EACG,CAAA,GACL,MAAM,KAAK,SAAS;GACnB,IAAI,KAAK,SAAS,SAChB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,aAAD;IAEE,OAAO,KAAK;IACZ,eAAe,KAAK;IACT;IACX,OAAO,KAAK;IACI;GACjB,GANM,KAAK,GAMX;GAIL,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAEE,GAAI,UAAU,MAAM;IACpB,cAAY,KAAK,SAAS,KAAA;IAC1B,eAAY;~~cAEX~~,KAAK;GACF,GANC,KAAK,GAMN;EAEV,CAAC,CACE;;AAET,CAAC;AAED,cAAc,UAAUC,6BAAAA;AACxB,cAAc,eAAe;AAC7B,cAAc,cAAc"}
1	+ {"version":3,"file":"RollingNumber.cjs","names":["createVarsResolver","factory","useProps","useStyles","useRef","getDigitParts","getRenderSlots","buildValue","Box","DigitColumn","classes"],"sources":["../../../src/components/RollingNumber/RollingNumber.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { buildValue } from './build-value';\nimport { DigitColumn } from './DigitColumn';\nimport { getDigitParts } from './get-digit-parts';\nimport { getRenderSlots } from './get-render-slots';\nimport classes from './RollingNumber.module.css';\n\nexport type RollingNumberStylesNames = 'root' \| 'copyValue' \| 'digit' \| 'digitColumn' \| 'char';\nexport type RollingNumberCssVariables = {\n root: '--rn-duration' \| '--rn-timing-function';\n};\n\nexport interface RollingNumberProps\n extends BoxProps, StylesApiProps<RollingNumberFactory>, ElementProps<'div'> {\n /** Number value to display /\n value: number;\n\n /* Prefix added before the value /\n prefix?: string;\n\n /* Suffix added after the value /\n suffix?: string;\n\n /* Character used as a decimal separator @default '.' /\n decimalSeparator?: string;\n\n /* Character used to separate thousands, set to `true` for `,` @default false /\n thousandSeparator?: string \| boolean;\n\n /* Number of decimal places to display /\n decimalScale?: number;\n\n /* If set, trailing zeros are added to match `decimalScale` @default false /\n fixedDecimalScale?: boolean;\n\n /* Animation duration in milliseconds @default 600 /\n animationDuration?: number;\n\n /* CSS timing function for animation @default 'ease' /\n timingFunction?: string;\n\n /* If set, use tabular (monospace) numbers @default true /\n tabularNumbers?: boolean;\n\n /* If set, the root element acts as an `aria-live=\"polite\"` region (`role=\"status\"`) and screen readers announce every value change. When `false`, the root uses `role=\"img\"` so the current value is still accessible but updates are not announced. @default false */\n withLiveRegion?: boolean;\n}\n\nexport type RollingNumberFactory = Factory<{\n props: RollingNumberProps;\n ref: HTMLDivElement;\n stylesNames: RollingNumberStylesNames;\n vars: RollingNumberCssVariables;\n}>;\n\nconst defaultProps = {\n animationDuration: 600,\n timingFunction: 'ease',\n decimalSeparator: '.',\n tabularNumbers: true,\n} satisfies Partial<RollingNumberProps>;\n\nconst varsResolver = createVarsResolver<RollingNumberFactory>(\n (_, { animationDuration, timingFunction }) => ({\n root: {\n '--rn-duration': `${animationDuration}ms`,\n '--rn-timing-function': timingFunction,\n },\n })\n);\n\nexport const RollingNumber = factory<RollingNumberFactory>((_props) => {\n const props = useProps('RollingNumber', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n value,\n prefix,\n suffix,\n decimalSeparator,\n thousandSeparator,\n decimalScale,\n fixedDecimalScale,\n animationDuration,\n timingFunction,\n tabularNumbers,\n withLiveRegion,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RollingNumberFactory>({\n name: 'RollingNumber',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const previousValueRef = useRef(value);\n const previousValue = previousValueRef.current;\n\n useEffect(() => {\n previousValueRef.current = value;\n });\n\n const valueDirection: 'up' \| 'down' = value >= previousValue ? 'up' : 'down';\n\n const current = getDigitParts({ value, decimalScale, fixedDecimalScale });\n const prev = getDigitParts({ value: previousValue, decimalScale, fixedDecimalScale });\n\n const slots = getRenderSlots({\n current,\n previous: prev,\n prefix,\n suffix,\n decimalSeparator,\n thousandSeparator,\n });\n\n const accessibleValue = buildValue({\n value,\n prefix,\n suffix,\n decimalSeparator,\n thousandSeparator,\n decimalScale,\n fixedDecimalScale,\n });\n\n return (\n <Box\n {...getStyles('root')}\n mod={[{ 'tabular-numbers': tabularNumbers }, mod]}\n role={withLiveRegion ? 'status' : 'img'}\n aria-label={accessibleValue}\n {...others}\n >\n <span {...getStyles('copyValue')} aria-hidden=\"true\">\n {accessibleValue}\n </span>\n {slots.map((slot) => {\n if (slot.type === 'digit') {\n return (\n <DigitColumn\n key={slot.key}\n digit={slot.digit}\n previousDigit={slot.previousDigit}\n getStyles={getStyles}\n empty={slot.empty}\n valueDirection={valueDirection}\n />\n );\n }\n\n return (\n <span\n key={slot.key}\n {...getStyles('char')}\n data-empty={slot.empty \|\| undefined}\n aria-hidden=\"true\"\n >\n {slot.char}\n </span>\n );\n })}\n </Box>\n );\n});\n\nRollingNumber.classes = classes;\nRollingNumber.varsResolver = varsResolver;\nRollingNumber.displayName = '@mantine/core/RollingNumber';\n"],"mappings":";;;;;;;;;;;;;;AAkEA,MAAM,eAAe;CACnB,mBAAmB;CACnB,gBAAgB;CAChB,kBAAkB;CAClB,gBAAgB;AAClB;AAEA,MAAM,eAAeA,6BAAAA,oBAClB,GAAG,EAAE,mBAAmB,sBAAsB,EAC7C,MAAM;CACJ,iBAAiB,GAAG,kBAAkB;CACtC,wBAAwB;AAC1B,EACF,EACF;AAEA,MAAa,gBAAgBC,gBAAAA,SAA+B,WAAW;CACrE,MAAM,QAAQC,kBAAAA,SAAS,iBAAiB,cAAc,MAAM;CAC5D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,QACA,QACA,kBACA,mBACA,cACA,mBACA,mBACA,gBACA,gBACA,gBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAgC;EAChD,MAAM;EACN,SAAA,6BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,oBAAA,GAAmBC,MAAAA,OAAAA,CAAO,KAAK;CACrC,MAAM,gBAAgB,iBAAiB;CAEvC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,iBAAiB,UAAU;CAC7B,CAAC;CAED,MAAM,iBAAgC,SAAS,gBAAgB,OAAO;CAEtE,MAAM,UAAUC,wBAAAA,cAAc;EAAE;EAAO;EAAc;CAAkB,CAAC;CACxE,MAAM,OAAOA,wBAAAA,cAAc;EAAE,OAAO;EAAe;EAAc;CAAkB,CAAC;CAEpF,MAAM,QAAQC,yBAAAA,eAAe;EAC3B;EACA,UAAU;EACV;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAkBC,oBAAAA,WAAW;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,GAAI,UAAU,MAAM;EACpB,KAAK,CAAC,EAAE,mBAAmB,eAAe,GAAG,GAAG;EAChD,MAAM,iBAAiB,WAAW;EAClC,cAAY;EACZ,GAAI;EALN,UAAA,CAOE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,GAAI,UAAU,WAAW;GAAG,eAAY;GAC3C,UAAA;EACG,CAAA,GACL,MAAM,KAAK,SAAS;GACnB,IAAI,KAAK,SAAS,SAChB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,aAAD;IAEE,OAAO,KAAK;IACZ,eAAe,KAAK;IACT;IACX,OAAO,KAAK;IACI;GACjB,GANM,KAAK,GAMX;GAIL,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAEE,GAAI,UAAU,MAAM;IACpB,cAAY,KAAK,SAAS,KAAA;IAC1B,eAAY;IAEX,UAAA,KAAK;GACF,GANC,KAAK,GAMN;EAEV,CAAC,CACE;;AAET,CAAC;AAED,cAAc,UAAUC,6BAAAA;AACxB,cAAc,eAAe;AAC7B,cAAc,cAAc"}

package/cjs/components/ScrollArea/ScrollArea.cjs CHANGED Viewed

@@ -58,12 +58,13 @@ const ScrollArea = require_factory.factory((_props) => {
 	});
 	const localViewportRef = (0, react.useRef)(null);
 	const [viewportElement, setViewportElement] = (0, react.useState)(null);
+	const viewportCallbackRef = (0, react.useCallback)((node) => {
+		setViewportElement((current) => current === node ? current : node);
+	}, []);
 	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([
 		viewportRef,
 		localViewportRef,
-		(0, react.useCallback)((node) => {
-			setViewportElement((current) => current === node ? current : node);
-		}, [])
+		viewportCallbackRef
 	]);
 	require_use_resize_observer.useResizeObserver(offsetScrollbars === "present" ? viewportElement : null, () => {
 		const element = localViewportRef.current;
@@ -151,12 +152,13 @@ const ScrollAreaAutosize = require_factory.factory((props) => {
 	const { children, classNames, styles, scrollbarSize, scrollHideDelay, type, dir, offsetScrollbars, overscrollBehavior, viewportRef, onScrollPositionChange, unstyled, variant, viewportProps, scrollbars, style, vars, onBottomReached, onTopReached, startScrollPosition, verticalScrollbarPosition, onOverflowChange, ...others } = require_use_props.useProps("ScrollAreaAutosize", defaultProps, props);
 	const viewportObserverRef = (0, react.useRef)(null);
 	const [viewportObserverElement, setViewportObserverElement] = (0, react.useState)(null);
+	const viewportObserverCallbackRef = (0, react.useCallback)((node) => {
+		setViewportObserverElement((current) => current === node ? current : node);
+	}, []);
 	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([
 		viewportRef,
 		viewportObserverRef,
-		(0, react.useCallback)((node) => {
-			setViewportObserverElement((current) => current === node ? current : node);
-		}, [])
+		viewportObserverCallbackRef
 	]);
 	const overflowingRef = (0, react.useRef)(false);
 	const didMountRef = (0, react.useRef)(false);