@mantine/core 9.5.2 → 9.6.1

package/esm/components/Rating/Rating.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.mjs","names":["useId","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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"}
+{"version":3,"file":"Rating.mjs","names":["useId","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/esm/components/Rating/RatingItem/RatingItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RatingItem.mjs","names":[],"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,MAAM,iBAAiB;CAC7B,MAAM,YAAY,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;CACrE,MAAM,aAAa,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI;CACxE,MAAM,EAAE,QAAQ,aAAa;CAE7B,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,CAAC,YACA,oBAAC,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,oBAAC,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,oBAAC,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,oBAAC,YAAD,EAAY,MAAK,OAAQ,CAAA,IACtC,cAAc,oBAAC,YAAD,EAAY,MAAK,QAAS,CAAA;EACzC,CAAA;CACF,CAAA,CACL,EAAA,CAAA;AAEN;AAEA,WAAW,cAAc"}
+{"version":3,"file":"RatingItem.mjs","names":[],"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,MAAM,iBAAiB;CAC7B,MAAM,YAAY,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI;CACrE,MAAM,aAAa,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI;CACxE,MAAM,EAAE,QAAQ,aAAa;CAE7B,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,CAAC,YACA,oBAAC,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,oBAAC,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,oBAAC,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,oBAAC,YAAD,EAAY,MAAK,OAAQ,CAAA,IACtC,cAAc,oBAAC,YAAD,EAAY,MAAK,QAAS,CAAA;EACzC,CAAA;CACF,CAAA,CACL,EAAA,CAAA;AAEN;AAEA,WAAW,cAAc"}

package/esm/components/Rating/StarSymbol/StarIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StarIcon.mjs","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,oBAAC,OAAD;EACE,SAAQ;EACR,eAAc;EACd,gBAAe;EACf,MAAK;EACL,OAAM;EACN,OAAO;GAAE;GAAO;GAAQ,GAAG;EAAM;EACjC,GAAI;YAEJ,oBAAC,QAAD,EAAM,GAAE,4GAA6G,CAAA;CAClH,CAAA;AAET;AAEA,SAAS,cAAc"}
+{"version":3,"file":"StarIcon.mjs","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,oBAAC,OAAD;EACE,SAAQ;EACR,eAAc;EACd,gBAAe;EACf,MAAK;EACL,OAAM;EACN,OAAO;GAAE;GAAO;GAAQ,GAAG;EAAM;EACjC,GAAI;EAEJ,UAAA,oBAAC,QAAD,EAAM,GAAE,4GAA6G,CAAA;CAClH,CAAA;AAET;AAEA,SAAS,cAAc"}

package/esm/components/Rating/StarSymbol/StarSymbol.mjs

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

package/esm/components/Rating/StarSymbol/StarSymbol.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StarSymbol.mjs","names":[],"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,oBAAC,UAAD;EAAU,GADL,iBACW,CAAC,CAAC,UAAU,YAAY;EAAG,eAAa,SAAS,UAAU,KAAA;CAAY,CAAA;AAChG;AAEA,WAAW,cAAc"}
+{"version":3,"file":"StarSymbol.mjs","names":[],"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,MAAM,iBAAiB;CAC7B,OAAO,oBAAC,UAAD;EAAU,GAAI,IAAI,UAAU,YAAY;EAAG,eAAa,SAAS,UAAU,KAAA;CAAY,CAAA;AAChG;AAEA,WAAW,cAAc"}

package/esm/components/RingProgress/Curve/Curve.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Curve.mjs","names":[],"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,QAAQ,gBAAgB;CAE9B,OACE,oBAAC,QAAQ,UAAT;EAAkB,UAAU,CAAC;EAAS,OAAO;YAC3C,oBAAC,KAAD;GACE,WAAU;GACV,GAAI;GACJ,GAAI,UAAU,OAAO;GACrB,QAAQ,EAAE,iBAAiB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA,EAAU;GAC3E,MAAK;GACL,eAAe,gBAAgB,UAAU;GACzC,GAAI,cAAc;IAAE;IAAK;IAAM;IAAW;IAAO;IAAQ;GAAK,CAAC;EAChE,CAAA;CACe,CAAA;AAEtB;AAEA,MAAM,cAAc"}
+{"version":3,"file":"Curve.mjs","names":[],"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,QAAQ,gBAAgB;CAE9B,OACE,oBAAC,QAAQ,UAAT;EAAkB,UAAU,CAAC;EAAS,OAAO;EAC3C,UAAA,oBAAC,KAAD;GACE,WAAU;GACV,GAAI;GACJ,GAAI,UAAU,OAAO;GACrB,QAAQ,EAAE,iBAAiB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA,EAAU;GAC3E,MAAK;GACL,eAAe,gBAAgB,UAAU;GACzC,GAAI,cAAc;IAAE;IAAK;IAAM;IAAW;IAAO;IAAQ;GAAK,CAAC;EAChE,CAAA;CACe,CAAA;AAEtB;AAEA,MAAM,cAAc"}

package/esm/components/RingProgress/RingProgress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RingProgress.mjs","names":["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,eAAe,oBAClB,GAAG,EAAE,MAAM,WAAW,oBAAoB,kBAAkB;CAC3D,MAAM;EACJ,aAAa,IAAI,IAAI;EACrB,qBAAqB,IAAI,YAAa,CAAC;EACvC,4BAA4B,qBAAqB,GAAG,mBAAmB,MAAM,KAAA;CAC/E;CACA,KAAK,EACH,oBAAoB,GAAG,WAAW,KACpC;AACF,EACF;AAEA,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,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,YAAY,UAA+B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,oBAAoB,WAAW,IAAI;CAE5D,MAAM,SAAS,UAAU;EACvB;EACA,WAAW;EACX;EACA,uBAAuB;EACvB;EACA;CACF,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,eAAe,UAAU,UAClD,8BAAC,OAAD;EACE,GAAI;EACJ,KAAK;EACC;EACN,WAAW;EACN;EACG;EACR,OAAO,MAAM;EACP;EACS;EACJ;CACZ,CAAA,CACF;CAED,OACE,qBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAS;EAAM,GAAI;YAA5C,CACE,oBAAC,OAAD;GAAK,GAAI,UAAU,KAAK;GAAG,SAAS,OAAO,KAAK,GAAG;aAChD;EACE,CAAA,GACJ,SAAS,oBAAC,OAAD;GAAK,GAAI,UAAU,OAAO;aAAI;EAAW,CAAA,CAChD;;AAET,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,eAAe;AAC5B,aAAa,cAAc"}
+{"version":3,"file":"RingProgress.mjs","names":["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,eAAe,oBAClB,GAAG,EAAE,MAAM,WAAW,oBAAoB,kBAAkB;CAC3D,MAAM;EACJ,aAAa,IAAI,IAAI;EACrB,qBAAqB,IAAI,YAAa,CAAC;EACvC,4BAA4B,qBAAqB,GAAG,mBAAmB,MAAM,KAAA;CAC/E;CACA,KAAK,EACH,oBAAoB,GAAG,WAAW,KACpC;AACF,EACF;AAEA,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,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,YAAY,UAA+B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,oBAAoB,WAAW,IAAI;CAE5D,MAAM,SAAS,UAAU;EACvB;EACA,WAAW;EACX;EACA,uBAAuB;EACvB;EACA;CACF,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,eAAe,UAAU,UAClD,8BAAC,OAAD;EACE,GAAI;EACJ,KAAK;EACC;EACN,WAAW;EACN;EACG;EACR,OAAO,MAAM;EACP;EACS;EACJ;CACZ,CAAA,CACF;CAED,OACE,qBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAS;EAAM,GAAI;EAA5C,UAAA,CACE,oBAAC,OAAD;GAAK,GAAI,UAAU,KAAK;GAAG,SAAS,OAAO,KAAK,GAAG;GAChD,UAAA;EACE,CAAA,GACJ,SAAS,oBAAC,OAAD;GAAK,GAAI,UAAU,OAAO;GAAI,UAAA;EAAW,CAAA,CAChD;;AAET,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,eAAe;AAC5B,aAAa,cAAc"}

package/esm/components/RollingNumber/DigitColumn.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DigitColumn.mjs","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,oBAAC,QAAD;EAAM,GAAI;EAAa,cAAY,SAAS,KAAA;EAAW,eAAY;YACjE,oBAAC,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,oBAAC,QAAD,EAAA,UAAe,EAAQ,GAAZ,CAAY,CACxB;EACG,GAbC,KAaD;CACF,CAAA;AAEV"}
+{"version":3,"file":"DigitColumn.mjs","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,oBAAC,QAAD;EAAM,GAAI;EAAa,cAAY,SAAS,KAAA;EAAW,eAAY;EACjE,UAAA,oBAAC,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,oBAAC,QAAD,EAAA,UAAe,EAAQ,GAAZ,CAAY,CACxB;EACG,GAbC,KAaD;CACF,CAAA;AAEV"}

package/esm/components/RollingNumber/RollingNumber.mjs

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

package/esm/components/RollingNumber/RollingNumber.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RollingNumber.mjs","names":["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,eAAe,oBAClB,GAAG,EAAE,mBAAmB,sBAAsB,EAC7C,MAAM;CACJ,iBAAiB,GAAG,kBAAkB;CACtC,wBAAwB;AAC1B,EACF,EACF;AAEA,MAAa,gBAAgB,SAA+B,WAAW;CACrE,MAAM,QAAQ,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,YAAY,UAAgC;EAChD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,OAAO,KAAK;CACrC,MAAM,gBAAgB,iBAAiB;CAEvC,gBAAgB;EACd,iBAAiB,UAAU;CAC7B,CAAC;CAED,MAAM,iBAAgC,SAAS,gBAAgB,OAAO;CAKtE,MAAM,QAAQ,eAAe;EAC3B,SAJc,cAAc;GAAE;GAAO;GAAc;EAAkB,CAI/D;EACN,UAJW,cAAc;GAAE,OAAO;GAAe;GAAc;EAAkB,CAIpE;EACb;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAkB,WAAW;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,KAAD;EACE,GAAI,UAAU,MAAM;EACpB,KAAK,CAAC,EAAE,mBAAmB,eAAe,GAAG,GAAG;EAChD,MAAM,iBAAiB,WAAW;EAClC,cAAY;EACZ,GAAI;YALN,CAOE,oBAAC,QAAD;GAAM,GAAI,UAAU,WAAW;GAAG,eAAY;aAC3C;EACG,CAAA,GACL,MAAM,KAAK,SAAS;GACnB,IAAI,KAAK,SAAS,SAChB,OACE,oBAAC,aAAD;IAEE,OAAO,KAAK;IACZ,eAAe,KAAK;IACT;IACX,OAAO,KAAK;IACI;GACjB,GANM,KAAK,GAMX;GAIL,OACE,oBAAC,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,UAAUA;AACxB,cAAc,eAAe;AAC7B,cAAc,cAAc"}
+{"version":3,"file":"RollingNumber.mjs","names":["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,eAAe,oBAClB,GAAG,EAAE,mBAAmB,sBAAsB,EAC7C,MAAM;CACJ,iBAAiB,GAAG,kBAAkB;CACtC,wBAAwB;AAC1B,EACF,EACF;AAEA,MAAa,gBAAgB,SAA+B,WAAW;CACrE,MAAM,QAAQ,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,YAAY,UAAgC;EAChD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,OAAO,KAAK;CACrC,MAAM,gBAAgB,iBAAiB;CAEvC,gBAAgB;EACd,iBAAiB,UAAU;CAC7B,CAAC;CAED,MAAM,iBAAgC,SAAS,gBAAgB,OAAO;CAEtE,MAAM,UAAU,cAAc;EAAE;EAAO;EAAc;CAAkB,CAAC;CACxE,MAAM,OAAO,cAAc;EAAE,OAAO;EAAe;EAAc;CAAkB,CAAC;CAEpF,MAAM,QAAQ,eAAe;EAC3B;EACA,UAAU;EACV;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAkB,WAAW;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,qBAAC,KAAD;EACE,GAAI,UAAU,MAAM;EACpB,KAAK,CAAC,EAAE,mBAAmB,eAAe,GAAG,GAAG;EAChD,MAAM,iBAAiB,WAAW;EAClC,cAAY;EACZ,GAAI;EALN,UAAA,CAOE,oBAAC,QAAD;GAAM,GAAI,UAAU,WAAW;GAAG,eAAY;GAC3C,UAAA;EACG,CAAA,GACL,MAAM,KAAK,SAAS;GACnB,IAAI,KAAK,SAAS,SAChB,OACE,oBAAC,aAAD;IAEE,OAAO,KAAK;IACZ,eAAe,KAAK;IACT;IACX,OAAO,KAAK;IACI;GACjB,GANM,KAAK,GAMX;GAIL,OACE,oBAAC,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,UAAUA;AACxB,cAAc,eAAe;AAC7B,cAAc,cAAc"}

package/esm/components/ScrollArea/ScrollArea.mjs

@@ -58,12 +58,13 @@ const ScrollArea = factory((_props) => {
 	});
 	const localViewportRef = useRef(null);
 	const [viewportElement, setViewportElement] = useState(null);
+	const viewportCallbackRef = useCallback((node) => {
+		setViewportElement((current) => current === node ? current : node);
+	}, []);
 	const combinedViewportRef = useMergeRefs([
 		viewportRef,
 		localViewportRef,
-		useCallback((node) => {
-			setViewportElement((current) => current === node ? current : node);
-		}, [])
+		viewportCallbackRef
 	]);
 	useResizeObserver(offsetScrollbars === "present" ? viewportElement : null, () => {
 		const element = localViewportRef.current;
@@ -151,12 +152,13 @@ const ScrollAreaAutosize = 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 } = useProps("ScrollAreaAutosize", defaultProps, props);
 	const viewportObserverRef = useRef(null);
 	const [viewportObserverElement, setViewportObserverElement] = useState(null);
+	const viewportObserverCallbackRef = useCallback((node) => {
+		setViewportObserverElement((current) => current === node ? current : node);
+	}, []);
 	const combinedViewportRef = useMergeRefs([
 		viewportRef,
 		viewportObserverRef,
-		useCallback((node) => {
-			setViewportObserverElement((current) => current === node ? current : node);
-		}, [])
+		viewportObserverCallbackRef
 	]);
 	const overflowingRef = useRef(false);
 	const didMountRef = useRef(false);

package/esm/components/ScrollArea/ScrollArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.mjs","names":["classes"],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { useCallback, useEffectEvent, useRef, useState } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ScrollAreaCorner } from './ScrollAreaCorner/ScrollAreaCorner';\nimport { ScrollAreaRoot } from './ScrollAreaRoot/ScrollAreaRoot';\nimport { ScrollAreaScrollbar } from './ScrollAreaScrollbar/ScrollAreaScrollbar';\nimport { ScrollAreaThumb } from './ScrollAreaThumb/ScrollAreaThumb';\nimport { ScrollAreaViewport } from './ScrollAreaViewport/ScrollAreaViewport';\nimport { useResizeObserver } from './use-resize-observer';\nimport classes from './ScrollArea.module.css';\n\nexport type ScrollAreaStylesNames =\n  | 'root'\n  | 'viewport'\n  | 'scrollbar'\n  | 'thumb'\n  | 'corner'\n  | 'content';\n\nexport type ScrollAreaCssVariables = {\n  root: '--scrollarea-scrollbar-size';\n};\n\nexport interface ScrollAreaProps\n  extends BoxProps, StylesApiProps<ScrollAreaFactory>, ElementProps<'div'> {\n  /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem) */\n  scrollbarSize?: number | string;\n\n  /**\n   * Defines scrollbars behavior\n   * - `'hover'` – scrollbars visible on hover (default)\n   * - `'scroll'` – scrollbars visible during scrolling\n   * - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto)\n   * - `'always'` – scrollbars always visible, even when content doesn't overflow\n   * - `'never'` – scrollbars always hidden\n   * @default 'hover'\n   * */\n  type?: 'auto' | 'always' | 'scroll' | 'hover' | 'never';\n\n  /** Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll` @default 1000 */\n  scrollHideDelay?: number;\n\n  /**\n   * Axis at which scrollbars must be rendered\n   * - `'x'` - horizontal scrollbar only\n   * - `'y'` - vertical scrollbar only\n   * - `'xy'` - both scrollbars\n   * - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)\n   * @default 'xy'\n   */\n  scrollbars?: 'x' | 'y' | 'xy' | false;\n\n  /**\n   * Determines whether scrollbars should be offset with padding on given axis\n   * - `true` - adds padding to offset both scrollbars (always)\n   * - `'x'` - adds padding to offset horizontal scrollbar (always)\n   * - `'y'` - adds padding to offset vertical scrollbar (always)\n   * - `'present'` - adds padding only when scrollbars are visible (dynamic)\n   * @default false\n   */\n  offsetScrollbars?: boolean | 'x' | 'y' | 'present';\n\n  /** Assigns viewport element (scrollable container) ref */\n  viewportRef?: React.Ref<HTMLDivElement>;\n\n  /** Props passed down to the viewport element */\n  viewportProps?: React.ComponentProps<'div'>;\n\n  /** Called with current position (`x` and `y` coordinates) when viewport is scrolled */\n  onScrollPositionChange?: (position: { x: number; y: number }) => void;\n\n  /**\n   * Called when scrollarea is scrolled to the bottom (within 0.8px tolerance for sub-pixel rendering)\n   */\n  onBottomReached?: () => void;\n\n  /** Called when scrollarea is scrolled all the way to the top */\n  onTopReached?: () => void;\n\n  /** Called when scrollarea is scrolled to the left (within 0.8px tolerance for sub-pixel rendering) */\n  onLeftReached?: () => void;\n\n  /** Called when scrollarea is scrolled to the right (within 0.8px tolerance for sub-pixel rendering) */\n  onRightReached?: () => void;\n\n  /** Defines `overscroll-behavior` of the viewport */\n  overscrollBehavior?: React.CSSProperties['overscrollBehavior'];\n\n  /** Initial scroll position set on mount */\n  startScrollPosition?: { x?: number; y?: number };\n\n  /**\n   * Pins the vertical scrollbar to a physical side (`left` or `right`) regardless of direction.\n   * By default, the scrollbar follows the inline-end edge (right in LTR, left in RTL).\n   */\n  verticalScrollbarPosition?: 'left' | 'right';\n}\n\nexport interface ScrollAreaAutosizeProps extends ScrollAreaProps {\n  /** Called when content overflows due to max-height, making the container scrollable */\n  onOverflowChange?: (overflowing: boolean) => void;\n}\n\nexport type ScrollAreaFactory = Factory<{\n  props: ScrollAreaProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaStylesNames;\n  vars: ScrollAreaCssVariables;\n  staticComponents: {\n    Autosize: typeof ScrollAreaAutosize;\n  };\n}>;\n\nexport type ScrollAreaAutosizeFactory = Factory<{\n  props: ScrollAreaAutosizeProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaStylesNames;\n  vars: ScrollAreaCssVariables;\n}>;\n\nconst defaultProps = {\n  scrollHideDelay: 1000,\n  type: 'hover',\n  scrollbars: 'xy',\n} satisfies Partial<ScrollAreaProps>;\n\nconst varsResolver = createVarsResolver<ScrollAreaFactory>(\n  (_, { scrollbarSize, overscrollBehavior, scrollbars }) => {\n    let overrideOverscrollBehavior = overscrollBehavior;\n\n    if (overscrollBehavior && scrollbars) {\n      if (scrollbars === 'x') {\n        overrideOverscrollBehavior = `${overscrollBehavior} auto`;\n      } else if (scrollbars === 'y') {\n        overrideOverscrollBehavior = `auto ${overscrollBehavior}`;\n      }\n    }\n\n    return {\n      root: {\n        '--scrollarea-scrollbar-size': rem(scrollbarSize),\n        '--scrollarea-over-scroll-behavior': overrideOverscrollBehavior,\n      },\n    };\n  }\n);\n\nexport const ScrollArea = factory<ScrollAreaFactory>((_props) => {\n  const props = useProps('ScrollArea', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    scrollbarSize,\n    vars,\n    type,\n    scrollHideDelay,\n    viewportProps,\n    viewportRef,\n    onScrollPositionChange,\n    children,\n    offsetScrollbars,\n    scrollbars,\n    onBottomReached,\n    onTopReached,\n    onLeftReached,\n    onRightReached,\n    overscrollBehavior,\n    startScrollPosition,\n    verticalScrollbarPosition,\n    attributes,\n    ...others\n  } = props;\n\n  const [scrollbarHovered, setScrollbarHovered] = useState(false);\n  const [verticalThumbVisible, setVerticalThumbVisible] = useState(false);\n  const [horizontalThumbVisible, setHorizontalThumbVisible] = useState(false);\n\n  // Refs to track previous boundary states\n  const prevAtTopRef = useRef(true);\n  const prevAtBottomRef = useRef(false);\n  const prevAtLeftRef = useRef(true);\n  const prevAtRightRef = useRef(false);\n\n  const getStyles = useStyles<ScrollAreaFactory>({\n    name: 'ScrollArea',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const localViewportRef = useRef<HTMLDivElement>(null);\n  const [viewportElement, setViewportElement] = useState<HTMLDivElement | null>(null);\n  const viewportCallbackRef = useCallback((node: HTMLDivElement | null) => {\n    setViewportElement((current) => (current === node ? current : node));\n  }, []);\n  const combinedViewportRef = useMergeRefs([viewportRef, localViewportRef, viewportCallbackRef]);\n\n  useResizeObserver(offsetScrollbars === 'present' ? viewportElement : null, () => {\n    const element = localViewportRef.current;\n    if (element) {\n      setVerticalThumbVisible(element.scrollHeight > element.clientHeight);\n      setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);\n    }\n  });\n\n  useIsomorphicEffect(() => {\n    if (startScrollPosition && localViewportRef.current) {\n      localViewportRef.current.scrollTo({\n        left: startScrollPosition.x ?? 0,\n        top: startScrollPosition.y ?? 0,\n      });\n    }\n  }, []);\n\n  return (\n    <ScrollAreaRoot\n      getStyles={getStyles}\n      type={type === 'never' ? 'always' : type}\n      scrollHideDelay={scrollHideDelay}\n      scrollbars={scrollbars}\n      {...getStyles('root')}\n      {...others}\n    >\n      <ScrollAreaViewport\n        {...viewportProps}\n        {...getStyles('viewport', { style: viewportProps?.style })}\n        ref={combinedViewportRef}\n        data-offset-scrollbars={offsetScrollbars === true ? 'xy' : offsetScrollbars || undefined}\n        data-scrollbars={scrollbars || undefined}\n        data-vertical-scrollbar-position={verticalScrollbarPosition || undefined}\n        data-horizontal-hidden={\n          offsetScrollbars === 'present' && !horizontalThumbVisible ? 'true' : undefined\n        }\n        data-vertical-hidden={\n          offsetScrollbars === 'present' && !verticalThumbVisible ? 'true' : undefined\n        }\n        onScroll={(e) => {\n          viewportProps?.onScroll?.(e);\n          onScrollPositionChange?.({ x: e.currentTarget.scrollLeft, y: e.currentTarget.scrollTop });\n          const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n            e.currentTarget;\n\n          // Vertical boundaries\n          // threshold of -0.8 is required for some browsers that use sub-pixel rendering, specifically when zoomed out.\n          const isAtBottom = scrollTop - (scrollHeight - clientHeight) >= -0.8;\n          const isAtTop = scrollTop === 0;\n\n          if (isAtBottom && !prevAtBottomRef.current) {\n            onBottomReached?.();\n          }\n          if (isAtTop && !prevAtTopRef.current) {\n            onTopReached?.();\n          }\n\n          prevAtBottomRef.current = isAtBottom;\n          prevAtTopRef.current = isAtTop;\n\n          // Horizontal boundaries\n          const isAtRight = scrollLeft - (scrollWidth - clientWidth) >= -0.8;\n          const isAtLeft = scrollLeft === 0;\n\n          if (isAtRight && !prevAtRightRef.current) {\n            onRightReached?.();\n          }\n          if (isAtLeft && !prevAtLeftRef.current) {\n            onLeftReached?.();\n          }\n\n          prevAtRightRef.current = isAtRight;\n          prevAtLeftRef.current = isAtLeft;\n        }}\n      >\n        {children}\n      </ScrollAreaViewport>\n\n      {(scrollbars === 'xy' || scrollbars === 'x') && (\n        <ScrollAreaScrollbar\n          {...getStyles('scrollbar')}\n          orientation=\"horizontal\"\n          data-vertical-scrollbar-position={verticalScrollbarPosition || undefined}\n          data-hidden={\n            type === 'never' || (offsetScrollbars === 'present' && !horizontalThumbVisible)\n              ? true\n              : undefined\n          }\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <ScrollAreaThumb {...getStyles('thumb')} />\n        </ScrollAreaScrollbar>\n      )}\n\n      {(scrollbars === 'xy' || scrollbars === 'y') && (\n        <ScrollAreaScrollbar\n          {...getStyles('scrollbar')}\n          orientation=\"vertical\"\n          data-vertical-scrollbar-position={verticalScrollbarPosition || undefined}\n          data-hidden={\n            type === 'never' || (offsetScrollbars === 'present' && !verticalThumbVisible)\n              ? true\n              : undefined\n          }\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <ScrollAreaThumb {...getStyles('thumb')} />\n        </ScrollAreaScrollbar>\n      )}\n\n      <ScrollAreaCorner\n        {...getStyles('corner')}\n        data-vertical-scrollbar-position={verticalScrollbarPosition || undefined}\n        data-hovered={scrollbarHovered || undefined}\n        data-hidden={type === 'never' || undefined}\n      />\n    </ScrollAreaRoot>\n  );\n});\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n\nexport const ScrollAreaAutosize = factory<ScrollAreaAutosizeFactory>((props) => {\n  const {\n    children,\n    classNames,\n    styles,\n    scrollbarSize,\n    scrollHideDelay,\n    type,\n    dir,\n    offsetScrollbars,\n    overscrollBehavior,\n    viewportRef,\n    onScrollPositionChange,\n    unstyled,\n    variant,\n    viewportProps,\n    scrollbars,\n    style,\n    vars,\n    onBottomReached,\n    onTopReached,\n    startScrollPosition,\n    verticalScrollbarPosition,\n    onOverflowChange,\n    ...others\n  } = useProps('ScrollAreaAutosize', defaultProps, props as ScrollAreaAutosizeProps);\n\n  // Overflow detection (Autosize-only)\n  const viewportObserverRef = useRef<HTMLDivElement>(null);\n  const [viewportObserverElement, setViewportObserverElement] = useState<HTMLDivElement | null>(\n    null\n  );\n  const viewportObserverCallbackRef = useCallback((node: HTMLDivElement | null) => {\n    setViewportObserverElement((current) => (current === node ? current : node));\n  }, []);\n  const combinedViewportRef = useMergeRefs([\n    viewportRef,\n    viewportObserverRef,\n    viewportObserverCallbackRef,\n  ]);\n\n  const overflowingRef = useRef(false);\n  const didMountRef = useRef(false);\n\n  const handleOverflowCheck = useEffectEvent(() => {\n    const el = viewportObserverRef.current;\n    if (!el || !onOverflowChange) {\n      return;\n    }\n\n    const isOverflowing = el.scrollHeight > el.clientHeight;\n\n    if (isOverflowing !== overflowingRef.current) {\n      if (didMountRef.current) {\n        onOverflowChange(isOverflowing);\n      } else {\n        didMountRef.current = true;\n        if (isOverflowing) {\n          onOverflowChange(true);\n        }\n      }\n\n      overflowingRef.current = isOverflowing;\n    }\n  });\n\n  useResizeObserver(onOverflowChange ? viewportObserverElement : null, handleOverflowCheck);\n\n  return (\n    <Box {...others} variant={variant} style={[{ display: 'flex', overflow: 'hidden' }, style]}>\n      <Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          flex: 1,\n          overflow: 'hidden',\n          ...(scrollbars === 'y' && { minWidth: 0 }),\n          ...(scrollbars === 'x' && { minHeight: 0 }),\n          ...(scrollbars === 'xy' && { minWidth: 0, minHeight: 0 }),\n          ...(scrollbars === false && { minWidth: 0, minHeight: 0 }),\n        }}\n      >\n        <ScrollArea\n          classNames={classNames}\n          styles={styles}\n          scrollHideDelay={scrollHideDelay}\n          scrollbarSize={scrollbarSize}\n          type={type}\n          dir={dir}\n          offsetScrollbars={offsetScrollbars}\n          overscrollBehavior={overscrollBehavior}\n          viewportRef={combinedViewportRef}\n          onScrollPositionChange={onScrollPositionChange}\n          unstyled={unstyled}\n          variant={variant}\n          viewportProps={viewportProps}\n          vars={vars}\n          scrollbars={scrollbars}\n          onBottomReached={onBottomReached}\n          onTopReached={onTopReached}\n          startScrollPosition={startScrollPosition}\n          verticalScrollbarPosition={verticalScrollbarPosition}\n          data-autosize=\"true\"\n        >\n          {children}\n        </ScrollArea>\n      </Box>\n    </Box>\n  );\n});\n\nScrollArea.classes = classes;\nScrollArea.varsResolver = varsResolver;\nScrollAreaAutosize.displayName = '@mantine/core/ScrollAreaAutosize';\nScrollAreaAutosize.classes = classes;\nScrollArea.Autosize = ScrollAreaAutosize;\n\nexport namespace ScrollArea {\n  export type Props = ScrollAreaProps;\n  export type AutosizeProps = ScrollAreaAutosizeProps;\n  export type StylesNames = ScrollAreaStylesNames;\n  export type CssVariables = ScrollAreaCssVariables;\n  export type Factory = ScrollAreaFactory;\n\n  export namespace Autosize {\n    export type Props = ScrollAreaAutosizeProps;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ScrollArea.mjs","names":["classes"],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { useCallback, useEffectEvent, useRef, useState } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ScrollAreaCorner } from './ScrollAreaCorner/ScrollAreaCorner';\nimport { ScrollAreaRoot } from './ScrollAreaRoot/ScrollAreaRoot';\nimport { ScrollAreaScrollbar } from './ScrollAreaScrollbar/ScrollAreaScrollbar';\nimport { ScrollAreaThumb } from './ScrollAreaThumb/ScrollAreaThumb';\nimport { ScrollAreaViewport } from './ScrollAreaViewport/ScrollAreaViewport';\nimport { useResizeObserver } from './use-resize-observer';\nimport classes from './ScrollArea.module.css';\n\nexport type ScrollAreaStylesNames =\n  | 'root'\n  | 'viewport'\n  | 'scrollbar'\n  | 'thumb'\n  | 'corner'\n  | 'content';\n\nexport type ScrollAreaCssVariables = {\n  root: '--scrollarea-scrollbar-size';\n};\n\nexport interface ScrollAreaProps\n  extends BoxProps, StylesApiProps<ScrollAreaFactory>, ElementProps<'div'> {\n  /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem) */\n  scrollbarSize?: number | string;\n\n  /**\n   * Defines scrollbars behavior\n   * - `'hover'` – scrollbars visible on hover (default)\n   * - `'scroll'` – scrollbars visible during scrolling\n   * - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto)\n   * - `'always'` – scrollbars always visible, even when content doesn't overflow\n   * - `'never'` – scrollbars always hidden\n   * @default 'hover'\n   * */\n  type?: 'auto' | 'always' | 'scroll' | 'hover' | 'never';\n\n  /** Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll` @default 1000 */\n  scrollHideDelay?: number;\n\n  /**\n   * Axis at which scrollbars must be rendered\n   * - `'x'` - horizontal scrollbar only\n   * - `'y'` - vertical scrollbar only\n   * - `'xy'` - both scrollbars\n   * - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)\n   * @default 'xy'\n   */\n  scrollbars?: 'x' | 'y' | 'xy' | false;\n\n  /**\n   * Determines whether scrollbars should be offset with padding on given axis\n   * - `true` - adds padding to offset both scrollbars (always)\n   * - `'x'` - adds padding to offset horizontal scrollbar (always)\n   * - `'y'` - adds padding to offset vertical scrollbar (always)\n   * - `'present'` - adds padding only when scrollbars are visible (dynamic)\n   * @default false\n   */\n  offsetScrollbars?: boolean | 'x' | 'y' | 'present';\n\n  /** Assigns viewport element (scrollable container) ref */\n  viewportRef?: React.Ref<HTMLDivElement>;\n\n  /** Props passed down to the viewport element */\n  viewportProps?: React.ComponentProps<'div'>;\n\n  /** Called with current position (`x` and `y` coordinates) when viewport is scrolled */\n  onScrollPositionChange?: (position: { x: number; y: number }) => void;\n\n  /**\n   * Called when scrollarea is scrolled to the bottom (within 0.8px tolerance for sub-pixel rendering)\n   */\n  onBottomReached?: () => void;\n\n  /** Called when scrollarea is scrolled all the way to the top */\n  onTopReached?: () => void;\n\n  /** Called when scrollarea is scrolled to the left (within 0.8px tolerance for sub-pixel rendering) */\n  onLeftReached?: () => void;\n\n  /** Called when scrollarea is scrolled to the right (within 0.8px tolerance for sub-pixel rendering) */\n  onRightReached?: () => void;\n\n  /** Defines `overscroll-behavior` of the viewport */\n  overscrollBehavior?: React.CSSProperties['overscrollBehavior'];\n\n  /** Initial scroll position set on mount */\n  startScrollPosition?: { x?: number; y?: number };\n\n  /**\n   * Pins the vertical scrollbar to a physical side (`left` or `right`) regardless of direction.\n   * By default, the scrollbar follows the inline-end edge (right in LTR, left in RTL).\n   */\n  verticalScrollbarPosition?: 'left' | 'right';\n}\n\nexport interface ScrollAreaAutosizeProps extends ScrollAreaProps {\n  /** Called when content overflows due to max-height, making the container scrollable */\n  onOverflowChange?: (overflowing: boolean) => void;\n}\n\nexport type ScrollAreaFactory = Factory<{\n  props: ScrollAreaProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaStylesNames;\n  vars: ScrollAreaCssVariables;\n  staticComponents: {\n    Autosize: typeof ScrollAreaAutosize;\n  };\n}>;\n\nexport type ScrollAreaAutosizeFactory = Factory<{\n  props: ScrollAreaAutosizeProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaStylesNames;\n  vars: ScrollAreaCssVariables;\n}>;\n\nconst defaultProps = {\n  scrollHideDelay: 1000,\n  type: 'hover',\n  scrollbars: 'xy',\n} satisfies Partial<ScrollAreaProps>;\n\nconst varsResolver = createVarsResolver<ScrollAreaFactory>(\n  (_, { scrollbarSize, overscrollBehavior, scrollbars }) => {\n    let overrideOverscrollBehavior = overscrollBehavior;\n\n    if (overscrollBehavior && scrollbars) {\n      if (scrollbars === 'x') {\n        overrideOverscrollBehavior = `${overscrollBehavior} auto`;\n      } else if (scrollbars === 'y') {\n        overrideOverscrollBehavior = `auto ${overscrollBehavior}`;\n      }\n    }\n\n    return {\n      root: {\n        '--scrollarea-scrollbar-size': rem(scrollbarSize),\n        '--scrollarea-over-scroll-behavior': overrideOverscrollBehavior,\n      },\n    };\n  }\n);\n\nexport const ScrollArea = factory<ScrollAreaFactory>((_props) => {\n  const props = useProps('ScrollArea', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    scrollbarSize,\n    vars,\n    type,\n    scrollHideDelay,\n    viewportProps,\n    viewportRef,\n    onScrollPositionChange,\n    children,\n    offsetScrollbars,\n    scrollbars,\n    onBottomReached,\n    onTopReached,\n    onLeftReached,\n    onRightReached,\n    overscrollBehavior,\n    startScrollPosition,\n    verticalScrollbarPosition,\n    attributes,\n    ...others\n  } = props;\n\n  const [scrollbarHovered, setScrollbarHovered] = useState(false);\n  const [verticalThumbVisible, setVerticalThumbVisible] = useState(false);\n  const [horizontalThumbVisible, setHorizontalThumbVisible] = useState(false);\n\n  // Refs to track previous boundary states\n  const prevAtTopRef = useRef(true);\n  const prevAtBottomRef = useRef(false);\n  const prevAtLeftRef = useRef(true);\n  const prevAtRightRef = useRef(false);\n\n  const getStyles = useStyles<ScrollAreaFactory>({\n    name: 'ScrollArea',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const localViewportRef = useRef<HTMLDivElement>(null);\n  const [viewportElement, setViewportElement] = useState<HTMLDivElement | null>(null);\n  const viewportCallbackRef = useCallback((node: HTMLDivElement | null) => {\n    setViewportElement((current) => (current === node ? current : node));\n  }, []);\n  const combinedViewportRef = useMergeRefs([viewportRef, localViewportRef, viewportCallbackRef]);\n\n  useResizeObserver(offsetScrollbars === 'present' ? viewportElement : null, () => {\n    const element = localViewportRef.current;\n    if (element) {\n      setVerticalThumbVisible(element.scrollHeight > element.clientHeight);\n      setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);\n    }\n  });\n\n  useIsomorphicEffect(() => {\n    if (startScrollPosition && localViewportRef.current) {\n      localViewportRef.current.scrollTo({\n        left: startScrollPosition.x ?? 0,\n        top: startScrollPosition.y ?? 0,\n      });\n    }\n  }, []);\n\n  return (\n    <ScrollAreaRoot\n      getStyles={getStyles}\n      type={type === 'never' ? 'always' : type}\n      scrollHideDelay={scrollHideDelay}\n      scrollbars={scrollbars}\n      {...getStyles('root')}\n      {...others}\n    >\n      <ScrollAreaViewport\n        {...viewportProps}\n        {...getStyles('viewport', { style: viewportProps?.style })}\n        ref={combinedViewportRef}\n        data-offset-scrollbars={offsetScrollbars === true ? 'xy' : offsetScrollbars || undefined}\n        data-scrollbars={scrollbars || undefined}\n        data-vertical-scrollbar-position={verticalScrollbarPosition || undefined}\n        data-horizontal-hidden={\n          offsetScrollbars === 'present' && !horizontalThumbVisible ? 'true' : undefined\n        }\n        data-vertical-hidden={\n          offsetScrollbars === 'present' && !verticalThumbVisible ? 'true' : undefined\n        }\n        onScroll={(e) => {\n          viewportProps?.onScroll?.(e);\n          onScrollPositionChange?.({ x: e.currentTarget.scrollLeft, y: e.currentTarget.scrollTop });\n          const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n            e.currentTarget;\n\n          // Vertical boundaries\n          // threshold of -0.8 is required for some browsers that use sub-pixel rendering, specifically when zoomed out.\n          const isAtBottom = scrollTop - (scrollHeight - clientHeight) >= -0.8;\n          const isAtTop = scrollTop === 0;\n\n          if (isAtBottom && !prevAtBottomRef.current) {\n            onBottomReached?.();\n          }\n          if (isAtTop && !prevAtTopRef.current) {\n            onTopReached?.();\n          }\n\n          prevAtBottomRef.current = isAtBottom;\n          prevAtTopRef.current = isAtTop;\n\n          // Horizontal boundaries\n          const isAtRight = scrollLeft - (scrollWidth - clientWidth) >= -0.8;\n          const isAtLeft = scrollLeft === 0;\n\n          if (isAtRight && !prevAtRightRef.current) {\n            onRightReached?.();\n          }\n          if (isAtLeft && !prevAtLeftRef.current) {\n            onLeftReached?.();\n          }\n\n          prevAtRightRef.current = isAtRight;\n          prevAtLeftRef.current = isAtLeft;\n        }}\n      >\n        {children}\n      </ScrollAreaViewport>\n\n      {(scrollbars === 'xy' || scrollbars === 'x') && (\n        <ScrollAreaScrollbar\n          {...getStyles('scrollbar')}\n          orientation=\"horizontal\"\n          data-vertical-scrollbar-position={verticalScrollbarPosition || undefined}\n          data-hidden={\n            type === 'never' || (offsetScrollbars === 'present' && !horizontalThumbVisible)\n              ? true\n              : undefined\n          }\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <ScrollAreaThumb {...getStyles('thumb')} />\n        </ScrollAreaScrollbar>\n      )}\n\n      {(scrollbars === 'xy' || scrollbars === 'y') && (\n        <ScrollAreaScrollbar\n          {...getStyles('scrollbar')}\n          orientation=\"vertical\"\n          data-vertical-scrollbar-position={verticalScrollbarPosition || undefined}\n          data-hidden={\n            type === 'never' || (offsetScrollbars === 'present' && !verticalThumbVisible)\n              ? true\n              : undefined\n          }\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <ScrollAreaThumb {...getStyles('thumb')} />\n        </ScrollAreaScrollbar>\n      )}\n\n      <ScrollAreaCorner\n        {...getStyles('corner')}\n        data-vertical-scrollbar-position={verticalScrollbarPosition || undefined}\n        data-hovered={scrollbarHovered || undefined}\n        data-hidden={type === 'never' || undefined}\n      />\n    </ScrollAreaRoot>\n  );\n});\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n\nexport const ScrollAreaAutosize = factory<ScrollAreaAutosizeFactory>((props) => {\n  const {\n    children,\n    classNames,\n    styles,\n    scrollbarSize,\n    scrollHideDelay,\n    type,\n    dir,\n    offsetScrollbars,\n    overscrollBehavior,\n    viewportRef,\n    onScrollPositionChange,\n    unstyled,\n    variant,\n    viewportProps,\n    scrollbars,\n    style,\n    vars,\n    onBottomReached,\n    onTopReached,\n    startScrollPosition,\n    verticalScrollbarPosition,\n    onOverflowChange,\n    ...others\n  } = useProps('ScrollAreaAutosize', defaultProps, props as ScrollAreaAutosizeProps);\n\n  // Overflow detection (Autosize-only)\n  const viewportObserverRef = useRef<HTMLDivElement>(null);\n  const [viewportObserverElement, setViewportObserverElement] = useState<HTMLDivElement | null>(\n    null\n  );\n  const viewportObserverCallbackRef = useCallback((node: HTMLDivElement | null) => {\n    setViewportObserverElement((current) => (current === node ? current : node));\n  }, []);\n  const combinedViewportRef = useMergeRefs([\n    viewportRef,\n    viewportObserverRef,\n    viewportObserverCallbackRef,\n  ]);\n\n  const overflowingRef = useRef(false);\n  const didMountRef = useRef(false);\n\n  const handleOverflowCheck = useEffectEvent(() => {\n    const el = viewportObserverRef.current;\n    if (!el || !onOverflowChange) {\n      return;\n    }\n\n    const isOverflowing = el.scrollHeight > el.clientHeight;\n\n    if (isOverflowing !== overflowingRef.current) {\n      if (didMountRef.current) {\n        onOverflowChange(isOverflowing);\n      } else {\n        didMountRef.current = true;\n        if (isOverflowing) {\n          onOverflowChange(true);\n        }\n      }\n\n      overflowingRef.current = isOverflowing;\n    }\n  });\n\n  useResizeObserver(onOverflowChange ? viewportObserverElement : null, handleOverflowCheck);\n\n  return (\n    <Box {...others} variant={variant} style={[{ display: 'flex', overflow: 'hidden' }, style]}>\n      <Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          flex: 1,\n          overflow: 'hidden',\n          ...(scrollbars === 'y' && { minWidth: 0 }),\n          ...(scrollbars === 'x' && { minHeight: 0 }),\n          ...(scrollbars === 'xy' && { minWidth: 0, minHeight: 0 }),\n          ...(scrollbars === false && { minWidth: 0, minHeight: 0 }),\n        }}\n      >\n        <ScrollArea\n          classNames={classNames}\n          styles={styles}\n          scrollHideDelay={scrollHideDelay}\n          scrollbarSize={scrollbarSize}\n          type={type}\n          dir={dir}\n          offsetScrollbars={offsetScrollbars}\n          overscrollBehavior={overscrollBehavior}\n          viewportRef={combinedViewportRef}\n          onScrollPositionChange={onScrollPositionChange}\n          unstyled={unstyled}\n          variant={variant}\n          viewportProps={viewportProps}\n          vars={vars}\n          scrollbars={scrollbars}\n          onBottomReached={onBottomReached}\n          onTopReached={onTopReached}\n          startScrollPosition={startScrollPosition}\n          verticalScrollbarPosition={verticalScrollbarPosition}\n          data-autosize=\"true\"\n        >\n          {children}\n        </ScrollArea>\n      </Box>\n    </Box>\n  );\n});\n\nScrollArea.classes = classes;\nScrollArea.varsResolver = varsResolver;\nScrollAreaAutosize.displayName = '@mantine/core/ScrollAreaAutosize';\nScrollAreaAutosize.classes = classes;\nScrollArea.Autosize = ScrollAreaAutosize;\n\nexport namespace ScrollArea {\n  export type Props = ScrollAreaProps;\n  export type AutosizeProps = ScrollAreaAutosizeProps;\n  export type StylesNames = ScrollAreaStylesNames;\n  export type CssVariables = ScrollAreaCssVariables;\n  export type Factory = ScrollAreaFactory;\n\n  export namespace Autosize {\n    export type Props = ScrollAreaAutosizeProps;\n  }\n}\n"],"mappings":"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"}

package/esm/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaRoot.mjs","names":[],"sources":["../../../../src/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { Box, BoxProps, ElementProps, Factory, GetStylesApi, useProps } from '../../../core';\nimport type { ScrollAreaFactory } from '../ScrollArea';\nimport { ScrollAreaProvider } from '../ScrollArea.context';\n\nexport type ScrollAreaRootStylesNames =\n  | 'root'\n  | 'viewport'\n  | 'viewportInner'\n  | 'scrollbar'\n  | 'thumb'\n  | 'corner';\n\nexport type ScrollAreaRootCssVariables = {\n  root: '--sa-corner-width' | '--sa-corner-height';\n};\n\nexport interface ScrollAreaRootStylesCtx {\n  cornerWidth: number;\n  cornerHeight: number;\n}\n\nexport interface ScrollAreaRootProps extends BoxProps, ElementProps<'div'> {\n  getStyles: GetStylesApi<ScrollAreaFactory>;\n  type?: 'auto' | 'always' | 'scroll' | 'hover' | 'never';\n  scrollbars?: 'x' | 'y' | 'xy' | false;\n  scrollHideDelay?: number;\n}\n\nexport type ScrollAreaRootFactory = Factory<{\n  props: ScrollAreaRootProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaRootStylesNames;\n}>;\n\nconst defaultProps = {\n  scrollHideDelay: 1000,\n  type: 'hover',\n} satisfies Partial<ScrollAreaRootProps>;\n\nexport function ScrollAreaRoot(_props: ScrollAreaRootProps) {\n  const { type, scrollHideDelay, scrollbars, getStyles, ref, ...others } = useProps(\n    'ScrollAreaRoot',\n    defaultProps,\n    _props\n  );\n\n  const [scrollArea, setScrollArea] = useState<HTMLDivElement | null>(null);\n  const [viewport, setViewport] = useState<HTMLDivElement | null>(null);\n  const [content, setContent] = useState<HTMLDivElement | null>(null);\n  const [scrollbarX, setScrollbarX] = useState<HTMLDivElement | null>(null);\n  const [scrollbarY, setScrollbarY] = useState<HTMLDivElement | null>(null);\n  const [cornerWidth, setCornerWidth] = useState(0);\n  const [cornerHeight, setCornerHeight] = useState(0);\n  const [scrollbarXEnabled, setScrollbarXEnabled] = useState(false);\n  const [scrollbarYEnabled, setScrollbarYEnabled] = useState(false);\n  const rootRef = useMergedRef(ref, setScrollArea);\n\n  return (\n    <ScrollAreaProvider\n      value={{\n        type,\n        scrollHideDelay,\n        scrollArea,\n        viewport,\n        onViewportChange: setViewport,\n        content,\n        onContentChange: setContent,\n        scrollbarX,\n        onScrollbarXChange: setScrollbarX,\n        scrollbarXEnabled,\n        onScrollbarXEnabledChange: setScrollbarXEnabled,\n        scrollbarY,\n        onScrollbarYChange: setScrollbarY,\n        scrollbarYEnabled,\n        onScrollbarYEnabledChange: setScrollbarYEnabled,\n        onCornerWidthChange: setCornerWidth,\n        onCornerHeightChange: setCornerHeight,\n        getStyles,\n      }}\n    >\n      <Box\n        {...others}\n        ref={rootRef}\n        __vars={{\n          '--sa-corner-width': scrollbars !== 'xy' ? '0px' : `${cornerWidth}px`,\n          '--sa-corner-height': scrollbars !== 'xy' ? '0px' : `${cornerHeight}px`,\n        }}\n      />\n    </ScrollAreaProvider>\n  );\n}\n\nScrollAreaRoot.displayName = '@mantine/core/ScrollAreaRoot';\n"],"mappings":";;;;;;;;AAoCA,MAAM,eAAe;CACnB,iBAAiB;CACjB,MAAM;AACR;AAEA,SAAgB,eAAe,QAA6B;CAC1D,MAAM,EAAE,MAAM,iBAAiB,YAAY,WAAW,KAAK,GAAG,WAAW,SACvE,kBACA,cACA,MACF;CAEA,MAAM,CAAC,YAAY,iBAAiB,SAAgC,IAAI;CACxE,MAAM,CAAC,UAAU,eAAe,SAAgC,IAAI;CACpE,MAAM,CAAC,SAAS,cAAc,SAAgC,IAAI;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAAgC,IAAI;CACxE,MAAM,CAAC,YAAY,iBAAiB,SAAgC,IAAI;CACxE,MAAM,CAAC,aAAa,kBAAkB,SAAS,CAAC;CAChD,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC;CAClD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAChE,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAChE,MAAM,UAAU,aAAa,KAAK,aAAa;CAE/C,OACE,oBAAC,oBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA,kBAAkB;GAClB;GACA,iBAAiB;GACjB;GACA,oBAAoB;GACpB;GACA,2BAA2B;GAC3B;GACA,oBAAoB;GACpB;GACA,2BAA2B;GAC3B,qBAAqB;GACrB,sBAAsB;GACtB;EACF;YAEA,oBAAC,KAAD;GACE,GAAI;GACJ,KAAK;GACL,QAAQ;IACN,qBAAqB,eAAe,OAAO,QAAQ,GAAG,YAAY;IAClE,sBAAsB,eAAe,OAAO,QAAQ,GAAG,aAAa;GACtE;EACD,CAAA;CACiB,CAAA;AAExB;AAEA,eAAe,cAAc"}
+{"version":3,"file":"ScrollAreaRoot.mjs","names":[],"sources":["../../../../src/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { Box, BoxProps, ElementProps, Factory, GetStylesApi, useProps } from '../../../core';\nimport type { ScrollAreaFactory } from '../ScrollArea';\nimport { ScrollAreaProvider } from '../ScrollArea.context';\n\nexport type ScrollAreaRootStylesNames =\n  | 'root'\n  | 'viewport'\n  | 'viewportInner'\n  | 'scrollbar'\n  | 'thumb'\n  | 'corner';\n\nexport type ScrollAreaRootCssVariables = {\n  root: '--sa-corner-width' | '--sa-corner-height';\n};\n\nexport interface ScrollAreaRootStylesCtx {\n  cornerWidth: number;\n  cornerHeight: number;\n}\n\nexport interface ScrollAreaRootProps extends BoxProps, ElementProps<'div'> {\n  getStyles: GetStylesApi<ScrollAreaFactory>;\n  type?: 'auto' | 'always' | 'scroll' | 'hover' | 'never';\n  scrollbars?: 'x' | 'y' | 'xy' | false;\n  scrollHideDelay?: number;\n}\n\nexport type ScrollAreaRootFactory = Factory<{\n  props: ScrollAreaRootProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaRootStylesNames;\n}>;\n\nconst defaultProps = {\n  scrollHideDelay: 1000,\n  type: 'hover',\n} satisfies Partial<ScrollAreaRootProps>;\n\nexport function ScrollAreaRoot(_props: ScrollAreaRootProps) {\n  const { type, scrollHideDelay, scrollbars, getStyles, ref, ...others } = useProps(\n    'ScrollAreaRoot',\n    defaultProps,\n    _props\n  );\n\n  const [scrollArea, setScrollArea] = useState<HTMLDivElement | null>(null);\n  const [viewport, setViewport] = useState<HTMLDivElement | null>(null);\n  const [content, setContent] = useState<HTMLDivElement | null>(null);\n  const [scrollbarX, setScrollbarX] = useState<HTMLDivElement | null>(null);\n  const [scrollbarY, setScrollbarY] = useState<HTMLDivElement | null>(null);\n  const [cornerWidth, setCornerWidth] = useState(0);\n  const [cornerHeight, setCornerHeight] = useState(0);\n  const [scrollbarXEnabled, setScrollbarXEnabled] = useState(false);\n  const [scrollbarYEnabled, setScrollbarYEnabled] = useState(false);\n  const rootRef = useMergedRef(ref, setScrollArea);\n\n  return (\n    <ScrollAreaProvider\n      value={{\n        type,\n        scrollHideDelay,\n        scrollArea,\n        viewport,\n        onViewportChange: setViewport,\n        content,\n        onContentChange: setContent,\n        scrollbarX,\n        onScrollbarXChange: setScrollbarX,\n        scrollbarXEnabled,\n        onScrollbarXEnabledChange: setScrollbarXEnabled,\n        scrollbarY,\n        onScrollbarYChange: setScrollbarY,\n        scrollbarYEnabled,\n        onScrollbarYEnabledChange: setScrollbarYEnabled,\n        onCornerWidthChange: setCornerWidth,\n        onCornerHeightChange: setCornerHeight,\n        getStyles,\n      }}\n    >\n      <Box\n        {...others}\n        ref={rootRef}\n        __vars={{\n          '--sa-corner-width': scrollbars !== 'xy' ? '0px' : `${cornerWidth}px`,\n          '--sa-corner-height': scrollbars !== 'xy' ? '0px' : `${cornerHeight}px`,\n        }}\n      />\n    </ScrollAreaProvider>\n  );\n}\n\nScrollAreaRoot.displayName = '@mantine/core/ScrollAreaRoot';\n"],"mappings":";;;;;;;;AAoCA,MAAM,eAAe;CACnB,iBAAiB;CACjB,MAAM;AACR;AAEA,SAAgB,eAAe,QAA6B;CAC1D,MAAM,EAAE,MAAM,iBAAiB,YAAY,WAAW,KAAK,GAAG,WAAW,SACvE,kBACA,cACA,MACF;CAEA,MAAM,CAAC,YAAY,iBAAiB,SAAgC,IAAI;CACxE,MAAM,CAAC,UAAU,eAAe,SAAgC,IAAI;CACpE,MAAM,CAAC,SAAS,cAAc,SAAgC,IAAI;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAAgC,IAAI;CACxE,MAAM,CAAC,YAAY,iBAAiB,SAAgC,IAAI;CACxE,MAAM,CAAC,aAAa,kBAAkB,SAAS,CAAC;CAChD,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC;CAClD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAChE,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAChE,MAAM,UAAU,aAAa,KAAK,aAAa;CAE/C,OACE,oBAAC,oBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA,kBAAkB;GAClB;GACA,iBAAiB;GACjB;GACA,oBAAoB;GACpB;GACA,2BAA2B;GAC3B;GACA,oBAAoB;GACpB;GACA,2BAA2B;GAC3B,qBAAqB;GACrB,sBAAsB;GACtB;EACF;EAEA,UAAA,oBAAC,KAAD;GACE,GAAI;GACJ,KAAK;GACL,QAAQ;IACN,qBAAqB,eAAe,OAAO,QAAQ,GAAG,YAAY;IAClE,sBAAsB,eAAe,OAAO,QAAQ,GAAG,aAAa;GACtE;EACD,CAAA;CACiB,CAAA;AAExB;AAEA,eAAe,cAAc"}

package/esm/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollbar.mjs","names":[],"sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { useCallbackRef, useDebouncedCallback, useMergedRef } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { Sizes } from '../ScrollArea.types';\nimport { useResizeObserver } from '../use-resize-observer';\nimport { composeEventHandlers } from '../utils';\nimport { ScrollbarContextValue, ScrollbarProvider } from './Scrollbar.context';\n\nexport interface ScrollbarPrivateProps {\n  sizes: Sizes;\n  hasThumb: boolean;\n  onThumbChange: ScrollbarContextValue['onThumbChange'];\n  onThumbPointerUp: ScrollbarContextValue['onThumbPointerUp'];\n  onThumbPointerDown: ScrollbarContextValue['onThumbPointerDown'];\n  onThumbPositionChange: ScrollbarContextValue['onThumbPositionChange'];\n  onWheelScroll: (event: WheelEvent, maxScrollPos: number) => void;\n  onDragScroll: (pointerPos: { x: number; y: number }) => void;\n  onResize: () => void;\n}\n\ninterface ScrollbarProps\n  extends ScrollbarPrivateProps, Omit<React.ComponentProps<'div'>, 'onResize'> {}\n\nexport function Scrollbar(props: ScrollbarProps) {\n  const {\n    sizes,\n    hasThumb,\n    onThumbChange,\n    onThumbPointerUp,\n    onThumbPointerDown,\n    onThumbPositionChange,\n    onDragScroll,\n    onWheelScroll,\n    onResize,\n    ref,\n    ...scrollbarProps\n  } = props;\n  const context = useScrollAreaContext();\n  const [scrollbar, setScrollbar] = useState<HTMLDivElement | null>(null);\n  const composeRefs = useMergedRef(ref, setScrollbar);\n  const rectRef = useRef<DOMRect | null>(null);\n  const prevWebkitUserSelectRef = useRef<string>('');\n  const { viewport } = context;\n  const maxScrollPos = sizes.content - sizes.viewport;\n  const handleWheelScroll = useEffectEvent(onWheelScroll);\n  const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);\n  const handleResize = useDebouncedCallback(onResize, 10);\n\n  const handleDragScroll = (event: React.PointerEvent<HTMLElement>) => {\n    if (rectRef.current) {\n      const x = event.clientX - rectRef.current.left;\n      const y = event.clientY - rectRef.current.top;\n      onDragScroll({ x, y });\n    }\n  };\n\n  useEffect(() => {\n    const handleWheel = (event: WheelEvent) => {\n      const element = event.target as HTMLElement;\n      const isScrollbarWheel = scrollbar?.contains(element);\n      if (isScrollbarWheel) {\n        handleWheelScroll(event, maxScrollPos);\n      }\n    };\n    document.addEventListener('wheel', handleWheel, { passive: false });\n    return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, [viewport, scrollbar, maxScrollPos]);\n\n  useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);\n\n  useResizeObserver(scrollbar, handleResize);\n  useResizeObserver(context.content, handleResize);\n\n  return (\n    <ScrollbarProvider\n      value={{\n        scrollbar,\n        hasThumb,\n        onThumbChange: useCallbackRef(onThumbChange),\n        onThumbPointerUp: useCallbackRef(onThumbPointerUp),\n        onThumbPositionChange: handleThumbPositionChange,\n        onThumbPointerDown: useCallbackRef(onThumbPointerDown),\n      }}\n    >\n      <div\n        {...scrollbarProps}\n        ref={composeRefs}\n        data-mantine-scrollbar\n        style={{ position: 'absolute', ...scrollbarProps.style }}\n        onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n          event.preventDefault();\n\n          const mainPointer = 0;\n          if (event.button === mainPointer) {\n            const element = event.target as HTMLElement;\n            element.setPointerCapture(event.pointerId);\n            rectRef.current = scrollbar!.getBoundingClientRect();\n            /* oxlint-disable typescript/no-deprecated */\n            prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;\n            document.body.style.webkitUserSelect = 'none';\n            handleDragScroll(event);\n          }\n        })}\n        onPointerMove={composeEventHandlers(props.onPointerMove, handleDragScroll)}\n        onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n          const element = event.target as HTMLElement;\n          if (element.hasPointerCapture(event.pointerId)) {\n            event.preventDefault();\n            element.releasePointerCapture(event.pointerId);\n          }\n        })}\n        onLostPointerCapture={() => {\n          document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;\n          /* oxlint-enable typescript/no-deprecated */\n          rectRef.current = null;\n        }}\n      />\n    </ScrollbarProvider>\n  );\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EACJ,OACA,UACA,eACA,kBACA,oBACA,uBACA,cACA,eACA,UACA,KACA,GAAG,mBACD;CACJ,MAAM,UAAU,qBAAqB;CACrC,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CACtE,MAAM,cAAc,aAAa,KAAK,YAAY;CAClD,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,0BAA0B,OAAe,EAAE;CACjD,MAAM,EAAE,aAAa;CACrB,MAAM,eAAe,MAAM,UAAU,MAAM;CAC3C,MAAM,oBAAoB,eAAe,aAAa;CACtD,MAAM,4BAA4B,eAAe,qBAAqB;CACtE,MAAM,eAAe,qBAAqB,UAAU,EAAE;CAEtD,MAAM,oBAAoB,UAA2C;EACnE,IAAI,QAAQ,SAAS;GACnB,MAAM,IAAI,MAAM,UAAU,QAAQ,QAAQ;GAC1C,MAAM,IAAI,MAAM,UAAU,QAAQ,QAAQ;GAC1C,aAAa;IAAE;IAAG;GAAE,CAAC;EACvB;CACF;CAEA,gBAAgB;EACd,MAAM,eAAe,UAAsB;GACzC,MAAM,UAAU,MAAM;GAEtB,IADyB,WAAW,SAAS,OAAO,GAElD,kBAAkB,OAAO,YAAY;EAEzC;EACA,SAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAC;EAClE,aAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAQ;CAC3F,GAAG;EAAC;EAAU;EAAW;CAAY,CAAC;CAEtC,UAAU,2BAA2B,CAAC,OAAO,yBAAyB,CAAC;CAEvE,kBAAkB,WAAW,YAAY;CACzC,kBAAkB,QAAQ,SAAS,YAAY;CAE/C,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA;GACA,eAAe,eAAe,aAAa;GAC3C,kBAAkB,eAAe,gBAAgB;GACjD,uBAAuB;GACvB,oBAAoB,eAAe,kBAAkB;EACvD;YAEA,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,0BAAA;GACA,OAAO;IAAE,UAAU;IAAY,GAAG,eAAe;GAAM;GACvD,eAAe,qBAAqB,MAAM,gBAAgB,UAAU;IAClE,MAAM,eAAe;IAGrB,IAAI,MAAM,WAAW,GAAa;KAEhC,MADsB,OACd,kBAAkB,MAAM,SAAS;KACzC,QAAQ,UAAU,UAAW,sBAAsB;KAEnD,wBAAwB,UAAU,SAAS,KAAK,MAAM;KACtD,SAAS,KAAK,MAAM,mBAAmB;KACvC,iBAAiB,KAAK;IACxB;GACF,CAAC;GACD,eAAe,qBAAqB,MAAM,eAAe,gBAAgB;GACzE,aAAa,qBAAqB,MAAM,cAAc,UAAU;IAC9D,MAAM,UAAU,MAAM;IACtB,IAAI,QAAQ,kBAAkB,MAAM,SAAS,GAAG;KAC9C,MAAM,eAAe;KACrB,QAAQ,sBAAsB,MAAM,SAAS;IAC/C;GACF,CAAC;GACD,4BAA4B;IAC1B,SAAS,KAAK,MAAM,mBAAmB,wBAAwB;IAE/D,QAAQ,UAAU;GACpB;EACD,CAAA;CACgB,CAAA;AAEvB"}
+{"version":3,"file":"Scrollbar.mjs","names":[],"sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { useCallbackRef, useDebouncedCallback, useMergedRef } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { Sizes } from '../ScrollArea.types';\nimport { useResizeObserver } from '../use-resize-observer';\nimport { composeEventHandlers } from '../utils';\nimport { ScrollbarContextValue, ScrollbarProvider } from './Scrollbar.context';\n\nexport interface ScrollbarPrivateProps {\n  sizes: Sizes;\n  hasThumb: boolean;\n  onThumbChange: ScrollbarContextValue['onThumbChange'];\n  onThumbPointerUp: ScrollbarContextValue['onThumbPointerUp'];\n  onThumbPointerDown: ScrollbarContextValue['onThumbPointerDown'];\n  onThumbPositionChange: ScrollbarContextValue['onThumbPositionChange'];\n  onWheelScroll: (event: WheelEvent, maxScrollPos: number) => void;\n  onDragScroll: (pointerPos: { x: number; y: number }) => void;\n  onResize: () => void;\n}\n\ninterface ScrollbarProps\n  extends ScrollbarPrivateProps, Omit<React.ComponentProps<'div'>, 'onResize'> {}\n\nexport function Scrollbar(props: ScrollbarProps) {\n  const {\n    sizes,\n    hasThumb,\n    onThumbChange,\n    onThumbPointerUp,\n    onThumbPointerDown,\n    onThumbPositionChange,\n    onDragScroll,\n    onWheelScroll,\n    onResize,\n    ref,\n    ...scrollbarProps\n  } = props;\n  const context = useScrollAreaContext();\n  const [scrollbar, setScrollbar] = useState<HTMLDivElement | null>(null);\n  const composeRefs = useMergedRef(ref, setScrollbar);\n  const rectRef = useRef<DOMRect | null>(null);\n  const prevWebkitUserSelectRef = useRef<string>('');\n  const { viewport } = context;\n  const maxScrollPos = sizes.content - sizes.viewport;\n  const handleWheelScroll = useEffectEvent(onWheelScroll);\n  const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);\n  const handleResize = useDebouncedCallback(onResize, 10);\n\n  const handleDragScroll = (event: React.PointerEvent<HTMLElement>) => {\n    if (rectRef.current) {\n      const x = event.clientX - rectRef.current.left;\n      const y = event.clientY - rectRef.current.top;\n      onDragScroll({ x, y });\n    }\n  };\n\n  useEffect(() => {\n    const handleWheel = (event: WheelEvent) => {\n      const element = event.target as HTMLElement;\n      const isScrollbarWheel = scrollbar?.contains(element);\n      if (isScrollbarWheel) {\n        handleWheelScroll(event, maxScrollPos);\n      }\n    };\n    document.addEventListener('wheel', handleWheel, { passive: false });\n    return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, [viewport, scrollbar, maxScrollPos]);\n\n  useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);\n\n  useResizeObserver(scrollbar, handleResize);\n  useResizeObserver(context.content, handleResize);\n\n  return (\n    <ScrollbarProvider\n      value={{\n        scrollbar,\n        hasThumb,\n        onThumbChange: useCallbackRef(onThumbChange),\n        onThumbPointerUp: useCallbackRef(onThumbPointerUp),\n        onThumbPositionChange: handleThumbPositionChange,\n        onThumbPointerDown: useCallbackRef(onThumbPointerDown),\n      }}\n    >\n      <div\n        {...scrollbarProps}\n        ref={composeRefs}\n        data-mantine-scrollbar\n        style={{ position: 'absolute', ...scrollbarProps.style }}\n        onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n          event.preventDefault();\n\n          const mainPointer = 0;\n          if (event.button === mainPointer) {\n            const element = event.target as HTMLElement;\n            element.setPointerCapture(event.pointerId);\n            rectRef.current = scrollbar!.getBoundingClientRect();\n            /* oxlint-disable typescript/no-deprecated */\n            prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;\n            document.body.style.webkitUserSelect = 'none';\n            handleDragScroll(event);\n          }\n        })}\n        onPointerMove={composeEventHandlers(props.onPointerMove, handleDragScroll)}\n        onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n          const element = event.target as HTMLElement;\n          if (element.hasPointerCapture(event.pointerId)) {\n            event.preventDefault();\n            element.releasePointerCapture(event.pointerId);\n          }\n        })}\n        onLostPointerCapture={() => {\n          document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;\n          /* oxlint-enable typescript/no-deprecated */\n          rectRef.current = null;\n        }}\n      />\n    </ScrollbarProvider>\n  );\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EACJ,OACA,UACA,eACA,kBACA,oBACA,uBACA,cACA,eACA,UACA,KACA,GAAG,mBACD;CACJ,MAAM,UAAU,qBAAqB;CACrC,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CACtE,MAAM,cAAc,aAAa,KAAK,YAAY;CAClD,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,0BAA0B,OAAe,EAAE;CACjD,MAAM,EAAE,aAAa;CACrB,MAAM,eAAe,MAAM,UAAU,MAAM;CAC3C,MAAM,oBAAoB,eAAe,aAAa;CACtD,MAAM,4BAA4B,eAAe,qBAAqB;CACtE,MAAM,eAAe,qBAAqB,UAAU,EAAE;CAEtD,MAAM,oBAAoB,UAA2C;EACnE,IAAI,QAAQ,SAAS;GACnB,MAAM,IAAI,MAAM,UAAU,QAAQ,QAAQ;GAC1C,MAAM,IAAI,MAAM,UAAU,QAAQ,QAAQ;GAC1C,aAAa;IAAE;IAAG;GAAE,CAAC;EACvB;CACF;CAEA,gBAAgB;EACd,MAAM,eAAe,UAAsB;GACzC,MAAM,UAAU,MAAM;GAEtB,IADyB,WAAW,SAAS,OAAO,GAElD,kBAAkB,OAAO,YAAY;EAEzC;EACA,SAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAC;EAClE,aAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAQ;CAC3F,GAAG;EAAC;EAAU;EAAW;CAAY,CAAC;CAEtC,UAAU,2BAA2B,CAAC,OAAO,yBAAyB,CAAC;CAEvE,kBAAkB,WAAW,YAAY;CACzC,kBAAkB,QAAQ,SAAS,YAAY;CAE/C,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA;GACA,eAAe,eAAe,aAAa;GAC3C,kBAAkB,eAAe,gBAAgB;GACjD,uBAAuB;GACvB,oBAAoB,eAAe,kBAAkB;EACvD;EAEA,UAAA,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,0BAAA;GACA,OAAO;IAAE,UAAU;IAAY,GAAG,eAAe;GAAM;GACvD,eAAe,qBAAqB,MAAM,gBAAgB,UAAU;IAClE,MAAM,eAAe;IAGrB,IAAI,MAAM,WAAW,GAAa;KAEhC,MADsB,OACd,kBAAkB,MAAM,SAAS;KACzC,QAAQ,UAAU,UAAW,sBAAsB;KAEnD,wBAAwB,UAAU,SAAS,KAAK,MAAM;KACtD,SAAS,KAAK,MAAM,mBAAmB;KACvC,iBAAiB,KAAK;IACxB;GACF,CAAC;GACD,eAAe,qBAAqB,MAAM,eAAe,gBAAgB;GACzE,aAAa,qBAAqB,MAAM,cAAc,UAAU;IAC9D,MAAM,UAAU,MAAM;IACtB,IAAI,QAAQ,kBAAkB,MAAM,SAAS,GAAG;KAC9C,MAAM,eAAe;KACrB,QAAQ,sBAAsB,MAAM,SAAS;IAC/C;GACF,CAAC;GACD,4BAA4B;IAC1B,SAAS,KAAK,MAAM,mBAAmB,wBAAwB;IAE/D,QAAQ,UAAU;GACpB;EACD,CAAA;CACgB,CAAA;AAEvB"}

