@mantine/core 9.5.1-alpha.1 → 9.5.1

package/cjs/components/ColorInput/ColorInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.cjs","names":["createVarsResolver","getSize","factory","useProps","useInputProps","useStyles","useResolvedStylesApi","ActionIcon","convertHsvaTo","parseColor","EyeDropperIcon","isColorValid","Input","Popover","ColorSwatch","classes","ColorPicker","InputBase"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __ColorPickerProps,\n  ColorPicker,\n  ColorPickerStylesNames,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  eyeDropperButton: '--ci-button-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches */\n  disallowInput?: boolean;\n\n  /** If set, the input value resets to the last known valid value when the input loses focus @default true */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** If set, the preview color swatch is displayed in the left section of the input @default true */\n  withPreview?: boolean;\n\n  /** If set, the eye dropper button is displayed in the right section @default true */\n  withEyeDropper?: boolean;\n\n  /** An icon to replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** If set, the dropdown is closed when one of the color swatches is clicked @default false */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 7,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n  size: 'sm',\n  leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  eyeDropperButton: {\n    '--ci-button-size': getSize(size, 'ci-button-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'ColorInput'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format = 'hex',\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      unstyled={unstyled}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        opened={dropdownOpened}\n        {...popoverProps}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown\n          onMouseDown={(event) => event.preventDefault()}\n          className={classes.dropdown}\n        >\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n            attributes={wrapperProps.attributes}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n  export type Props = ColorInputProps;\n  export type StylesNames = ColorInputStylesNames;\n  export type CssVariables = ColorInputCssVariables;\n  export type Factory = ColorInputFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorInput.cjs","names":["createVarsResolver","getSize","factory","useProps","useInputProps","useStyles","useResolvedStylesApi","ActionIcon","convertHsvaTo","parseColor","EyeDropperIcon","isColorValid","Input","Popover","ColorSwatch","classes","ColorPicker","InputBase"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __ColorPickerProps,\n  ColorPicker,\n  ColorPickerStylesNames,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  eyeDropperButton: '--ci-button-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches */\n  disallowInput?: boolean;\n\n  /** If set, the input value resets to the last known valid value when the input loses focus @default true */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** If set, the preview color swatch is displayed in the left section of the input @default true */\n  withPreview?: boolean;\n\n  /** If set, the eye dropper button is displayed in the right section @default true */\n  withEyeDropper?: boolean;\n\n  /** An icon to replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** If set, the dropdown is closed when one of the color swatches is clicked @default false */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 7,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n  size: 'sm',\n  leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  eyeDropperButton: {\n    '--ci-button-size': getSize(size, 'ci-button-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'ColorInput'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format = 'hex',\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    fullWidth,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      unstyled={unstyled}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        opened={dropdownOpened}\n        width={fullWidth ? 'target' : undefined}\n        {...popoverProps}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown\n          onMouseDown={(event) => event.preventDefault()}\n          className={classes.dropdown}\n        >\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n            attributes={wrapperProps.attributes}\n            fullWidth={fullWidth}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n  export type Props = ColorInputProps;\n  export type StylesNames = ColorInputStylesNames;\n  export type CssVariables = ColorInputCssVariables;\n  export type Factory = ColorInputFactory;\n}\n"],"mappings":"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"}

