{"version":3,"file":"FloatingIndicator.cjs","names":["createVarsResolver","factory","useProps","useStyles","useFloatingIndicator","Box","classes"],"sources":["../../../src/components/FloatingIndicator/FloatingIndicator.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef, useReducedMotion } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { useFloatingIndicator } from './use-floating-indicator';\nimport classes from './FloatingIndicator.module.css';\n\nexport type FloatingIndicatorStylesNames = 'root';\nexport type FloatingIndicatorCssVariables = {\n root: '--transition-duration';\n};\n\nexport interface FloatingIndicatorProps\n extends BoxProps, StylesApiProps, ElementProps<'div'> {\n /** Target element over which the indicator is displayed.\n * The indicator will be positioned to match the target's size and position.\n * */\n target: HTMLElement | null | undefined;\n\n /** Parent container element that must have `position: relative`.\n * The indicator's position is calculated relative to this element.\n * */\n parent: HTMLElement | null | undefined;\n\n /** Transition duration in ms @default 150 */\n transitionDuration?: number | string;\n\n /** Controls whether the indicator should be hidden initially and displayed after the parent's transition ends.\n * Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent\n * the indicator from appearing at the wrong position during the parent's animation.\n * @default false\n * */\n displayAfterTransitionEnd?: boolean;\n\n /** Called when the indicator starts transitioning to a new position */\n onTransitionStart?: () => void;\n\n /** Called when the indicator finishes transitioning to a new position */\n onTransitionEnd?: () => void;\n}\n\nexport type FloatingIndicatorFactory = Factory<{\n props: FloatingIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: FloatingIndicatorStylesNames;\n vars: FloatingIndicatorCssVariables;\n ctx: { shouldReduceMotion: boolean };\n}>;\n\nconst varsResolver = createVarsResolver(\n (theme, { transitionDuration }, { shouldReduceMotion }) => {\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion\n ? '0ms'\n : typeof transitionDuration === 'number'\n ? `${transitionDuration}ms`\n : transitionDuration || '150ms';\n\n return {\n root: {\n '--transition-duration': duration,\n },\n };\n }\n);\n\nexport const FloatingIndicator = factory((_props) => {\n const props = useProps('FloatingIndicator', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n target,\n parent,\n transitionDuration,\n mod,\n displayAfterTransitionEnd,\n onTransitionStart,\n onTransitionEnd,\n attributes,\n ref,\n ...others\n } = props;\n\n const shouldReduceMotion = useReducedMotion();\n\n const getStyles = useStyles({\n name: 'FloatingIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n stylesCtx: { shouldReduceMotion },\n });\n\n const innerRef = useRef(null);\n const { initialized, hidden } = useFloatingIndicator({\n target,\n parent,\n ref: innerRef,\n displayAfterTransitionEnd,\n onTransitionStart,\n onTransitionEnd,\n });\n\n const mergedRef = useMergedRef(ref, innerRef);\n\n if (!target || !parent) {\n return null;\n }\n\n return (\n