@mantine/core 9.0.0-alpha.7 → 9.0.1

package/esm/components/Popover/Popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.mjs","names":["useId"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useClickOutside, useId } from '@mantine/hooks';\nimport {\n  createVarsResolver,\n  ElementProps,\n  ExtendComponent,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getShadow,\n  MantineRadius,\n  MantineShadow,\n  StylesApiProps,\n  useDirection,\n  useMantineEnv,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  FloatingStrategy,\n  getFloatingPosition,\n} from '../../utils/Floating';\nimport { Overlay, OverlayProps } from '../Overlay';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { Transition, TransitionOverride } from '../Transition';\nimport { PopoverContextProvider, PopoverContextValue } from './Popover.context';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\nimport { PopoverDropdown, PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';\nimport { PopoverTarget, PopoverTargetProps } from './PopoverTarget/PopoverTarget';\nimport { usePopover } from './use-popover';\nimport classes from './Popover.module.css';\n\nexport type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';\nexport type PopoverCssVariables = {\n  dropdown: '--popover-radius' | '--popover-shadow';\n};\n\nexport interface __PopoverProps {\n  /** Dropdown position relative to the target element @default 'bottom' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 8 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Called when dropdown position changes */\n  onPositionChange?: (position: FloatingPosition) => void;\n\n  /** Called when dropdown closes */\n  onClose?: () => void;\n\n  /** Called when the popover is dismissed by clicking outside or by pressing escape */\n  onDismiss?: () => void;\n\n  /** Called when dropdown opens */\n  onOpen?: () => void;\n\n  /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */\n  keepMounted?: boolean;\n\n  /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\n\n  /** Called when exit transition ends */\n  onExitTransitionEnd?: () => void;\n\n  /** Called when enter transition ends */\n  onEnterTransitionEnd?: () => void;\n\n  /** Dropdown width, or `'target'` to make dropdown width the same as target element @default 'max-content' */\n  width?: PopoverWidth;\n\n  /** Floating ui middlewares to configure position handling @default { flip: true, shift: true, inline: false } */\n  middlewares?: PopoverMiddlewares;\n\n  /** Determines whether component should have an arrow @default false */\n  withArrow?: boolean;\n\n  /** Determines whether the overlay should be displayed when the dropdown is opened @default false */\n  withOverlay?: boolean;\n\n  /** Props passed down to `Overlay` component */\n  overlayProps?: OverlayProps & ElementProps<'div'>;\n\n  /** Arrow size in px @default 7 */\n  arrowSize?: number;\n\n  /** Arrow offset in px @default 5 */\n  arrowOffset?: number;\n\n  /** Arrow `border-radius` in px @default 0 */\n  arrowRadius?: number;\n\n  /** Arrow position */\n  arrowPosition?: ArrowPosition;\n\n  /** Determines whether dropdown should be rendered within the `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props to pass down to the `Portal` when `withinPortal` is true */\n  portalProps?: BasePortalProps;\n\n  /** Dropdown `z-index` @default 300 */\n  zIndex?: string | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */\n  shadow?: MantineShadow;\n\n  /** If set, popover dropdown will not be rendered */\n  disabled?: boolean;\n\n  /** Determines whether focus should be automatically returned to control when dropdown closes @default false */\n  returnFocus?: boolean;\n\n  /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n  floatingStrategy?: FloatingStrategy;\n\n  /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */\n  hideDetached?: boolean;\n\n  /** Prevents popover from flipping/shifting when it the dropdown is visible */\n  preventPositionChangeWhenVisible?: boolean;\n}\n\nexport interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {\n  __staticSelector?: string;\n\n  /** `Popover.Target` and `Popover.Dropdown` components */\n  children?: React.ReactNode;\n\n  /** Initial opened state for uncontrolled component */\n  defaultOpened?: boolean;\n\n  /** Controlled dropdown opened state */\n  opened?: boolean;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Determines whether dropdown should be closed on outside clicks @default true */\n  closeOnClickOutside?: boolean;\n\n  /** Events that trigger outside clicks */\n  clickOutsideEvents?: string[];\n\n  /** Determines whether focus should be trapped within dropdown @default false */\n  trapFocus?: boolean;\n\n  /** Determines whether dropdown should be closed when `Escape` key is pressed @default true */\n  closeOnEscape?: boolean;\n\n  /** Id base to create accessibility connections */\n  id?: string;\n\n  /** Determines whether dropdown and target elements should have accessible roles @default true */\n  withRoles?: boolean;\n}\n\nexport type PopoverFactory = Factory<{\n  props: PopoverProps;\n  stylesNames: PopoverStylesNames;\n  vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n  position: 'bottom',\n  offset: 8,\n  transitionProps: { transition: 'fade', duration: 150 },\n  middlewares: { flip: true, shift: true, inline: false },\n  arrowSize: 7,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  closeOnClickOutside: true,\n  withinPortal: true,\n  closeOnEscape: true,\n  trapFocus: false,\n  withRoles: true,\n  returnFocus: false,\n  withOverlay: false,\n  hideDetached: true,\n  clickOutsideEvents: ['mousedown', 'touchstart'],\n  zIndex: getDefaultZIndex('popover'),\n  __staticSelector: 'Popover',\n  width: 'max-content',\n} satisfies Partial<PopoverProps>;\n\nconst varsResolver = createVarsResolver<PopoverFactory>((_, { radius, shadow }) => ({\n  dropdown: {\n    '--popover-radius': radius === undefined ? undefined : getRadius(radius),\n    '--popover-shadow': getShadow(shadow),\n  },\n}));\n\nexport function Popover(_props: PopoverProps) {\n  const props = useProps('Popover', defaultProps, _props);\n  const {\n    children,\n    position,\n    offset,\n    onPositionChange,\n    opened,\n    transitionProps,\n    onExitTransitionEnd,\n    onEnterTransitionEnd,\n    width,\n    middlewares,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    unstyled,\n    classNames,\n    styles,\n    closeOnClickOutside,\n    withinPortal,\n    portalProps,\n    closeOnEscape,\n    clickOutsideEvents,\n    trapFocus,\n    onClose,\n    onDismiss,\n    onOpen,\n    onChange,\n    zIndex,\n    radius,\n    shadow,\n    id,\n    defaultOpened,\n    __staticSelector,\n    withRoles,\n    disabled,\n    returnFocus,\n    variant,\n    keepMounted,\n    vars,\n    floatingStrategy,\n    withOverlay,\n    overlayProps,\n    hideDetached,\n    attributes,\n    preventPositionChangeWhenVisible,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<PopoverFactory>({\n    name: __staticSelector,\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'dropdown',\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedStyles } = useResolvedStylesApi<PopoverFactory>({ classNames, styles, props });\n\n  const [dropdownVisible, setDropdownVisible] = useState(opened ?? defaultOpened ?? false);\n  const positionRef = useRef<FloatingPosition>(position);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const [targetNode, setTargetNode] = useState<HTMLElement | null>(null);\n  const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);\n  const { dir } = useDirection();\n  const env = useMantineEnv();\n\n  const uid = useId(id);\n  const popover = usePopover({\n    middlewares,\n    width,\n    position: getFloatingPosition(dir, position),\n    offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n    arrowRef,\n    arrowOffset,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    onChange,\n    onOpen,\n    onClose,\n    onDismiss,\n    strategy: floatingStrategy,\n    dropdownVisible,\n    setDropdownVisible,\n    positionRef,\n    disabled,\n    preventPositionChangeWhenVisible,\n    keepMounted,\n  });\n\n  useClickOutside(\n    () => {\n      if (closeOnClickOutside) {\n        popover.onClose();\n        onDismiss?.();\n      }\n    },\n    clickOutsideEvents,\n    [targetNode, dropdownNode]\n  );\n\n  const reference = useCallback(\n    (node: HTMLElement) => {\n      setTargetNode(node);\n      popover.floating.refs.setReference(node);\n    },\n    [popover.floating.refs.setReference]\n  );\n\n  const floating = useCallback(\n    (node: HTMLElement) => {\n      setDropdownNode(node);\n      popover.floating.refs.setFloating(node);\n    },\n    [popover.floating.refs.setFloating]\n  );\n\n  const onExited = useCallback(() => {\n    transitionProps?.onExited?.();\n    onExitTransitionEnd?.();\n    setDropdownVisible(false);\n    // Only reset position if preventPositionChangeWhenVisible is false\n    // to maintain the flipped position on subsequent opens\n    if (!preventPositionChangeWhenVisible) {\n      positionRef.current = position;\n    }\n  }, [transitionProps?.onExited, onExitTransitionEnd, preventPositionChangeWhenVisible, position]);\n\n  const onEntered = useCallback(() => {\n    transitionProps?.onEntered?.();\n    onEnterTransitionEnd?.();\n  }, [transitionProps?.onEntered, onEnterTransitionEnd]);\n\n  return (\n    <PopoverContextProvider\n      value={{\n        returnFocus,\n        disabled,\n        controlled: popover.controlled,\n        reference,\n        floating,\n        x: popover.floating.x,\n        y: popover.floating.y,\n        arrowX: popover.floating?.middlewareData?.arrow?.x,\n        arrowY: popover.floating?.middlewareData?.arrow?.y,\n        opened: popover.opened,\n        arrowRef,\n        transitionProps: { ...transitionProps, onExited, onEntered },\n        width,\n        withArrow,\n        arrowSize,\n        arrowOffset,\n        arrowRadius,\n        arrowPosition,\n        placement: popover.floating.placement,\n        trapFocus,\n        withinPortal,\n        portalProps,\n        zIndex,\n        radius,\n        shadow,\n        closeOnEscape,\n        onDismiss,\n        onClose: popover.onClose,\n        onToggle: popover.onToggle,\n        getTargetId: () => uid,\n        getDropdownId: () => `${uid}-dropdown`,\n        withRoles,\n        targetProps: others,\n        __staticSelector,\n        classNames,\n        styles,\n        unstyled,\n        variant,\n        keepMounted,\n        getStyles,\n        resolvedStyles,\n        floatingStrategy,\n        referenceHidden:\n          hideDetached && env !== 'test'\n            ? popover.floating.middlewareData.hide?.referenceHidden\n            : false,\n      }}\n    >\n      {children}\n      {withOverlay && (\n        <Transition\n          transition=\"fade\"\n          mounted={popover.opened}\n          duration={transitionProps?.duration || 250}\n          exitDuration={transitionProps?.exitDuration || 250}\n        >\n          {(transitionStyles) => (\n            <OptionalPortal withinPortal={withinPortal}>\n              <Overlay\n                {...overlayProps}\n                {...getStyles('overlay', {\n                  className: overlayProps?.className,\n                  style: [transitionStyles, overlayProps?.style],\n                })}\n              />\n            </OptionalPortal>\n          )}\n        </Transition>\n      )}\n    </PopoverContextProvider>\n  );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.varsResolver = varsResolver;\nPopover.displayName = '@mantine/core/Popover';\nPopover.extend = (input: ExtendComponent<PopoverFactory>) => input;\n\nexport namespace Popover {\n  export type Props = PopoverProps;\n  export type __Props = __PopoverProps;\n  export type Factory = PopoverFactory;\n  export type StylesNames = PopoverStylesNames;\n  export type TargetProps = PopoverTargetProps;\n  export type DropdownProps = PopoverDropdownProps;\n  export type Width = PopoverWidth;\n  export type ContextValue = PopoverContextValue;\n\n  export namespace Target {\n    export type Props = PopoverTargetProps;\n  }\n\n  export namespace Dropdown {\n    export type Props = PopoverDropdownProps;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Popover.mjs","names":["useId"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useClickOutside, useId } from '@mantine/hooks';\nimport {\n  createVarsResolver,\n  ElementProps,\n  ExtendComponent,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getShadow,\n  MantineRadius,\n  MantineShadow,\n  StylesApiProps,\n  useDirection,\n  useMantineEnv,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  FloatingStrategy,\n  getFloatingPosition,\n} from '../../utils/Floating';\nimport { Overlay, OverlayProps } from '../Overlay';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { Transition, TransitionOverride } from '../Transition';\nimport { PopoverContextProvider, PopoverContextValue } from './Popover.context';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\nimport { PopoverDropdown, PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';\nimport { PopoverTarget, PopoverTargetProps } from './PopoverTarget/PopoverTarget';\nimport { usePopover } from './use-popover';\nimport classes from './Popover.module.css';\n\nexport type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';\nexport type PopoverCssVariables = {\n  dropdown: '--popover-radius' | '--popover-shadow';\n};\n\nexport interface __PopoverProps {\n  /** Dropdown position relative to the target element @default 'bottom' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 8 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Called when dropdown position changes */\n  onPositionChange?: (position: FloatingPosition) => void;\n\n  /** Called when dropdown closes */\n  onClose?: () => void;\n\n  /** Called when the popover is dismissed by clicking outside or by pressing escape */\n  onDismiss?: () => void;\n\n  /** Called when dropdown opens */\n  onOpen?: () => void;\n\n  /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */\n  keepMounted?: boolean;\n\n  /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\n\n  /** Called when exit transition ends */\n  onExitTransitionEnd?: () => void;\n\n  /** Called when enter transition ends */\n  onEnterTransitionEnd?: () => void;\n\n  /** Dropdown width, or `'target'` to make dropdown width the same as target element @default 'max-content' */\n  width?: PopoverWidth;\n\n  /** Floating ui middlewares to configure position handling @default { flip: true, shift: true, inline: false } */\n  middlewares?: PopoverMiddlewares;\n\n  /** Determines whether component should have an arrow @default false */\n  withArrow?: boolean;\n\n  /** Determines whether the overlay should be displayed when the dropdown is opened @default false */\n  withOverlay?: boolean;\n\n  /** Props passed down to `Overlay` component */\n  overlayProps?: OverlayProps & ElementProps<'div'>;\n\n  /** Arrow size in px @default 7 */\n  arrowSize?: number;\n\n  /** Arrow offset in px @default 5 */\n  arrowOffset?: number;\n\n  /** Arrow `border-radius` in px @default 0 */\n  arrowRadius?: number;\n\n  /** Arrow position */\n  arrowPosition?: ArrowPosition;\n\n  /** Determines whether dropdown should be rendered within the `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props to pass down to the `Portal` when `withinPortal` is true */\n  portalProps?: BasePortalProps;\n\n  /** Dropdown `z-index` @default 300 */\n  zIndex?: string | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */\n  shadow?: MantineShadow;\n\n  /** If set, popover dropdown will not be rendered */\n  disabled?: boolean;\n\n  /** Determines whether focus should be automatically returned to control when dropdown closes @default false */\n  returnFocus?: boolean;\n\n  /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n  floatingStrategy?: FloatingStrategy;\n\n  /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */\n  hideDetached?: boolean;\n\n  /** Prevents popover from flipping/shifting when it the dropdown is visible */\n  preventPositionChangeWhenVisible?: boolean;\n}\n\nexport interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {\n  __staticSelector?: string;\n\n  /** `Popover.Target` and `Popover.Dropdown` components */\n  children?: React.ReactNode;\n\n  /** Initial opened state for uncontrolled component */\n  defaultOpened?: boolean;\n\n  /** Controlled dropdown opened state */\n  opened?: boolean;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Determines whether dropdown should be closed on outside clicks @default true */\n  closeOnClickOutside?: boolean;\n\n  /** Events that trigger outside clicks */\n  clickOutsideEvents?: string[];\n\n  /** Determines whether focus should be trapped within dropdown @default false */\n  trapFocus?: boolean;\n\n  /** Determines whether dropdown should be closed when `Escape` key is pressed @default true */\n  closeOnEscape?: boolean;\n\n  /** Id base to create accessibility connections */\n  id?: string;\n\n  /** Determines whether dropdown and target elements should have accessible roles @default true */\n  withRoles?: boolean;\n}\n\nexport type PopoverFactory = Factory<{\n  props: PopoverProps;\n  stylesNames: PopoverStylesNames;\n  vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n  position: 'bottom',\n  offset: 8,\n  transitionProps: { transition: 'fade', duration: 150 },\n  middlewares: { flip: true, shift: true, inline: false },\n  arrowSize: 7,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  closeOnClickOutside: true,\n  withinPortal: true,\n  closeOnEscape: true,\n  trapFocus: false,\n  withRoles: true,\n  returnFocus: false,\n  withOverlay: false,\n  hideDetached: true,\n  clickOutsideEvents: ['mousedown', 'touchstart'],\n  zIndex: getDefaultZIndex('popover'),\n  __staticSelector: 'Popover',\n  width: 'max-content',\n} satisfies Partial<PopoverProps>;\n\nconst varsResolver = createVarsResolver<PopoverFactory>((_, { radius, shadow }) => ({\n  dropdown: {\n    '--popover-radius': radius === undefined ? undefined : getRadius(radius),\n    '--popover-shadow': getShadow(shadow),\n  },\n}));\n\nexport function Popover(_props: PopoverProps) {\n  const props = useProps('Popover', defaultProps, _props);\n  const {\n    children,\n    position,\n    offset,\n    onPositionChange,\n    opened,\n    transitionProps,\n    onExitTransitionEnd,\n    onEnterTransitionEnd,\n    width,\n    middlewares,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    unstyled,\n    classNames,\n    styles,\n    closeOnClickOutside,\n    withinPortal,\n    portalProps,\n    closeOnEscape,\n    clickOutsideEvents,\n    trapFocus,\n    onClose,\n    onDismiss,\n    onOpen,\n    onChange,\n    zIndex,\n    radius,\n    shadow,\n    id,\n    defaultOpened,\n    __staticSelector,\n    withRoles,\n    disabled,\n    returnFocus,\n    variant,\n    keepMounted,\n    vars,\n    floatingStrategy,\n    withOverlay,\n    overlayProps,\n    hideDetached,\n    attributes,\n    preventPositionChangeWhenVisible,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<PopoverFactory>({\n    name: __staticSelector,\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'dropdown',\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedStyles } = useResolvedStylesApi<PopoverFactory>({ classNames, styles, props });\n\n  const [dropdownVisible, setDropdownVisible] = useState(opened ?? defaultOpened ?? false);\n  const positionRef = useRef<FloatingPosition>(position);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const [targetNode, setTargetNode] = useState<HTMLElement | null>(null);\n  const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);\n  const { dir } = useDirection();\n  const env = useMantineEnv();\n\n  const uid = useId(id);\n  const popover = usePopover({\n    middlewares,\n    width,\n    position: getFloatingPosition(dir, position),\n    offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n    arrowRef,\n    arrowOffset,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    onChange,\n    onOpen,\n    onClose,\n    onDismiss,\n    strategy: floatingStrategy,\n    dropdownVisible,\n    setDropdownVisible,\n    positionRef,\n    disabled,\n    preventPositionChangeWhenVisible,\n    keepMounted,\n  });\n\n  useClickOutside(\n    () => {\n      if (closeOnClickOutside) {\n        popover.onClose();\n        onDismiss?.();\n      }\n    },\n    clickOutsideEvents,\n    [targetNode, dropdownNode]\n  );\n\n  const reference = useCallback(\n    (node: HTMLElement) => {\n      setTargetNode(node);\n      popover.floating.refs.setReference(node);\n    },\n    [popover.floating.refs.setReference]\n  );\n\n  const floating = useCallback(\n    (node: HTMLElement) => {\n      setDropdownNode(node);\n      popover.floating.refs.setFloating(node);\n    },\n    [popover.floating.refs.setFloating]\n  );\n\n  const onExited = useCallback(() => {\n    transitionProps?.onExited?.();\n    onExitTransitionEnd?.();\n    setDropdownVisible(false);\n    // Only reset position if preventPositionChangeWhenVisible is false\n    // to maintain the flipped position on subsequent opens\n    if (!preventPositionChangeWhenVisible) {\n      positionRef.current = position;\n    }\n  }, [transitionProps?.onExited, onExitTransitionEnd, preventPositionChangeWhenVisible, position]);\n\n  const onEntered = useCallback(() => {\n    transitionProps?.onEntered?.();\n    onEnterTransitionEnd?.();\n  }, [transitionProps?.onEntered, onEnterTransitionEnd]);\n\n  return (\n    <PopoverContextProvider\n      value={{\n        returnFocus,\n        disabled,\n        controlled: popover.controlled,\n        reference,\n        floating,\n        x: popover.floating.x,\n        y: popover.floating.y,\n        arrowX: popover.floating?.middlewareData?.arrow?.x,\n        arrowY: popover.floating?.middlewareData?.arrow?.y,\n        opened: popover.opened,\n        arrowRef,\n        transitionProps: { ...transitionProps, onExited, onEntered },\n        width,\n        withArrow,\n        arrowSize,\n        arrowOffset,\n        arrowRadius,\n        arrowPosition,\n        placement: popover.floating.placement,\n        trapFocus,\n        withinPortal,\n        portalProps,\n        zIndex,\n        radius,\n        shadow,\n        closeOnEscape,\n        onDismiss,\n        onClose: popover.onClose,\n        onToggle: popover.onToggle,\n        getTargetId: () => uid,\n        getDropdownId: () => `${uid}-dropdown`,\n        withRoles,\n        targetProps: others,\n        __staticSelector,\n        classNames,\n        styles,\n        unstyled,\n        variant,\n        keepMounted,\n        getStyles,\n        resolvedStyles,\n        floatingStrategy,\n        referenceHidden:\n          hideDetached && env !== 'test'\n            ? popover.floating.middlewareData.hide?.referenceHidden\n            : false,\n      }}\n    >\n      {children}\n      {withOverlay && (\n        <Transition\n          transition=\"fade\"\n          mounted={popover.opened}\n          duration={transitionProps?.duration || 250}\n          exitDuration={transitionProps?.exitDuration || 250}\n        >\n          {(transitionStyles) => (\n            <OptionalPortal withinPortal={withinPortal}>\n              <Overlay\n                {...overlayProps}\n                {...getStyles('overlay', {\n                  className: overlayProps?.className,\n                  style: [transitionStyles, overlayProps?.style],\n                })}\n              />\n            </OptionalPortal>\n          )}\n        </Transition>\n      )}\n    </PopoverContextProvider>\n  );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.varsResolver = varsResolver;\nPopover.displayName = '@mantine/core/Popover';\nPopover.extend = (input: ExtendComponent<PopoverFactory>) => input;\nPopover.withProps = (fixedProps: Partial<PopoverProps>) => {\n  const Extended = (props: PopoverProps) => <Popover {...fixedProps} {...props} />;\n  Extended.extend = Popover.extend;\n  Extended.displayName = `WithProps(${Popover.displayName})`;\n  return Extended;\n};\n\nexport namespace Popover {\n  export type Props = PopoverProps;\n  export type __Props = __PopoverProps;\n  export type Factory = PopoverFactory;\n  export type StylesNames = PopoverStylesNames;\n  export type TargetProps = PopoverTargetProps;\n  export type DropdownProps = PopoverDropdownProps;\n  export type Width = PopoverWidth;\n  export type ContextValue = PopoverContextValue;\n\n  export namespace Target {\n    export type Props = PopoverTargetProps;\n  }\n\n  export namespace Dropdown {\n    export type Props = PopoverDropdownProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA0KA,MAAM,eAAe;CACnB,UAAU;CACV,QAAQ;CACR,iBAAiB;EAAE,YAAY;EAAQ,UAAU;EAAK;CACtD,aAAa;EAAE,MAAM;EAAM,OAAO;EAAM,QAAQ;EAAO;CACvD,WAAW;CACX,aAAa;CACb,aAAa;CACb,eAAe;CACf,qBAAqB;CACrB,cAAc;CACd,eAAe;CACf,WAAW;CACX,WAAW;CACX,aAAa;CACb,aAAa;CACb,cAAc;CACd,oBAAoB,CAAC,aAAa,aAAa;CAC/C,QAAQ,iBAAiB,UAAU;CACnC,kBAAkB;CAClB,OAAO;CACR;AAED,MAAM,eAAe,oBAAoC,GAAG,EAAE,QAAQ,cAAc,EAClF,UAAU;CACR,oBAAoB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;CACxE,oBAAoB,UAAU,OAAO;CACtC,EACF,EAAE;AAEH,SAAgB,QAAQ,QAAsB;CAC5C,MAAM,QAAQ,SAAS,WAAW,cAAc,OAAO;CACvD,MAAM,EACJ,UACA,UACA,QACA,kBACA,QACA,iBACA,qBACA,sBACA,OACA,aACA,WACA,WACA,aACA,aACA,eACA,UACA,YACA,QACA,qBACA,cACA,aACA,eACA,oBACA,WACA,SACA,WACA,QACA,UACA,QACA,QACA,QACA,IACA,eACA,kBACA,WACA,UACA,aACA,SACA,aACA,MACA,kBACA,aACA,cACA,cACA,YACA,kCACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA0B;EAC1C,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;EACD,CAAC;CAEF,MAAM,EAAE,mBAAmB,qBAAqC;EAAE;EAAY;EAAQ;EAAO,CAAC;CAE9F,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,UAAU,iBAAiB,MAAM;CACxF,MAAM,cAAc,OAAyB,SAAS;CACtD,MAAM,WAAW,OAA8B,KAAK;CACpD,MAAM,CAAC,YAAY,iBAAiB,SAA6B,KAAK;CACtE,MAAM,CAAC,cAAc,mBAAmB,SAA6B,KAAK;CAC1E,MAAM,EAAE,QAAQ,cAAc;CAC9B,MAAM,MAAM,eAAe;CAE3B,MAAM,MAAMA,QAAM,GAAG;CACrB,MAAM,UAAU,WAAW;EACzB;EACA;EACA,UAAU,oBAAoB,KAAK,SAAS;EAC5C,QAAQ,OAAO,WAAW,WAAW,UAAU,YAAY,YAAY,IAAI,KAAK;EAChF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,uBACQ;AACJ,MAAI,qBAAqB;AACvB,WAAQ,SAAS;AACjB,gBAAa;;IAGjB,oBACA,CAAC,YAAY,aAAa,CAC3B;CAED,MAAM,YAAY,aACf,SAAsB;AACrB,gBAAc,KAAK;AACnB,UAAQ,SAAS,KAAK,aAAa,KAAK;IAE1C,CAAC,QAAQ,SAAS,KAAK,aAAa,CACrC;CAED,MAAM,WAAW,aACd,SAAsB;AACrB,kBAAgB,KAAK;AACrB,UAAQ,SAAS,KAAK,YAAY,KAAK;IAEzC,CAAC,QAAQ,SAAS,KAAK,YAAY,CACpC;CAED,MAAM,WAAW,kBAAkB;AACjC,mBAAiB,YAAY;AAC7B,yBAAuB;AACvB,qBAAmB,MAAM;AAGzB,MAAI,CAAC,iCACH,aAAY,UAAU;IAEvB;EAAC,iBAAiB;EAAU;EAAqB;EAAkC;EAAS,CAAC;CAEhG,MAAM,YAAY,kBAAkB;AAClC,mBAAiB,aAAa;AAC9B,0BAAwB;IACvB,CAAC,iBAAiB,WAAW,qBAAqB,CAAC;AAEtD,QACE,qBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA,YAAY,QAAQ;GACpB;GACA;GACA,GAAG,QAAQ,SAAS;GACpB,GAAG,QAAQ,SAAS;GACpB,QAAQ,QAAQ,UAAU,gBAAgB,OAAO;GACjD,QAAQ,QAAQ,UAAU,gBAAgB,OAAO;GACjD,QAAQ,QAAQ;GAChB;GACA,iBAAiB;IAAE,GAAG;IAAiB;IAAU;IAAW;GAC5D;GACA;GACA;GACA;GACA;GACA;GACA,WAAW,QAAQ,SAAS;GAC5B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,SAAS,QAAQ;GACjB,UAAU,QAAQ;GAClB,mBAAmB;GACnB,qBAAqB,GAAG,IAAI;GAC5B;GACA,aAAa;GACb;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,iBACE,gBAAgB,QAAQ,SACpB,QAAQ,SAAS,eAAe,MAAM,kBACtC;GACP;YAhDH,CAkDG,UACA,eACC,oBAAC,YAAD;GACE,YAAW;GACX,SAAS,QAAQ;GACjB,UAAU,iBAAiB,YAAY;GACvC,cAAc,iBAAiB,gBAAgB;cAE7C,qBACA,oBAAC,gBAAD;IAA8B;cAC5B,oBAAC,SAAD;KACE,GAAI;KACJ,GAAI,UAAU,WAAW;MACvB,WAAW,cAAc;MACzB,OAAO,CAAC,kBAAkB,cAAc,MAAM;MAC/C,CAAC;KACF,CAAA;IACa,CAAA;GAER,CAAA,CAEQ;;;AAI7B,QAAQ,SAAS;AACjB,QAAQ,WAAW;AACnB,QAAQ,eAAe;AACvB,QAAQ,cAAc;AACtB,QAAQ,UAAU,UAA2C;AAC7D,QAAQ,aAAa,eAAsC;CACzD,MAAM,YAAY,UAAwB,oBAAC,SAAD;EAAS,GAAI;EAAY,GAAI;EAAS,CAAA;AAChF,UAAS,SAAS,QAAQ;AAC1B,UAAS,cAAc,aAAa,QAAQ,YAAY;AACxD,QAAO"}

package/esm/components/Portal/OptionalPortal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OptionalPortal.mjs","names":[],"sources":["../../../src/components/Portal/OptionalPortal.tsx"],"sourcesContent":["import { factory, Factory, useMantineEnv } from '../../core';\nimport { Portal, PortalProps } from './Portal';\n\nexport interface OptionalPortalProps extends PortalProps {\n  /**\n   * Determines whether children should be rendered inside Portal.\n   * When false, children are rendered as regular React children.\n   *\n   * Note: In test environment, Portal is always disabled regardless of this value.\n   *\n   * @default true\n   */\n  withinPortal?: boolean;\n}\n\nexport type OptionalPortalFactory = Factory<{\n  props: OptionalPortalProps;\n  ref: HTMLDivElement;\n}>;\n\nexport const OptionalPortal = factory<OptionalPortalFactory>(\n  ({ withinPortal = true, children, ...others }) => {\n    const env = useMantineEnv();\n\n    if (env === 'test' || !withinPortal) {\n      return <>{children}</>;\n    }\n\n    return <Portal {...others}>{children}</Portal>;\n  }\n);\n\nOptionalPortal.displayName = '@mantine/core/OptionalPortal';\n"],"mappings":";;;;;;AAoBA,MAAa,iBAAiB,SAC3B,EAAE,eAAe,MAAM,UAAU,GAAG,aAAa;AAGhD,KAFY,eAAe,KAEf,UAAU,CAAC,aACrB,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;AAGxB,QAAO,oBAAC,QAAD;EAAQ,GAAI;EAAS;EAAkB,CAAA;EAEjD;AAED,eAAe,cAAc"}
+{"version":3,"file":"OptionalPortal.mjs","names":[],"sources":["../../../src/components/Portal/OptionalPortal.tsx"],"sourcesContent":["import { factory, Factory, useMantineEnv } from '../../core';\nimport { Portal, PortalProps } from './Portal';\n\nexport interface OptionalPortalProps extends PortalProps {\n  /**\n   * Determines whether children should be rendered inside Portal.\n   * When false, children are rendered as regular React children.\n   *\n   * Note: In test environment, Portal is always disabled regardless of this value.\n   *\n   * @default true\n   */\n  withinPortal?: boolean;\n}\n\nexport type OptionalPortalFactory = Factory<{\n  props: OptionalPortalProps;\n  ref: HTMLDivElement;\n}>;\n\nexport const OptionalPortal = factory<OptionalPortalFactory>(\n  ({ withinPortal = true, children, ...others }) => {\n    const env = useMantineEnv();\n\n    if (env === 'test' || !withinPortal) {\n      return <>{children}</>;\n    }\n\n    return <Portal {...others}>{children}</Portal>;\n  }\n);\n\nOptionalPortal.displayName = '@mantine/core/OptionalPortal';\n\nexport namespace OptionalPortal {\n  export type Props = OptionalPortalProps;\n}\n"],"mappings":";;;;;;AAoBA,MAAa,iBAAiB,SAC3B,EAAE,eAAe,MAAM,UAAU,GAAG,aAAa;AAGhD,KAFY,eAAe,KAEf,UAAU,CAAC,aACrB,QAAO,oBAAA,UAAA,EAAG,UAAY,CAAA;AAGxB,QAAO,oBAAC,QAAD;EAAQ,GAAI;EAAS;EAAkB,CAAA;EAEjD;AAED,eAAe,cAAc"}

package/esm/components/Portal/Portal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.mjs","names":[],"sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { assignRef, useIsomorphicEffect } from '@mantine/hooks';\nimport { Factory, factory, useProps } from '../../core';\n\nfunction createPortalNode(props: React.ComponentProps<'div'>) {\n  const node = document.createElement('div');\n  node.setAttribute('data-portal', 'true');\n  typeof props.className === 'string' &&\n    node.classList.add(...props.className.split(' ').filter(Boolean));\n  typeof props.style === 'object' && Object.assign(node.style, props.style);\n  typeof props.id === 'string' && node.setAttribute('id', props.id);\n  return node;\n}\n\nexport interface BasePortalProps extends React.ComponentProps<'div'> {\n  /**\n   * Target element where portal should be rendered. Accepts:\n   * - HTMLElement: Renders portal inside this element\n   * - string: CSS selector - renders inside first matching element\n   * - undefined: Uses shared portal node or creates new one based on `reuseTargetNode`\n   *\n   * Note: If selector doesn't match any element, portal will not render\n   */\n  target?: HTMLElement | string;\n\n  /**\n   * When true and target is not specified, all Portal instances share a single\n   * container node appended to document.body. When false, each Portal creates\n   * its own container node.\n   *\n   * Has no effect when target is specified.\n   *\n   * @default true\n   */\n  reuseTargetNode?: boolean;\n}\n\nexport interface PortalProps extends BasePortalProps {\n  /** Content to render inside the portal */\n  children: React.ReactNode;\n}\n\nfunction getTargetNode({ target, reuseTargetNode, ...others }: BasePortalProps): HTMLElement {\n  if (target) {\n    if (typeof target === 'string') {\n      return document.querySelector<HTMLElement>(target) || createPortalNode(others);\n    }\n\n    return target;\n  }\n\n  if (reuseTargetNode) {\n    const existingNode = document.querySelector<HTMLElement>('[data-mantine-shared-portal-node]');\n\n    if (existingNode) {\n      return existingNode;\n    }\n\n    const node = createPortalNode(others);\n    node.setAttribute('data-mantine-shared-portal-node', 'true');\n    document.body.appendChild(node);\n    return node;\n  }\n\n  return createPortalNode(others);\n}\n\nexport type PortalFactory = Factory<{\n  props: PortalProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  reuseTargetNode: true,\n} satisfies Partial<PortalProps>;\n\nexport const Portal = factory<PortalFactory>((props) => {\n  const { children, target, reuseTargetNode, ref, ...others } = useProps(\n    'Portal',\n    defaultProps,\n    props\n  );\n\n  const [mounted, setMounted] = useState(false);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  useIsomorphicEffect(() => {\n    setMounted(true);\n    nodeRef.current = getTargetNode({ target, reuseTargetNode, ...others });\n    assignRef(ref, nodeRef.current);\n\n    if (!target && !reuseTargetNode && nodeRef.current) {\n      document.body.appendChild(nodeRef.current);\n    }\n\n    return () => {\n      if (!target && !reuseTargetNode && nodeRef.current) {\n        document.body.removeChild(nodeRef.current);\n      }\n    };\n  }, [target]);\n\n  if (!mounted || !nodeRef.current) {\n    return null;\n  }\n\n  return createPortal(<>{children}</>, nodeRef.current);\n});\n\nPortal.displayName = '@mantine/core/Portal';\n"],"mappings":";;;;;;;;AAKA,SAAS,iBAAiB,OAAoC;CAC5D,MAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,MAAK,aAAa,eAAe,OAAO;AACxC,QAAO,MAAM,cAAc,YACzB,KAAK,UAAU,IAAI,GAAG,MAAM,UAAU,MAAM,IAAI,CAAC,OAAO,QAAQ,CAAC;AACnE,QAAO,MAAM,UAAU,YAAY,OAAO,OAAO,KAAK,OAAO,MAAM,MAAM;AACzE,QAAO,MAAM,OAAO,YAAY,KAAK,aAAa,MAAM,MAAM,GAAG;AACjE,QAAO;;AA+BT,SAAS,cAAc,EAAE,QAAQ,iBAAiB,GAAG,UAAwC;AAC3F,KAAI,QAAQ;AACV,MAAI,OAAO,WAAW,SACpB,QAAO,SAAS,cAA2B,OAAO,IAAI,iBAAiB,OAAO;AAGhF,SAAO;;AAGT,KAAI,iBAAiB;EACnB,MAAM,eAAe,SAAS,cAA2B,oCAAoC;AAE7F,MAAI,aACF,QAAO;EAGT,MAAM,OAAO,iBAAiB,OAAO;AACrC,OAAK,aAAa,mCAAmC,OAAO;AAC5D,WAAS,KAAK,YAAY,KAAK;AAC/B,SAAO;;AAGT,QAAO,iBAAiB,OAAO;;AAQjC,MAAM,eAAe,EACnB,iBAAiB,MAClB;AAED,MAAa,SAAS,SAAwB,UAAU;CACtD,MAAM,EAAE,UAAU,QAAQ,iBAAiB,KAAK,GAAG,WAAW,SAC5D,UACA,cACA,MACD;CAED,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,UAAU,OAA2B,KAAK;AAEhD,2BAA0B;AACxB,aAAW,KAAK;AAChB,UAAQ,UAAU,cAAc;GAAE;GAAQ;GAAiB,GAAG;GAAQ,CAAC;AACvE,YAAU,KAAK,QAAQ,QAAQ;AAE/B,MAAI,CAAC,UAAU,CAAC,mBAAmB,QAAQ,QACzC,UAAS,KAAK,YAAY,QAAQ,QAAQ;AAG5C,eAAa;AACX,OAAI,CAAC,UAAU,CAAC,mBAAmB,QAAQ,QACzC,UAAS,KAAK,YAAY,QAAQ,QAAQ;;IAG7C,CAAC,OAAO,CAAC;AAEZ,KAAI,CAAC,WAAW,CAAC,QAAQ,QACvB,QAAO;AAGT,QAAO,aAAa,oBAAA,YAAA,EAAG,UAAY,CAAA,EAAE,QAAQ,QAAQ;EACrD;AAEF,OAAO,cAAc"}
+{"version":3,"file":"Portal.mjs","names":[],"sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { assignRef, useIsomorphicEffect } from '@mantine/hooks';\nimport { Factory, factory, useProps } from '../../core';\n\nfunction createPortalNode(props: React.ComponentProps<'div'>) {\n  const node = document.createElement('div');\n  node.setAttribute('data-portal', 'true');\n  typeof props.className === 'string' &&\n    node.classList.add(...props.className.split(' ').filter(Boolean));\n  typeof props.style === 'object' && Object.assign(node.style, props.style);\n  typeof props.id === 'string' && node.setAttribute('id', props.id);\n  return node;\n}\n\nexport interface BasePortalProps extends React.ComponentProps<'div'> {\n  /**\n   * Target element where portal should be rendered. Accepts:\n   * - HTMLElement: Renders portal inside this element\n   * - string: CSS selector - renders inside first matching element\n   * - undefined: Uses shared portal node or creates new one based on `reuseTargetNode`\n   *\n   * Note: If selector doesn't match any element, portal will not render\n   */\n  target?: HTMLElement | string;\n\n  /**\n   * When true and target is not specified, all Portal instances share a single\n   * container node appended to document.body. When false, each Portal creates\n   * its own container node.\n   *\n   * Has no effect when target is specified.\n   *\n   * @default true\n   */\n  reuseTargetNode?: boolean;\n}\n\nexport interface PortalProps extends BasePortalProps {\n  /** Content to render inside the portal */\n  children: React.ReactNode;\n}\n\nfunction getTargetNode({ target, reuseTargetNode, ...others }: BasePortalProps): HTMLElement {\n  if (target) {\n    if (typeof target === 'string') {\n      return document.querySelector<HTMLElement>(target) || createPortalNode(others);\n    }\n\n    return target;\n  }\n\n  if (reuseTargetNode) {\n    const existingNode = document.querySelector<HTMLElement>('[data-mantine-shared-portal-node]');\n\n    if (existingNode) {\n      return existingNode;\n    }\n\n    const node = createPortalNode(others);\n    node.setAttribute('data-mantine-shared-portal-node', 'true');\n    document.body.appendChild(node);\n    return node;\n  }\n\n  return createPortalNode(others);\n}\n\nexport type PortalFactory = Factory<{\n  props: PortalProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  reuseTargetNode: true,\n} satisfies Partial<PortalProps>;\n\nexport const Portal = factory<PortalFactory>((props) => {\n  const { children, target, reuseTargetNode, ref, ...others } = useProps(\n    'Portal',\n    defaultProps,\n    props\n  );\n\n  const [mounted, setMounted] = useState(false);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  useIsomorphicEffect(() => {\n    setMounted(true);\n    nodeRef.current = getTargetNode({ target, reuseTargetNode, ...others });\n    assignRef(ref, nodeRef.current);\n\n    if (!target && !reuseTargetNode && nodeRef.current) {\n      document.body.appendChild(nodeRef.current);\n    }\n\n    return () => {\n      if (!target && !reuseTargetNode && nodeRef.current) {\n        document.body.removeChild(nodeRef.current);\n      }\n    };\n  }, [target]);\n\n  if (!mounted || !nodeRef.current) {\n    return null;\n  }\n\n  return createPortal(<>{children}</>, nodeRef.current);\n});\n\nPortal.displayName = '@mantine/core/Portal';\n\nexport namespace Portal {\n  export type Props = PortalProps;\n}\n"],"mappings":";;;;;;;;AAKA,SAAS,iBAAiB,OAAoC;CAC5D,MAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,MAAK,aAAa,eAAe,OAAO;AACxC,QAAO,MAAM,cAAc,YACzB,KAAK,UAAU,IAAI,GAAG,MAAM,UAAU,MAAM,IAAI,CAAC,OAAO,QAAQ,CAAC;AACnE,QAAO,MAAM,UAAU,YAAY,OAAO,OAAO,KAAK,OAAO,MAAM,MAAM;AACzE,QAAO,MAAM,OAAO,YAAY,KAAK,aAAa,MAAM,MAAM,GAAG;AACjE,QAAO;;AA+BT,SAAS,cAAc,EAAE,QAAQ,iBAAiB,GAAG,UAAwC;AAC3F,KAAI,QAAQ;AACV,MAAI,OAAO,WAAW,SACpB,QAAO,SAAS,cAA2B,OAAO,IAAI,iBAAiB,OAAO;AAGhF,SAAO;;AAGT,KAAI,iBAAiB;EACnB,MAAM,eAAe,SAAS,cAA2B,oCAAoC;AAE7F,MAAI,aACF,QAAO;EAGT,MAAM,OAAO,iBAAiB,OAAO;AACrC,OAAK,aAAa,mCAAmC,OAAO;AAC5D,WAAS,KAAK,YAAY,KAAK;AAC/B,SAAO;;AAGT,QAAO,iBAAiB,OAAO;;AAQjC,MAAM,eAAe,EACnB,iBAAiB,MAClB;AAED,MAAa,SAAS,SAAwB,UAAU;CACtD,MAAM,EAAE,UAAU,QAAQ,iBAAiB,KAAK,GAAG,WAAW,SAC5D,UACA,cACA,MACD;CAED,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,UAAU,OAA2B,KAAK;AAEhD,2BAA0B;AACxB,aAAW,KAAK;AAChB,UAAQ,UAAU,cAAc;GAAE;GAAQ;GAAiB,GAAG;GAAQ,CAAC;AACvE,YAAU,KAAK,QAAQ,QAAQ;AAE/B,MAAI,CAAC,UAAU,CAAC,mBAAmB,QAAQ,QACzC,UAAS,KAAK,YAAY,QAAQ,QAAQ;AAG5C,eAAa;AACX,OAAI,CAAC,UAAU,CAAC,mBAAmB,QAAQ,QACzC,UAAS,KAAK,YAAY,QAAQ,QAAQ;;IAG7C,CAAC,OAAO,CAAC;AAEZ,KAAI,CAAC,WAAW,CAAC,QAAQ,QACvB,QAAO;AAGT,QAAO,aAAa,oBAAA,YAAA,EAAG,UAAY,CAAA,EAAE,QAAQ,QAAQ;EACrD;AAEF,OAAO,cAAc"}

package/esm/components/Progress/Progress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.mjs","names":["classes"],"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import {\n  factory,\n  Factory,\n  MantineColor,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport { ProgressLabel } from './ProgressLabel/ProgressLabel';\nimport {\n  __ProgressRootProps,\n  ProgressRoot,\n  ProgressRootCssVariables,\n  ProgressRootStylesNames,\n} from './ProgressRoot/ProgressRoot';\nimport { ProgressSection } from './ProgressSection/ProgressSection';\nimport classes from './Progress.module.css';\n\nexport type ProgressStylesNames = ProgressRootStylesNames;\n\nexport interface ProgressProps extends __ProgressRootProps, StylesApiProps<ProgressFactory> {\n  /** Value of the progress */\n  value: number;\n\n  /** Key of `theme.colors` or any valid CSS value @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** If set, the section has stripes @default false */\n  striped?: boolean;\n\n  /** If set, the sections stripes are animated (automatically enables striped) @default false */\n  animated?: boolean;\n}\n\nexport type ProgressFactory = Factory<{\n  props: ProgressProps;\n  ref: HTMLDivElement;\n  stylesNames: ProgressStylesNames;\n  vars: ProgressRootCssVariables;\n  staticComponents: {\n    Section: typeof ProgressSection;\n    Root: typeof ProgressRoot;\n    Label: typeof ProgressLabel;\n  };\n}>;\n\nexport const Progress = factory<ProgressFactory>((_props) => {\n  const props = useProps('Progress', null, _props);\n  const {\n    value,\n    classNames,\n    styles,\n    vars,\n    color,\n    striped,\n    animated,\n    'aria-label': label,\n    ...others\n  } = props;\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ProgressFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <ProgressRoot\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      vars={vars as any}\n      {...others}\n    >\n      <ProgressSection\n        value={value}\n        color={color}\n        striped={striped}\n        animated={animated}\n        aria-label={label}\n      />\n    </ProgressRoot>\n  );\n});\n\nProgress.classes = classes;\nProgress.displayName = '@mantine/core/Progress';\nProgress.Section = ProgressSection;\nProgress.Root = ProgressRoot;\nProgress.Label = ProgressLabel;\n"],"mappings":";;;;;;;;;;AA8CA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,MAAM,OAAO;CAChD,MAAM,EACJ,OACA,YACA,QACA,MACA,OACA,SACA,UACA,cAAc,OACd,GAAG,WACD;CAEJ,MAAM,EAAE,oBAAoB,mBAAmB,qBAAsC;EACnF;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,cAAD;EACE,YAAY;EACZ,QAAQ;EACF;EACN,GAAI;YAEJ,oBAAC,iBAAD;GACS;GACA;GACE;GACC;GACV,cAAY;GACZ,CAAA;EACW,CAAA;EAEjB;AAEF,SAAS,UAAUA;AACnB,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,OAAO;AAChB,SAAS,QAAQ"}
+{"version":3,"file":"Progress.mjs","names":["classes"],"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import {\n  factory,\n  Factory,\n  MantineColor,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport { ProgressLabel, type ProgressLabelProps } from './ProgressLabel/ProgressLabel';\nimport {\n  __ProgressRootProps,\n  ProgressRoot,\n  ProgressRootCssVariables,\n  ProgressRootStylesNames,\n  type ProgressRootProps,\n} from './ProgressRoot/ProgressRoot';\nimport { ProgressSection, type ProgressSectionProps } from './ProgressSection/ProgressSection';\nimport classes from './Progress.module.css';\nimport type { ProgressContextValue } from './Progress.context';\nexport type ProgressStylesNames = ProgressRootStylesNames;\n\nexport interface ProgressProps extends __ProgressRootProps, StylesApiProps<ProgressFactory> {\n  /** Value of the progress */\n  value: number;\n\n  /** Key of `theme.colors` or any valid CSS value @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** If set, the section has stripes @default false */\n  striped?: boolean;\n\n  /** If set, the sections stripes are animated (automatically enables striped) @default false */\n  animated?: boolean;\n}\n\nexport type ProgressFactory = Factory<{\n  props: ProgressProps;\n  ref: HTMLDivElement;\n  stylesNames: ProgressStylesNames;\n  vars: ProgressRootCssVariables;\n  staticComponents: {\n    Section: typeof ProgressSection;\n    Root: typeof ProgressRoot;\n    Label: typeof ProgressLabel;\n  };\n}>;\n\nexport const Progress = factory<ProgressFactory>((_props) => {\n  const props = useProps('Progress', null, _props);\n  const {\n    value,\n    classNames,\n    styles,\n    vars,\n    color,\n    striped,\n    animated,\n    'aria-label': label,\n    ...others\n  } = props;\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ProgressFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <ProgressRoot\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      vars={vars as any}\n      {...others}\n    >\n      <ProgressSection\n        value={value}\n        color={color}\n        striped={striped}\n        animated={animated}\n        aria-label={label}\n      />\n    </ProgressRoot>\n  );\n});\n\nProgress.classes = classes;\nProgress.displayName = '@mantine/core/Progress';\nProgress.Section = ProgressSection;\nProgress.Root = ProgressRoot;\nProgress.Label = ProgressLabel;\n\nexport namespace Progress {\n  export type Props = ProgressProps;\n  export type Factory = ProgressFactory;\n  export type StylesNames = ProgressStylesNames;\n  export type ContextValue = ProgressContextValue;\n\n  export namespace Label {\n    export type Props = ProgressLabelProps;\n  }\n\n  export namespace Root {\n    export type Props = ProgressRootProps;\n  }\n\n  export namespace Section {\n    export type Props = ProgressSectionProps;\n  }\n}\n"],"mappings":";;;;;;;;;;AA+CA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,MAAM,OAAO;CAChD,MAAM,EACJ,OACA,YACA,QACA,MACA,OACA,SACA,UACA,cAAc,OACd,GAAG,WACD;CAEJ,MAAM,EAAE,oBAAoB,mBAAmB,qBAAsC;EACnF;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,cAAD;EACE,YAAY;EACZ,QAAQ;EACF;EACN,GAAI;YAEJ,oBAAC,iBAAD;GACS;GACA;GACE;GACC;GACV,cAAY;GACZ,CAAA;EACW,CAAA;EAEjB;AAEF,SAAS,UAAUA;AACnB,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,OAAO;AAChB,SAAS,QAAQ"}

package/esm/components/Radio/Radio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.mjs","names":["useId","classes"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputStylesNames } from '../../utils/InlineInput';\nimport { RadioCard } from './RadioCard/RadioCard';\nimport { RadioGroup, RadioGroupContext } from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport { RadioIndicator } from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\n\nexport type RadioVariant = 'filled' | 'outline';\nexport type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';\nexport type RadioCssVariables = {\n  root:\n    | '--radio-size'\n    | '--radio-radius'\n    | '--radio-color'\n    | '--radio-icon-color'\n    | '--radio-icon-size';\n};\n\nexport interface RadioProps\n  extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Content of the `label` associated with the radio */\n  label?: React.ReactNode;\n\n  /** Key of theme.colors or any valid CSS color to set radio background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** A component that replaces the default radio icon (centered dot) */\n  icon?: React.FC<RadioIconProps>;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description displayed below the label */\n  description?: React.ReactNode;\n\n  /** Error displayed below the label */\n  error?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the radio when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n  props: RadioProps;\n  ref: HTMLInputElement;\n  stylesNames: RadioStylesNames;\n  vars: RadioCssVariables;\n  variant: RadioVariant;\n  staticComponents: {\n    Group: typeof RadioGroup;\n    Card: typeof RadioCard;\n    Indicator: typeof RadioIndicator;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n  (theme, { size, radius, color, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--radio-size': getSize(size, 'radio-size'),\n        '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n        '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--radio-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n        '--radio-icon-size': getSize(size, 'radio-icon-size'),\n      },\n    };\n  }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n  const props = useProps('Radio', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    id,\n    size,\n    label,\n    labelPosition,\n    description,\n    error,\n    radius,\n    color,\n    variant,\n    disabled,\n    wrapperProps,\n    icon: Icon = RadioIcon,\n    rootRef,\n    iconColor,\n    onChange,\n    mod,\n    attributes,\n    withErrorStyles,\n    checked,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RadioFactory>({\n    name: 'Radio',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(RadioGroupContext);\n\n  const contextSize = ctx?.size ?? size;\n  const componentSize = props.size ? size : contextSize;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n  const withContextProps = {\n    checked: contextChecked ?? checked,\n    name: rest.name ?? ctx?.name,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n    disabled: ctx?.disabled ?? disabled,\n  };\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Radio\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={componentSize}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={withContextProps.disabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={(contextChecked ?? checked) || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n        <Box\n          {...getStyles('radio', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          component=\"input\"\n          mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n          id={uuid}\n          type=\"radio\"\n        />\n        <Icon {...getStyles('icon')} aria-hidden />\n      </Box>\n    </InlineInput>\n  );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiGA,MAAM,eAAe;CACnB,eAAe;CACf,iBAAiB;CAClB;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,MAAM;EACJ,gBAAgB,QAAQ,MAAM,aAAa;EAC3C,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACtE,iBAAiB,YAAY,YAAY,eAAe,cAAc,OAAO,MAAM;EACnF,sBAAsB,YAClB,cAAc,WAAW,MAAM,GAC/B,qBAAqB,cAAc,MAAM,GACvC,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACN,qBAAqB,QAAQ,MAAM,kBAAkB;EACtD,EACF;EAEJ;AAED,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,OAAO;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,IACA,MACA,OACA,eACA,aACA,OACA,QACA,OACA,SACA,UACA,cACA,MAAM,OAAO,WACb,SACA,WACA,UACA,KACA,YACA,iBACA,SACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,MAAM,IAAI,kBAAkB;CAElC,MAAM,cAAc,KAAK,QAAQ;CACjC,MAAM,gBAAgB,MAAM,OAAO,OAAO;CAE1C,MAAM,EAAE,YAAY,SAAS,kBAAkB,OAAO;CACtD,MAAM,OAAOA,QAAM,GAAG;CAEtB,MAAM,iBAAiB,MAAM,IAAI,UAAU,KAAK,QAAQ,KAAA;CAExD,MAAM,mBAAmB;EACvB,SAAS,kBAAkB;EAC3B,MAAM,KAAK,QAAQ,KAAK;EACxB,WAAW,UAA+C;AACxD,QAAK,SAAS,MAAM;AACpB,cAAW,MAAM;;EAEnB,UAAU,KAAK,YAAY;EAC5B;AAED,QACE,oBAAC,aAAD;EACE,GAAI,UAAU,OAAO;EACrB,kBAAiB;EACjB,kBAAkB;EAClB,IAAI;EACJ,MAAM;EACS;EACR;EACM;EACN;EACP,UAAU,iBAAiB;EACf;EACJ;EACE;EACV,iBAAe,kBAAkB,YAAY,KAAA;EACpC;EACT,KAAK;EACA;EACO;EACZ,GAAI;EACJ,GAAI;YAEJ,qBAAC,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,KAAK,EAAE,kBAAkB,eAAe;aAArE,CACE,oBAAC,KAAD;IACE,GAAI,UAAU,SAAS;KAAE,WAAW;KAAM;KAAS,CAAC;IACpD,GAAI;IACJ,GAAI;IACJ,WAAU;IACV,KAAK;KAAE,OAAO,CAAC,CAAC;KAAO,qBAAqB;KAAiB;IAC7D,IAAI;IACJ,MAAK;IACL,CAAA,EACF,oBAAC,MAAD;IAAM,GAAI,UAAU,OAAO;IAAE,eAAA;IAAc,CAAA,CACvC;;EACM,CAAA;EAEhB;AAEF,MAAM,UAAUC;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,QAAQ;AACd,MAAM,OAAO;AACb,MAAM,YAAY"}
+{"version":3,"file":"Radio.mjs","names":["useId","classes"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  RadioCard,\n  type RadioCardProps,\n  type RadioCardStylesNames,\n  type RadioCardFactory,\n  type RadioCardCssVariables,\n  type RadioCardContextValue,\n} from './RadioCard/RadioCard';\nimport {\n  RadioGroup,\n  RadioGroupContext,\n  type RadioGroupProps,\n  type RadioGroupStylesNames,\n  type RadioGroupFactory,\n  type RadioGroupContextValue,\n} from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport {\n  RadioIndicator,\n  type RadioIndicatorProps,\n  type RadioIndicatorStylesNames,\n  type RadioIndicatorFactory,\n  type RadioIndicatorCssVariables,\n  type RadioIndicatorVariant,\n} from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\nexport type RadioVariant = 'filled' | 'outline';\nexport type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';\nexport type RadioCssVariables = {\n  root:\n    | '--radio-size'\n    | '--radio-radius'\n    | '--radio-color'\n    | '--radio-icon-color'\n    | '--radio-icon-size';\n};\n\nexport interface RadioProps\n  extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Content of the `label` associated with the radio */\n  label?: React.ReactNode;\n\n  /** Key of theme.colors or any valid CSS color to set radio background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** A component that replaces the default radio icon (centered dot) */\n  icon?: React.FC<RadioIconProps>;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description displayed below the label */\n  description?: React.ReactNode;\n\n  /** Error displayed below the label */\n  error?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the radio when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n  props: RadioProps;\n  ref: HTMLInputElement;\n  stylesNames: RadioStylesNames;\n  vars: RadioCssVariables;\n  variant: RadioVariant;\n  staticComponents: {\n    Group: typeof RadioGroup;\n    Card: typeof RadioCard;\n    Indicator: typeof RadioIndicator;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n  (theme, { size, radius, color, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--radio-size': getSize(size, 'radio-size'),\n        '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n        '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--radio-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n        '--radio-icon-size': getSize(size, 'radio-icon-size'),\n      },\n    };\n  }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n  const props = useProps('Radio', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    id,\n    size,\n    label,\n    labelPosition,\n    description,\n    error,\n    radius,\n    color,\n    variant,\n    disabled,\n    wrapperProps,\n    icon: Icon = RadioIcon,\n    rootRef,\n    iconColor,\n    onChange,\n    mod,\n    attributes,\n    withErrorStyles,\n    checked,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RadioFactory>({\n    name: 'Radio',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(RadioGroupContext);\n\n  const contextSize = ctx?.size ?? size;\n  const componentSize = props.size ? size : contextSize;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n  const withContextProps = {\n    checked: contextChecked ?? checked,\n    name: rest.name ?? ctx?.name,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n    disabled: ctx?.disabled ?? disabled,\n  };\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Radio\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={componentSize}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={withContextProps.disabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={(contextChecked ?? checked) || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n        <Box\n          {...getStyles('radio', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          component=\"input\"\n          mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n          id={uuid}\n          type=\"radio\"\n        />\n        <Icon {...getStyles('icon')} aria-hidden />\n      </Box>\n    </InlineInput>\n  );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n\nexport namespace Radio {\n  export type Props = RadioProps;\n  export type StylesNames = RadioStylesNames;\n  export type Factory = RadioFactory;\n  export type Variant = RadioVariant;\n\n  export namespace Group {\n    export type Props = RadioGroupProps;\n    export type StylesNames = RadioGroupStylesNames;\n    export type Factory = RadioGroupFactory;\n    export type ContextValue = RadioGroupContextValue;\n  }\n\n  export namespace Card {\n    export type Props = RadioCardProps;\n    export type StylesNames = RadioCardStylesNames;\n    export type Factory = RadioCardFactory;\n    export type CssVariables = RadioCardCssVariables;\n    export type ContextValue = RadioCardContextValue;\n  }\n\n  export namespace Indicator {\n    export type Props = RadioIndicatorProps;\n    export type StylesNames = RadioIndicatorStylesNames;\n    export type Factory = RadioIndicatorFactory;\n    export type CssVariables = RadioIndicatorCssVariables;\n    export type Variant = RadioIndicatorVariant;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqHA,MAAM,eAAe;CACnB,eAAe;CACf,iBAAiB;CAClB;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO,CAAC;CAClF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;AAElB,QAAO,EACL,MAAM;EACJ,gBAAgB,QAAQ,MAAM,aAAa;EAC3C,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;EACtE,iBAAiB,YAAY,YAAY,eAAe,cAAc,OAAO,MAAM;EACnF,sBAAsB,YAClB,cAAc,WAAW,MAAM,GAC/B,qBAAqB,cAAc,MAAM,GACvC,iBAAiB;GAAE;GAAO;GAAO;GAAc,CAAC,GAChD,KAAA;EACN,qBAAqB,QAAQ,MAAM,kBAAkB;EACtD,EACF;EAEJ;AAED,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,OAAO;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,IACA,MACA,OACA,eACA,aACA,OACA,QACA,OACA,SACA,UACA,cACA,MAAM,OAAO,WACb,SACA,WACA,UACA,KACA,YACA,iBACA,SACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,MAAM,IAAI,kBAAkB;CAElC,MAAM,cAAc,KAAK,QAAQ;CACjC,MAAM,gBAAgB,MAAM,OAAO,OAAO;CAE1C,MAAM,EAAE,YAAY,SAAS,kBAAkB,OAAO;CACtD,MAAM,OAAOA,QAAM,GAAG;CAEtB,MAAM,iBAAiB,MAAM,IAAI,UAAU,KAAK,QAAQ,KAAA;CAExD,MAAM,mBAAmB;EACvB,SAAS,kBAAkB;EAC3B,MAAM,KAAK,QAAQ,KAAK;EACxB,WAAW,UAA+C;AACxD,QAAK,SAAS,MAAM;AACpB,cAAW,MAAM;;EAEnB,UAAU,KAAK,YAAY;EAC5B;AAED,QACE,oBAAC,aAAD;EACE,GAAI,UAAU,OAAO;EACrB,kBAAiB;EACjB,kBAAkB;EAClB,IAAI;EACJ,MAAM;EACS;EACR;EACM;EACN;EACP,UAAU,iBAAiB;EACf;EACJ;EACE;EACV,iBAAe,kBAAkB,YAAY,KAAA;EACpC;EACT,KAAK;EACA;EACO;EACZ,GAAI;EACJ,GAAI;YAEJ,qBAAC,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,KAAK,EAAE,kBAAkB,eAAe;aAArE,CACE,oBAAC,KAAD;IACE,GAAI,UAAU,SAAS;KAAE,WAAW;KAAM;KAAS,CAAC;IACpD,GAAI;IACJ,GAAI;IACJ,WAAU;IACV,KAAK;KAAE,OAAO,CAAC,CAAC;KAAO,qBAAqB;KAAiB;IAC7D,IAAI;IACJ,MAAK;IACL,CAAA,EACF,oBAAC,MAAD;IAAM,GAAI,UAAU,OAAO;IAAE,eAAA;IAAc,CAAA,CACvC;;EACM,CAAA;EAEhB;AAEF,MAAM,UAAUC;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,QAAQ;AACd,MAAM,OAAO;AACb,MAAM,YAAY"}

package/esm/components/Radio/RadioGroup/RadioGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.mjs","names":["useId"],"sources":["../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport { DataAttributes, Factory, genericFactory, MantineSize, useProps } from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface RadioGroupContextValue<Value extends string = string> {\n  size: MantineSize | undefined;\n  value: Value | null;\n  onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;\n  name: string;\n  disabled: boolean | undefined;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport type RadioGroupStylesNames = InputWrapperStylesNames;\n\nexport interface RadioGroupProps<Value extends string = string> extends Omit<\n  InputWrapperProps,\n  'onChange' | 'value' | 'defaultValue'\n> {\n  /** `Radio` components and any other elements */\n  children: React.ReactNode;\n\n  /** Controlled component value */\n  value?: Value | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value | null;\n\n  /** Called when value changes */\n  onChange?: (value: Value) => void;\n\n  /** Props passed down to the `Input.Wrapper` */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Controls size of the `Input.Wrapper` @default 'sm' */\n  size?: MantineSize;\n\n  /** `name` attribute of child radio inputs. By default, `name` is generated randomly. */\n  name?: string;\n\n  /** If set, value cannot be changed */\n  readOnly?: boolean;\n\n  /** Sets `disabled` attribute, prevents interactions */\n  disabled?: boolean;\n}\n\nexport type RadioGroupFactory = Factory<{\n  props: RadioGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: RadioGroupStylesNames;\n  signature: <Value extends string = string>(props: RadioGroupProps<Value>) => React.JSX.Element;\n}>;\n\nexport const RadioGroup = genericFactory<RadioGroupFactory>(((props: RadioGroupProps<string>) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    size,\n    wrapperProps,\n    children,\n    name,\n    readOnly,\n    disabled,\n    ...others\n  } = useProps('RadioGroup', null, props);\n\n  const _name = useId(name);\n\n  const [_value, setValue] = useUncontrolled<string | null>({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange: onChange as any,\n  });\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement> | string) =>\n    !readOnly && setValue(typeof event === 'string' ? event : event.currentTarget.value);\n\n  return (\n    <RadioGroupContext\n      value={{ value: _value, onChange: handleChange, size, name: _name, disabled }}\n    >\n      <Input.Wrapper\n        size={size}\n        {...wrapperProps}\n        {...others}\n        labelElement=\"div\"\n        __staticSelector=\"RadioGroup\"\n      >\n        <InputsGroupFieldset role=\"radiogroup\">{children}</InputsGroupFieldset>\n      </Input.Wrapper>\n    </RadioGroupContext>\n  );\n}) as any);\n\nRadioGroup.classes = Input.Wrapper.classes;\nRadioGroup.displayName = '@mantine/core/RadioGroup';\n"],"mappings":";;;;;;;;;AAcA,MAAa,oBAAoB,cAA6C,KAAK;AA2CnF,MAAa,aAAa,iBAAoC,UAAmC;CAC/F,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,MACA,UACA,UACA,GAAG,WACD,SAAS,cAAc,MAAM,MAAM;CAEvC,MAAM,QAAQA,QAAM,KAAK;CAEzB,MAAM,CAAC,QAAQ,YAAY,gBAA+B;EACxD;EACA;EACA,YAAY;EACF;EACX,CAAC;CAEF,MAAM,gBAAgB,UACpB,CAAC,YAAY,SAAS,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc,MAAM;AAEtF,QACE,oBAAC,mBAAD;EACE,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM,MAAM;GAAO;GAAU;YAE7E,oBAAC,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;aAEjB,oBAAC,qBAAD;IAAqB,MAAK;IAAc;IAA+B,CAAA;GACzD,CAAA;EACE,CAAA;GAEd;AAEV,WAAW,UAAU,MAAM,QAAQ;AACnC,WAAW,cAAc"}
+{"version":3,"file":"RadioGroup.mjs","names":["useId"],"sources":["../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  DataAttributes,\n  Factory,\n  genericFactory,\n  MantineSize,\n  Primitive,\n  useProps,\n} from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface RadioGroupContextValue<Value extends Primitive = string> {\n  size: MantineSize | undefined;\n  value: Value | null;\n  onChange: (event: React.ChangeEvent<HTMLInputElement> | string) => void;\n  name: string;\n  disabled: boolean | undefined;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport type RadioGroupStylesNames = InputWrapperStylesNames;\n\nexport interface RadioGroupProps<Value extends Primitive = string> extends Omit<\n  InputWrapperProps,\n  'onChange' | 'value' | 'defaultValue'\n> {\n  /** `Radio` components and any other elements */\n  children: React.ReactNode;\n\n  /** Controlled component value */\n  value?: Value | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value | null;\n\n  /** Called when value changes */\n  onChange?: (value: Value) => void;\n\n  /** Props passed down to the `Input.Wrapper` */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Controls size of the `Input.Wrapper` @default 'sm' */\n  size?: MantineSize;\n\n  /** `name` attribute of child radio inputs. By default, `name` is generated randomly. */\n  name?: string;\n\n  /** If set, value cannot be changed */\n  readOnly?: boolean;\n\n  /** Sets `disabled` attribute, prevents interactions */\n  disabled?: boolean;\n}\n\nexport type RadioGroupFactory = Factory<{\n  props: RadioGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: RadioGroupStylesNames;\n  signature: <Value extends Primitive = string>(props: RadioGroupProps<Value>) => React.JSX.Element;\n}>;\n\nexport const RadioGroup = genericFactory<RadioGroupFactory>(((props: RadioGroupProps<string>) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    size,\n    wrapperProps,\n    children,\n    name,\n    readOnly,\n    disabled,\n    ...others\n  } = useProps('RadioGroup', null, props);\n\n  const _name = useId(name);\n\n  const [_value, setValue] = useUncontrolled<string | null>({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange: onChange as any,\n  });\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement> | string) =>\n    !readOnly && setValue(typeof event === 'string' ? event : event.currentTarget.value);\n\n  return (\n    <RadioGroupContext\n      value={{ value: _value, onChange: handleChange, size, name: _name, disabled }}\n    >\n      <Input.Wrapper\n        size={size}\n        {...wrapperProps}\n        {...others}\n        labelElement=\"div\"\n        __staticSelector=\"RadioGroup\"\n      >\n        <InputsGroupFieldset role=\"radiogroup\">{children}</InputsGroupFieldset>\n      </Input.Wrapper>\n    </RadioGroupContext>\n  );\n}) as any);\n\nRadioGroup.classes = Input.Wrapper.classes;\nRadioGroup.displayName = '@mantine/core/RadioGroup';\n"],"mappings":";;;;;;;;;AAqBA,MAAa,oBAAoB,cAA6C,KAAK;AA2CnF,MAAa,aAAa,iBAAoC,UAAmC;CAC/F,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,MACA,UACA,UACA,GAAG,WACD,SAAS,cAAc,MAAM,MAAM;CAEvC,MAAM,QAAQA,QAAM,KAAK;CAEzB,MAAM,CAAC,QAAQ,YAAY,gBAA+B;EACxD;EACA;EACA,YAAY;EACF;EACX,CAAC;CAEF,MAAM,gBAAgB,UACpB,CAAC,YAAY,SAAS,OAAO,UAAU,WAAW,QAAQ,MAAM,cAAc,MAAM;AAEtF,QACE,oBAAC,mBAAD;EACE,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM,MAAM;GAAO;GAAU;YAE7E,oBAAC,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;aAEjB,oBAAC,qBAAD;IAAqB,MAAK;IAAc;IAA+B,CAAA;GACzD,CAAA;EACE,CAAA;GAEd;AAEV,WAAW,UAAU,MAAM,QAAQ;AACnC,WAAW,cAAc"}

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"],"mappings":";;;;;;;;;;;;;;;;AAsBA,SAAS,aAAa,OAAe,IAAY;CAC/C,MAAM,UAAU,KAAK,MAAM,QAAQ,GAAG,GAAG;CACzC,MAAM,YAAY,GAAG,KAAK,MAAM,IAAI,CAAC,IAAI,UAAU;AACnD,QAAO,OAAO,QAAQ,QAAQ,UAAU,CAAC;;AAsE3C,MAAM,eAAe;CACnB,MAAM;CACN,iBAAiB,UAAU,GAAG;CAC9B,OAAO;CACP,WAAW;CACX,OAAO;CACR;AAED,MAAM,eAAe,oBAAmC,OAAO,EAAE,MAAM,aAAa,EAClF,MAAM;CACJ,iBAAiB,QAAQ,MAAM,cAAc;CAC7C,kBAAkB,cAAc,OAAO,MAAM;CAC9C,EACF,EAAE;AAEH,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,cAAc,OAAO;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,IACA,OACA,cACA,UACA,WACA,OACA,cACA,UACA,YACA,aACA,SACA,cACA,cACA,YACA,MACA,SACA,gBACA,OACA,aACA,YACA,uBACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,QAAQ,cAAc;CAE9B,MAAM,QAAQA,QAAM,KAAK;CACzB,MAAM,MAAMA,QAAM,GAAG;CACrB,MAAM,UAAU,OAAuB,KAAK;CAE5C,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,CAAC,SAAS,cAAc,SAAS,GAAG;CAC1C,MAAM,CAAC,WAAW,cAAc,SAAS,KAAK;CAE9C,MAAM,aAAa,KAAK,MAAM,UAAU;CACxC,MAAM,SAAS,KAAK,MAAM,MAAM;CAEhC,MAAM,cAAc,IAAI;CACxB,MAAM,qBAAqB,aAAa,QAAQ,YAAY;CAC5D,MAAM,aAAa,YAAY,KAAK,UAAU;CAE9C,MAAM,4BAA4B,MAAc;AAC9C,MAAI,CAAC,QAAQ,QACX,QAAO;EAGT,MAAM,EAAE,MAAM,OAAO,UAAU,QAAQ,QAAQ,uBAAuB;EACtE,MAAM,cAAc,QAAQ;AAK5B,SAAO,MAAM,cAHS,QAAQ,QAAQ,QAAQ,IAAI,IAAI,QACnB,cAEI,cAAc,GAAG,YAAY,EAAE,aAAa,OAAO;;CAG5F,MAAM,oBAAoB,UAA4C;AACpE,iBAAe,MAAM;AACrB,GAAC,YAAY,WAAW,MAAM;;CAGhC,MAAM,mBAAmB,UAA4C;AACnE,gBAAc,MAAM;AAEpB,MAAI,SACF;EAGF,MAAM,UAAU,yBAAyB,MAAM,QAAQ;AAEvD,aAAW,QAAQ;AACnB,cAAY,WAAW,UAAU,QAAQ;;CAG3C,MAAM,oBAAoB,UAA4C;AACpE,iBAAe,MAAM;AAErB,MAAI,SACF;AAGF,aAAW,GAAG;AACd,aAAW,KAAK;AAChB,cAAY,MAAM,UAAU,GAAG;;CAGjC,MAAM,oBAAoB,UAA4C;EACpE,MAAM,EAAE,YAAY;AACpB,MAAI,QAAQ,WAAW,EACrB;AAGF,MAAI,CAAC,UAAU;GACb,MAAM,QAAQ,QAAQ;AACtB,YAAS,yBAAyB,MAAM,QAAQ,CAAC;;AAGnD,iBAAe,MAAM;;CAGvB,MAAM,kBAAkB,UAA4C;AAClE,QAAM,gBAAgB;AAEtB,eAAa,MAAM;;CAGrB,MAAM,uBAAuB,aAAa,WAAW,GAAG;CAExD,MAAM,qBAAqB,UAAwD;AACjF,MAAI,CAAC,SACH,KAAI,OAAO,UAAU,SACnB,YAAW,MAAM;MAEjB,YAAW,WAAW,MAAM,OAAO,MAAM,CAAC;;CAKhD,MAAM,gBAAgB,UAAwD;AAC5E,MAAI,CAAC,UAAU;GACb,MAAM,WAAW,OAAO,UAAU,WAAW,QAAQ,WAAW,MAAM,OAAO,MAAM;AAGnF,OAAI,cAAc,aAAa,mBAC7B,UAAS,EAAE;OAEX,UAAS,SAAS;;;CAKxB,MAAM,QAAQ,MAAM,OAAO,CACxB,KAAK,EAAE,CACP,KAAK,GAAG,UAAU;EACjB,MAAM,eAAe,QAAQ;EAC7B,MAAM,gBAAgB,MAAM,KAAK,IAAI,MAAM,UAAU,IAAI,aAAa,IAAI,WAAW,CAAC;EACtF,MAAM,gBAAgB,CAAC,YAAY,KAAK,KAAK,QAAQ,KAAK;AAE1D,SACE,oBAAC,OAAD;GAEE,eAAa,iBAAiB,KAAA;GAC9B,GAAI,UAAU,cAAc;aAE3B,cAAc,KAAK,IAAI,kBAAkB;IACxC,MAAM,gBAAgB,eAAe,UAAU,IAAI,gBAAgB,gBAAgB;IACnF,MAAM,cAAc,aAAa,eAAe,IAAI,eAAe,YAAY;AAE/E,WACE,oBAAC,YAAD;KAEkB;KAChB,WAAW;KACX,UAAU;KACV,MACE,wBAAwB,gBAAgB,aAAa,eAAe;KAEtE,QAAQ,gBAAgB;KACxB,SAAS,gBAAgB;KACf;KACK;KACf,OAAO;KACP,MAAM;KACN,UAAU;KACV,QAAQ;KACR,eAAe;KACf,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG;KACvB,EAjBK,GAAG,aAAa,GAAG,cAiBxB;KAEJ;GACE,EA9BC,aA8BD;GAER;AAEJ,QACE,oBAAC,gBAAD;EAAgB,OAAO,EAAE,WAAW;YAClC,oBAAC,KAAD;GACE,KAAK,aAAa,SAAS,IAAI;GAC/B,GAAI,UAAU,OAAO;GACrB,aAAa;GACb,cAAc;GACd,cAAc;GACd,cAAc;GACd,YAAY;GACH;GACH;GACN,IAAI;GACJ,GAAI;aAEH;GACG,CAAA;EACS,CAAA;EAEnB;AAEF,OAAO,UAAUC;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}
+{"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/RingProgress/RingProgress.mjs

@@ -69,6 +69,7 @@ const RingProgress = factory((_props) => {
 		...others,
 		children: [/* @__PURE__ */ jsx("svg", {
 			...getStyles("svg"),
+			viewBox: `0 0 ${size} ${size}`,
 			children: curves
 		}), label && /* @__PURE__ */ jsx("div", {
 			...getStyles("label"),

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')}>{curves}</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"],"mappings":";;;;;;;;;;;;;AAkBA,SAAS,oBAAoB,WAAmB,MAAc;AAC5D,QAAO,KAAK,IAAI,aAAa,KAAK,QAAQ,OAAO,EAAE;;AAuDrD,MAAM,eAAe;CACnB,MAAM;CACN,WAAW;CACX,YAAY;CACb;AAED,MAAM,eAAe,oBAClB,GAAG,EAAE,MAAM,WAAW,oBAAoB,kBAAkB;CAC3D,MAAM;EACJ,aAAa,IAAI,KAAK;EACtB,qBAAqB,IAAI,YAAa,EAAE;EACxC,4BAA4B,qBAAqB,GAAG,mBAAmB,MAAM,KAAA;EAC9E;CACD,KAAK,EACH,oBAAoB,GAAG,WAAW,MACnC;CACF,EACF;AAED,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SAAS,gBAAgB,cAAc,OAAO;CAC5D,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;EACD,CAAC;CAEF,MAAM,mBAAmB,oBAAoB,WAAW,KAAK;CAE7D,MAAM,SAAS,UAAU;EACvB;EACA,WAAW;EACX;EACA,uBAAuB;EACvB;EACA;EACD,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;EACX,CAAA,CACF;AAEF,QACE,qBAAC,KAAD;EAAK,GAAI,UAAU,OAAO;EAAQ;EAAM,GAAI;YAA5C,CACE,oBAAC,OAAD;GAAK,GAAI,UAAU,MAAM;aAAG;GAAa,CAAA,EACxC,SAAS,oBAAC,OAAD;GAAK,GAAI,UAAU,QAAQ;aAAG;GAAY,CAAA,CAChD;;EAER;AAEF,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;AAC5D,QAAO,KAAK,IAAI,aAAa,KAAK,QAAQ,OAAO,EAAE;;AAuDrD,MAAM,eAAe;CACnB,MAAM;CACN,WAAW;CACX,YAAY;CACb;AAED,MAAM,eAAe,oBAClB,GAAG,EAAE,MAAM,WAAW,oBAAoB,kBAAkB;CAC3D,MAAM;EACJ,aAAa,IAAI,KAAK;EACtB,qBAAqB,IAAI,YAAa,EAAE;EACxC,4BAA4B,qBAAqB,GAAG,mBAAmB,MAAM,KAAA;EAC9E;CACD,KAAK,EACH,oBAAoB,GAAG,WAAW,MACnC;CACF,EACF;AAED,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SAAS,gBAAgB,cAAc,OAAO;CAC5D,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;EACD,CAAC;CAEF,MAAM,mBAAmB,oBAAoB,WAAW,KAAK;CAE7D,MAAM,SAAS,UAAU;EACvB;EACA,WAAW;EACX;EACA,uBAAuB;EACvB;EACA;EACD,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;EACX,CAAA,CACF;AAEF,QACE,qBAAC,KAAD;EAAK,GAAI,UAAU,OAAO;EAAQ;EAAM,GAAI;YAA5C,CACE,oBAAC,OAAD;GAAK,GAAI,UAAU,MAAM;GAAE,SAAS,OAAO,KAAK,GAAG;aAChD;GACG,CAAA,EACL,SAAS,oBAAC,OAAD;GAAK,GAAI,UAAU,QAAQ;aAAG;GAAY,CAAA,CAChD;;EAER;AAEF,aAAa,UAAUA;AACvB,aAAa,eAAe;AAC5B,aAAa,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.mjs","names":["classes"],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { 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\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    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 combinedViewportRef = useMergeRefs([viewportRef, localViewportRef]);\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  useResizeObserver(offsetScrollbars === 'present' ? localViewportRef.current : 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  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-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-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-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-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    onOverflowChange,\n    ...others\n  } = useProps('ScrollAreaAutosize', defaultProps, props as ScrollAreaAutosizeProps);\n\n  // Overflow detection (Autosize-only)\n  const viewportObserverRef = useRef<HTMLDivElement>(null);\n  const combinedViewportRef = useMergeRefs([viewportRef, viewportObserverRef]);\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 ? viewportObserverRef.current : 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          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"],"mappings":"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"}
+{"version":3,"file":"ScrollArea.mjs","names":["classes"],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { 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\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    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 combinedViewportRef = useMergeRefs([viewportRef, localViewportRef]);\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  useResizeObserver(offsetScrollbars === 'present' ? localViewportRef.current : 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  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-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-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-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-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    onOverflowChange,\n    ...others\n  } = useProps('ScrollAreaAutosize', defaultProps, props as ScrollAreaAutosizeProps);\n\n  // Overflow detection (Autosize-only)\n  const viewportObserverRef = useRef<HTMLDivElement>(null);\n  const combinedViewportRef = useMergeRefs([viewportRef, viewportObserverRef]);\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 ? viewportObserverRef.current : 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          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/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, (node) => setScrollbar(node));\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            /* eslint-disable @typescript-eslint/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          /* eslint-enable @typescript-eslint/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,sBAAsB;CACtC,MAAM,CAAC,WAAW,gBAAgB,SAAgC,KAAK;CACvE,MAAM,cAAc,aAAa,MAAM,SAAS,aAAa,KAAK,CAAC;CACnE,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,0BAA0B,OAAe,GAAG;CAClD,MAAM,EAAE,aAAa;CACrB,MAAM,eAAe,MAAM,UAAU,MAAM;CAC3C,MAAM,oBAAoB,eAAe,cAAc;CACvD,MAAM,4BAA4B,eAAe,sBAAsB;CACvE,MAAM,eAAe,qBAAqB,UAAU,GAAG;CAEvD,MAAM,oBAAoB,UAA2C;AACnE,MAAI,QAAQ,QAGV,cAAa;GAAE,GAFL,MAAM,UAAU,QAAQ,QAAQ;GAExB,GADR,MAAM,UAAU,QAAQ,QAAQ;GACrB,CAAC;;AAI1B,iBAAgB;EACd,MAAM,eAAe,UAAsB;GACzC,MAAM,UAAU,MAAM;AAEtB,OADyB,WAAW,SAAS,QAAQ,CAEnD,mBAAkB,OAAO,aAAa;;AAG1C,WAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,OAAO,CAAC;AACnE,eAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,OAAO,CAAQ;IACzF;EAAC;EAAU;EAAW;EAAa,CAAC;AAEvC,WAAU,2BAA2B,CAAC,OAAO,0BAA0B,CAAC;AAExE,mBAAkB,WAAW,aAAa;AAC1C,mBAAkB,QAAQ,SAAS,aAAa;AAEhD,QACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA;GACA,eAAe,eAAe,cAAc;GAC5C,kBAAkB,eAAe,iBAAiB;GAClD,uBAAuB;GACvB,oBAAoB,eAAe,mBAAmB;GACvD;YAED,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,0BAAA;GACA,OAAO;IAAE,UAAU;IAAY,GAAG,eAAe;IAAO;GACxD,eAAe,qBAAqB,MAAM,gBAAgB,UAAU;AAClE,UAAM,gBAAgB;AAGtB,QAAI,MAAM,WADU,GACc;AAChB,WAAM,OACd,kBAAkB,MAAM,UAAU;AAC1C,aAAQ,UAAU,UAAW,uBAAuB;AAEpD,6BAAwB,UAAU,SAAS,KAAK,MAAM;AACtD,cAAS,KAAK,MAAM,mBAAmB;AACvC,sBAAiB,MAAM;;KAEzB;GACF,eAAe,qBAAqB,MAAM,eAAe,iBAAiB;GAC1E,aAAa,qBAAqB,MAAM,cAAc,UAAU;IAC9D,MAAM,UAAU,MAAM;AACtB,QAAI,QAAQ,kBAAkB,MAAM,UAAU,EAAE;AAC9C,WAAM,gBAAgB;AACtB,aAAQ,sBAAsB,MAAM,UAAU;;KAEhD;GACF,4BAA4B;AAC1B,aAAS,KAAK,MAAM,mBAAmB,wBAAwB;AAE/D,YAAQ,UAAU;;GAEpB,CAAA;EACgB,CAAA"}
+{"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, (node) => setScrollbar(node));\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,sBAAsB;CACtC,MAAM,CAAC,WAAW,gBAAgB,SAAgC,KAAK;CACvE,MAAM,cAAc,aAAa,MAAM,SAAS,aAAa,KAAK,CAAC;CACnE,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,0BAA0B,OAAe,GAAG;CAClD,MAAM,EAAE,aAAa;CACrB,MAAM,eAAe,MAAM,UAAU,MAAM;CAC3C,MAAM,oBAAoB,eAAe,cAAc;CACvD,MAAM,4BAA4B,eAAe,sBAAsB;CACvE,MAAM,eAAe,qBAAqB,UAAU,GAAG;CAEvD,MAAM,oBAAoB,UAA2C;AACnE,MAAI,QAAQ,QAGV,cAAa;GAAE,GAFL,MAAM,UAAU,QAAQ,QAAQ;GAExB,GADR,MAAM,UAAU,QAAQ,QAAQ;GACrB,CAAC;;AAI1B,iBAAgB;EACd,MAAM,eAAe,UAAsB;GACzC,MAAM,UAAU,MAAM;AAEtB,OADyB,WAAW,SAAS,QAAQ,CAEnD,mBAAkB,OAAO,aAAa;;AAG1C,WAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,OAAO,CAAC;AACnE,eAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,OAAO,CAAQ;IACzF;EAAC;EAAU;EAAW;EAAa,CAAC;AAEvC,WAAU,2BAA2B,CAAC,OAAO,0BAA0B,CAAC;AAExE,mBAAkB,WAAW,aAAa;AAC1C,mBAAkB,QAAQ,SAAS,aAAa;AAEhD,QACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA;GACA,eAAe,eAAe,cAAc;GAC5C,kBAAkB,eAAe,iBAAiB;GAClD,uBAAuB;GACvB,oBAAoB,eAAe,mBAAmB;GACvD;YAED,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,0BAAA;GACA,OAAO;IAAE,UAAU;IAAY,GAAG,eAAe;IAAO;GACxD,eAAe,qBAAqB,MAAM,gBAAgB,UAAU;AAClE,UAAM,gBAAgB;AAGtB,QAAI,MAAM,WADU,GACc;AAChB,WAAM,OACd,kBAAkB,MAAM,UAAU;AAC1C,aAAQ,UAAU,UAAW,uBAAuB;AAEpD,6BAAwB,UAAU,SAAS,KAAK,MAAM;AACtD,cAAS,KAAK,MAAM,mBAAmB;AACvC,sBAAiB,MAAM;;KAEzB;GACF,eAAe,qBAAqB,MAAM,eAAe,iBAAiB;GAC1E,aAAa,qBAAqB,MAAM,cAAc,UAAU;IAC9D,MAAM,UAAU,MAAM;AACtB,QAAI,QAAQ,kBAAkB,MAAM,UAAU,EAAE;AAC9C,WAAM,gBAAgB;AACtB,aAAQ,sBAAsB,MAAM,UAAU;;KAEhD;GACF,4BAA4B;AAC1B,aAAS,KAAK,MAAM,mBAAmB,wBAAwB;AAE/D,YAAQ,UAAU;;GAEpB,CAAA;EACgB,CAAA"}

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"],"mappings":";;;;;;;;;;;;;;AAsEA,MAAM,eAAuC;CAC3C,cAAc;CACd,WAAW;CACZ;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,aAAa,yBAAyB,EAC9C,MAAM;CACJ,2BAA2B,IAAI,YAAY;CAC3C,+BAA+B,oBAC3B,cAAc,mBAAmB,MAAM,GACvC,KAAA;CACL,EACF,EACF;AAED,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,OAAO;CACxD,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;EACD,CAAC;CAEF,MAAM,WAAW,YAAY;EAC3B;EACA;EACD,CAAC;CAEF,MAAM,YAAY,oBAAoB,SAAS;CAC/C,MAAM,UAAU,kBAAkB,SAAS;AAE3C,QACE,qBAAC,KAAD;EAAK,GAAI,UAAU,OAAO;EAAO;EAAU;EAAK,GAAI;YAApD;GACE,oBAAC,gBAAD;IACE,GAAI,UAAU,UAAU;IACxB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,aAAa,KAAA;IAC3B,cAAW;IACX,UAAU,YAAY,IAAI;IAC1B,GAAI;cAEH,oBAAoB,oBAAC,kBAAD,EAAkB,GAAI,UAAU,UAAU,EAAI,CAAA;IACpD,CAAA;GAEjB,oBAAC,OAAD;IACE,GAAI,UAAU,YAAY;IAC1B,KAAK,SAAS;IACd,MAAK;IACL,kBAAgB,aAAa,KAAA;IAC7B,GAAI,SAAS;cAEb,oBAAC,OAAD;KAAK,GAAI,UAAU,UAAU;KAAG;KAAe,CAAA;IAC3C,CAAA;GAEN,oBAAC,gBAAD;IACE,GAAI,UAAU,UAAU;IACxB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,WAAW,KAAA;IACzB,cAAW;IACX,UAAU,UAAU,IAAI;IACxB,GAAI;cAEH,kBAAkB,oBAAC,kBAAD,EAAkB,GAAI,UAAU,UAAU,EAAI,CAAA;IAClD,CAAA;GACb;;EAER;AAEF,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;CACZ;AAED,MAAM,eAAe,oBAClB,OAAO,EAAE,aAAa,yBAAyB,EAC9C,MAAM;CACJ,2BAA2B,IAAI,YAAY;CAC3C,+BAA+B,oBAC3B,cAAc,mBAAmB,MAAM,GACvC,KAAA;CACL,EACF,EACF;AAED,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,OAAO;CACxD,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;EACD,CAAC;CAEF,MAAM,WAAW,YAAY;EAC3B;EACA;EACD,CAAC;CAEF,MAAM,YAAY,oBAAoB,SAAS;CAC/C,MAAM,UAAU,kBAAkB,SAAS;AAE3C,QACE,qBAAC,KAAD;EAAK,GAAI,UAAU,OAAO;EAAO;EAAU;EAAK,GAAI;YAApD;GACE,oBAAC,gBAAD;IACE,GAAI,UAAU,UAAU;IACxB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,aAAa,KAAA;IAC3B,cAAW;IACX,UAAU,YAAY,IAAI;IAC1B,GAAI;cAEH,oBAAoB,oBAAC,kBAAD,EAAkB,GAAI,UAAU,UAAU,EAAI,CAAA;IACpD,CAAA;GAEjB,oBAAC,OAAD;IACE,GAAI,UAAU,YAAY;IAC1B,KAAK,SAAS;IACd,MAAK;IACL,kBAAgB,aAAa,KAAA;IAC7B,GAAI,SAAS;cAEb,oBAAC,OAAD;KAAK,GAAI,UAAU,UAAU;KAAG;KAAe,CAAA;IAC3C,CAAA;GAEN,oBAAC,gBAAD;IACE,GAAI,UAAU,UAAU;IACxB,SAAS,SAAS;IAClB,iBAAc;IACd,eAAa,CAAC,WAAW,KAAA;IACzB,cAAW;IACX,UAAU,UAAU,IAAI;IACxB,GAAI;cAEH,kBAAkB,oBAAC,kBAAD,EAAkB,GAAI,UAAU,UAAU,EAAI,CAAA;IAClD,CAAA;GACb;;EAER;AAEF,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc"}

package/esm/components/SegmentedControl/SegmentedControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","names":["useId","classes"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  randomId,\n  useId,\n  useMergedRef,\n  useMounted,\n  useShallowEffect,\n  useUncontrolled,\n} from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getThemeColor,\n  isPrimitive,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  Primitive,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { FloatingIndicator } from '../FloatingIndicator';\nimport classes from './SegmentedControl.module.css';\n\nexport type SegmentedControlStylesNames =\n  | 'root'\n  | 'input'\n  | 'label'\n  | 'control'\n  | 'indicator'\n  | 'innerLabel';\nexport type SegmentedControlCssVariables = {\n  root:\n    | '--sc-radius'\n    | '--sc-color'\n    | '--sc-font-size'\n    | '--sc-padding'\n    | '--sc-shadow'\n    | '--sc-transition-duration'\n    | '--sc-transition-timing-function';\n};\n\nexport interface SegmentedControlItem<Value = string> {\n  value: Value;\n  label: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    StylesApiProps<SegmentedControlFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  /** Data based on which controls are rendered */\n  data: (Value | SegmentedControlItem<Value>)[];\n\n  /** Controlled component value */\n  value?: Value;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value;\n\n  /** Called when value changes */\n  onChange?: (value: Value) => void;\n\n  /** Determines whether the component is disabled */\n  disabled?: boolean;\n\n  /** Name attribute for the radio group. A random name is auto-generated if not provided */\n  name?: string;\n\n  /** Determines whether the component should take 100% width of its parent @default false */\n  fullWidth?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color, changes indicator background color. By default, uses white in light mode and dark.5 in dark mode */\n  color?: MantineColor;\n\n  /** Controls `font-size`, `padding` and `height` properties @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Indicator `transition-duration` in ms, set `0` to turn off transitions @default 200 */\n  transitionDuration?: number;\n\n  /** Indicator `transition-timing-function` property @default ease */\n  transitionTimingFunction?: string;\n\n  /** Component orientation @default 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** If set to `false`, prevents changing the value */\n  readOnly?: boolean;\n\n  /** If set, automatically adjusts label text color for optimal contrast against the indicator background color */\n  autoContrast?: boolean;\n\n  /** Determines whether there should be borders between items @default true */\n  withItemsBorders?: boolean;\n}\n\nexport type SegmentedControlFactory = Factory<{\n  props: SegmentedControlProps;\n  ref: HTMLDivElement;\n  stylesNames: SegmentedControlStylesNames;\n  vars: SegmentedControlCssVariables;\n  signature: <Value extends Primitive = string>(\n    props: SegmentedControlProps<Value>\n  ) => React.JSX.Element | null;\n}>;\n\nconst defaultProps = {\n  withItemsBorders: true,\n} satisfies Partial<SegmentedControlProps>;\n\nconst varsResolver = createVarsResolver<SegmentedControlFactory>(\n  (theme, { radius, color, transitionDuration, size, transitionTimingFunction }) => ({\n    root: {\n      '--sc-radius': radius === undefined ? undefined : getRadius(radius),\n      '--sc-color': color ? getThemeColor(color, theme) : undefined,\n      '--sc-shadow': color ? undefined : 'var(--mantine-shadow-xs)',\n      '--sc-transition-duration':\n        transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n      '--sc-transition-timing-function': transitionTimingFunction,\n      '--sc-padding': getSize(size, 'sc-padding'),\n      '--sc-font-size': getFontSize(size),\n    },\n  })\n);\n\nexport const SegmentedControl = genericFactory<SegmentedControlFactory>((_props) => {\n  const props = useProps('SegmentedControl', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    value,\n    defaultValue,\n    onChange,\n    size,\n    name,\n    disabled,\n    readOnly,\n    fullWidth,\n    orientation,\n    radius,\n    color,\n    transitionDuration,\n    transitionTimingFunction,\n    variant,\n    autoContrast,\n    withItemsBorders,\n    mod,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SegmentedControlFactory>({\n    name: 'SegmentedControl',\n    props: props as any,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const theme = useMantineTheme();\n\n  const _data = data.map((item) => (isPrimitive(item) ? { label: `${item}`, value: item } : item));\n\n  const initialized = useMounted();\n  const [key, setKey] = useState(randomId());\n  const [parent, setParent] = useState<HTMLElement | null>(null);\n  const [refs, setRefs] = useState<Record<string, HTMLElement | null>>({});\n  const setElementRef = (element: HTMLElement | null, val: string) => {\n    refs[val] = element;\n    setRefs(refs);\n  };\n\n  const [_value, handleValueChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: Array.isArray(data)\n      ? (_data.find((item) => !item.disabled)?.value ?? (data[0] as any)?.value ?? null)\n      : null,\n    onChange,\n  });\n\n  const uuid = useId(name);\n\n  const controls = _data.map((item) => (\n    <Box\n      {...getStyles('control')}\n      mod={{ active: _value === item.value, orientation }}\n      key={`${item.value}`}\n    >\n      <input\n        {...getStyles('input')}\n        disabled={disabled || item.disabled}\n        type=\"radio\"\n        name={uuid}\n        value={`${item.value}`}\n        id={`${uuid}-${item.value}`}\n        checked={_value === item.value}\n        onChange={() => !readOnly && handleValueChange(item.value)}\n        data-focus-ring={theme.focusRing}\n        key={`${item.value}-input`}\n      />\n\n      <Box\n        component=\"label\"\n        {...getStyles('label')}\n        mod={{\n          active: _value === item.value && !(disabled || item.disabled),\n          disabled: disabled || item.disabled,\n          'read-only': readOnly,\n        }}\n        htmlFor={`${uuid}-${item.value}`}\n        ref={(node) => setElementRef(node, `${item.value}`)}\n        __vars={{\n          '--sc-label-color':\n            color !== undefined ? getContrastColor({ color, theme, autoContrast }) : undefined,\n        }}\n        key={`${item.value}-label`}\n      >\n        <span {...getStyles('innerLabel')}>{item.label}</span>\n      </Box>\n    </Box>\n  ));\n\n  const mergedRef = useMergedRef(ref, (node) => setParent(node));\n\n  useShallowEffect(() => {\n    setKey(randomId());\n  }, [data.length]);\n\n  if (data.length === 0) {\n    return null;\n  }\n\n  return (\n    <Box\n      {...getStyles('root')}\n      variant={variant}\n      size={size}\n      ref={mergedRef}\n      mod={[\n        {\n          'full-width': fullWidth,\n          orientation,\n          initialized,\n          'with-items-borders': withItemsBorders,\n        },\n        mod,\n      ]}\n      {...others}\n      role=\"radiogroup\"\n      data-disabled={disabled}\n    >\n      {typeof _value !== 'undefined' && (\n        <FloatingIndicator\n          target={refs[`${_value}`]}\n          parent={parent}\n          component=\"span\"\n          transitionDuration=\"var(--sc-transition-duration)\"\n          key={key}\n          {...getStyles('indicator')}\n        />\n      )}\n\n      {controls}\n    </Box>\n  );\n});\n\nSegmentedControl.classes = classes;\nSegmentedControl.varsResolver = varsResolver;\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.mjs","names":["useId","classes"],"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  randomId,\n  useId,\n  useMergedRef,\n  useMounted,\n  useShallowEffect,\n  useUncontrolled,\n} from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getThemeColor,\n  isPrimitive,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  Primitive,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { FloatingIndicator } from '../FloatingIndicator';\nimport classes from './SegmentedControl.module.css';\n\nexport type SegmentedControlStylesNames =\n  | 'root'\n  | 'input'\n  | 'label'\n  | 'control'\n  | 'indicator'\n  | 'innerLabel';\nexport type SegmentedControlCssVariables = {\n  root:\n    | '--sc-radius'\n    | '--sc-color'\n    | '--sc-font-size'\n    | '--sc-padding'\n    | '--sc-shadow'\n    | '--sc-transition-duration'\n    | '--sc-transition-timing-function';\n};\n\nexport interface SegmentedControlItem<Value = string> {\n  value: Value;\n  label: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    StylesApiProps<SegmentedControlFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  /** Data based on which controls are rendered */\n  data: (Value | SegmentedControlItem<Value>)[];\n\n  /** Controlled component value */\n  value?: Value;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value;\n\n  /** Called when value changes */\n  onChange?: (value: Value) => void;\n\n  /** Determines whether the component is disabled */\n  disabled?: boolean;\n\n  /** Name attribute for the radio group. A random name is auto-generated if not provided */\n  name?: string;\n\n  /** Determines whether the component should take 100% width of its parent @default false */\n  fullWidth?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color, changes indicator background color. By default, uses white in light mode and dark.5 in dark mode */\n  color?: MantineColor;\n\n  /** Controls `font-size`, `padding` and `height` properties @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Indicator `transition-duration` in ms, set `0` to turn off transitions @default 200 */\n  transitionDuration?: number;\n\n  /** Indicator `transition-timing-function` property @default ease */\n  transitionTimingFunction?: string;\n\n  /** Component orientation @default 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** If set to `false`, prevents changing the value */\n  readOnly?: boolean;\n\n  /** If set, automatically adjusts label text color for optimal contrast against the indicator background color */\n  autoContrast?: boolean;\n\n  /** Determines whether there should be borders between items @default true */\n  withItemsBorders?: boolean;\n}\n\nexport type SegmentedControlFactory = Factory<{\n  props: SegmentedControlProps;\n  ref: HTMLDivElement;\n  stylesNames: SegmentedControlStylesNames;\n  vars: SegmentedControlCssVariables;\n  signature: <Value extends Primitive = string>(\n    props: SegmentedControlProps<Value>\n  ) => React.JSX.Element | null;\n}>;\n\nconst defaultProps = {\n  withItemsBorders: true,\n} satisfies Partial<SegmentedControlProps>;\n\nconst varsResolver = createVarsResolver<SegmentedControlFactory>(\n  (theme, { radius, color, transitionDuration, size, transitionTimingFunction }) => ({\n    root: {\n      '--sc-radius': radius === undefined ? undefined : getRadius(radius),\n      '--sc-color': color ? getThemeColor(color, theme) : undefined,\n      '--sc-shadow': color ? undefined : 'var(--mantine-shadow-xs)',\n      '--sc-transition-duration':\n        transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n      '--sc-transition-timing-function': transitionTimingFunction,\n      '--sc-padding': getSize(size, 'sc-padding'),\n      '--sc-font-size': getFontSize(size),\n    },\n  })\n);\n\nexport const SegmentedControl = genericFactory<SegmentedControlFactory>((_props) => {\n  const props = useProps('SegmentedControl', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    value,\n    defaultValue,\n    onChange,\n    size,\n    name,\n    disabled,\n    readOnly,\n    fullWidth,\n    orientation,\n    radius,\n    color,\n    transitionDuration,\n    transitionTimingFunction,\n    variant,\n    autoContrast,\n    withItemsBorders,\n    mod,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SegmentedControlFactory>({\n    name: 'SegmentedControl',\n    props: props as any,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const theme = useMantineTheme();\n\n  const _data = data.map((item) => (isPrimitive(item) ? { label: `${item}`, value: item } : item));\n\n  const initialized = useMounted();\n  const [key, setKey] = useState(randomId());\n  const [parent, setParent] = useState<HTMLElement | null>(null);\n  const [refs, setRefs] = useState<Record<string, HTMLElement | null>>({});\n  const setElementRef = (element: HTMLElement | null, val: string) => {\n    refs[val] = element;\n    setRefs(refs);\n  };\n\n  const [_value, handleValueChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: Array.isArray(data)\n      ? (_data.find((item) => !item.disabled)?.value ?? (data[0] as any)?.value ?? null)\n      : null,\n    onChange,\n  });\n\n  const uuid = useId(name);\n\n  const controls = _data.map((item) => (\n    <Box\n      {...getStyles('control')}\n      mod={{ active: _value === item.value, orientation }}\n      key={`${item.value}`}\n    >\n      <input\n        {...getStyles('input')}\n        disabled={disabled || item.disabled}\n        type=\"radio\"\n        name={uuid}\n        value={`${item.value}`}\n        id={`${uuid}-${item.value}`}\n        checked={_value === item.value}\n        onChange={() => !readOnly && handleValueChange(item.value)}\n        data-focus-ring={theme.focusRing}\n        key={`${item.value}-input`}\n      />\n\n      <Box\n        component=\"label\"\n        {...getStyles('label')}\n        mod={{\n          active: _value === item.value && !(disabled || item.disabled),\n          disabled: disabled || item.disabled,\n          'read-only': readOnly,\n        }}\n        htmlFor={`${uuid}-${item.value}`}\n        ref={(node) => setElementRef(node, `${item.value}`)}\n        __vars={{\n          '--sc-label-color':\n            color !== undefined ? getContrastColor({ color, theme, autoContrast }) : undefined,\n        }}\n        key={`${item.value}-label`}\n      >\n        <span {...getStyles('innerLabel')}>{item.label}</span>\n      </Box>\n    </Box>\n  ));\n\n  const mergedRef = useMergedRef(ref, (node) => setParent(node));\n\n  useShallowEffect(() => {\n    setKey(randomId());\n  }, [data.length]);\n\n  if (data.length === 0) {\n    return null;\n  }\n\n  return (\n    <Box\n      {...getStyles('root')}\n      variant={variant}\n      size={size}\n      ref={mergedRef}\n      mod={[\n        {\n          'full-width': fullWidth,\n          orientation,\n          initialized,\n          'with-items-borders': withItemsBorders,\n        },\n        mod,\n      ]}\n      {...others}\n      role=\"radiogroup\"\n      data-disabled={disabled}\n    >\n      {typeof _value !== 'undefined' && (\n        <FloatingIndicator\n          target={refs[`${_value}`]}\n          parent={parent}\n          component=\"span\"\n          transitionDuration=\"var(--sc-transition-duration)\"\n          key={key}\n          {...getStyles('indicator')}\n        />\n      )}\n\n      {controls}\n    </Box>\n  );\n});\n\nSegmentedControl.classes = classes;\nSegmentedControl.varsResolver = varsResolver;\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n\nexport namespace SegmentedControl {\n  export type CssVariables = SegmentedControlCssVariables;\n  export type Factory = SegmentedControlFactory;\n  export type Item<Value extends Primitive = string> = SegmentedControlItem<Value>;\n  export type Props<Value extends Primitive = string> = SegmentedControlProps<Value>;\n  export type StylesNames = SegmentedControlStylesNames;\n}\n"],"mappings":"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"}

package/esm/components/SegmentedControl/SegmentedControl.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.module.mjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".root {\n  --sc-padding-xs: 2px 6px;\n  --sc-padding-sm: 3px 10px;\n  --sc-padding-md: 4px 14px;\n  --sc-padding-lg: 7px 16px;\n  --sc-padding-xl: 10px 20px;\n\n  --sc-transition-duration: 200ms;\n  --sc-padding: var(--sc-padding-sm);\n  --sc-transition-timing-function: ease;\n  --sc-font-size: var(--mantine-font-size-sm);\n\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  width: auto;\n  border-radius: var(--sc-radius, var(--mantine-radius-default));\n  overflow: hidden;\n  padding: 4px;\n\n  &:where([data-full-width]) {\n    display: flex;\n  }\n\n  &:where([data-orientation='vertical']) {\n    display: flex;\n    flex-direction: column;\n    width: max-content;\n\n    &:where([data-full-width]) {\n      width: auto;\n    }\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-8);\n  }\n}\n\n.indicator {\n  position: absolute;\n  display: block;\n  z-index: 1;\n  border-radius: var(--sc-radius, var(--mantine-radius-default));\n\n  @mixin where-light {\n    box-shadow: var(--sc-shadow, none);\n    background-color: var(--sc-color, var(--mantine-color-white));\n  }\n\n  @mixin where-dark {\n    box-shadow: none;\n    background-color: var(--sc-color, var(--mantine-color-dark-5));\n  }\n}\n\n.label {\n  -webkit-tap-highlight-color: transparent;\n  font-weight: var(--mantine-font-weight-medium);\n  display: block;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  border-radius: var(--sc-radius, var(--mantine-radius-default));\n  font-size: var(--sc-font-size);\n  padding: var(--sc-padding);\n  transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);\n  cursor: pointer;\n\n  /* outline is controlled by .input */\n  outline: var(--segmented-control-outline, none);\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-1);\n  }\n\n  &:where([data-read-only]) {\n    cursor: default;\n  }\n\n  fieldset:disabled &,\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n  }\n\n  &:where([data-active]) {\n    @mixin where-light {\n      color: var(--sc-label-color, var(--mantine-color-black));\n    }\n\n    @mixin where-dark {\n      color: var(--sc-label-color, var(--mantine-color-white));\n    }\n\n    &::before {\n      .root:where([data-initialized]) & {\n        display: none;\n      }\n      content: '';\n      inset: 0;\n      z-index: 0;\n      position: absolute;\n      border-radius: var(--sc-radius, var(--mantine-radius-default));\n\n      @mixin where-light {\n        box-shadow: var(--sc-shadow, none);\n        background-color: var(--sc-color, var(--mantine-color-white));\n      }\n\n      @mixin where-dark {\n        box-shadow: none;\n        background-color: var(--sc-color, var(--mantine-color-dark-5));\n      }\n    }\n  }\n\n  &:where(:not([data-disabled], [data-active], [data-read-only])) {\n    @mixin hover {\n      @mixin where-light {\n        color: var(--mantine-color-black);\n      }\n\n      @mixin where-dark {\n        color: var(--mantine-color-white);\n      }\n    }\n  }\n\n  fieldset:disabled & {\n    @mixin hover {\n      color: var(--mantine-color-disabled-color) !important;\n    }\n  }\n}\n\n.input {\n  height: 0;\n  width: 0;\n  position: absolute;\n  overflow: hidden;\n  white-space: nowrap;\n  opacity: 0;\n\n  &[data-focus-ring='auto'] {\n    &:focus:focus-visible {\n      & + .label {\n        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n      }\n    }\n  }\n\n  &[data-focus-ring='always'] {\n    &:focus {\n      & + .label {\n        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n      }\n    }\n  }\n}\n\n.control {\n  position: relative;\n  flex: 1;\n  z-index: 2;\n  transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n\n  .root[data-with-items-borders] :where(&)::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    inset-inline-start: 0;\n    background-color: var(--separator-color);\n    width: 1px;\n    transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n  }\n\n  &[data-orientation='vertical'] {\n    &::before {\n      top: 0;\n      inset-inline: 0;\n      bottom: auto;\n      height: 1px;\n      width: auto;\n    }\n  }\n\n  @mixin where-light {\n    --separator-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --separator-color: var(--mantine-color-dark-4);\n  }\n\n  &:first-of-type {\n    &::before {\n      --separator-color: transparent;\n    }\n  }\n\n  &[data-active] {\n    [data-mantine-color-scheme] & {\n      &,\n      & + .control {\n        &::before {\n          --separator-color: transparent;\n        }\n      }\n    }\n  }\n}\n\n.innerLabel {\n  position: relative;\n  z-index: 2;\n}\n"],"mappings":""}
+{"version":3,"file":"SegmentedControl.module.mjs","names":[],"sources":["../../../src/components/SegmentedControl/SegmentedControl.module.css"],"sourcesContent":[".root {\n  --sc-padding-xs: 2px 6px;\n  --sc-padding-sm: 3px 10px;\n  --sc-padding-md: 4px 14px;\n  --sc-padding-lg: 7px 16px;\n  --sc-padding-xl: 10px 20px;\n\n  --sc-transition-duration: 200ms;\n  --sc-padding: var(--sc-padding-sm);\n  --sc-transition-timing-function: ease;\n  --sc-font-size: var(--mantine-font-size-sm);\n\n  position: relative;\n  display: inline-flex;\n  flex-direction: row;\n  width: auto;\n  border-radius: var(--sc-radius, var(--mantine-radius-default));\n  overflow: hidden;\n  padding: 4px;\n\n  &:where([data-full-width]) {\n    display: flex;\n  }\n\n  &:where([data-orientation='vertical']) {\n    display: flex;\n    flex-direction: column;\n    width: max-content;\n\n    &:where([data-full-width]) {\n      width: auto;\n    }\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-1);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-8);\n  }\n}\n\n.indicator {\n  position: absolute;\n  display: block;\n  z-index: 1;\n  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n  @mixin where-light {\n    box-shadow: var(--sc-shadow, none);\n    background-color: var(--sc-color, var(--mantine-color-white));\n  }\n\n  @mixin where-dark {\n    box-shadow: none;\n    background-color: var(--sc-color, var(--mantine-color-dark-5));\n  }\n}\n\n.label {\n  -webkit-tap-highlight-color: transparent;\n  font-weight: var(--mantine-font-weight-medium);\n  display: block;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n  font-size: var(--sc-font-size);\n  padding: var(--sc-padding);\n  transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);\n  cursor: pointer;\n\n  /* outline is controlled by .input */\n  outline: var(--segmented-control-outline, none);\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-1);\n  }\n\n  &:where([data-read-only]) {\n    cursor: default;\n  }\n\n  fieldset:disabled &,\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n  }\n\n  &:where([data-active]) {\n    @mixin where-light {\n      color: var(--sc-label-color, var(--mantine-color-black));\n    }\n\n    @mixin where-dark {\n      color: var(--sc-label-color, var(--mantine-color-white));\n    }\n\n    &::before {\n      .root:where([data-initialized]) & {\n        display: none;\n      }\n      content: '';\n      inset: 0;\n      z-index: 0;\n      position: absolute;\n      border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);\n\n      @mixin where-light {\n        box-shadow: var(--sc-shadow, none);\n        background-color: var(--sc-color, var(--mantine-color-white));\n      }\n\n      @mixin where-dark {\n        box-shadow: none;\n        background-color: var(--sc-color, var(--mantine-color-dark-5));\n      }\n    }\n  }\n\n  &:where(:not([data-disabled], [data-active], [data-read-only])) {\n    @mixin hover {\n      @mixin where-light {\n        color: var(--mantine-color-black);\n      }\n\n      @mixin where-dark {\n        color: var(--mantine-color-white);\n      }\n    }\n  }\n\n  fieldset:disabled & {\n    @mixin hover {\n      color: var(--mantine-color-disabled-color) !important;\n    }\n  }\n}\n\n.input {\n  height: 0;\n  width: 0;\n  position: absolute;\n  overflow: hidden;\n  white-space: nowrap;\n  opacity: 0;\n\n  &[data-focus-ring='auto'] {\n    &:focus:focus-visible {\n      & + .label {\n        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n      }\n    }\n  }\n\n  &[data-focus-ring='always'] {\n    &:focus {\n      & + .label {\n        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);\n      }\n    }\n  }\n}\n\n.control {\n  position: relative;\n  flex: 1;\n  z-index: 2;\n  transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n\n  .root[data-with-items-borders] :where(&)::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    inset-inline-start: 0;\n    background-color: var(--separator-color);\n    width: 1px;\n    transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);\n  }\n\n  &[data-orientation='vertical'] {\n    &::before {\n      top: 0;\n      inset-inline: 0;\n      bottom: auto;\n      height: 1px;\n      width: auto;\n    }\n  }\n\n  @mixin where-light {\n    --separator-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --separator-color: var(--mantine-color-dark-4);\n  }\n\n  &:first-of-type {\n    &::before {\n      --separator-color: transparent;\n    }\n  }\n\n  &[data-active] {\n    [data-mantine-color-scheme] & {\n      &,\n      & + .control {\n        &::before {\n          --separator-color: transparent;\n        }\n      }\n    }\n  }\n}\n\n.innerLabel {\n  position: relative;\n  z-index: 2;\n}\n"],"mappings":""}