package/cjs/components/ColorPicker/ColorPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.cjs","names":["createVarsResolver","getSize","getSpacing","factory","useProps","useStyles","parseColor","convertHsvaTo","isColorValid","ColorPickerContext","Box","Saturation","HueSlider","AlphaSlider","ColorSwatch","Swatches","classes"],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getSpacing,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { ColorPickerContext } from './ColorPicker.context';\nimport { ColorFormat, HsvaColor } from './ColorPicker.types';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { Saturation } from './Saturation/Saturation';\nimport { Swatches } from './Swatches/Swatches';\nimport classes from './ColorPicker.module.css';\n\nexport type ColorPickerStylesNames =\n  | 'wrapper'\n  | 'preview'\n  | 'body'\n  | 'sliders'\n  | 'slider'\n  | 'sliderOverlay'\n  | 'thumb'\n  | 'saturation'\n  | 'thumb'\n  | 'saturationOverlay'\n  | 'thumb'\n  | 'swatches'\n  | 'swatch';\n\nexport type ColorPickerCssVariables = {\n  wrapper:\n    | '--cp-preview-size'\n    | '--cp-width'\n    | '--cp-body-spacing'\n    | '--cp-swatch-size'\n    | '--cp-thumb-size'\n    | '--cp-saturation-height';\n};\n\nexport interface __ColorPickerProps {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Called when the user stops dragging one of the sliders or changes the value with keyboard */\n  onChangeEnd?: (value: string) => void;\n\n  /** Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider @default 'hex' */\n  format?: ColorFormat;\n\n  /** If `false`, the component displays only swatches @default true */\n  withPicker?: boolean;\n\n  /** A list of colors used to display swatches list below the color picker */\n  swatches?: string[];\n\n  /** Number of swatches per row @default 7 */\n  swatchesPerRow?: number;\n\n  /** Component size @default 'md' */\n  size?: MantineSize | (string & {});\n}\n\nexport interface ColorPickerProps\n  extends\n    BoxProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorPickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  __staticSelector?: string;\n\n  /** If set, the component takes 100% width of its container @default false */\n  fullWidth?: boolean;\n\n  /** If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard @default true */\n  focusable?: boolean;\n\n  /** Saturation slider `aria-label` */\n  saturationLabel?: string;\n\n  /** Hue slider `aria-label` */\n  hueLabel?: string;\n\n  /** Alpha slider `aria-label` */\n  alphaLabel?: string;\n\n  /** Called when one of the color swatches is clicked */\n  onColorSwatchClick?: (color: string) => void;\n\n  /** Hidden input `name` attribute, if not set, the input will not be rendered */\n  name?: string;\n\n  /** Props spread to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n}\n\nexport type ColorPickerFactory = Factory<{\n  props: ColorPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorPickerStylesNames;\n  vars: ColorPickerCssVariables;\n}>;\n\nconst defaultProps = {\n  swatchesPerRow: 7,\n  withPicker: true,\n  focusable: true,\n  size: 'md',\n  __staticSelector: 'ColorPicker',\n} satisfies Partial<ColorPickerProps>;\n\nconst varsResolver = createVarsResolver<ColorPickerFactory>((_, { size, swatchesPerRow }) => ({\n  wrapper: {\n    '--cp-preview-size': getSize(size, 'cp-preview-size'),\n    '--cp-width': getSize(size, 'cp-width'),\n    '--cp-body-spacing': getSpacing(size),\n    '--cp-swatch-size': `${100 / swatchesPerRow!}%`,\n    '--cp-thumb-size': getSize(size, 'cp-thumb-size'),\n    '--cp-saturation-height': getSize(size, 'cp-saturation-height'),\n  },\n}));\n\nexport const ColorPicker = factory<ColorPickerFactory>((_props) => {\n  const props = useProps('ColorPicker', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    format = 'hex',\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    withPicker,\n    size,\n    saturationLabel,\n    hueLabel,\n    alphaLabel,\n    focusable,\n    swatches,\n    swatchesPerRow,\n    fullWidth,\n    onColorSwatchClick,\n    __staticSelector,\n    mod,\n    attributes,\n    name,\n    hiddenInputProps,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ColorPickerFactory>({\n    name: __staticSelector,\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const formatRef = useRef(format || 'hex');\n  const valueRef = useRef<string>('');\n  const scrubTimeoutRef = useRef<number>(-1);\n  const isScrubbingRef = useRef(false);\n  const withAlpha = format === 'hexa' || format === 'rgba' || format === 'hsla';\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '#FFFFFF',\n    onChange,\n  });\n\n  const [parsed, setParsed] = useState<HsvaColor>(parseColor(_value));\n\n  const startScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    isScrubbingRef.current = true;\n  };\n\n  const stopScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    scrubTimeoutRef.current = window.setTimeout(() => {\n      isScrubbingRef.current = false;\n    }, 200);\n  };\n\n  const handleChange = (color: Partial<HsvaColor>) => {\n    setParsed((current) => {\n      const next = { ...current, ...color };\n      valueRef.current = convertHsvaTo(formatRef.current, next);\n      return next;\n    });\n\n    setValue(valueRef.current);\n  };\n\n  useDidUpdate(() => {\n    if (typeof value === 'string' && isColorValid(value) && !isScrubbingRef.current) {\n      setParsed(parseColor(value));\n    }\n  }, [value]);\n\n  useDidUpdate(() => {\n    formatRef.current = format || 'hex';\n    setValue(convertHsvaTo(formatRef.current, parsed));\n  }, [format]);\n\n  return (\n    <ColorPickerContext value={{ getStyles, unstyled }}>\n      <Box\n        {...getStyles('wrapper')}\n        size={size}\n        mod={[{ 'full-width': fullWidth }, mod]}\n        {...others}\n      >\n        {name && <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />}\n\n        {withPicker && (\n          <>\n            <Saturation\n              value={parsed}\n              onChange={handleChange}\n              onChangeEnd={({ s, v }) =>\n                onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, s: s!, v: v! }))\n              }\n              color={_value}\n              size={size}\n              focusable={focusable}\n              saturationLabel={saturationLabel}\n              onScrubStart={startScrubbing}\n              onScrubEnd={stopScrubbing}\n            />\n\n            <div {...getStyles('body')}>\n              <div {...getStyles('sliders')}>\n                <HueSlider\n                  value={parsed.h}\n                  onChange={(h) => handleChange({ h })}\n                  onChangeEnd={(h) =>\n                    onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, h }))\n                  }\n                  size={size}\n                  focusable={focusable}\n                  aria-label={hueLabel}\n                  onScrubStart={startScrubbing}\n                  onScrubEnd={stopScrubbing}\n                />\n\n                {withAlpha && (\n                  <AlphaSlider\n                    value={parsed.a}\n                    onChange={(a) => handleChange({ a })}\n                    onChangeEnd={(a) => {\n                      onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, a }));\n                    }}\n                    size={size}\n                    color={convertHsvaTo('hex', parsed)}\n                    focusable={focusable}\n                    aria-label={alphaLabel}\n                    onScrubStart={startScrubbing}\n                    onScrubEnd={stopScrubbing}\n                  />\n                )}\n              </div>\n\n              {withAlpha && (\n                <ColorSwatch\n                  color={_value}\n                  radius=\"sm\"\n                  size=\"var(--cp-preview-size)\"\n                  {...getStyles('preview')}\n                />\n              )}\n            </div>\n          </>\n        )}\n\n        {Array.isArray(swatches) && (\n          <Swatches\n            data={swatches}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            setValue={setValue}\n            value={_value}\n            onChangeEnd={(color) => {\n              const convertedColor = convertHsvaTo(format, parseColor(color));\n              onColorSwatchClick?.(convertedColor);\n              onChangeEnd?.(convertedColor);\n              if (!controlled) {\n                setParsed(parseColor(color));\n              }\n            }}\n          />\n        )}\n      </Box>\n    </ColorPickerContext>\n  );\n});\n\nColorPicker.classes = classes;\nColorPicker.varsResolver = varsResolver;\nColorPicker.displayName = '@mantine/core/ColorPicker';\n\nexport namespace ColorPicker {\n  export type Props = ColorPickerProps;\n  export type CssVariables = ColorPickerCssVariables;\n  export type Factory = ColorPickerFactory;\n  export type StylesNames = ColorPickerStylesNames;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyHA,MAAM,eAAe;CACnB,gBAAgB;CAChB,YAAY;CACZ,WAAW;CACX,MAAM;CACN,kBAAkB;AACpB;AAEA,MAAM,eAAeA,6BAAAA,oBAAwC,GAAG,EAAE,MAAM,sBAAsB,EAC5F,SAAS;CACP,qBAAqBC,iBAAAA,QAAQ,MAAM,iBAAiB;CACpD,cAAcA,iBAAAA,QAAQ,MAAM,UAAU;CACtC,qBAAqBC,iBAAAA,WAAW,IAAI;CACpC,oBAAoB,GAAG,MAAM,eAAgB;CAC7C,mBAAmBD,iBAAAA,QAAQ,MAAM,eAAe;CAChD,0BAA0BA,iBAAAA,QAAQ,MAAM,sBAAsB;AAChE,EACF,EAAE;AAEF,MAAa,cAAcE,gBAAAA,SAA6B,WAAW;CACjE,MAAM,QAAQC,kBAAAA,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SAAS,OACT,OACA,cACA,UACA,aACA,YACA,MACA,iBACA,UACA,YACA,WACA,UACA,gBACA,WACA,oBACA,kBACA,KACA,YACA,MACA,kBACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA8B;EAC9C,MAAM;EACN;EACA,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,aAAA,GAAA,MAAA,OAAA,CAAmB,UAAU,KAAK;CACxC,MAAM,YAAA,GAAA,MAAA,OAAA,CAA0B,EAAE;CAClC,MAAM,mBAAA,GAAA,MAAA,OAAA,CAAiC,EAAE;CACzC,MAAM,kBAAA,GAAA,MAAA,OAAA,CAAwB,KAAK;CACnC,MAAM,YAAY,WAAW,UAAU,WAAW,UAAU,WAAW;CAEvE,MAAM,CAAC,QAAQ,UAAU,eAAA,GAAA,eAAA,gBAAA,CAA8B;EACrD;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAiCC,gBAAAA,WAAW,MAAM,CAAC;CAElE,MAAM,uBAAuB;EAC3B,OAAO,aAAa,gBAAgB,OAAO;EAC3C,eAAe,UAAU;CAC3B;CAEA,MAAM,sBAAsB;EAC1B,OAAO,aAAa,gBAAgB,OAAO;EAC3C,gBAAgB,UAAU,OAAO,iBAAiB;GAChD,eAAe,UAAU;EAC3B,GAAG,GAAG;CACR;CAEA,MAAM,gBAAgB,UAA8B;EAClD,WAAW,YAAY;GACrB,MAAM,OAAO;IAAE,GAAG;IAAS,GAAG;GAAM;GACpC,SAAS,UAAUC,mBAAAA,cAAc,UAAU,SAAS,IAAI;GACxD,OAAO;EACT,CAAC;EAED,SAAS,SAAS,OAAO;CAC3B;CAEA,CAAA,GAAA,eAAA,aAAA,OAAmB;EACjB,IAAI,OAAO,UAAU,YAAYC,gBAAAA,aAAa,KAAK,KAAK,CAAC,eAAe,SACtE,UAAUF,gBAAAA,WAAW,KAAK,CAAC;CAE/B,GAAG,CAAC,KAAK,CAAC;CAEV,CAAA,GAAA,eAAA,aAAA,OAAmB;EACjB,UAAU,UAAU,UAAU;EAC9B,SAASC,mBAAAA,cAAc,UAAU,SAAS,MAAM,CAAC;CACnD,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,4BAAAA,oBAAD;EAAoB,OAAO;GAAE;GAAW;EAAS;YAC/C,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;GACE,GAAI,UAAU,SAAS;GACjB;GACN,KAAK,CAAC,EAAE,cAAc,UAAU,GAAG,GAAG;GACtC,GAAI;aAJN;IAMG,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KAAO,MAAK;KAAe;KAAM,OAAO;KAAQ,GAAI;IAAmB,CAAA;IAE/E,cACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;KACE,OAAO;KACP,UAAU;KACV,cAAc,EAAE,GAAG,QACjB,cAAcJ,mBAAAA,cAAc,UAAU,SAAS;MAAE,GAAG;MAAW;MAAO;KAAG,CAAC,CAAC;KAE7E,OAAO;KACD;KACK;KACM;KACjB,cAAc;KACd,YAAY;IACb,CAAA,GAED,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,GAAI,UAAU,MAAM;eAAzB,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MAAK,GAAI,UAAU,SAAS;gBAA5B,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACK,kBAAAA,WAAD;OACE,OAAO,OAAO;OACd,WAAW,MAAM,aAAa,EAAE,EAAE,CAAC;OACnC,cAAc,MACZ,cAAcL,mBAAAA,cAAc,UAAU,SAAS;QAAE,GAAG;QAAQ;OAAE,CAAC,CAAC;OAE5D;OACK;OACX,cAAY;OACZ,cAAc;OACd,YAAY;MACb,CAAA,GAEA,aACC,iBAAA,GAAA,kBAAA,IAAA,CAACM,oBAAAA,aAAD;OACE,OAAO,OAAO;OACd,WAAW,MAAM,aAAa,EAAE,EAAE,CAAC;OACnC,cAAc,MAAM;QAClB,cAAcN,mBAAAA,cAAc,UAAU,SAAS;SAAE,GAAG;SAAQ;QAAE,CAAC,CAAC;OAClE;OACM;OACN,OAAOA,mBAAAA,cAAc,OAAO,MAAM;OACvB;OACX,cAAY;OACZ,cAAc;OACd,YAAY;MACb,CAAA,CAEA;SAEJ,aACC,iBAAA,GAAA,kBAAA,IAAA,CAACO,oBAAAA,aAAD;MACE,OAAO;MACP,QAAO;MACP,MAAK;MACL,GAAI,UAAU,SAAS;KACxB,CAAA,CAEA;MACL,EAAA,CAAA;IAGH,MAAM,QAAQ,QAAQ,KACrB,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;KACE,MAAM;KACU;KACL;KACD;KACV,OAAO;KACP,cAAc,UAAU;MACtB,MAAM,iBAAiBR,mBAAAA,cAAc,QAAQD,gBAAAA,WAAW,KAAK,CAAC;MAC9D,qBAAqB,cAAc;MACnC,cAAc,cAAc;MAC5B,IAAI,CAAC,YACH,UAAUA,gBAAAA,WAAW,KAAK,CAAC;KAE/B;IACD,CAAA;GAEA;;CACa,CAAA;AAExB,CAAC;AAED,YAAY,UAAUU,2BAAAA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
+{"version":3,"file":"ColorPicker.cjs","names":["createVarsResolver","getSize","getSpacing","factory","useProps","useStyles","parseColor","convertHsvaTo","isColorValid","ColorPickerContext","Box","Saturation","HueSlider","AlphaSlider","ColorSwatch","Swatches","classes"],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getSpacing,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { ColorPickerContext } from './ColorPicker.context';\nimport { ColorFormat, HsvaColor } from './ColorPicker.types';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { Saturation } from './Saturation/Saturation';\nimport { Swatches } from './Swatches/Swatches';\nimport classes from './ColorPicker.module.css';\n\nexport type ColorPickerStylesNames =\n  | 'wrapper'\n  | 'preview'\n  | 'body'\n  | 'sliders'\n  | 'slider'\n  | 'sliderOverlay'\n  | 'thumb'\n  | 'saturation'\n  | 'thumb'\n  | 'saturationOverlay'\n  | 'thumb'\n  | 'swatches'\n  | 'swatch';\n\nexport type ColorPickerCssVariables = {\n  wrapper:\n    | '--cp-preview-size'\n    | '--cp-width'\n    | '--cp-body-spacing'\n    | '--cp-swatch-size'\n    | '--cp-thumb-size'\n    | '--cp-saturation-height';\n};\n\nexport interface __ColorPickerProps {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Called when the user stops dragging one of the sliders or changes the value with keyboard */\n  onChangeEnd?: (value: string) => void;\n\n  /** Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider @default 'hex' */\n  format?: ColorFormat;\n\n  /** If `false`, the component displays only swatches @default true */\n  withPicker?: boolean;\n\n  /** A list of colors used to display swatches list below the color picker */\n  swatches?: string[];\n\n  /** Number of swatches per row @default 7 */\n  swatchesPerRow?: number;\n\n  /** Component size @default 'md' */\n  size?: MantineSize | (string & {});\n\n  /** If set, the component takes 100% width of its container @default false */\n  fullWidth?: boolean;\n}\n\nexport interface ColorPickerProps\n  extends\n    BoxProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorPickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  __staticSelector?: string;\n\n  /** If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard @default true */\n  focusable?: boolean;\n\n  /** Saturation slider `aria-label` */\n  saturationLabel?: string;\n\n  /** Hue slider `aria-label` */\n  hueLabel?: string;\n\n  /** Alpha slider `aria-label` */\n  alphaLabel?: string;\n\n  /** Called when one of the color swatches is clicked */\n  onColorSwatchClick?: (color: string) => void;\n\n  /** Hidden input `name` attribute, if not set, the input will not be rendered */\n  name?: string;\n\n  /** Props spread to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n}\n\nexport type ColorPickerFactory = Factory<{\n  props: ColorPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: ColorPickerStylesNames;\n  vars: ColorPickerCssVariables;\n}>;\n\nconst defaultProps = {\n  swatchesPerRow: 7,\n  withPicker: true,\n  focusable: true,\n  size: 'md',\n  __staticSelector: 'ColorPicker',\n} satisfies Partial<ColorPickerProps>;\n\nconst varsResolver = createVarsResolver<ColorPickerFactory>((_, { size, swatchesPerRow }) => ({\n  wrapper: {\n    '--cp-preview-size': getSize(size, 'cp-preview-size'),\n    '--cp-width': getSize(size, 'cp-width'),\n    '--cp-body-spacing': getSpacing(size),\n    '--cp-swatch-size': `${100 / swatchesPerRow!}%`,\n    '--cp-thumb-size': getSize(size, 'cp-thumb-size'),\n    '--cp-saturation-height': getSize(size, 'cp-saturation-height'),\n  },\n}));\n\nexport const ColorPicker = factory<ColorPickerFactory>((_props) => {\n  const props = useProps('ColorPicker', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    format = 'hex',\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    withPicker,\n    size,\n    saturationLabel,\n    hueLabel,\n    alphaLabel,\n    focusable,\n    swatches,\n    swatchesPerRow,\n    fullWidth,\n    onColorSwatchClick,\n    __staticSelector,\n    mod,\n    attributes,\n    name,\n    hiddenInputProps,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ColorPickerFactory>({\n    name: __staticSelector,\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'wrapper',\n    vars,\n    varsResolver,\n  });\n\n  const formatRef = useRef(format || 'hex');\n  const valueRef = useRef<string>('');\n  const scrubTimeoutRef = useRef<number>(-1);\n  const isScrubbingRef = useRef(false);\n  const withAlpha = format === 'hexa' || format === 'rgba' || format === 'hsla';\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '#FFFFFF',\n    onChange,\n  });\n\n  const [parsed, setParsed] = useState<HsvaColor>(parseColor(_value));\n\n  const startScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    isScrubbingRef.current = true;\n  };\n\n  const stopScrubbing = () => {\n    window.clearTimeout(scrubTimeoutRef.current);\n    scrubTimeoutRef.current = window.setTimeout(() => {\n      isScrubbingRef.current = false;\n    }, 200);\n  };\n\n  const handleChange = (color: Partial<HsvaColor>) => {\n    setParsed((current) => {\n      const next = { ...current, ...color };\n      valueRef.current = convertHsvaTo(formatRef.current, next);\n      return next;\n    });\n\n    setValue(valueRef.current);\n  };\n\n  useDidUpdate(() => {\n    if (typeof value === 'string' && isColorValid(value) && !isScrubbingRef.current) {\n      setParsed(parseColor(value));\n    }\n  }, [value]);\n\n  useDidUpdate(() => {\n    formatRef.current = format || 'hex';\n    setValue(convertHsvaTo(formatRef.current, parsed));\n  }, [format]);\n\n  return (\n    <ColorPickerContext value={{ getStyles, unstyled }}>\n      <Box\n        {...getStyles('wrapper')}\n        size={size}\n        mod={[{ 'full-width': fullWidth }, mod]}\n        {...others}\n      >\n        {name && <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />}\n\n        {withPicker && (\n          <>\n            <Saturation\n              value={parsed}\n              onChange={handleChange}\n              onChangeEnd={({ s, v }) =>\n                onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, s: s!, v: v! }))\n              }\n              color={_value}\n              size={size}\n              focusable={focusable}\n              saturationLabel={saturationLabel}\n              onScrubStart={startScrubbing}\n              onScrubEnd={stopScrubbing}\n            />\n\n            <div {...getStyles('body')}>\n              <div {...getStyles('sliders')}>\n                <HueSlider\n                  value={parsed.h}\n                  onChange={(h) => handleChange({ h })}\n                  onChangeEnd={(h) =>\n                    onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, h }))\n                  }\n                  size={size}\n                  focusable={focusable}\n                  aria-label={hueLabel}\n                  onScrubStart={startScrubbing}\n                  onScrubEnd={stopScrubbing}\n                />\n\n                {withAlpha && (\n                  <AlphaSlider\n                    value={parsed.a}\n                    onChange={(a) => handleChange({ a })}\n                    onChangeEnd={(a) => {\n                      onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, a }));\n                    }}\n                    size={size}\n                    color={convertHsvaTo('hex', parsed)}\n                    focusable={focusable}\n                    aria-label={alphaLabel}\n                    onScrubStart={startScrubbing}\n                    onScrubEnd={stopScrubbing}\n                  />\n                )}\n              </div>\n\n              {withAlpha && (\n                <ColorSwatch\n                  color={_value}\n                  radius=\"sm\"\n                  size=\"var(--cp-preview-size)\"\n                  {...getStyles('preview')}\n                />\n              )}\n            </div>\n          </>\n        )}\n\n        {Array.isArray(swatches) && (\n          <Swatches\n            data={swatches}\n            swatchesPerRow={swatchesPerRow}\n            focusable={focusable}\n            setValue={setValue}\n            value={_value}\n            onChangeEnd={(color) => {\n              const convertedColor = convertHsvaTo(format, parseColor(color));\n              onColorSwatchClick?.(convertedColor);\n              onChangeEnd?.(convertedColor);\n              if (!controlled) {\n                setParsed(parseColor(color));\n              }\n            }}\n          />\n        )}\n      </Box>\n    </ColorPickerContext>\n  );\n});\n\nColorPicker.classes = classes;\nColorPicker.varsResolver = varsResolver;\nColorPicker.displayName = '@mantine/core/ColorPicker';\n\nexport namespace ColorPicker {\n  export type Props = ColorPickerProps;\n  export type CssVariables = ColorPickerCssVariables;\n  export type Factory = ColorPickerFactory;\n  export type StylesNames = ColorPickerStylesNames;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyHA,MAAM,eAAe;CACnB,gBAAgB;CAChB,YAAY;CACZ,WAAW;CACX,MAAM;CACN,kBAAkB;AACpB;AAEA,MAAM,eAAeA,6BAAAA,oBAAwC,GAAG,EAAE,MAAM,sBAAsB,EAC5F,SAAS;CACP,qBAAqBC,iBAAAA,QAAQ,MAAM,iBAAiB;CACpD,cAAcA,iBAAAA,QAAQ,MAAM,UAAU;CACtC,qBAAqBC,iBAAAA,WAAW,IAAI;CACpC,oBAAoB,GAAG,MAAM,eAAgB;CAC7C,mBAAmBD,iBAAAA,QAAQ,MAAM,eAAe;CAChD,0BAA0BA,iBAAAA,QAAQ,MAAM,sBAAsB;AAChE,EACF,EAAE;AAEF,MAAa,cAAcE,gBAAAA,SAA6B,WAAW;CACjE,MAAM,QAAQC,kBAAAA,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,SAAS,OACT,OACA,cACA,UACA,aACA,YACA,MACA,iBACA,UACA,YACA,WACA,UACA,gBACA,WACA,oBACA,kBACA,KACA,YACA,MACA,kBACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA8B;EAC9C,MAAM;EACN;EACA,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,aAAA,GAAA,MAAA,OAAA,CAAmB,UAAU,KAAK;CACxC,MAAM,YAAA,GAAA,MAAA,OAAA,CAA0B,EAAE;CAClC,MAAM,mBAAA,GAAA,MAAA,OAAA,CAAiC,EAAE;CACzC,MAAM,kBAAA,GAAA,MAAA,OAAA,CAAwB,KAAK;CACnC,MAAM,YAAY,WAAW,UAAU,WAAW,UAAU,WAAW;CAEvE,MAAM,CAAC,QAAQ,UAAU,eAAA,GAAA,eAAA,gBAAA,CAA8B;EACrD;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAiCC,gBAAAA,WAAW,MAAM,CAAC;CAElE,MAAM,uBAAuB;EAC3B,OAAO,aAAa,gBAAgB,OAAO;EAC3C,eAAe,UAAU;CAC3B;CAEA,MAAM,sBAAsB;EAC1B,OAAO,aAAa,gBAAgB,OAAO;EAC3C,gBAAgB,UAAU,OAAO,iBAAiB;GAChD,eAAe,UAAU;EAC3B,GAAG,GAAG;CACR;CAEA,MAAM,gBAAgB,UAA8B;EAClD,WAAW,YAAY;GACrB,MAAM,OAAO;IAAE,GAAG;IAAS,GAAG;GAAM;GACpC,SAAS,UAAUC,mBAAAA,cAAc,UAAU,SAAS,IAAI;GACxD,OAAO;EACT,CAAC;EAED,SAAS,SAAS,OAAO;CAC3B;CAEA,CAAA,GAAA,eAAA,aAAA,OAAmB;EACjB,IAAI,OAAO,UAAU,YAAYC,gBAAAA,aAAa,KAAK,KAAK,CAAC,eAAe,SACtE,UAAUF,gBAAAA,WAAW,KAAK,CAAC;CAE/B,GAAG,CAAC,KAAK,CAAC;CAEV,CAAA,GAAA,eAAA,aAAA,OAAmB;EACjB,UAAU,UAAU,UAAU;EAC9B,SAASC,mBAAAA,cAAc,UAAU,SAAS,MAAM,CAAC;CACnD,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,4BAAAA,oBAAD;EAAoB,OAAO;GAAE;GAAW;EAAS;YAC/C,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;GACE,GAAI,UAAU,SAAS;GACjB;GACN,KAAK,CAAC,EAAE,cAAc,UAAU,GAAG,GAAG;GACtC,GAAI;aAJN;IAMG,QAAQ,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KAAO,MAAK;KAAe;KAAM,OAAO;KAAQ,GAAI;IAAmB,CAAA;IAE/E,cACC,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;KACE,OAAO;KACP,UAAU;KACV,cAAc,EAAE,GAAG,QACjB,cAAcJ,mBAAAA,cAAc,UAAU,SAAS;MAAE,GAAG;MAAW;MAAO;KAAG,CAAC,CAAC;KAE7E,OAAO;KACD;KACK;KACM;KACjB,cAAc;KACd,YAAY;IACb,CAAA,GAED,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,GAAI,UAAU,MAAM;eAAzB,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;MAAK,GAAI,UAAU,SAAS;gBAA5B,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACK,kBAAAA,WAAD;OACE,OAAO,OAAO;OACd,WAAW,MAAM,aAAa,EAAE,EAAE,CAAC;OACnC,cAAc,MACZ,cAAcL,mBAAAA,cAAc,UAAU,SAAS;QAAE,GAAG;QAAQ;OAAE,CAAC,CAAC;OAE5D;OACK;OACX,cAAY;OACZ,cAAc;OACd,YAAY;MACb,CAAA,GAEA,aACC,iBAAA,GAAA,kBAAA,IAAA,CAACM,oBAAAA,aAAD;OACE,OAAO,OAAO;OACd,WAAW,MAAM,aAAa,EAAE,EAAE,CAAC;OACnC,cAAc,MAAM;QAClB,cAAcN,mBAAAA,cAAc,UAAU,SAAS;SAAE,GAAG;SAAQ;QAAE,CAAC,CAAC;OAClE;OACM;OACN,OAAOA,mBAAAA,cAAc,OAAO,MAAM;OACvB;OACX,cAAY;OACZ,cAAc;OACd,YAAY;MACb,CAAA,CAEA;SAEJ,aACC,iBAAA,GAAA,kBAAA,IAAA,CAACO,oBAAAA,aAAD;MACE,OAAO;MACP,QAAO;MACP,MAAK;MACL,GAAI,UAAU,SAAS;KACxB,CAAA,CAEA;MACL,EAAA,CAAA;IAGH,MAAM,QAAQ,QAAQ,KACrB,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;KACE,MAAM;KACU;KACL;KACD;KACV,OAAO;KACP,cAAc,UAAU;MACtB,MAAM,iBAAiBR,mBAAAA,cAAc,QAAQD,gBAAAA,WAAW,KAAK,CAAC;MAC9D,qBAAqB,cAAc;MACnC,cAAc,cAAc;MAC5B,IAAI,CAAC,YACH,UAAUA,gBAAAA,WAAW,KAAK,CAAC;KAE/B;IACD,CAAA;GAEA;;CACa,CAAA;AAExB,CAAC;AAED,YAAY,UAAUU,2BAAAA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/cjs/components/FloatingIndicator/use-floating-indicator.cjs

@@ -22,15 +22,17 @@ function useFloatingIndicator({ target, parent, ref, displayAfterTransitionEnd,
 		if (!target || !parent || !ref.current) return;
 		const targetRect = target.getBoundingClientRect();
 		const parentRect = parent.getBoundingClientRect();
+		const scaleX = parent.offsetWidth === 0 ? 1 : parentRect.width / parent.offsetWidth;
+		const scaleY = parent.offsetHeight === 0 ? 1 : parentRect.height / parent.offsetHeight;
 		const targetComputedStyle = window.getComputedStyle(target);
 		const parentComputedStyle = window.getComputedStyle(parent);
 		const borderTopWidth = require_to_int.toInt(targetComputedStyle.borderTopWidth) + require_to_int.toInt(parentComputedStyle.borderTopWidth);
 		const borderLeftWidth = require_to_int.toInt(targetComputedStyle.borderLeftWidth) + require_to_int.toInt(parentComputedStyle.borderLeftWidth);
 		const position = {
-			top: targetRect.top - parentRect.top - borderTopWidth,
-			left: targetRect.left - parentRect.left - borderLeftWidth,
-			width: targetRect.width,
-			height: targetRect.height
+			top: (targetRect.top - parentRect.top) / scaleY - borderTopWidth,
+			left: (targetRect.left - parentRect.left) / scaleX - borderLeftWidth,
+			width: targetRect.width / scaleX,
+			height: targetRect.height / scaleY
 		};
 		ref.current.style.transform = `translateY(${position.top}px) translateX(${position.left}px)`;
 		ref.current.style.width = `${position.width}px`;

package/cjs/components/FloatingIndicator/use-floating-indicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-floating-indicator.cjs","names":["toInt","getEnv"],"sources":["../../../src/components/FloatingIndicator/use-floating-indicator.ts"],"sourcesContent":["import { useEffect, useRef, useState, type RefObject } from 'react';\nimport { useMutationObserverTarget, useTimeout } from '@mantine/hooks';\nimport { getEnv } from '../../core';\nimport { toInt } from '../ScrollArea/utils';\n\nfunction isParent(\n  parentElement: HTMLElement | EventTarget | null,\n  childElement: HTMLElement | null\n) {\n  if (!childElement || !parentElement) {\n    return false;\n  }\n\n  let parent = childElement.parentNode;\n  while (parent != null) {\n    if (parent === parentElement) {\n      return true;\n    }\n    parent = parent.parentNode;\n  }\n  return false;\n}\n\ninterface UseFloatingIndicatorInput {\n  target: HTMLElement | null | undefined;\n  parent: HTMLElement | null | undefined;\n  ref: RefObject<HTMLElement | null>;\n  displayAfterTransitionEnd?: boolean;\n  onTransitionStart?: () => void;\n  onTransitionEnd?: () => void;\n}\n\nexport function useFloatingIndicator({\n  target,\n  parent,\n  ref,\n  displayAfterTransitionEnd,\n  onTransitionStart,\n  onTransitionEnd,\n}: UseFloatingIndicatorInput) {\n  const transitionTimeout = useRef<number>(-1);\n  const previousTarget = useRef<HTMLElement | null | undefined>(target);\n  const [initialized, setInitialized] = useState(false);\n\n  const [hidden, setHidden] = useState(\n    typeof displayAfterTransitionEnd === 'boolean' ? displayAfterTransitionEnd : false\n  );\n\n  const updatePosition = () => {\n    if (!target || !parent || !ref.current) {\n      return;\n    }\n\n    const targetRect = target.getBoundingClientRect();\n    const parentRect = parent.getBoundingClientRect();\n\n    const targetComputedStyle = window.getComputedStyle(target);\n    const parentComputedStyle = window.getComputedStyle(parent);\n\n    const borderTopWidth =\n      toInt(targetComputedStyle.borderTopWidth) + toInt(parentComputedStyle.borderTopWidth);\n    const borderLeftWidth =\n      toInt(targetComputedStyle.borderLeftWidth) + toInt(parentComputedStyle.borderLeftWidth);\n\n    const position = {\n      top: targetRect.top - parentRect.top - borderTopWidth,\n      left: targetRect.left - parentRect.left - borderLeftWidth,\n      width: targetRect.width,\n      height: targetRect.height,\n    };\n\n    ref.current.style.transform = `translateY(${position.top}px) translateX(${position.left}px)`;\n    ref.current.style.width = `${position.width}px`;\n    ref.current.style.height = `${position.height}px`;\n  };\n\n  const updatePositionWithoutAnimation = () => {\n    window.clearTimeout(transitionTimeout.current);\n    if (ref.current) {\n      ref.current.style.transitionDuration = '0ms';\n    }\n    updatePosition();\n    transitionTimeout.current = window.setTimeout(() => {\n      if (ref.current) {\n        ref.current.style.transitionDuration = '';\n      }\n    }, 30);\n  };\n\n  const targetResizeObserver = useRef<ResizeObserver>(null);\n  const parentResizeObserver = useRef<ResizeObserver>(null);\n\n  useEffect(() => {\n    if (initialized && previousTarget.current !== target && onTransitionStart) {\n      onTransitionStart();\n    }\n\n    previousTarget.current = target;\n    updatePosition();\n\n    if (target) {\n      targetResizeObserver.current = new ResizeObserver(updatePositionWithoutAnimation);\n      targetResizeObserver.current.observe(target);\n\n      if (parent) {\n        parentResizeObserver.current = new ResizeObserver(updatePositionWithoutAnimation);\n        parentResizeObserver.current.observe(parent);\n      }\n\n      return () => {\n        targetResizeObserver.current?.disconnect();\n        parentResizeObserver.current?.disconnect();\n      };\n    }\n\n    return undefined;\n  }, [parent, target]);\n\n  useEffect(() => {\n    if (parent) {\n      const handleTransitionEnd = (event: TransitionEvent) => {\n        if (isParent(event.target, parent)) {\n          updatePositionWithoutAnimation();\n          setHidden(false);\n        }\n      };\n\n      parent.addEventListener('transitionend', handleTransitionEnd);\n      return () => {\n        parent.removeEventListener('transitionend', handleTransitionEnd);\n      };\n    }\n\n    return undefined;\n  }, [parent]);\n\n  useEffect(() => {\n    if (ref.current && onTransitionEnd) {\n      const handleIndicatorTransitionEnd = (event: TransitionEvent) => {\n        if (event.propertyName === 'transform') {\n          onTransitionEnd();\n        }\n      };\n\n      ref.current.addEventListener('transitionend', handleIndicatorTransitionEnd);\n      return () => {\n        ref.current?.removeEventListener('transitionend', handleIndicatorTransitionEnd);\n      };\n    }\n\n    return undefined;\n  }, [onTransitionEnd]);\n\n  useTimeout(\n    () => {\n      // Prevents warning about state update without act\n      if (getEnv() !== 'test') {\n        setInitialized(true);\n      }\n    },\n    20,\n    { autoInvoke: true }\n  );\n\n  useMutationObserverTarget(\n    (mutations) => {\n      mutations.forEach((mutation) => {\n        if (mutation.type === 'attributes' && mutation.attributeName === 'dir') {\n          updatePositionWithoutAnimation();\n        }\n      });\n    },\n    { attributes: true, attributeFilter: ['dir'] },\n    () => document.documentElement\n  );\n\n  return { initialized, hidden };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-floating-indicator.cjs","names":["toInt","getEnv"],"sources":["../../../src/components/FloatingIndicator/use-floating-indicator.ts"],"sourcesContent":["import { useEffect, useRef, useState, type RefObject } from 'react';\nimport { useMutationObserverTarget, useTimeout } from '@mantine/hooks';\nimport { getEnv } from '../../core';\nimport { toInt } from '../ScrollArea/utils';\n\nfunction isParent(\n  parentElement: HTMLElement | EventTarget | null,\n  childElement: HTMLElement | null\n) {\n  if (!childElement || !parentElement) {\n    return false;\n  }\n\n  let parent = childElement.parentNode;\n  while (parent != null) {\n    if (parent === parentElement) {\n      return true;\n    }\n    parent = parent.parentNode;\n  }\n  return false;\n}\n\ninterface UseFloatingIndicatorInput {\n  target: HTMLElement | null | undefined;\n  parent: HTMLElement | null | undefined;\n  ref: RefObject<HTMLElement | null>;\n  displayAfterTransitionEnd?: boolean;\n  onTransitionStart?: () => void;\n  onTransitionEnd?: () => void;\n}\n\nexport function useFloatingIndicator({\n  target,\n  parent,\n  ref,\n  displayAfterTransitionEnd,\n  onTransitionStart,\n  onTransitionEnd,\n}: UseFloatingIndicatorInput) {\n  const transitionTimeout = useRef<number>(-1);\n  const previousTarget = useRef<HTMLElement | null | undefined>(target);\n  const [initialized, setInitialized] = useState(false);\n\n  const [hidden, setHidden] = useState(\n    typeof displayAfterTransitionEnd === 'boolean' ? displayAfterTransitionEnd : false\n  );\n\n  const updatePosition = () => {\n    if (!target || !parent || !ref.current) {\n      return;\n    }\n\n    const targetRect = target.getBoundingClientRect();\n    const parentRect = parent.getBoundingClientRect();\n\n    const scaleX = parent.offsetWidth === 0 ? 1 : parentRect.width / parent.offsetWidth;\n    const scaleY = parent.offsetHeight === 0 ? 1 : parentRect.height / parent.offsetHeight;\n\n    const targetComputedStyle = window.getComputedStyle(target);\n    const parentComputedStyle = window.getComputedStyle(parent);\n\n    const borderTopWidth =\n      toInt(targetComputedStyle.borderTopWidth) + toInt(parentComputedStyle.borderTopWidth);\n    const borderLeftWidth =\n      toInt(targetComputedStyle.borderLeftWidth) + toInt(parentComputedStyle.borderLeftWidth);\n\n    const position = {\n      top: (targetRect.top - parentRect.top) / scaleY - borderTopWidth,\n      left: (targetRect.left - parentRect.left) / scaleX - borderLeftWidth,\n      width: targetRect.width / scaleX,\n      height: targetRect.height / scaleY,\n    };\n\n    ref.current.style.transform = `translateY(${position.top}px) translateX(${position.left}px)`;\n    ref.current.style.width = `${position.width}px`;\n    ref.current.style.height = `${position.height}px`;\n  };\n\n  const updatePositionWithoutAnimation = () => {\n    window.clearTimeout(transitionTimeout.current);\n    if (ref.current) {\n      ref.current.style.transitionDuration = '0ms';\n    }\n    updatePosition();\n    transitionTimeout.current = window.setTimeout(() => {\n      if (ref.current) {\n        ref.current.style.transitionDuration = '';\n      }\n    }, 30);\n  };\n\n  const targetResizeObserver = useRef<ResizeObserver>(null);\n  const parentResizeObserver = useRef<ResizeObserver>(null);\n\n  useEffect(() => {\n    if (initialized && previousTarget.current !== target && onTransitionStart) {\n      onTransitionStart();\n    }\n\n    previousTarget.current = target;\n    updatePosition();\n\n    if (target) {\n      targetResizeObserver.current = new ResizeObserver(updatePositionWithoutAnimation);\n      targetResizeObserver.current.observe(target);\n\n      if (parent) {\n        parentResizeObserver.current = new ResizeObserver(updatePositionWithoutAnimation);\n        parentResizeObserver.current.observe(parent);\n      }\n\n      return () => {\n        targetResizeObserver.current?.disconnect();\n        parentResizeObserver.current?.disconnect();\n      };\n    }\n\n    return undefined;\n  }, [parent, target]);\n\n  useEffect(() => {\n    if (parent) {\n      const handleTransitionEnd = (event: TransitionEvent) => {\n        if (isParent(event.target, parent)) {\n          updatePositionWithoutAnimation();\n          setHidden(false);\n        }\n      };\n\n      parent.addEventListener('transitionend', handleTransitionEnd);\n      return () => {\n        parent.removeEventListener('transitionend', handleTransitionEnd);\n      };\n    }\n\n    return undefined;\n  }, [parent]);\n\n  useEffect(() => {\n    if (ref.current && onTransitionEnd) {\n      const handleIndicatorTransitionEnd = (event: TransitionEvent) => {\n        if (event.propertyName === 'transform') {\n          onTransitionEnd();\n        }\n      };\n\n      ref.current.addEventListener('transitionend', handleIndicatorTransitionEnd);\n      return () => {\n        ref.current?.removeEventListener('transitionend', handleIndicatorTransitionEnd);\n      };\n    }\n\n    return undefined;\n  }, [onTransitionEnd]);\n\n  useTimeout(\n    () => {\n      // Prevents warning about state update without act\n      if (getEnv() !== 'test') {\n        setInitialized(true);\n      }\n    },\n    20,\n    { autoInvoke: true }\n  );\n\n  useMutationObserverTarget(\n    (mutations) => {\n      mutations.forEach((mutation) => {\n        if (mutation.type === 'attributes' && mutation.attributeName === 'dir') {\n          updatePositionWithoutAnimation();\n        }\n      });\n    },\n    { attributes: true, attributeFilter: ['dir'] },\n    () => document.documentElement\n  );\n\n  return { initialized, hidden };\n}\n"],"mappings":"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"}

package/cjs/components/PasswordInput/PasswordInput.cjs

@@ -19,6 +19,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/PasswordInput/PasswordInput.tsx
 const defaultProps = {
 	visibilityToggleIcon: require_PasswordToggleIcon.PasswordToggleIcon,
+	visibilityToggleFocusable: false,
 	size: "sm"
 };
 const varsResolver = require_create_vars_resolver.createVarsResolver((_, { size }) => ({ root: {
@@ -31,7 +32,7 @@ const PasswordInput = require_factory.factory((_props) => {
 		"InputWrapper",
 		"PasswordInput"
 	], defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, required, error, success, leftSection, disabled, id, variant, inputContainer, description, label, size, errorProps, successProps, descriptionProps, labelProps, withAsterisk, inputWrapperOrder, wrapperProps, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, leftSectionWidth, visible, defaultVisible, onVisibilityChange, visibilityToggleIcon: VisibilityToggleIcon, visibilityToggleButtonProps, rightSectionProps, leftSectionProps, leftSectionPointerEvents, withErrorStyles, withSuccessStyles, mod, attributes, dir, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, required, error, success, leftSection, disabled, id, variant, inputContainer, description, label, size, errorProps, successProps, descriptionProps, labelProps, withAsterisk, inputWrapperOrder, wrapperProps, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, leftSectionWidth, visible, defaultVisible, onVisibilityChange, visibilityToggleIcon: VisibilityToggleIcon, visibilityToggleButtonProps, visibilityToggleFocusable, rightSectionProps, leftSectionProps, leftSectionPointerEvents, withErrorStyles, withSuccessStyles, mod, attributes, dir, ...others } = props;
 	const uuid = (0, _mantine_hooks.useId)(id);
 	const [_visible, setVisibility] = (0, _mantine_hooks.useUncontrolled)({
 		value: visible,
@@ -70,7 +71,7 @@ const PasswordInput = require_factory.factory((_props) => {
 		disabled,
 		radius,
 		"aria-pressed": _visible,
-		tabIndex: -1,
+		tabIndex: visibilityToggleFocusable ? 0 : -1,
 		"aria-label": "Toggle password visibility",
 		...visibilityToggleButtonProps,
 		variant: visibilityToggleButtonProps?.variant ?? "subtle",
@@ -88,7 +89,7 @@ const PasswordInput = require_factory.factory((_props) => {
 		},
 		onKeyDown: (event) => {
 			visibilityToggleButtonProps?.onKeyDown?.(event);
-			if (event.key === " ") {
+			if (event.key === " " || event.key === "Enter") {
 				event.preventDefault();
 				toggleVisibility();
 			}

package/cjs/components/PasswordInput/PasswordInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.cjs","names":["PasswordToggleIcon","createVarsResolver","getSize","factory","useProps","useStyles","useResolvedStylesApi","extractStyleProps","ActionIcon","Input","classes","InputBase"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n  | 'root'\n  | 'visibilityToggle'\n  | 'innerInput'\n  | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n  root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    StylesApiProps<PasswordInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** A component to replace the visibility toggle icon */\n  visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n  /** Props passed down to the visibility toggle button */\n  visibilityToggleButtonProps?: Record<string, any>;\n\n  /** If set, the input value is visible */\n  visible?: boolean;\n\n  /** If set, the input value is visible by default */\n  defaultVisible?: boolean;\n\n  /** Called when visibility changes */\n  onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n  props: PasswordInputProps;\n  ref: HTMLInputElement;\n  stylesNames: PasswordInputStylesNames;\n  vars: PasswordInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  visibilityToggleIcon: PasswordToggleIcon,\n  size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n  root: {\n    '--psi-icon-size': getSize(size, 'psi-icon-size'),\n    '--psi-button-size': getSize(size, 'psi-button-size'),\n  },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'PasswordInput'], defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    required,\n    error,\n    success,\n    leftSection,\n    disabled,\n    id,\n    variant,\n    inputContainer,\n    description,\n    label,\n    size,\n    errorProps,\n    successProps,\n    descriptionProps,\n    labelProps,\n    withAsterisk,\n    inputWrapperOrder,\n    wrapperProps,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionWidth,\n    visible,\n    defaultVisible,\n    onVisibilityChange,\n    visibilityToggleIcon: VisibilityToggleIcon,\n    visibilityToggleButtonProps,\n    rightSectionProps,\n    leftSectionProps,\n    leftSectionPointerEvents,\n    withErrorStyles,\n    withSuccessStyles,\n    mod,\n    attributes,\n    dir,\n    ...others\n  } = props;\n\n  const uuid = useId(id);\n\n  const [_visible, setVisibility] = useUncontrolled({\n    value: visible,\n    defaultValue: defaultVisible,\n    finalValue: false,\n    onChange: onVisibilityChange,\n  });\n\n  const toggleVisibility = () => setVisibility(!_visible);\n\n  const getStyles = useStyles<PasswordInputFactory>({\n    name: 'PasswordInput',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const errorId = errorProps?.id || `${uuid}-error`;\n  const successId = successProps?.id || `${uuid}-success`;\n  const descriptionId = descriptionProps?.id || `${uuid}-description`;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasSuccess = !!success && typeof success !== 'boolean';\n  const hasDescription = !!description;\n  const _describedBy = `${hasError ? errorId : ''} ${hasSuccess && !hasError ? successId : ''} ${hasDescription ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n  const visibilityToggleButton = (\n    <ActionIcon<'button'>\n      {...getStyles('visibilityToggle')}\n      disabled={disabled}\n      radius={radius}\n      aria-pressed={_visible}\n      tabIndex={-1}\n      aria-label=\"Toggle password visibility\"\n      {...visibilityToggleButtonProps}\n      variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n      color=\"gray\"\n      unstyled={unstyled}\n      onTouchEnd={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onTouchEnd?.(event);\n        toggleVisibility();\n      }}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onMouseDown?.(event);\n        toggleVisibility();\n      }}\n      onKeyDown={(event) => {\n        visibilityToggleButtonProps?.onKeyDown?.(event);\n        if (event.key === ' ') {\n          event.preventDefault();\n          toggleVisibility();\n        }\n      }}\n    >\n      <VisibilityToggleIcon reveal={_visible} />\n    </ActionIcon>\n  );\n\n  return (\n    <Input.Wrapper\n      required={required}\n      id={uuid}\n      label={label}\n      error={error}\n      success={success}\n      description={description}\n      size={size}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"PasswordInput\"\n      __stylesApiProps={props}\n      unstyled={unstyled}\n      withAsterisk={withAsterisk}\n      inputWrapperOrder={inputWrapperOrder}\n      inputContainer={inputContainer}\n      variant={variant}\n      labelProps={{ ...labelProps, htmlFor: uuid }}\n      descriptionProps={{ ...descriptionProps, id: descriptionId }}\n      errorProps={{ ...errorProps, id: errorId }}\n      successProps={{ ...successProps, id: successId }}\n      mod={mod}\n      attributes={attributes}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Input\n        component=\"div\"\n        dir={dir}\n        error={error}\n        success={success}\n        leftSection={leftSection}\n        size={size}\n        classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames?.input) }}\n        styles={resolvedStyles}\n        radius={radius}\n        disabled={disabled}\n        __staticSelector=\"PasswordInput\"\n        __stylesApiProps={props}\n        rightSectionWidth={rightSectionWidth}\n        rightSection={rightSection ?? visibilityToggleButton}\n        variant={variant}\n        unstyled={unstyled}\n        leftSectionWidth={leftSectionWidth}\n        rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n        rightSectionProps={rightSectionProps}\n        leftSectionProps={leftSectionProps}\n        leftSectionPointerEvents={leftSectionPointerEvents}\n        withAria={false}\n        withErrorStyles={withErrorStyles}\n        withSuccessStyles={withSuccessStyles}\n        attributes={attributes}\n      >\n        <input\n          required={required}\n          data-invalid={!!error || undefined}\n          data-with-left-section={!!leftSection || undefined}\n          {...getStyles('innerInput')}\n          disabled={disabled}\n          id={uuid}\n          dir={dir}\n          {...rest}\n          aria-describedby={describedBy}\n          autoComplete={rest.autoComplete || 'off'}\n          type={_visible ? 'text' : 'password'}\n        />\n      </Input>\n    </Input.Wrapper>\n  );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n  export type Props = PasswordInputProps;\n  export type StylesNames = PasswordInputStylesNames;\n  export type CssVariables = PasswordInputCssVariables;\n  export type Factory = PasswordInputFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"PasswordInput.cjs","names":["PasswordToggleIcon","createVarsResolver","getSize","factory","useProps","useStyles","useResolvedStylesApi","extractStyleProps","ActionIcon","Input","classes","InputBase"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n  | 'root'\n  | 'visibilityToggle'\n  | 'innerInput'\n  | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n  root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    StylesApiProps<PasswordInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** A component to replace the visibility toggle icon */\n  visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n  /** Props passed down to the visibility toggle button */\n  visibilityToggleButtonProps?: Record<string, any>;\n\n  /** If set, the visibility toggle button is focusable with keyboard @default `false` */\n  visibilityToggleFocusable?: boolean;\n\n  /** If set, the input value is visible */\n  visible?: boolean;\n\n  /** If set, the input value is visible by default */\n  defaultVisible?: boolean;\n\n  /** Called when visibility changes */\n  onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n  props: PasswordInputProps;\n  ref: HTMLInputElement;\n  stylesNames: PasswordInputStylesNames;\n  vars: PasswordInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  visibilityToggleIcon: PasswordToggleIcon,\n  visibilityToggleFocusable: false,\n  size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n  root: {\n    '--psi-icon-size': getSize(size, 'psi-icon-size'),\n    '--psi-button-size': getSize(size, 'psi-button-size'),\n  },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'PasswordInput'], defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    required,\n    error,\n    success,\n    leftSection,\n    disabled,\n    id,\n    variant,\n    inputContainer,\n    description,\n    label,\n    size,\n    errorProps,\n    successProps,\n    descriptionProps,\n    labelProps,\n    withAsterisk,\n    inputWrapperOrder,\n    wrapperProps,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionWidth,\n    visible,\n    defaultVisible,\n    onVisibilityChange,\n    visibilityToggleIcon: VisibilityToggleIcon,\n    visibilityToggleButtonProps,\n    visibilityToggleFocusable,\n    rightSectionProps,\n    leftSectionProps,\n    leftSectionPointerEvents,\n    withErrorStyles,\n    withSuccessStyles,\n    mod,\n    attributes,\n    dir,\n    ...others\n  } = props;\n\n  const uuid = useId(id);\n\n  const [_visible, setVisibility] = useUncontrolled({\n    value: visible,\n    defaultValue: defaultVisible,\n    finalValue: false,\n    onChange: onVisibilityChange,\n  });\n\n  const toggleVisibility = () => setVisibility(!_visible);\n\n  const getStyles = useStyles<PasswordInputFactory>({\n    name: 'PasswordInput',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const errorId = errorProps?.id || `${uuid}-error`;\n  const successId = successProps?.id || `${uuid}-success`;\n  const descriptionId = descriptionProps?.id || `${uuid}-description`;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasSuccess = !!success && typeof success !== 'boolean';\n  const hasDescription = !!description;\n  const _describedBy = `${hasError ? errorId : ''} ${hasSuccess && !hasError ? successId : ''} ${hasDescription ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n  const visibilityToggleButton = (\n    <ActionIcon<'button'>\n      {...getStyles('visibilityToggle')}\n      disabled={disabled}\n      radius={radius}\n      aria-pressed={_visible}\n      tabIndex={visibilityToggleFocusable ? 0 : -1}\n      aria-label=\"Toggle password visibility\"\n      {...visibilityToggleButtonProps}\n      variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n      color=\"gray\"\n      unstyled={unstyled}\n      onTouchEnd={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onTouchEnd?.(event);\n        toggleVisibility();\n      }}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onMouseDown?.(event);\n        toggleVisibility();\n      }}\n      onKeyDown={(event) => {\n        visibilityToggleButtonProps?.onKeyDown?.(event);\n        if (event.key === ' ' || event.key === 'Enter') {\n          event.preventDefault();\n          toggleVisibility();\n        }\n      }}\n    >\n      <VisibilityToggleIcon reveal={_visible} />\n    </ActionIcon>\n  );\n\n  return (\n    <Input.Wrapper\n      required={required}\n      id={uuid}\n      label={label}\n      error={error}\n      success={success}\n      description={description}\n      size={size}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"PasswordInput\"\n      __stylesApiProps={props}\n      unstyled={unstyled}\n      withAsterisk={withAsterisk}\n      inputWrapperOrder={inputWrapperOrder}\n      inputContainer={inputContainer}\n      variant={variant}\n      labelProps={{ ...labelProps, htmlFor: uuid }}\n      descriptionProps={{ ...descriptionProps, id: descriptionId }}\n      errorProps={{ ...errorProps, id: errorId }}\n      successProps={{ ...successProps, id: successId }}\n      mod={mod}\n      attributes={attributes}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Input\n        component=\"div\"\n        dir={dir}\n        error={error}\n        success={success}\n        leftSection={leftSection}\n        size={size}\n        classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames?.input) }}\n        styles={resolvedStyles}\n        radius={radius}\n        disabled={disabled}\n        __staticSelector=\"PasswordInput\"\n        __stylesApiProps={props}\n        rightSectionWidth={rightSectionWidth}\n        rightSection={rightSection ?? visibilityToggleButton}\n        variant={variant}\n        unstyled={unstyled}\n        leftSectionWidth={leftSectionWidth}\n        rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n        rightSectionProps={rightSectionProps}\n        leftSectionProps={leftSectionProps}\n        leftSectionPointerEvents={leftSectionPointerEvents}\n        withAria={false}\n        withErrorStyles={withErrorStyles}\n        withSuccessStyles={withSuccessStyles}\n        attributes={attributes}\n      >\n        <input\n          required={required}\n          data-invalid={!!error || undefined}\n          data-with-left-section={!!leftSection || undefined}\n          {...getStyles('innerInput')}\n          disabled={disabled}\n          id={uuid}\n          dir={dir}\n          {...rest}\n          aria-describedby={describedBy}\n          autoComplete={rest.autoComplete || 'off'}\n          type={_visible ? 'text' : 'password'}\n        />\n      </Input>\n    </Input.Wrapper>\n  );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n  export type Props = PasswordInputProps;\n  export type StylesNames = PasswordInputStylesNames;\n  export type CssVariables = PasswordInputCssVariables;\n  export type Factory = PasswordInputFactory;\n}\n"],"mappings":"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"}

package/cjs/components/Tooltip/Tooltip.cjs

@@ -66,7 +66,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { r
 });
 const Tooltip = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("Tooltip", defaultProps, _props);
-	const { children, position, refProp, label, openDelay, closeDelay, onPositionChange, opened, defaultOpened, withinPortal, radius, color, classNames, styles, unstyled, style, className, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, offset, transitionProps, multiline, events, zIndex, disabled, onClick, onMouseEnter, onMouseLeave, inline, variant, keepMounted, vars, portalProps, mod, floatingStrategy, middlewares, autoContrast, attributes, target, ref, ...others } = props;
+	const { children, position, refProp, label, openDelay, closeDelay, onPositionChange, opened, defaultOpened, withinPortal, radius, color, classNames, styles, unstyled, style, className, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, offset, transitionProps, multiline, events, interactive, zIndex, disabled, onClick, onMouseEnter, onMouseLeave, inline, variant, keepMounted, vars, portalProps, mod, floatingStrategy, middlewares, autoContrast, attributes, target, ref, ...others } = props;
 	const { dir } = require_DirectionProvider.useDirection();
 	const arrowRef = (0, react.useRef)(null);
 	const tooltip = require_use_tooltip.useTooltip({
@@ -77,6 +77,7 @@ const Tooltip = require_factory.factory((_props) => {
 		opened,
 		defaultOpened,
 		events,
+		interactive,
 		arrowRef,
 		arrowOffset,
 		offset: typeof offset === "number" ? offset + (withArrow ? arrowSize / 2 : 0) : offset,
@@ -105,6 +106,7 @@ const Tooltip = require_factory.factory((_props) => {
 	const child = require_get_single_element_child.getSingleElementChild(children);
 	if (!target && !child) throw new Error("[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported");
 	const tooltipStyles = getStyles("tooltip");
+	const interactiveMod = interactive && !disabled && !!tooltip.opened;
 	const mergeStyles = arrowPosition === "merge" && withArrow ? require_get_arrow_position_styles.getArrowMergeDropdownStyles({
 		position: tooltip.placement,
 		dir
@@ -126,7 +128,10 @@ const Tooltip = require_factory.factory((_props) => {
 					...others,
 					"data-fixed": floatingStrategy === "fixed" || void 0,
 					variant,
-					mod: [{ multiline }, mod],
+					mod: [{
+						multiline,
+						interactive: interactiveMod
+					}, mod],
 					...tooltipStyles,
 					...tooltip.getFloatingProps({
 						ref: tooltip.floating,
@@ -174,7 +179,10 @@ const Tooltip = require_factory.factory((_props) => {
 				...others,
 				"data-fixed": floatingStrategy === "fixed" || void 0,
 				variant,
-				mod: [{ multiline }, mod],
+				mod: [{
+					multiline,
+					interactive: interactiveMod
+				}, mod],
 				...tooltip.getFloatingProps({
 					ref: tooltip.floating,
 					className: getStyles("tooltip").className,

package/cjs/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","factory","useProps","useDirection","useTooltip","getFloatingPosition","useStyles","getSingleElementChild","getArrowMergeDropdownStyles","getTransitionProps","OptionalPortal","Transition","Box","FloatingArrow","getRefProp","classes","TooltipFloating","TooltipGroup"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getRefProp,\n  getSingleElementChild,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingArrow,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  FloatingStrategy,\n  getArrowMergeDropdownStyles,\n  getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n  TooltipGroup,\n  type TooltipGroupProps,\n  type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n  /** Called when tooltip position changes */\n  onPositionChange?: (position: FloatingPosition) => void;\n\n  /** Open delay in ms */\n  openDelay?: number;\n\n  /** Close delay in ms @default 0 */\n  closeDelay?: number;\n\n  /** Controlled opened state */\n  opened?: boolean;\n\n  /** Uncontrolled tooltip initial opened state */\n  defaultOpened?: boolean;\n\n  /** Space between target element and tooltip in px @default 5 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** If set, the tooltip has an arrow @default false */\n  withArrow?: boolean;\n\n  /** Arrow size in px @default 4 */\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 relative to the tooltip @default side */\n  arrowPosition?: ArrowPosition;\n\n  /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\n\n  /** Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } */\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n\n  /** Must be set if the tooltip target is an inline element */\n  inline?: boolean;\n\n  /** If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead */\n  keepMounted?: boolean;\n\n  /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n  floatingStrategy?: FloatingStrategy;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Selector, ref of an element or element itself that should be used for positioning */\n  target?: React.RefObject<HTMLElement | null> | HTMLElement | null | string;\n}\n\nexport type TooltipFactory = Factory<{\n  props: TooltipProps;\n  ref: HTMLDivElement;\n  stylesNames: TooltipStylesNames;\n  vars: TooltipCssVariables;\n  staticComponents: {\n    Floating: typeof TooltipFloating;\n    Group: typeof TooltipGroup;\n  };\n}>;\n\nconst defaultProps = {\n  position: 'top',\n  refProp: 'ref',\n  withinPortal: true,\n  arrowSize: 4,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  offset: 5,\n  transitionProps: { duration: 100, transition: 'fade' },\n  events: { hover: true, focus: false, touch: false },\n  zIndex: getDefaultZIndex('popover'),\n  middlewares: { flip: true, shift: true, inline: false },\n} satisfies Partial<TooltipProps>;\n\nconst varsResolver = createVarsResolver<TooltipFactory>(\n  (theme, { radius, color, variant, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      theme,\n      color: color || theme.primaryColor,\n      autoContrast,\n      variant: variant || 'filled',\n    });\n\n    return {\n      tooltip: {\n        '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n        '--tooltip-bg': color ? colors.background : undefined,\n        '--tooltip-color': color ? colors.color : undefined,\n      },\n    };\n  }\n);\n\nexport const Tooltip = factory<TooltipFactory>((_props) => {\n  const props = useProps('Tooltip', defaultProps, _props);\n  const {\n    children,\n    position,\n    refProp,\n    label,\n    openDelay,\n    closeDelay,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    withinPortal,\n    radius,\n    color,\n    classNames,\n    styles,\n    unstyled,\n    style,\n    className,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    offset,\n    transitionProps,\n    multiline,\n    events,\n    zIndex,\n    disabled,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    inline,\n    variant,\n    keepMounted,\n    vars,\n    portalProps,\n    mod,\n    floatingStrategy,\n    middlewares,\n    autoContrast,\n    attributes,\n    target,\n    ref,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n  const arrowRef = useRef<HTMLDivElement>(null);\n\n  const tooltip = useTooltip({\n    position: getFloatingPosition(dir, position),\n    closeDelay,\n    openDelay,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    events,\n    arrowRef,\n    arrowOffset,\n    offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n    inline,\n    strategy: floatingStrategy,\n    middlewares,\n  });\n\n  useEffect(() => {\n    const targetNode =\n      target instanceof HTMLElement\n        ? target\n        : typeof target === 'string'\n          ? document.querySelector(target)\n          : target?.current || null;\n\n    if (targetNode) {\n      tooltip.reference(targetNode);\n    }\n  }, [target, tooltip]);\n\n  const getStyles = useStyles<TooltipFactory>({\n    name: 'Tooltip',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'tooltip',\n    vars,\n    varsResolver,\n  });\n\n  const child = getSingleElementChild(children);\n  if (!target && !child) {\n    throw new Error(\n      '[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const tooltipStyles = getStyles('tooltip');\n  const mergeStyles =\n    arrowPosition === 'merge' && withArrow\n      ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n      : undefined;\n\n  if (target) {\n    const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n    return (\n      <>\n        <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n          <Transition\n            {...transition}\n            keepMounted={keepMounted}\n            mounted={!disabled && !!tooltip.opened}\n            duration={tooltip.isGroupPhase ? 10 : transition.duration}\n          >\n            {(transitionStyles) => (\n              <Box\n                {...others}\n                data-fixed={floatingStrategy === 'fixed' || undefined}\n                variant={variant}\n                mod={[{ multiline }, mod]}\n                {...tooltipStyles}\n                {...tooltip.getFloatingProps({\n                  ref: tooltip.floating,\n                  className: tooltipStyles.className,\n                  style: {\n                    ...tooltipStyles.style,\n                    ...transitionStyles,\n                    ...mergeStyles,\n                    zIndex: zIndex as React.CSSProperties['zIndex'],\n                    top: tooltip.y ?? 0,\n                    left: tooltip.x ?? 0,\n                  },\n                })}\n              >\n                {label}\n                <FloatingArrow\n                  ref={arrowRef}\n                  arrowX={tooltip.arrowX}\n                  arrowY={tooltip.arrowY}\n                  visible={withArrow}\n                  position={tooltip.placement}\n                  arrowSize={arrowSize!}\n                  arrowOffset={arrowOffset!}\n                  arrowRadius={arrowRadius!}\n                  arrowPosition={arrowPosition!}\n                  {...getStyles('arrow')}\n                />\n              </Box>\n            )}\n          </Transition>\n        </OptionalPortal>\n      </>\n    );\n  }\n\n  // fallback to children-based approach\n  const childProps = child!.props as any;\n  const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);\n  const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n  return (\n    <>\n      <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n        <Transition\n          {...transition}\n          keepMounted={keepMounted}\n          mounted={!disabled && !!tooltip.opened}\n          duration={tooltip.isGroupPhase ? 10 : transition.duration}\n        >\n          {(transitionStyles) => (\n            <Box\n              {...others}\n              data-fixed={floatingStrategy === 'fixed' || undefined}\n              variant={variant}\n              mod={[{ multiline }, mod]}\n              {...tooltip.getFloatingProps({\n                ref: tooltip.floating,\n                className: getStyles('tooltip').className,\n                style: {\n                  ...getStyles('tooltip').style,\n                  ...transitionStyles,\n                  ...mergeStyles,\n                  zIndex: zIndex as React.CSSProperties['zIndex'],\n                  top: tooltip.y ?? 0,\n                  left: tooltip.x ?? 0,\n                },\n              })}\n            >\n              {label}\n              <FloatingArrow\n                ref={arrowRef}\n                arrowX={tooltip.arrowX}\n                arrowY={tooltip.arrowY}\n                visible={withArrow}\n                position={tooltip.placement}\n                arrowSize={arrowSize}\n                arrowOffset={arrowOffset}\n                arrowRadius={arrowRadius}\n                arrowPosition={arrowPosition}\n                {...getStyles('arrow')}\n              />\n            </Box>\n          )}\n        </Transition>\n      </OptionalPortal>\n\n      {cloneElement(\n        child!,\n        tooltip.getReferenceProps({\n          onClick,\n          onMouseEnter,\n          onMouseLeave,\n          onMouseMove: props.onMouseMove,\n          onPointerDown: props.onPointerDown,\n          onPointerEnter: props.onPointerEnter,\n          ...childProps,\n          className: cx(className, childProps.className),\n          [refProp]: targetRef,\n        })\n      )}\n    </>\n  );\n});\n\nTooltip.classes = classes;\nTooltip.varsResolver = varsResolver;\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n\nexport namespace Tooltip {\n  export type Props = TooltipProps;\n  export type Factory = TooltipFactory;\n  export type CssVariables = TooltipCssVariables;\n  export type StylesNames = TooltipStylesNames;\n\n  export namespace Group {\n    export type Props = TooltipGroupProps;\n    export type ContextValue = TooltipGroupContextValue;\n  }\n\n  export namespace Floating {\n    export type Props = TooltipFloatingProps;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","factory","useProps","useDirection","useTooltip","getFloatingPosition","useStyles","getSingleElementChild","getArrowMergeDropdownStyles","getTransitionProps","OptionalPortal","Transition","Box","FloatingArrow","getRefProp","classes","TooltipFloating","TooltipGroup"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getRefProp,\n  getSingleElementChild,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingArrow,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  FloatingStrategy,\n  getArrowMergeDropdownStyles,\n  getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n  TooltipGroup,\n  type TooltipGroupProps,\n  type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n  /** Called when tooltip position changes */\n  onPositionChange?: (position: FloatingPosition) => void;\n\n  /** Open delay in ms */\n  openDelay?: number;\n\n  /** Close delay in ms @default 0 */\n  closeDelay?: number;\n\n  /** Controlled opened state */\n  opened?: boolean;\n\n  /** Uncontrolled tooltip initial opened state */\n  defaultOpened?: boolean;\n\n  /** Space between target element and tooltip in px @default 5 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** If set, the tooltip has an arrow @default false */\n  withArrow?: boolean;\n\n  /** Arrow size in px @default 4 */\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 relative to the tooltip @default side */\n  arrowPosition?: ArrowPosition;\n\n  /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\n\n  /** Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } */\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n\n  /** If set, the tooltip stays open while the pointer moves from the target to the tooltip and remains over it. Required by [WCAG 1.4.13](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html) if the tooltip contains interactive content. Note that an interactive tooltip intercepts pointer events of the content it overlaps @default false */\n  interactive?: boolean;\n\n  /** Must be set if the tooltip target is an inline element */\n  inline?: boolean;\n\n  /** If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead */\n  keepMounted?: boolean;\n\n  /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n  floatingStrategy?: FloatingStrategy;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Selector, ref of an element or element itself that should be used for positioning */\n  target?: React.RefObject<HTMLElement | null> | HTMLElement | null | string;\n}\n\nexport type TooltipFactory = Factory<{\n  props: TooltipProps;\n  ref: HTMLDivElement;\n  stylesNames: TooltipStylesNames;\n  vars: TooltipCssVariables;\n  staticComponents: {\n    Floating: typeof TooltipFloating;\n    Group: typeof TooltipGroup;\n  };\n}>;\n\nconst defaultProps = {\n  position: 'top',\n  refProp: 'ref',\n  withinPortal: true,\n  arrowSize: 4,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  offset: 5,\n  transitionProps: { duration: 100, transition: 'fade' },\n  events: { hover: true, focus: false, touch: false },\n  zIndex: getDefaultZIndex('popover'),\n  middlewares: { flip: true, shift: true, inline: false },\n} satisfies Partial<TooltipProps>;\n\nconst varsResolver = createVarsResolver<TooltipFactory>(\n  (theme, { radius, color, variant, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      theme,\n      color: color || theme.primaryColor,\n      autoContrast,\n      variant: variant || 'filled',\n    });\n\n    return {\n      tooltip: {\n        '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n        '--tooltip-bg': color ? colors.background : undefined,\n        '--tooltip-color': color ? colors.color : undefined,\n      },\n    };\n  }\n);\n\nexport const Tooltip = factory<TooltipFactory>((_props) => {\n  const props = useProps('Tooltip', defaultProps, _props);\n  const {\n    children,\n    position,\n    refProp,\n    label,\n    openDelay,\n    closeDelay,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    withinPortal,\n    radius,\n    color,\n    classNames,\n    styles,\n    unstyled,\n    style,\n    className,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    offset,\n    transitionProps,\n    multiline,\n    events,\n    interactive,\n    zIndex,\n    disabled,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    inline,\n    variant,\n    keepMounted,\n    vars,\n    portalProps,\n    mod,\n    floatingStrategy,\n    middlewares,\n    autoContrast,\n    attributes,\n    target,\n    ref,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n  const arrowRef = useRef<HTMLDivElement>(null);\n\n  const tooltip = useTooltip({\n    position: getFloatingPosition(dir, position),\n    closeDelay,\n    openDelay,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    events,\n    interactive,\n    arrowRef,\n    arrowOffset,\n    offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n    inline,\n    strategy: floatingStrategy,\n    middlewares,\n  });\n\n  useEffect(() => {\n    const targetNode =\n      target instanceof HTMLElement\n        ? target\n        : typeof target === 'string'\n          ? document.querySelector(target)\n          : target?.current || null;\n\n    if (targetNode) {\n      tooltip.reference(targetNode);\n    }\n  }, [target, tooltip]);\n\n  const getStyles = useStyles<TooltipFactory>({\n    name: 'Tooltip',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'tooltip',\n    vars,\n    varsResolver,\n  });\n\n  const child = getSingleElementChild(children);\n  if (!target && !child) {\n    throw new Error(\n      '[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const tooltipStyles = getStyles('tooltip');\n  const interactiveMod = interactive && !disabled && !!tooltip.opened;\n  const mergeStyles =\n    arrowPosition === 'merge' && withArrow\n      ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n      : undefined;\n\n  if (target) {\n    const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n    return (\n      <>\n        <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n          <Transition\n            {...transition}\n            keepMounted={keepMounted}\n            mounted={!disabled && !!tooltip.opened}\n            duration={tooltip.isGroupPhase ? 10 : transition.duration}\n          >\n            {(transitionStyles) => (\n              <Box\n                {...others}\n                data-fixed={floatingStrategy === 'fixed' || undefined}\n                variant={variant}\n                mod={[{ multiline, interactive: interactiveMod }, mod]}\n                {...tooltipStyles}\n                {...tooltip.getFloatingProps({\n                  ref: tooltip.floating,\n                  className: tooltipStyles.className,\n                  style: {\n                    ...tooltipStyles.style,\n                    ...transitionStyles,\n                    ...mergeStyles,\n                    zIndex: zIndex as React.CSSProperties['zIndex'],\n                    top: tooltip.y ?? 0,\n                    left: tooltip.x ?? 0,\n                  },\n                })}\n              >\n                {label}\n                <FloatingArrow\n                  ref={arrowRef}\n                  arrowX={tooltip.arrowX}\n                  arrowY={tooltip.arrowY}\n                  visible={withArrow}\n                  position={tooltip.placement}\n                  arrowSize={arrowSize!}\n                  arrowOffset={arrowOffset!}\n                  arrowRadius={arrowRadius!}\n                  arrowPosition={arrowPosition!}\n                  {...getStyles('arrow')}\n                />\n              </Box>\n            )}\n          </Transition>\n        </OptionalPortal>\n      </>\n    );\n  }\n\n  // fallback to children-based approach\n  const childProps = child!.props as any;\n  const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);\n  const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n  return (\n    <>\n      <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n        <Transition\n          {...transition}\n          keepMounted={keepMounted}\n          mounted={!disabled && !!tooltip.opened}\n          duration={tooltip.isGroupPhase ? 10 : transition.duration}\n        >\n          {(transitionStyles) => (\n            <Box\n              {...others}\n              data-fixed={floatingStrategy === 'fixed' || undefined}\n              variant={variant}\n              mod={[{ multiline, interactive: interactiveMod }, mod]}\n              {...tooltip.getFloatingProps({\n                ref: tooltip.floating,\n                className: getStyles('tooltip').className,\n                style: {\n                  ...getStyles('tooltip').style,\n                  ...transitionStyles,\n                  ...mergeStyles,\n                  zIndex: zIndex as React.CSSProperties['zIndex'],\n                  top: tooltip.y ?? 0,\n                  left: tooltip.x ?? 0,\n                },\n              })}\n            >\n              {label}\n              <FloatingArrow\n                ref={arrowRef}\n                arrowX={tooltip.arrowX}\n                arrowY={tooltip.arrowY}\n                visible={withArrow}\n                position={tooltip.placement}\n                arrowSize={arrowSize}\n                arrowOffset={arrowOffset}\n                arrowRadius={arrowRadius}\n                arrowPosition={arrowPosition}\n                {...getStyles('arrow')}\n              />\n            </Box>\n          )}\n        </Transition>\n      </OptionalPortal>\n\n      {cloneElement(\n        child!,\n        tooltip.getReferenceProps({\n          onClick,\n          onMouseEnter,\n          onMouseLeave,\n          onMouseMove: props.onMouseMove,\n          onPointerDown: props.onPointerDown,\n          onPointerEnter: props.onPointerEnter,\n          ...childProps,\n          className: cx(className, childProps.className),\n          [refProp]: targetRef,\n        })\n      )}\n    </>\n  );\n});\n\nTooltip.classes = classes;\nTooltip.varsResolver = varsResolver;\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n\nexport namespace Tooltip {\n  export type Props = TooltipProps;\n  export type Factory = TooltipFactory;\n  export type CssVariables = TooltipCssVariables;\n  export type StylesNames = TooltipStylesNames;\n\n  export namespace Group {\n    export type Props = TooltipGroupProps;\n    export type ContextValue = TooltipGroupContextValue;\n  }\n\n  export namespace Floating {\n    export type Props = TooltipFloatingProps;\n  }\n}\n"],"mappings":"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"}

package/cjs/components/Tooltip/Tooltip.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.module.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".tooltip {\n  --tooltip-radius: var(--mantine-radius-default);\n\n  position: absolute;\n  padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-xs);\n  pointer-events: none;\n  font-size: var(--mantine-font-size-sm);\n  white-space: nowrap;\n  border-radius: var(--tooltip-radius);\n\n  @mixin where-light {\n    background-color: var(--tooltip-bg, var(--mantine-color-gray-9));\n    color: var(--tooltip-color, var(--mantine-color-white));\n  }\n\n  @mixin where-dark {\n    background-color: var(--tooltip-bg, var(--mantine-color-gray-2));\n    color: var(--tooltip-color, var(--mantine-color-black));\n  }\n\n  &:where([data-multiline]) {\n    white-space: normal;\n  }\n\n  &:where([data-fixed]) {\n    position: fixed;\n  }\n}\n\n.arrow {\n  background-color: inherit;\n  border: 0;\n  z-index: 1;\n}\n"],"mappings":""}
+{"version":3,"file":"Tooltip.module.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".tooltip {\n  --tooltip-radius: var(--mantine-radius-default);\n\n  position: absolute;\n  padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-xs);\n  pointer-events: none;\n  font-size: var(--mantine-font-size-sm);\n  white-space: nowrap;\n  border-radius: var(--tooltip-radius);\n\n  @mixin where-light {\n    background-color: var(--tooltip-bg, var(--mantine-color-gray-9));\n    color: var(--tooltip-color, var(--mantine-color-white));\n  }\n\n  @mixin where-dark {\n    background-color: var(--tooltip-bg, var(--mantine-color-gray-2));\n    color: var(--tooltip-color, var(--mantine-color-black));\n  }\n\n  &:where([data-multiline]) {\n    white-space: normal;\n  }\n\n  &:where([data-fixed]) {\n    position: fixed;\n  }\n\n  &:where([data-interactive]) {\n    pointer-events: auto;\n  }\n}\n\n.arrow {\n  background-color: inherit;\n  border: 0;\n  z-index: 1;\n}\n"],"mappings":""}

package/cjs/components/Tooltip/use-tooltip.cjs

@@ -55,7 +55,8 @@ function useTooltip(settings) {
 				open: settings.openDelay,
 				close: settings.closeDelay
 			},
-			mouseOnly: !settings.events?.touch
+			mouseOnly: !settings.events?.touch,
+			handleClose: settings.interactive ? (0, _floating_ui_react.safePolygon)() : null
 		}),
 		(0, _floating_ui_react.useFocus)(context, {
 			enabled: settings.events?.focus,

package/cjs/components/Tooltip/use-tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-tooltip.cjs","names":["TooltipGroupContext","autoUpdate"],"sources":["../../../src/components/Tooltip/use-tooltip.ts"],"sourcesContent":["import { use, useCallback, useRef, useState } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  inline,\n  offset,\n  shift,\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  type Middleware,\n} from '@floating-ui/react';\nimport { useId, useIsomorphicEffect } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { type TooltipMiddlewares } from './Tooltip.types';\nimport { TooltipGroupContext } from './TooltipGroup/TooltipGroup';\n\ninterface UseTooltip {\n  position: FloatingPosition;\n  closeDelay?: number;\n  openDelay?: number;\n  onPositionChange?: (position: FloatingPosition) => void;\n  opened?: boolean;\n  defaultOpened?: boolean;\n  offset: number | FloatingAxesOffsets;\n  arrowRef?: React.RefObject<HTMLDivElement | null>;\n  arrowOffset?: number;\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n  inline?: boolean;\n  strategy?: FloatingStrategy;\n  middlewares?: TooltipMiddlewares;\n}\n\nfunction getDefaultMiddlewares(middlewares: TooltipMiddlewares | undefined): TooltipMiddlewares {\n  if (middlewares === undefined) {\n    return { shift: true, flip: true };\n  }\n\n  const result = { ...middlewares };\n  if (middlewares.shift === undefined) {\n    result.shift = true;\n  }\n\n  if (middlewares.flip === undefined) {\n    result.flip = true;\n  }\n\n  return result;\n}\n\nfunction getTooltipMiddlewares(settings: UseTooltip) {\n  const middlewaresOptions = getDefaultMiddlewares(settings.middlewares);\n  const middlewares: Middleware[] = [offset(settings.offset)];\n\n  if (middlewaresOptions.shift) {\n    middlewares.push(\n      shift(\n        typeof middlewaresOptions.shift === 'boolean'\n          ? { padding: 8 }\n          : { padding: 8, ...middlewaresOptions.shift }\n      )\n    );\n  }\n\n  if (middlewaresOptions.flip) {\n    middlewares.push(\n      typeof middlewaresOptions.flip === 'boolean' ? flip() : flip(middlewaresOptions.flip)\n    );\n  }\n\n  middlewares.push(arrow({ element: settings.arrowRef!, padding: settings.arrowOffset }));\n\n  if (middlewaresOptions.inline) {\n    middlewares.push(\n      typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n    );\n  } else if (settings.inline) {\n    middlewares.push(inline());\n  }\n\n  return middlewares;\n}\n\nexport function useTooltip(settings: UseTooltip) {\n  const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n  const controlled = typeof settings.opened === 'boolean';\n  const opened = controlled ? settings.opened : uncontrolledOpened;\n  const withinGroup = use(TooltipGroupContext).withinGroup;\n  const uid = useId();\n\n  const onChange = useCallback(\n    (_opened: boolean) => {\n      setUncontrolledOpened(_opened);\n\n      if (_opened) {\n        setCurrentId(uid);\n      }\n    },\n    [uid]\n  );\n\n  const {\n    x,\n    y,\n    context,\n    refs,\n    placement,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n  } = useFloating({\n    strategy: settings.strategy,\n    placement: settings.position,\n    open: opened,\n    onOpenChange: onChange,\n    middleware: getTooltipMiddlewares(settings),\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { delay: groupDelay, currentId, setCurrentId } = useDelayGroup(context, { id: uid });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      enabled: settings.events?.hover,\n      delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n      mouseOnly: !settings.events?.touch,\n    }),\n    useFocus(context, { enabled: settings.events?.focus, visibleOnly: true }),\n    useRole(context, { role: 'tooltip' }),\n    // Cannot be used with controlled tooltip, page jumps\n    useDismiss(context, { enabled: typeof settings.opened === 'undefined' }),\n  ]);\n\n  const previousPlacementRef = useRef(placement);\n  useIsomorphicEffect(() => {\n    if (previousPlacementRef.current !== placement) {\n      previousPlacementRef.current = placement;\n      settings.onPositionChange?.(placement);\n    }\n  }, [placement]);\n\n  const isGroupPhase = opened && currentId && currentId !== uid;\n\n  return {\n    x,\n    y,\n    arrowX,\n    arrowY,\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    getFloatingProps,\n    getReferenceProps,\n    isGroupPhase,\n    opened,\n    placement,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-tooltip.cjs","names":["TooltipGroupContext","autoUpdate"],"sources":["../../../src/components/Tooltip/use-tooltip.ts"],"sourcesContent":["import { use, useCallback, useRef, useState } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  inline,\n  offset,\n  safePolygon,\n  shift,\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  type Middleware,\n} from '@floating-ui/react';\nimport { useId, useIsomorphicEffect } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { type TooltipMiddlewares } from './Tooltip.types';\nimport { TooltipGroupContext } from './TooltipGroup/TooltipGroup';\n\ninterface UseTooltip {\n  position: FloatingPosition;\n  closeDelay?: number;\n  openDelay?: number;\n  onPositionChange?: (position: FloatingPosition) => void;\n  opened?: boolean;\n  defaultOpened?: boolean;\n  offset: number | FloatingAxesOffsets;\n  arrowRef?: React.RefObject<HTMLDivElement | null>;\n  arrowOffset?: number;\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n  interactive?: boolean;\n  inline?: boolean;\n  strategy?: FloatingStrategy;\n  middlewares?: TooltipMiddlewares;\n}\n\nfunction getDefaultMiddlewares(middlewares: TooltipMiddlewares | undefined): TooltipMiddlewares {\n  if (middlewares === undefined) {\n    return { shift: true, flip: true };\n  }\n\n  const result = { ...middlewares };\n  if (middlewares.shift === undefined) {\n    result.shift = true;\n  }\n\n  if (middlewares.flip === undefined) {\n    result.flip = true;\n  }\n\n  return result;\n}\n\nfunction getTooltipMiddlewares(settings: UseTooltip) {\n  const middlewaresOptions = getDefaultMiddlewares(settings.middlewares);\n  const middlewares: Middleware[] = [offset(settings.offset)];\n\n  if (middlewaresOptions.shift) {\n    middlewares.push(\n      shift(\n        typeof middlewaresOptions.shift === 'boolean'\n          ? { padding: 8 }\n          : { padding: 8, ...middlewaresOptions.shift }\n      )\n    );\n  }\n\n  if (middlewaresOptions.flip) {\n    middlewares.push(\n      typeof middlewaresOptions.flip === 'boolean' ? flip() : flip(middlewaresOptions.flip)\n    );\n  }\n\n  middlewares.push(arrow({ element: settings.arrowRef!, padding: settings.arrowOffset }));\n\n  if (middlewaresOptions.inline) {\n    middlewares.push(\n      typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n    );\n  } else if (settings.inline) {\n    middlewares.push(inline());\n  }\n\n  return middlewares;\n}\n\nexport function useTooltip(settings: UseTooltip) {\n  const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n  const controlled = typeof settings.opened === 'boolean';\n  const opened = controlled ? settings.opened : uncontrolledOpened;\n  const withinGroup = use(TooltipGroupContext).withinGroup;\n  const uid = useId();\n\n  const onChange = useCallback(\n    (_opened: boolean) => {\n      setUncontrolledOpened(_opened);\n\n      if (_opened) {\n        setCurrentId(uid);\n      }\n    },\n    [uid]\n  );\n\n  const {\n    x,\n    y,\n    context,\n    refs,\n    placement,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n  } = useFloating({\n    strategy: settings.strategy,\n    placement: settings.position,\n    open: opened,\n    onOpenChange: onChange,\n    middleware: getTooltipMiddlewares(settings),\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { delay: groupDelay, currentId, setCurrentId } = useDelayGroup(context, { id: uid });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      enabled: settings.events?.hover,\n      delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n      mouseOnly: !settings.events?.touch,\n      handleClose: settings.interactive ? safePolygon() : null,\n    }),\n    useFocus(context, { enabled: settings.events?.focus, visibleOnly: true }),\n    useRole(context, { role: 'tooltip' }),\n    // Cannot be used with controlled tooltip, page jumps\n    useDismiss(context, { enabled: typeof settings.opened === 'undefined' }),\n  ]);\n\n  const previousPlacementRef = useRef(placement);\n  useIsomorphicEffect(() => {\n    if (previousPlacementRef.current !== placement) {\n      previousPlacementRef.current = placement;\n      settings.onPositionChange?.(placement);\n    }\n  }, [placement]);\n\n  const isGroupPhase = opened && currentId && currentId !== uid;\n\n  return {\n    x,\n    y,\n    arrowX,\n    arrowY,\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    getFloatingProps,\n    getReferenceProps,\n    isGroupPhase,\n    opened,\n    placement,\n  };\n}\n"],"mappings":"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"}

package/esm/components/Cascader/Cascader.mjs

@@ -20,6 +20,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Cascader/Cascader.tsx
 const defaultProps = {
 	expandTrigger: "click",
+	safeAreaPolygon: true,
 	changeOnSelect: false,
 	allowDeselect: true,
 	withCheckIcon: true,
@@ -68,7 +69,7 @@ const Cascader = factory((_props) => {
 		"InputWrapper",
 		"Cascader"
 	], defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, size, data, value, defaultValue, onChange, changeOnSelect, closeOnSelect, allowDeselect, withCheckIcon, checkIconPosition, withColumns, expandTrigger, searchable, searchValue, defaultSearchValue, onSearchChange, filter, renderSearchOption, formatValue, renderOption, separator, columnWidth, maxDisplayedLevels, previousLevelsControlLabel, nextLevelsControlLabel, maxDropdownHeight, nothingFoundMessage, clearable, clearSectionMode, clearButtonProps, onClear, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, comboboxProps, scrollAreaProps, chevronColor, hiddenInputProps, openOnFocus, variant, onKeyDown, onFocus, onBlur, onClick, readOnly, disabled, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, successProps, wrapperProps, description, label, error, success, withErrorStyles, withSuccessStyles, name, form, id, placeholder, required, mod, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, size, data, value, defaultValue, onChange, changeOnSelect, closeOnSelect, allowDeselect, withCheckIcon, checkIconPosition, withColumns, expandTrigger, safeAreaPolygon, searchable, searchValue, defaultSearchValue, onSearchChange, filter, renderSearchOption, formatValue, renderOption, separator, columnWidth, maxDisplayedLevels, previousLevelsControlLabel, nextLevelsControlLabel, maxDropdownHeight, nothingFoundMessage, clearable, clearSectionMode, clearButtonProps, onClear, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, comboboxProps, scrollAreaProps, chevronColor, hiddenInputProps, openOnFocus, variant, onKeyDown, onFocus, onBlur, onClick, readOnly, disabled, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, successProps, wrapperProps, description, label, error, success, withErrorStyles, withSuccessStyles, name, form, id, placeholder, required, mod, attributes, ...others } = props;
 	const _id = useId$1(id);
 	const separatorString = typeof separator === "string" || typeof separator === "number" ? String(separator) : "/";
 	const combobox = useCombobox({
@@ -252,7 +253,8 @@ const Cascader = factory((_props) => {
 				if (expandTrigger === "hover") cascader.setActivePath(cascader.value ?? []);
 			},
 			onPointerActivity: () => cascader.setKeyboardNav(false),
-			listId
+			listId,
+			safeAreaPolygon: expandTrigger === "hover" ? safeAreaPolygon : false
 		})
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Combobox, {