package/esm/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaViewport.mjs","names":[],"sources":["../../../../src/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { Box, BoxProps, ElementProps } from '../../../core';\nimport { useScrollAreaContext } from '../ScrollArea.context';\n\nexport interface ScrollAreaViewportProps extends BoxProps, ElementProps<'div'> {}\n\nexport function ScrollAreaViewport({\n  children,\n  style,\n  ref,\n  onWheel,\n  ...others\n}: ScrollAreaViewportProps) {\n  const ctx = useScrollAreaContext();\n  const rootRef = useMergedRef(ref, ctx.onViewportChange);\n\n  const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {\n    onWheel?.(event);\n\n    // Fix for Windows: Allow horizontal scrolling even when vertical scroll is at boundaries\n    // When at vertical boundaries, Windows tries to scroll the parent/page instead of allowing horizontal scroll\n    if (ctx.scrollbarXEnabled && ctx.viewport && event.shiftKey) {\n      const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = ctx.viewport;\n      const isAtTop = scrollTop < 1;\n      const isAtBottom = scrollTop >= scrollHeight - clientHeight - 1;\n      const canScrollHorizontally = scrollWidth > clientWidth;\n\n      if (canScrollHorizontally && (isAtTop || isAtBottom)) {\n        event.stopPropagation();\n      }\n    }\n  };\n\n  return (\n    <Box\n      {...others}\n      ref={rootRef}\n      onWheel={handleWheel}\n      data-scrollarea-viewport\n      style={{\n        overflowX: ctx.scrollbarXEnabled ? 'scroll' : 'hidden',\n        overflowY: ctx.scrollbarYEnabled ? 'scroll' : 'hidden',\n        ...style,\n      }}\n    >\n      <div {...ctx.getStyles('content')} ref={ctx.onContentChange}>\n        {children}\n      </div>\n    </Box>\n  );\n}\n\nScrollAreaViewport.displayName = '@mantine/core/ScrollAreaViewport';\n"],"mappings":";;;;;;AAMA,SAAgB,mBAAmB,EACjC,UACA,OACA,KACA,SACA,GAAG,UACuB;CAC1B,MAAM,MAAM,qBAAqB;CACjC,MAAM,UAAU,aAAa,KAAK,IAAI,gBAAgB;CAEtD,MAAM,eAAe,UAA4C;EAC/D,UAAU,KAAK;EAIf,IAAI,IAAI,qBAAqB,IAAI,YAAY,MAAM,UAAU;GAC3D,MAAM,EAAE,WAAW,cAAc,cAAc,aAAa,gBAAgB,IAAI;GAChF,MAAM,UAAU,YAAY;GAC5B,MAAM,aAAa,aAAa,eAAe,eAAe;GAG9D,IAF8B,cAAc,gBAEd,WAAW,aACvC,MAAM,gBAAgB;EAE1B;CACF;CAEA,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,KAAK;EACL,SAAS;EACT,4BAAA;EACA,OAAO;GACL,WAAW,IAAI,oBAAoB,WAAW;GAC9C,WAAW,IAAI,oBAAoB,WAAW;GAC9C,GAAG;EACL;YAEA,oBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,SAAS;GAAG,KAAK,IAAI;GACzC;EACE,CAAA;CACF,CAAA;AAET;AAEA,mBAAmB,cAAc"}
+{"version":3,"file":"ScrollAreaViewport.mjs","names":[],"sources":["../../../../src/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { Box, BoxProps, ElementProps } from '../../../core';\nimport { useScrollAreaContext } from '../ScrollArea.context';\n\nexport interface ScrollAreaViewportProps extends BoxProps, ElementProps<'div'> {}\n\nexport function ScrollAreaViewport({\n  children,\n  style,\n  ref,\n  onWheel,\n  ...others\n}: ScrollAreaViewportProps) {\n  const ctx = useScrollAreaContext();\n  const rootRef = useMergedRef(ref, ctx.onViewportChange);\n\n  const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {\n    onWheel?.(event);\n\n    // Fix for Windows: Allow horizontal scrolling even when vertical scroll is at boundaries\n    // When at vertical boundaries, Windows tries to scroll the parent/page instead of allowing horizontal scroll\n    if (ctx.scrollbarXEnabled && ctx.viewport && event.shiftKey) {\n      const { scrollTop, scrollHeight, clientHeight, scrollWidth, clientWidth } = ctx.viewport;\n      const isAtTop = scrollTop < 1;\n      const isAtBottom = scrollTop >= scrollHeight - clientHeight - 1;\n      const canScrollHorizontally = scrollWidth > clientWidth;\n\n      if (canScrollHorizontally && (isAtTop || isAtBottom)) {\n        event.stopPropagation();\n      }\n    }\n  };\n\n  return (\n    <Box\n      {...others}\n      ref={rootRef}\n      onWheel={handleWheel}\n      data-scrollarea-viewport\n      style={{\n        overflowX: ctx.scrollbarXEnabled ? 'scroll' : 'hidden',\n        overflowY: ctx.scrollbarYEnabled ? 'scroll' : 'hidden',\n        ...style,\n      }}\n    >\n      <div {...ctx.getStyles('content')} ref={ctx.onContentChange}>\n        {children}\n      </div>\n    </Box>\n  );\n}\n\nScrollAreaViewport.displayName = '@mantine/core/ScrollAreaViewport';\n"],"mappings":";;;;;;AAMA,SAAgB,mBAAmB,EACjC,UACA,OACA,KACA,SACA,GAAG,UACuB;CAC1B,MAAM,MAAM,qBAAqB;CACjC,MAAM,UAAU,aAAa,KAAK,IAAI,gBAAgB;CAEtD,MAAM,eAAe,UAA4C;EAC/D,UAAU,KAAK;EAIf,IAAI,IAAI,qBAAqB,IAAI,YAAY,MAAM,UAAU;GAC3D,MAAM,EAAE,WAAW,cAAc,cAAc,aAAa,gBAAgB,IAAI;GAChF,MAAM,UAAU,YAAY;GAC5B,MAAM,aAAa,aAAa,eAAe,eAAe;GAG9D,IAF8B,cAAc,gBAEd,WAAW,aACvC,MAAM,gBAAgB;EAE1B;CACF;CAEA,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,KAAK;EACL,SAAS;EACT,4BAAA;EACA,OAAO;GACL,WAAW,IAAI,oBAAoB,WAAW;GAC9C,WAAW,IAAI,oBAAoB,WAAW;GAC9C,GAAG;EACL;EAEA,UAAA,oBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,SAAS;GAAG,KAAK,IAAI;GACzC;EACE,CAAA;CACF,CAAA;AAET;AAEA,mBAAmB,cAAc"}

package/esm/components/Scroller/Scroller.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Scroller.mjs","names":["classes"],"sources":["../../../src/components/Scroller/Scroller.tsx"],"sourcesContent":["import { Ref } from 'react';\nimport { useScroller } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AccordionChevron } from '../Accordion';\nimport { UnstyledButton } from '../UnstyledButton';\nimport classes from './Scroller.module.css';\n\nexport type ScrollerStylesNames = 'root' | 'container' | 'content' | 'control' | 'chevron';\nexport type ScrollerCssVariables = {\n  root: '--scroller-control-size' | '--scroller-background-color';\n};\n\nexport interface ScrollerProps\n  extends BoxProps, StylesApiProps<ScrollerFactory>, ElementProps<'div'> {\n  /** Content to display */\n  children: React.ReactNode;\n\n  /** Amount of pixels to scroll when clicking the control buttons, `200` by default */\n  scrollAmount?: number;\n\n  /** Size of the control buttons, @default 60px */\n  controlSize?: string | number;\n\n  /** Background color for the gradient fade on controls, `'var(--mantine-color-body)'` by default */\n  edgeGradientColor?: string;\n\n  /** Props passed to the start control button */\n  startControlProps?: React.ComponentProps<'button'>;\n\n  /** Props passed to the end control button */\n  endControlProps?: React.ComponentProps<'button'>;\n\n  /** Icon component for the start control, AccordionChevron by default */\n  startControlIcon?: React.ReactNode;\n\n  /** Icon component for the end control, AccordionChevron by default */\n  endControlIcon?: React.ReactNode;\n\n  /** Determines whether start control should always be visible regardless of scroll position, `false` by default */\n  showStartControl?: boolean;\n\n  /** Determines whether end control should always be visible regardless of scroll position, `false` by default */\n  showEndControl?: boolean;\n\n  /** Determines whether content can be scrolled by dragging with mouse, `true` by default */\n  draggable?: boolean;\n\n  /** Ref for the scroll container element */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ScrollerFactory = Factory<{\n  props: ScrollerProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollerStylesNames;\n  vars: ScrollerCssVariables;\n}>;\n\nconst defaultProps: Partial<ScrollerProps> = {\n  scrollAmount: 200,\n  draggable: true,\n};\n\nconst varsResolver = createVarsResolver<ScrollerFactory>(\n  (theme, { controlSize, edgeGradientColor }) => ({\n    root: {\n      '--scroller-control-size': rem(controlSize),\n      '--scroller-background-color': edgeGradientColor\n        ? getThemeColor(edgeGradientColor, theme)\n        : undefined,\n    },\n  })\n);\n\nexport const Scroller = factory<ScrollerFactory>((_props) => {\n  const props = useProps('Scroller', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    scrollAmount,\n    controlSize,\n    edgeGradientColor,\n    startControlProps,\n    endControlProps,\n    startControlIcon,\n    endControlIcon,\n    showStartControl,\n    showEndControl,\n    draggable,\n    mod,\n    ref,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ScrollerFactory>({\n    name: 'Scroller',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n    attributes,\n  });\n\n  const scroller = useScroller({\n    scrollAmount,\n    draggable,\n  });\n\n  const showStart = showStartControl || scroller.canScrollStart;\n  const showEnd = showEndControl || scroller.canScrollEnd;\n\n  return (\n    <Box {...getStyles('root')} ref={ref} mod={mod} {...others}>\n      <UnstyledButton\n        {...getStyles('control')}\n        onClick={scroller.scrollStart}\n        data-position=\"start\"\n        data-hidden={!showStart || undefined}\n        aria-label=\"Scroll left\"\n        tabIndex={showStart ? 0 : -1}\n        {...startControlProps}\n      >\n        {startControlIcon || <AccordionChevron {...getStyles('chevron')} />}\n      </UnstyledButton>\n\n      <div\n        {...getStyles('container')}\n        ref={scroller.ref}\n        role=\"presentation\"\n        data-draggable={draggable || undefined}\n        {...scroller.dragHandlers}\n      >\n        <div {...getStyles('content')}>{children}</div>\n      </div>\n\n      <UnstyledButton\n        {...getStyles('control')}\n        onClick={scroller.scrollEnd}\n        data-position=\"end\"\n        data-hidden={!showEnd || undefined}\n        aria-label=\"Scroll right\"\n        tabIndex={showEnd ? 0 : -1}\n        {...endControlProps}\n      >\n        {endControlIcon || <AccordionChevron {...getStyles('chevron')} />}\n      </UnstyledButton>\n    </Box>\n  );\n});\n\nScroller.classes = classes;\nScroller.varsResolver = varsResolver;\nScroller.displayName = '@mantine/core/Scroller';\n\nexport namespace Scroller {\n  export type Props = ScrollerProps;\n  export type StylesNames = ScrollerStylesNames;\n  export type CssVariables = ScrollerCssVariables;\n  export type Factory = ScrollerFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;AAsEA,MAAM,eAAuC;CAC3C,cAAc;CACd,WAAW;AACb;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,aAAa,yBAAyB,EAC9C,MAAM;CACJ,2BAA2B,IAAI,WAAW;CAC1C,+BAA+B,oBAC3B,cAAc,mBAAmB,KAAK,IACtC,KAAA;AACN,EACF,EACF;AAEA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,cACA,aACA,mBACA,mBACA,iBACA,kBACA,gBACA,kBACA,gBACA,WACA,KACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,WAAW,YAAY;EAC3B;EACA;CACF,CAAC;CAED,MAAM,YAAY,oBAAoB,SAAS;CAC/C,MAAM,UAAU,kBAAkB,SAAS;CAE3C,OACE,qBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAQ;EAAU;EAAK,GAAI;YAApD;GACE,oBAAC,gBAAD;IACE,GAAI,UAAU,SAAS;IACvB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,aAAa,KAAA;IAC3B,cAAW;IACX,UAAU,YAAY,IAAI;IAC1B,GAAI;cAEH,oBAAoB,oBAAC,kBAAD,EAAkB,GAAI,UAAU,SAAS,EAAI,CAAA;GACpD,CAAA;GAEhB,oBAAC,OAAD;IACE,GAAI,UAAU,WAAW;IACzB,KAAK,SAAS;IACd,MAAK;IACL,kBAAgB,aAAa,KAAA;IAC7B,GAAI,SAAS;cAEb,oBAAC,OAAD;KAAK,GAAI,UAAU,SAAS;KAAI;IAAc,CAAA;GAC3C,CAAA;GAEL,oBAAC,gBAAD;IACE,GAAI,UAAU,SAAS;IACvB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,WAAW,KAAA;IACzB,cAAW;IACX,UAAU,UAAU,IAAI;IACxB,GAAI;cAEH,kBAAkB,oBAAC,kBAAD,EAAkB,GAAI,UAAU,SAAS,EAAI,CAAA;GAClD,CAAA;EACb;;AAET,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc"}
+{"version":3,"file":"Scroller.mjs","names":["classes"],"sources":["../../../src/components/Scroller/Scroller.tsx"],"sourcesContent":["import { Ref } from 'react';\nimport { useScroller } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AccordionChevron } from '../Accordion';\nimport { UnstyledButton } from '../UnstyledButton';\nimport classes from './Scroller.module.css';\n\nexport type ScrollerStylesNames = 'root' | 'container' | 'content' | 'control' | 'chevron';\nexport type ScrollerCssVariables = {\n  root: '--scroller-control-size' | '--scroller-background-color';\n};\n\nexport interface ScrollerProps\n  extends BoxProps, StylesApiProps<ScrollerFactory>, ElementProps<'div'> {\n  /** Content to display */\n  children: React.ReactNode;\n\n  /** Amount of pixels to scroll when clicking the control buttons, `200` by default */\n  scrollAmount?: number;\n\n  /** Size of the control buttons, @default 60px */\n  controlSize?: string | number;\n\n  /** Background color for the gradient fade on controls, `'var(--mantine-color-body)'` by default */\n  edgeGradientColor?: string;\n\n  /** Props passed to the start control button */\n  startControlProps?: React.ComponentProps<'button'>;\n\n  /** Props passed to the end control button */\n  endControlProps?: React.ComponentProps<'button'>;\n\n  /** Icon component for the start control, AccordionChevron by default */\n  startControlIcon?: React.ReactNode;\n\n  /** Icon component for the end control, AccordionChevron by default */\n  endControlIcon?: React.ReactNode;\n\n  /** Determines whether start control should always be visible regardless of scroll position, `false` by default */\n  showStartControl?: boolean;\n\n  /** Determines whether end control should always be visible regardless of scroll position, `false` by default */\n  showEndControl?: boolean;\n\n  /** Determines whether content can be scrolled by dragging with mouse, `true` by default */\n  draggable?: boolean;\n\n  /** Ref for the scroll container element */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type ScrollerFactory = Factory<{\n  props: ScrollerProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollerStylesNames;\n  vars: ScrollerCssVariables;\n}>;\n\nconst defaultProps: Partial<ScrollerProps> = {\n  scrollAmount: 200,\n  draggable: true,\n};\n\nconst varsResolver = createVarsResolver<ScrollerFactory>(\n  (theme, { controlSize, edgeGradientColor }) => ({\n    root: {\n      '--scroller-control-size': rem(controlSize),\n      '--scroller-background-color': edgeGradientColor\n        ? getThemeColor(edgeGradientColor, theme)\n        : undefined,\n    },\n  })\n);\n\nexport const Scroller = factory<ScrollerFactory>((_props) => {\n  const props = useProps('Scroller', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    scrollAmount,\n    controlSize,\n    edgeGradientColor,\n    startControlProps,\n    endControlProps,\n    startControlIcon,\n    endControlIcon,\n    showStartControl,\n    showEndControl,\n    draggable,\n    mod,\n    ref,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ScrollerFactory>({\n    name: 'Scroller',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n    attributes,\n  });\n\n  const scroller = useScroller({\n    scrollAmount,\n    draggable,\n  });\n\n  const showStart = showStartControl || scroller.canScrollStart;\n  const showEnd = showEndControl || scroller.canScrollEnd;\n\n  return (\n    <Box {...getStyles('root')} ref={ref} mod={mod} {...others}>\n      <UnstyledButton\n        {...getStyles('control')}\n        onClick={scroller.scrollStart}\n        data-position=\"start\"\n        data-hidden={!showStart || undefined}\n        aria-label=\"Scroll left\"\n        tabIndex={showStart ? 0 : -1}\n        {...startControlProps}\n      >\n        {startControlIcon || <AccordionChevron {...getStyles('chevron')} />}\n      </UnstyledButton>\n\n      <div\n        {...getStyles('container')}\n        ref={scroller.ref}\n        role=\"presentation\"\n        data-draggable={draggable || undefined}\n        {...scroller.dragHandlers}\n      >\n        <div {...getStyles('content')}>{children}</div>\n      </div>\n\n      <UnstyledButton\n        {...getStyles('control')}\n        onClick={scroller.scrollEnd}\n        data-position=\"end\"\n        data-hidden={!showEnd || undefined}\n        aria-label=\"Scroll right\"\n        tabIndex={showEnd ? 0 : -1}\n        {...endControlProps}\n      >\n        {endControlIcon || <AccordionChevron {...getStyles('chevron')} />}\n      </UnstyledButton>\n    </Box>\n  );\n});\n\nScroller.classes = classes;\nScroller.varsResolver = varsResolver;\nScroller.displayName = '@mantine/core/Scroller';\n\nexport namespace Scroller {\n  export type Props = ScrollerProps;\n  export type StylesNames = ScrollerStylesNames;\n  export type CssVariables = ScrollerCssVariables;\n  export type Factory = ScrollerFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;AAsEA,MAAM,eAAuC;CAC3C,cAAc;CACd,WAAW;AACb;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,aAAa,yBAAyB,EAC9C,MAAM;CACJ,2BAA2B,IAAI,WAAW;CAC1C,+BAA+B,oBAC3B,cAAc,mBAAmB,KAAK,IACtC,KAAA;AACN,EACF,EACF;AAEA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,cACA,aACA,mBACA,mBACA,iBACA,kBACA,gBACA,kBACA,gBACA,WACA,KACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,WAAW,YAAY;EAC3B;EACA;CACF,CAAC;CAED,MAAM,YAAY,oBAAoB,SAAS;CAC/C,MAAM,UAAU,kBAAkB,SAAS;CAE3C,OACE,qBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAQ;EAAU;EAAK,GAAI;EAApD,UAAA;GACE,oBAAC,gBAAD;IACE,GAAI,UAAU,SAAS;IACvB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,aAAa,KAAA;IAC3B,cAAW;IACX,UAAU,YAAY,IAAI;IAC1B,GAAI;IAEH,UAAA,oBAAoB,oBAAC,kBAAD,EAAkB,GAAI,UAAU,SAAS,EAAI,CAAA;GACpD,CAAA;GAEhB,oBAAC,OAAD;IACE,GAAI,UAAU,WAAW;IACzB,KAAK,SAAS;IACd,MAAK;IACL,kBAAgB,aAAa,KAAA;IAC7B,GAAI,SAAS;IAEb,UAAA,oBAAC,OAAD;KAAK,GAAI,UAAU,SAAS;KAAI;IAAc,CAAA;GAC3C,CAAA;GAEL,oBAAC,gBAAD;IACE,GAAI,UAAU,SAAS;IACvB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,WAAW,KAAA;IACzB,cAAW;IACX,UAAU,UAAU,IAAI;IACxB,GAAI;IAEH,UAAA,kBAAkB,oBAAC,kBAAD,EAAkB,GAAI,UAAU,SAAS,EAAI,CAAA;GAClD,CAAA;EACb;;AAET,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc"}

package/esm/components/SegmentedControl/SegmentedControl.mjs

@@ -51,8 +51,9 @@ const SegmentedControl = genericFactory((_props) => {
 	const [parent, setParent] = useState(null);
 	const [refs, setRefs] = useState({});
 	const setElementRef = (element, val) => {
+		if (element === null || refs[val] === element) return;
 		refs[val] = element;
-		setRefs(refs);
+		setRefs({ ...refs });
 	};
 	const [_value, handleValueChange] = useUncontrolled({
 		value,
@@ -61,6 +62,7 @@ const SegmentedControl = genericFactory((_props) => {
 		onChange
 	});
 	const uuid = useId$1(name);
+	const dataValues = _data.map((item) => `${item.value}`);
 	const controls = _data.map((item) => /* @__PURE__ */ createElement(Box, {
 		...getStyles("control"),
 		mod: {
@@ -103,6 +105,15 @@ const SegmentedControl = genericFactory((_props) => {
 	useShallowEffect(() => {
 		setKey(randomId());
 	}, [data.length]);
+	useShallowEffect(() => {
+		setRefs((current) => {
+			const next = {};
+			dataValues.forEach((value) => {
+				if (value in current) next[value] = current[value];
+			});
+			return Object.keys(next).length === Object.keys(current).length ? current : next;
+		});
+	}, [dataValues]);
 	if (data.length === 0) return null;
 	return /* @__PURE__ */ jsxs(Box, {
 		...getStyles("root"),