@mantine/core 9.1.1 → 9.2.1

package/esm/components/Slider/Slider/Slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.mjs","names":["classes"],"sources":["../../../../src/components/Slider/Slider/Slider.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n  getFirstMarkValue,\n  getLastMarkValue,\n  getNextMarkValue,\n  getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport interface SliderProps\n  extends BoxProps, StylesApiProps<SliderFactory>, ElementProps<'div', 'onChange'> {\n  /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Controls size of the track @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Minimal possible value @default 0 */\n  min?: number;\n\n  /** Maximum possible value @default 100 */\n  max?: number;\n\n  /** Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] */\n  domain?: [number, number];\n\n  /** Number by which value will be incremented/decremented with thumb drag and arrows @default 1 */\n  step?: number;\n\n  /** Number of significant digits after the decimal point */\n  precision?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Called when user stops dragging slider or changes value with arrows */\n  onChangeEnd?: (value: number) => void;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n\n  /** Marks displayed on the track */\n  marks?: SliderMark[];\n\n  /** Function to generate label or any react node to render instead, set to null to disable label */\n  label?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } */\n  labelTransitionProps?: TransitionOverride;\n\n  /** Determines whether the label should be visible when the slider is not being dragged or hovered @default false */\n  labelAlwaysOn?: boolean;\n\n  /** Thumb `aria-label` */\n  thumbLabel?: string;\n\n  /** Determines whether the label should be displayed when the slider is hovered @default true */\n  showLabelOnHover?: boolean;\n\n  /** Content rendered inside thumb */\n  thumbChildren?: React.ReactNode;\n\n  /** Disables slider */\n  disabled?: boolean;\n\n  /** Thumb `width` and `height`, by default value is computed based on `size` prop */\n  thumbSize?: number | string;\n\n  /** A transformation function to change the scale of the slider */\n  scale?: (value: number) => number;\n\n  /** Determines whether track value representation should be inverted @default false */\n  inverted?: boolean;\n\n  /** Value at which the filled bar starts. When set, the bar extends from this point toward the current value. Ignored when `inverted` is set. */\n  startPointValue?: number;\n\n  /** Slider orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Determines whether the selection should be only allowed from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to thumb element */\n  thumbProps?: React.ComponentProps<'div'>;\n}\n\nexport type SliderFactory = Factory<{\n  props: SliderProps;\n  ref: HTMLDivElement;\n  stylesNames: SliderStylesNames;\n  vars: SliderCssVariables;\n}>;\n\nconst defaultProps = {\n  radius: 'xl',\n  min: 0,\n  max: 100,\n  step: 1,\n  marks: [],\n  label: (f) => f,\n  labelTransitionProps: { transition: 'fade', duration: 0 },\n  thumbLabel: '',\n  showLabelOnHover: true,\n  scale: (v) => v,\n  size: 'md',\n} satisfies Partial<SliderProps>;\n\nconst varsResolver = createVarsResolver<SliderFactory>(\n  (theme, { size, color, thumbSize, radius }) => ({\n    root: {\n      '--slider-size': getSize(size, 'slider-size'),\n      '--slider-color': color ? getThemeColor(color, theme) : undefined,\n      '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n      '--slider-thumb-size':\n        thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) * 2)',\n    },\n  })\n);\n\nexport const Slider = factory<SliderFactory>((_props) => {\n  const props = useProps('Slider', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    value,\n    onChange,\n    onChangeEnd,\n    size,\n    min,\n    max,\n    domain,\n    step,\n    precision: _precision,\n    defaultValue,\n    name,\n    marks,\n    label,\n    labelTransitionProps,\n    labelAlwaysOn,\n    thumbLabel,\n    showLabelOnHover,\n    thumbChildren,\n    disabled,\n    unstyled,\n    scale,\n    inverted,\n    startPointValue,\n    orientation,\n    className,\n    style,\n    vars,\n    hiddenInputProps,\n    restrictToMarks,\n    thumbProps,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SliderFactory>({\n    name: 'Slider',\n    props,\n    classes,\n    classNames,\n    className,\n    styles,\n    style,\n    attributes,\n    vars,\n    varsResolver,\n    unstyled,\n  });\n\n  const { dir } = useDirection();\n  const [hovered, setHovered] = useState(false);\n  const [_value, setValue] = useUncontrolled({\n    value: typeof value === 'number' ? clamp(value, min, max) : value,\n    defaultValue: typeof defaultValue === 'number' ? clamp(defaultValue, min, max) : defaultValue,\n    finalValue: clamp(0, min, max),\n    onChange,\n  });\n\n  const valueRef = useRef(_value);\n  const onChangeEndRef = useRef(onChangeEnd);\n\n  useEffect(() => {\n    onChangeEndRef.current = onChangeEnd;\n  }, [onChangeEnd]);\n\n  const root = useRef<HTMLDivElement>(null);\n  const thumb = useRef<HTMLDivElement>(null);\n  const [domainMin, domainMax] = domain || [min, max];\n  const position = getPosition({ value: _value, min: domainMin, max: domainMax });\n  const scaledValue = scale!(_value);\n  const _label = typeof label === 'function' ? label(scaledValue) : label;\n  const precision = _precision ?? getPrecision(step);\n\n  const hasStartPoint = typeof startPointValue === 'number' && !inverted;\n  const startPosition = hasStartPoint\n    ? getPosition({ value: startPointValue!, min: domainMin, max: domainMax })\n    : 0;\n  const trackOffset = hasStartPoint ? Math.min(position, startPosition) : 0;\n  const trackFilled = hasStartPoint ? Math.abs(position - startPosition) : position;\n\n  const handleChange = useCallback(\n    ({ x }: { x: number }) => {\n      if (!disabled) {\n        const nextValue = getChangeValue({\n          value: x,\n          min: domainMin,\n          max: domainMax,\n          step,\n          precision,\n        });\n        const clampedValue = clamp(nextValue, min!, max!);\n        setValue(\n          restrictToMarks && marks?.length\n            ? findClosestNumber(\n                clampedValue,\n                marks.map((mark) => mark.value)\n              )\n            : clampedValue\n        );\n        valueRef.current = clampedValue;\n      }\n    },\n    [disabled, min, max, domainMin, domainMax, step, precision, setValue, marks, restrictToMarks]\n  );\n\n  const handleScrubEnd = useCallback(() => {\n    if (!disabled && onChangeEndRef.current) {\n      const finalValue =\n        restrictToMarks && marks?.length\n          ? findClosestNumber(\n              valueRef.current,\n              marks.map((mark) => mark.value)\n            )\n          : valueRef.current;\n      onChangeEndRef.current(finalValue);\n    }\n  }, [disabled, marks, restrictToMarks]);\n\n  const { ref: container, active } = useMove(\n    ({ x, y }) => handleChange({ x: orientation === 'vertical' ? 1 - y : x }),\n    { onScrubEnd: handleScrubEnd },\n    dir\n  );\n\n  const callOnChangeEnd = useCallback(\n    (value: number) => {\n      if (!disabled && onChangeEndRef.current) {\n        onChangeEndRef.current(value);\n      }\n    },\n    [disabled]\n  );\n\n  const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!disabled) {\n      switch (event.key) {\n        case 'ArrowUp': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue = getNextMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(_value + step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowRight': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue =\n              dir === 'rtl' ? getPreviousMarkValue(_value, marks) : getNextMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(dir === 'rtl' ? _value - step : _value + step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowDown': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue = getPreviousMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(_value - step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowLeft': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue =\n              dir === 'rtl' ? getNextMarkValue(_value, marks) : getPreviousMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(dir === 'rtl' ? _value + step : _value - step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'Home': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            setValue(getFirstMarkValue(marks));\n            callOnChangeEnd(getFirstMarkValue(marks));\n            break;\n          }\n\n          setValue(min);\n          callOnChangeEnd(min);\n          break;\n        }\n\n        case 'End': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            setValue(getLastMarkValue(marks));\n            callOnChangeEnd(getLastMarkValue(marks));\n            break;\n          }\n\n          setValue(max);\n          callOnChangeEnd(max);\n          break;\n        }\n\n        default: {\n          break;\n        }\n      }\n    }\n  };\n\n  return (\n    <SliderProvider value={{ getStyles }}>\n      <SliderRoot\n        {...others}\n        ref={useMergedRef(ref, root)}\n        onKeyDownCapture={handleTrackKeydownCapture}\n        onMouseDownCapture={() => root.current?.focus()}\n        size={size}\n        disabled={disabled}\n        orientation={orientation}\n      >\n        <Track\n          inverted={inverted}\n          offset={trackOffset}\n          filled={trackFilled}\n          marks={marks}\n          min={domainMin}\n          max={domainMax}\n          value={scaledValue}\n          startPointValue={hasStartPoint ? startPointValue : undefined}\n          disabled={disabled}\n          containerProps={{\n            ref: container,\n            onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n            onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n          }}\n        >\n          <Thumb\n            max={domainMax}\n            min={domainMin}\n            value={scaledValue}\n            position={position}\n            dragging={active}\n            label={_label}\n            ref={thumb as any}\n            labelTransitionProps={labelTransitionProps}\n            labelAlwaysOn={labelAlwaysOn}\n            thumbLabel={thumbLabel}\n            showLabelOnHover={showLabelOnHover}\n            isHovered={hovered}\n            disabled={disabled}\n            orientation={orientation}\n            {...thumbProps}\n          >\n            {thumbChildren}\n          </Thumb>\n        </Track>\n\n        <input type=\"hidden\" name={name} value={scaledValue} {...hiddenInputProps} />\n      </SliderRoot>\n    </SliderProvider>\n  );\n});\n\nSlider.classes = classes;\nSlider.varsResolver = varsResolver;\nSlider.displayName = '@mantine/core/Slider';\n\nexport namespace Slider {\n  export type Props = SliderProps;\n  export type StylesNames = SliderStylesNames;\n  export type CssVariables = SliderCssVariables;\n  export type Factory = SliderFactory;\n  export type Mark = SliderMark;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Slider.mjs","names":["classes"],"sources":["../../../../src/components/Slider/Slider/Slider.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n  getFirstMarkValue,\n  getLastMarkValue,\n  getNextMarkValue,\n  getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport interface SliderProps\n  extends BoxProps, StylesApiProps<SliderFactory>, ElementProps<'div', 'onChange'> {\n  /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Controls size of the track @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Minimal possible value @default 0 */\n  min?: number;\n\n  /** Maximum possible value @default 100 */\n  max?: number;\n\n  /** Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] */\n  domain?: [number, number];\n\n  /** Number by which value will be incremented/decremented with thumb drag and arrows @default 1 */\n  step?: number;\n\n  /** Number of significant digits after the decimal point */\n  precision?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Called when user stops dragging slider or changes value with arrows */\n  onChangeEnd?: (value: number) => void;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n\n  /** Marks displayed on the track */\n  marks?: SliderMark[];\n\n  /** Function to generate label or any react node to render instead, set to null to disable label */\n  label?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } */\n  labelTransitionProps?: TransitionOverride;\n\n  /** Determines whether the label should be visible when the slider is not being dragged or hovered @default false */\n  labelAlwaysOn?: boolean;\n\n  /** Thumb `aria-label` */\n  thumbLabel?: string;\n\n  /** Thumb `aria-valuetext`. When a function is provided, it receives the scaled value. */\n  thumbValueText?: string | ((value: number) => string);\n\n  /** Determines whether the label should be displayed when the slider is hovered @default true */\n  showLabelOnHover?: boolean;\n\n  /** Content rendered inside thumb */\n  thumbChildren?: React.ReactNode;\n\n  /** Disables slider */\n  disabled?: boolean;\n\n  /** Thumb `width` and `height`, by default value is computed based on `size` prop */\n  thumbSize?: number | string;\n\n  /** A transformation function to change the scale of the slider */\n  scale?: (value: number) => number;\n\n  /** Determines whether track value representation should be inverted @default false */\n  inverted?: boolean;\n\n  /** Value at which the filled bar starts. When set, the bar extends from this point toward the current value. Ignored when `inverted` is set. */\n  startPointValue?: number;\n\n  /** Slider orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Determines whether the selection should be only allowed from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to thumb element */\n  thumbProps?: React.ComponentProps<'div'>;\n}\n\nexport type SliderFactory = Factory<{\n  props: SliderProps;\n  ref: HTMLDivElement;\n  stylesNames: SliderStylesNames;\n  vars: SliderCssVariables;\n}>;\n\nconst defaultProps = {\n  radius: 'xl',\n  min: 0,\n  max: 100,\n  step: 1,\n  marks: [],\n  label: (f) => f,\n  labelTransitionProps: { transition: 'fade', duration: 0 },\n  thumbLabel: '',\n  showLabelOnHover: true,\n  scale: (v) => v,\n  size: 'md',\n} satisfies Partial<SliderProps>;\n\nconst varsResolver = createVarsResolver<SliderFactory>(\n  (theme, { size, color, thumbSize, radius }) => ({\n    root: {\n      '--slider-size': getSize(size, 'slider-size'),\n      '--slider-color': color ? getThemeColor(color, theme) : undefined,\n      '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n      '--slider-thumb-size':\n        thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) * 2)',\n    },\n  })\n);\n\nexport const Slider = factory<SliderFactory>((_props) => {\n  const props = useProps('Slider', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    value,\n    onChange,\n    onChangeEnd,\n    size,\n    min,\n    max,\n    domain,\n    step,\n    precision: _precision,\n    defaultValue,\n    name,\n    marks,\n    label,\n    labelTransitionProps,\n    labelAlwaysOn,\n    thumbLabel,\n    thumbValueText,\n    showLabelOnHover,\n    thumbChildren,\n    disabled,\n    unstyled,\n    scale,\n    inverted,\n    startPointValue,\n    orientation,\n    className,\n    style,\n    vars,\n    hiddenInputProps,\n    restrictToMarks,\n    thumbProps,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SliderFactory>({\n    name: 'Slider',\n    props,\n    classes,\n    classNames,\n    className,\n    styles,\n    style,\n    attributes,\n    vars,\n    varsResolver,\n    unstyled,\n  });\n\n  const { dir } = useDirection();\n  const [hovered, setHovered] = useState(false);\n  const [_value, setValue] = useUncontrolled({\n    value: typeof value === 'number' ? clamp(value, min, max) : value,\n    defaultValue: typeof defaultValue === 'number' ? clamp(defaultValue, min, max) : defaultValue,\n    finalValue: clamp(0, min, max),\n    onChange,\n  });\n\n  const valueRef = useRef(_value);\n  const onChangeEndRef = useRef(onChangeEnd);\n\n  useEffect(() => {\n    onChangeEndRef.current = onChangeEnd;\n  }, [onChangeEnd]);\n\n  const root = useRef<HTMLDivElement>(null);\n  const thumb = useRef<HTMLDivElement>(null);\n  const [domainMin, domainMax] = domain || [min, max];\n  const position = getPosition({ value: _value, min: domainMin, max: domainMax });\n  const scaledValue = scale!(_value);\n  const _label = typeof label === 'function' ? label(scaledValue) : label;\n  const precision = _precision ?? getPrecision(step);\n\n  const hasStartPoint = typeof startPointValue === 'number' && !inverted;\n  const startPosition = hasStartPoint\n    ? getPosition({ value: startPointValue!, min: domainMin, max: domainMax })\n    : 0;\n  const trackOffset = hasStartPoint ? Math.min(position, startPosition) : 0;\n  const trackFilled = hasStartPoint ? Math.abs(position - startPosition) : position;\n\n  const handleChange = useCallback(\n    ({ x }: { x: number }) => {\n      if (!disabled) {\n        const nextValue = getChangeValue({\n          value: x,\n          min: domainMin,\n          max: domainMax,\n          step,\n          precision,\n        });\n        const clampedValue = clamp(nextValue, min!, max!);\n        setValue(\n          restrictToMarks && marks?.length\n            ? findClosestNumber(\n                clampedValue,\n                marks.map((mark) => mark.value)\n              )\n            : clampedValue\n        );\n        valueRef.current = clampedValue;\n      }\n    },\n    [disabled, min, max, domainMin, domainMax, step, precision, setValue, marks, restrictToMarks]\n  );\n\n  const handleScrubEnd = useCallback(() => {\n    if (!disabled && onChangeEndRef.current) {\n      const finalValue =\n        restrictToMarks && marks?.length\n          ? findClosestNumber(\n              valueRef.current,\n              marks.map((mark) => mark.value)\n            )\n          : valueRef.current;\n      onChangeEndRef.current(finalValue);\n    }\n  }, [disabled, marks, restrictToMarks]);\n\n  const { ref: container, active } = useMove(\n    ({ x, y }) => handleChange({ x: orientation === 'vertical' ? 1 - y : x }),\n    { onScrubEnd: handleScrubEnd },\n    dir\n  );\n\n  const callOnChangeEnd = useCallback(\n    (value: number) => {\n      if (!disabled && onChangeEndRef.current) {\n        onChangeEndRef.current(value);\n      }\n    },\n    [disabled]\n  );\n\n  const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!disabled) {\n      switch (event.key) {\n        case 'ArrowUp': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue = getNextMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(_value + step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowRight': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue =\n              dir === 'rtl' ? getPreviousMarkValue(_value, marks) : getNextMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(dir === 'rtl' ? _value - step : _value + step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowDown': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue = getPreviousMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(_value - step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowLeft': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue =\n              dir === 'rtl' ? getNextMarkValue(_value, marks) : getPreviousMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(dir === 'rtl' ? _value + step : _value - step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'Home': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            setValue(getFirstMarkValue(marks));\n            callOnChangeEnd(getFirstMarkValue(marks));\n            break;\n          }\n\n          setValue(min);\n          callOnChangeEnd(min);\n          break;\n        }\n\n        case 'End': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            setValue(getLastMarkValue(marks));\n            callOnChangeEnd(getLastMarkValue(marks));\n            break;\n          }\n\n          setValue(max);\n          callOnChangeEnd(max);\n          break;\n        }\n\n        default: {\n          break;\n        }\n      }\n    }\n  };\n\n  return (\n    <SliderProvider value={{ getStyles }}>\n      <SliderRoot\n        {...others}\n        ref={useMergedRef(ref, root)}\n        onKeyDownCapture={handleTrackKeydownCapture}\n        onMouseDownCapture={() => root.current?.focus()}\n        size={size}\n        disabled={disabled}\n        orientation={orientation}\n      >\n        <Track\n          inverted={inverted}\n          offset={trackOffset}\n          filled={trackFilled}\n          marks={marks}\n          min={domainMin}\n          max={domainMax}\n          value={scaledValue}\n          startPointValue={hasStartPoint ? startPointValue : undefined}\n          disabled={disabled}\n          containerProps={{\n            ref: container,\n            onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n            onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n          }}\n        >\n          <Thumb\n            max={domainMax}\n            min={domainMin}\n            value={scaledValue}\n            position={position}\n            dragging={active}\n            label={_label}\n            ref={thumb as any}\n            labelTransitionProps={labelTransitionProps}\n            labelAlwaysOn={labelAlwaysOn}\n            thumbLabel={thumbLabel}\n            thumbValueText={thumbValueText}\n            showLabelOnHover={showLabelOnHover}\n            isHovered={hovered}\n            disabled={disabled}\n            orientation={orientation}\n            {...thumbProps}\n          >\n            {thumbChildren}\n          </Thumb>\n        </Track>\n\n        <input type=\"hidden\" name={name} value={scaledValue} {...hiddenInputProps} />\n      </SliderRoot>\n    </SliderProvider>\n  );\n});\n\nSlider.classes = classes;\nSlider.varsResolver = varsResolver;\nSlider.displayName = '@mantine/core/Slider';\n\nexport namespace Slider {\n  export type Props = SliderProps;\n  export type StylesNames = SliderStylesNames;\n  export type CssVariables = SliderCssVariables;\n  export type Factory = SliderFactory;\n  export type Mark = SliderMark;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2IA,MAAM,eAAe;CACnB,QAAQ;CACR,KAAK;CACL,KAAK;CACL,MAAM;CACN,OAAO,CAAC;CACR,QAAQ,MAAM;CACd,sBAAsB;EAAE,YAAY;EAAQ,UAAU;CAAE;CACxD,YAAY;CACZ,kBAAkB;CAClB,QAAQ,MAAM;CACd,MAAM;AACR;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,OAAO,WAAW,cAAc,EAC9C,MAAM;CACJ,iBAAiB,QAAQ,MAAM,aAAa;CAC5C,kBAAkB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;CACxD,mBAAmB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CACtE,uBACE,cAAc,KAAA,IAAY,IAAI,SAAS,IAAI;AAC/C,EACF,EACF;AAEA,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,YACA,QACA,OACA,UACA,aACA,MACA,KACA,KACA,QACA,MACA,WAAW,YACX,cACA,MACA,OACA,OACA,sBACA,eACA,YACA,gBACA,kBACA,eACA,UACA,UACA,OACA,UACA,iBACA,aACA,WACA,OACA,MACA,kBACA,iBACA,YACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC,OAAO,OAAO,UAAU,WAAW,MAAM,OAAO,KAAK,GAAG,IAAI;EAC5D,cAAc,OAAO,iBAAiB,WAAW,MAAM,cAAc,KAAK,GAAG,IAAI;EACjF,YAAY,MAAM,GAAG,KAAK,GAAG;EAC7B;CACF,CAAC;CAED,MAAM,WAAW,OAAO,MAAM;CAC9B,MAAM,iBAAiB,OAAO,WAAW;CAEzC,gBAAgB;EACd,eAAe,UAAU;CAC3B,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,OAAO,OAAuB,IAAI;CACxC,MAAM,QAAQ,OAAuB,IAAI;CACzC,MAAM,CAAC,WAAW,aAAa,UAAU,CAAC,KAAK,GAAG;CAClD,MAAM,WAAW,YAAY;EAAE,OAAO;EAAQ,KAAK;EAAW,KAAK;CAAU,CAAC;CAC9E,MAAM,cAAc,MAAO,MAAM;CACjC,MAAM,SAAS,OAAO,UAAU,aAAa,MAAM,WAAW,IAAI;CAClE,MAAM,YAAY,cAAc,aAAa,IAAI;CAEjD,MAAM,gBAAgB,OAAO,oBAAoB,YAAY,CAAC;CAC9D,MAAM,gBAAgB,gBAClB,YAAY;EAAE,OAAO;EAAkB,KAAK;EAAW,KAAK;CAAU,CAAC,IACvE;CACJ,MAAM,cAAc,gBAAgB,KAAK,IAAI,UAAU,aAAa,IAAI;CACxE,MAAM,cAAc,gBAAgB,KAAK,IAAI,WAAW,aAAa,IAAI;CAEzE,MAAM,eAAe,aAClB,EAAE,QAAuB;EACxB,IAAI,CAAC,UAAU;GAQb,MAAM,eAAe,MAPH,eAAe;IAC/B,OAAO;IACP,KAAK;IACL,KAAK;IACL;IACA;GACF,CACmC,GAAG,KAAM,GAAI;GAChD,SACE,mBAAmB,OAAO,SACtB,kBACE,cACA,MAAM,KAAK,SAAS,KAAK,KAAK,CAChC,IACA,YACN;GACA,SAAS,UAAU;EACrB;CACF,GACA;EAAC;EAAU;EAAK;EAAK;EAAW;EAAW;EAAM;EAAW;EAAU;EAAO;CAAe,CAC9F;CAeA,MAAM,EAAE,KAAK,WAAW,WAAW,SAChC,EAAE,GAAG,QAAQ,aAAa,EAAE,GAAG,gBAAgB,aAAa,IAAI,IAAI,EAAE,CAAC,GACxE,EAAE,YAfmB,kBAAkB;EACvC,IAAI,CAAC,YAAY,eAAe,SAAS;GACvC,MAAM,aACJ,mBAAmB,OAAO,SACtB,kBACE,SAAS,SACT,MAAM,KAAK,SAAS,KAAK,KAAK,CAChC,IACA,SAAS;GACf,eAAe,QAAQ,UAAU;EACnC;CACF,GAAG;EAAC;EAAU;EAAO;CAAe,CAIP,EAAE,GAC7B,GACF;CAEA,MAAM,kBAAkB,aACrB,UAAkB;EACjB,IAAI,CAAC,YAAY,eAAe,SAC9B,eAAe,QAAQ,KAAK;CAEhC,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,6BAA6B,UAA+C;EAChF,IAAI,CAAC,UACH,QAAQ,MAAM,KAAd;GACE,KAAK,WAAW;IACd,MAAM,eAAe;IACrB,MAAM,SAAS,MAAM;IAErB,IAAI,mBAAmB,OAAO;KAC5B,MAAM,YAAY,iBAAiB,QAAQ,KAAK;KAChD,SAAS,SAAS;KAClB,gBAAgB,SAAS;KACzB;IACF;IAEA,MAAM,YAAY,iBAChB,KAAK,IAAI,KAAK,IAAI,SAAS,MAAM,SAAS,GAAG,SAAS,GACtD,SACF;IACA,SAAS,SAAS;IAClB,gBAAgB,SAAS;IACzB;GACF;GAEA,KAAK,cAAc;IACjB,MAAM,eAAe;IACrB,MAAM,SAAS,MAAM;IAErB,IAAI,mBAAmB,OAAO;KAC5B,MAAM,YACJ,QAAQ,QAAQ,qBAAqB,QAAQ,KAAK,IAAI,iBAAiB,QAAQ,KAAK;KACtF,SAAS,SAAS;KAClB,gBAAgB,SAAS;KACzB;IACF;IAEA,MAAM,YAAY,iBAChB,KAAK,IAAI,KAAK,IAAI,QAAQ,QAAQ,SAAS,OAAO,SAAS,MAAM,SAAS,GAAG,SAAS,GACtF,SACF;IACA,SAAS,SAAS;IAClB,gBAAgB,SAAS;IACzB;GACF;GAEA,KAAK,aAAa;IAChB,MAAM,eAAe;IACrB,MAAM,SAAS,MAAM;IAErB,IAAI,mBAAmB,OAAO;KAC5B,MAAM,YAAY,qBAAqB,QAAQ,KAAK;KACpD,SAAS,SAAS;KAClB,gBAAgB,SAAS;KACzB;IACF;IAEA,MAAM,YAAY,iBAChB,KAAK,IAAI,KAAK,IAAI,SAAS,MAAM,SAAS,GAAG,SAAS,GACtD,SACF;IACA,SAAS,SAAS;IAClB,gBAAgB,SAAS;IACzB;GACF;GAEA,KAAK,aAAa;IAChB,MAAM,eAAe;IACrB,MAAM,SAAS,MAAM;IAErB,IAAI,mBAAmB,OAAO;KAC5B,MAAM,YACJ,QAAQ,QAAQ,iBAAiB,QAAQ,KAAK,IAAI,qBAAqB,QAAQ,KAAK;KACtF,SAAS,SAAS;KAClB,gBAAgB,SAAS;KACzB;IACF;IAEA,MAAM,YAAY,iBAChB,KAAK,IAAI,KAAK,IAAI,QAAQ,QAAQ,SAAS,OAAO,SAAS,MAAM,SAAS,GAAG,SAAS,GACtF,SACF;IACA,SAAS,SAAS;IAClB,gBAAgB,SAAS;IACzB;GACF;GAEA,KAAK;IACH,MAAM,eAAe;IACrB,MAAM,SAAS,MAAM;IAErB,IAAI,mBAAmB,OAAO;KAC5B,SAAS,kBAAkB,KAAK,CAAC;KACjC,gBAAgB,kBAAkB,KAAK,CAAC;KACxC;IACF;IAEA,SAAS,GAAG;IACZ,gBAAgB,GAAG;IACnB;GAGF,KAAK;IACH,MAAM,eAAe;IACrB,MAAM,SAAS,MAAM;IAErB,IAAI,mBAAmB,OAAO;KAC5B,SAAS,iBAAiB,KAAK,CAAC;KAChC,gBAAgB,iBAAiB,KAAK,CAAC;KACvC;IACF;IAEA,SAAS,GAAG;IACZ,gBAAgB,GAAG;IACnB;GAGF,SACE;EAEJ;CAEJ;CAEA,OACE,oBAAC,gBAAD;EAAgB,OAAO,EAAE,UAAU;YACjC,qBAAC,YAAD;GACE,GAAI;GACJ,KAAK,aAAa,KAAK,IAAI;GAC3B,kBAAkB;GAClB,0BAA0B,KAAK,SAAS,MAAM;GACxC;GACI;GACG;aAPf,CASE,oBAAC,OAAD;IACY;IACV,QAAQ;IACR,QAAQ;IACD;IACP,KAAK;IACL,KAAK;IACL,OAAO;IACP,iBAAiB,gBAAgB,kBAAkB,KAAA;IACzC;IACV,gBAAgB;KACd,KAAK;KACL,cAAc,yBAAyB,WAAW,IAAI,IAAI,KAAA;KAC1D,cAAc,yBAAyB,WAAW,KAAK,IAAI,KAAA;IAC7D;cAEA,oBAAC,OAAD;KACE,KAAK;KACL,KAAK;KACL,OAAO;KACG;KACV,UAAU;KACV,OAAO;KACP,KAAK;KACiB;KACP;KACH;KACI;KACE;KAClB,WAAW;KACD;KACG;KACb,GAAI;eAEH;IACI,CAAA;GACF,CAAA,GAEP,oBAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAa,GAAI;GAAmB,CAAA,CAClE;;CACE,CAAA;AAEpB,CAAC;AAED,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}

package/esm/components/Slider/Slider.context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.context.mjs","names":[],"sources":["../../../src/components/Slider/Slider.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\n\nexport type SliderStylesNames =\n  | 'root'\n  | 'label'\n  | 'thumb'\n  | 'trackContainer'\n  | 'track'\n  | 'bar'\n  | 'markWrapper'\n  | 'mark'\n  | 'markLabel';\n\nexport type SliderCssVariables = {\n  root: '--slider-size' | '--slider-color' | '--slider-thumb-size' | '--slider-radius';\n};\n\ninterface SliderContextValue {\n  getStyles: GetStylesApi<{\n    stylesNames: SliderStylesNames;\n    props: any;\n    ref: any;\n    vars: any;\n    variant: any;\n  }>;\n}\n\nexport const [SliderProvider, useSliderContext] = createSafeContext<SliderContextValue>(\n  'SliderProvider was not found in tree'\n);\n"],"mappings":";;;AA2BA,MAAa,CAAC,gBAAgB,oBAAoB,kBAChD,uCACD"}
+{"version":3,"file":"Slider.context.mjs","names":[],"sources":["../../../src/components/Slider/Slider.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\n\nexport type SliderStylesNames =\n  | 'root'\n  | 'label'\n  | 'thumb'\n  | 'trackContainer'\n  | 'track'\n  | 'bar'\n  | 'markWrapper'\n  | 'mark'\n  | 'markLabel';\n\nexport type SliderCssVariables = {\n  root: '--slider-size' | '--slider-color' | '--slider-thumb-size' | '--slider-radius';\n};\n\ninterface SliderContextValue {\n  getStyles: GetStylesApi<{\n    stylesNames: SliderStylesNames;\n    props: any;\n    ref: any;\n    vars: any;\n    variant: any;\n  }>;\n}\n\nexport const [SliderProvider, useSliderContext] = createSafeContext<SliderContextValue>(\n  'SliderProvider was not found in tree'\n);\n"],"mappings":";;;AA2BA,MAAa,CAAC,gBAAgB,oBAAoB,kBAChD,sCACF"}

package/esm/components/Slider/SliderRoot/SliderRoot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderRoot.mjs","names":[],"sources":["../../../../src/components/Slider/SliderRoot/SliderRoot.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n} from '../../../core';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface SliderRootProps extends BoxProps, ElementProps<'div'> {\n  size: MantineSize | (string & {}) | number;\n  children: React.ReactNode;\n  color?: MantineColor;\n  disabled: boolean | undefined;\n  variant?: string;\n  thumbSize?: string | number;\n  radius?: MantineRadius;\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport function SliderRoot({\n  size,\n  disabled,\n  variant,\n  color,\n  thumbSize,\n  radius,\n  orientation,\n  ...others\n}: SliderRootProps) {\n  const { getStyles } = useSliderContext();\n  return (\n    <Box\n      tabIndex={-1}\n      variant={variant}\n      size={size}\n      {...getStyles('root')}\n      mod={{ orientation }}\n      {...others}\n    />\n  );\n}\n\nSliderRoot.displayName = '@mantine/core/SliderRoot';\n"],"mappings":";;;;;AAqBA,SAAgB,WAAW,EACzB,MACA,UACA,SACA,OACA,WACA,QACA,aACA,GAAG,UACe;CAClB,MAAM,EAAE,cAAc,kBAAkB;AACxC,QACE,oBAAC,KAAD;EACE,UAAU;EACD;EACH;EACN,GAAI,UAAU,OAAO;EACrB,KAAK,EAAE,aAAa;EACpB,GAAI;EACJ,CAAA;;AAIN,WAAW,cAAc"}
+{"version":3,"file":"SliderRoot.mjs","names":[],"sources":["../../../../src/components/Slider/SliderRoot/SliderRoot.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n} from '../../../core';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface SliderRootProps extends BoxProps, ElementProps<'div'> {\n  size: MantineSize | (string & {}) | number;\n  children: React.ReactNode;\n  color?: MantineColor;\n  disabled: boolean | undefined;\n  variant?: string;\n  thumbSize?: string | number;\n  radius?: MantineRadius;\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport function SliderRoot({\n  size,\n  disabled,\n  variant,\n  color,\n  thumbSize,\n  radius,\n  orientation,\n  ...others\n}: SliderRootProps) {\n  const { getStyles } = useSliderContext();\n  return (\n    <Box\n      tabIndex={-1}\n      variant={variant}\n      size={size}\n      {...getStyles('root')}\n      mod={{ orientation }}\n      {...others}\n    />\n  );\n}\n\nSliderRoot.displayName = '@mantine/core/SliderRoot';\n"],"mappings":";;;;;AAqBA,SAAgB,WAAW,EACzB,MACA,UACA,SACA,OACA,WACA,QACA,aACA,GAAG,UACe;CAClB,MAAM,EAAE,cAAc,iBAAiB;CACvC,OACE,oBAAC,KAAD;EACE,UAAU;EACD;EACH;EACN,GAAI,UAAU,MAAM;EACpB,KAAK,EAAE,YAAY;EACnB,GAAI;CACL,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/esm/components/Slider/Thumb/Thumb.mjs

@@ -5,10 +5,11 @@ import { useSliderContext } from "../Slider.context.mjs";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Slider/Thumb/Thumb.tsx
-function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, onFocus, onBlur, showLabelOnHover, isHovered, children = null, disabled, orientation = "horizontal", ref }) {
+function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children = null, disabled, orientation = "horizontal", ref }) {
 	const { getStyles } = useSliderContext();
 	const [focused, setFocused] = useState(false);
 	const isVisible = labelAlwaysOn || dragging || focused || showLabelOnHover && isHovered;
+	const valueText = typeof thumbValueText === "function" ? thumbValueText(value) : thumbValueText;
 	return /* @__PURE__ */ jsxs(Box, {
 		tabIndex: disabled ? -1 : 0,
 		role: "slider",
@@ -16,6 +17,7 @@ function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyD
 		"aria-valuemax": max,
 		"aria-valuemin": min,
 		"aria-valuenow": value,
+		"aria-valuetext": valueText,
 		"aria-disabled": disabled,
 		"aria-orientation": orientation,
 		ref,

package/esm/components/Slider/Thumb/Thumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Thumb.mjs","names":[],"sources":["../../../../src/components/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box } from '../../../core';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {\n  max: number;\n  min: number;\n  value: number;\n  position: number;\n  dragging: boolean;\n  label: React.ReactNode;\n  onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onMouseDown?: (event: any) => void;\n  labelTransitionProps: TransitionOverride | undefined;\n  labelAlwaysOn: boolean | undefined;\n  thumbLabel: string | undefined;\n  showLabelOnHover: boolean | undefined;\n  isHovered?: boolean;\n  children?: React.ReactNode;\n  disabled: boolean | undefined;\n  orientation?: 'horizontal' | 'vertical';\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function Thumb({\n  max,\n  min,\n  value,\n  position,\n  label,\n  dragging,\n  onMouseDown,\n  onKeyDownCapture,\n  labelTransitionProps,\n  labelAlwaysOn,\n  thumbLabel,\n  onFocus,\n  onBlur,\n  showLabelOnHover,\n  isHovered,\n  children = null,\n  disabled,\n  orientation = 'horizontal',\n  ref,\n}: ThumbProps) {\n  const { getStyles } = useSliderContext();\n\n  const [focused, setFocused] = useState(false);\n\n  const isVisible = labelAlwaysOn || dragging || focused || (showLabelOnHover && isHovered);\n\n  return (\n    <Box<'div'>\n      tabIndex={disabled ? -1 : 0}\n      role=\"slider\"\n      aria-label={thumbLabel}\n      aria-valuemax={max}\n      aria-valuemin={min}\n      aria-valuenow={value}\n      aria-disabled={disabled}\n      aria-orientation={orientation}\n      ref={ref}\n      __vars={{ '--slider-thumb-offset': `${position}%` }}\n      {...getStyles('thumb', { focusable: true })}\n      mod={{ dragging, disabled }}\n      onFocus={(event) => {\n        setFocused(true);\n        typeof onFocus === 'function' && onFocus(event);\n      }}\n      onBlur={(event) => {\n        setFocused(false);\n        typeof onBlur === 'function' && onBlur(event);\n      }}\n      onTouchStart={onMouseDown}\n      onMouseDown={onMouseDown}\n      onKeyDownCapture={onKeyDownCapture}\n      onClick={(event) => event.stopPropagation()}\n    >\n      {children}\n      <Transition\n        mounted={label != null && !!isVisible}\n        transition=\"fade\"\n        duration={0}\n        {...labelTransitionProps}\n      >\n        {(transitionStyles) => (\n          <div {...getStyles('label', { style: transitionStyles })}>{label}</div>\n        )}\n      </Transition>\n    </Box>\n  );\n}\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"mappings":";;;;;;;AA0BA,SAAgB,MAAM,EACpB,KACA,KACA,OACA,UACA,OACA,UACA,aACA,kBACA,sBACA,eACA,YACA,SACA,QACA,kBACA,WACA,WAAW,MACX,UACA,cAAc,cACd,OACa;CACb,MAAM,EAAE,cAAc,kBAAkB;CAExC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,YAAY,iBAAiB,YAAY,WAAY,oBAAoB;AAE/E,QACE,qBAAC,KAAD;EACE,UAAU,WAAW,KAAK;EAC1B,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,oBAAkB;EACb;EACL,QAAQ,EAAE,yBAAyB,GAAG,SAAS,IAAI;EACnD,GAAI,UAAU,SAAS,EAAE,WAAW,MAAM,CAAC;EAC3C,KAAK;GAAE;GAAU;GAAU;EAC3B,UAAU,UAAU;AAClB,cAAW,KAAK;AAChB,UAAO,YAAY,cAAc,QAAQ,MAAM;;EAEjD,SAAS,UAAU;AACjB,cAAW,MAAM;AACjB,UAAO,WAAW,cAAc,OAAO,MAAM;;EAE/C,cAAc;EACD;EACK;EAClB,UAAU,UAAU,MAAM,iBAAiB;YAxB7C,CA0BG,UACD,oBAAC,YAAD;GACE,SAAS,SAAS,QAAQ,CAAC,CAAC;GAC5B,YAAW;GACX,UAAU;GACV,GAAI;cAEF,qBACA,oBAAC,OAAD;IAAK,GAAI,UAAU,SAAS,EAAE,OAAO,kBAAkB,CAAC;cAAG;IAAY,CAAA;GAE9D,CAAA,CACT;;;AAIV,MAAM,cAAc"}
+{"version":3,"file":"Thumb.mjs","names":[],"sources":["../../../../src/components/Slider/Thumb/Thumb.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Box } from '../../../core';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {\n  max: number;\n  min: number;\n  value: number;\n  position: number;\n  dragging: boolean;\n  label: React.ReactNode;\n  thumbValueText?: string | ((value: number) => string);\n  onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onMouseDown?: (event: any) => void;\n  labelTransitionProps: TransitionOverride | undefined;\n  labelAlwaysOn: boolean | undefined;\n  thumbLabel: string | undefined;\n  showLabelOnHover: boolean | undefined;\n  isHovered?: boolean;\n  children?: React.ReactNode;\n  disabled: boolean | undefined;\n  orientation?: 'horizontal' | 'vertical';\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function Thumb({\n  max,\n  min,\n  value,\n  position,\n  label,\n  dragging,\n  onMouseDown,\n  onKeyDownCapture,\n  labelTransitionProps,\n  labelAlwaysOn,\n  thumbLabel,\n  thumbValueText,\n  onFocus,\n  onBlur,\n  showLabelOnHover,\n  isHovered,\n  children = null,\n  disabled,\n  orientation = 'horizontal',\n  ref,\n}: ThumbProps) {\n  const { getStyles } = useSliderContext();\n\n  const [focused, setFocused] = useState(false);\n\n  const isVisible = labelAlwaysOn || dragging || focused || (showLabelOnHover && isHovered);\n  const valueText = typeof thumbValueText === 'function' ? thumbValueText(value) : thumbValueText;\n\n  return (\n    <Box<'div'>\n      tabIndex={disabled ? -1 : 0}\n      role=\"slider\"\n      aria-label={thumbLabel}\n      aria-valuemax={max}\n      aria-valuemin={min}\n      aria-valuenow={value}\n      aria-valuetext={valueText}\n      aria-disabled={disabled}\n      aria-orientation={orientation}\n      ref={ref}\n      __vars={{ '--slider-thumb-offset': `${position}%` }}\n      {...getStyles('thumb', { focusable: true })}\n      mod={{ dragging, disabled }}\n      onFocus={(event) => {\n        setFocused(true);\n        typeof onFocus === 'function' && onFocus(event);\n      }}\n      onBlur={(event) => {\n        setFocused(false);\n        typeof onBlur === 'function' && onBlur(event);\n      }}\n      onTouchStart={onMouseDown}\n      onMouseDown={onMouseDown}\n      onKeyDownCapture={onKeyDownCapture}\n      onClick={(event) => event.stopPropagation()}\n    >\n      {children}\n      <Transition\n        mounted={label != null && !!isVisible}\n        transition=\"fade\"\n        duration={0}\n        {...labelTransitionProps}\n      >\n        {(transitionStyles) => (\n          <div {...getStyles('label', { style: transitionStyles })}>{label}</div>\n        )}\n      </Transition>\n    </Box>\n  );\n}\n\nThumb.displayName = '@mantine/core/SliderThumb';\n"],"mappings":";;;;;;;AA2BA,SAAgB,MAAM,EACpB,KACA,KACA,OACA,UACA,OACA,UACA,aACA,kBACA,sBACA,eACA,YACA,gBACA,SACA,QACA,kBACA,WACA,WAAW,MACX,UACA,cAAc,cACd,OACa;CACb,MAAM,EAAE,cAAc,iBAAiB;CAEvC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,YAAY,iBAAiB,YAAY,WAAY,oBAAoB;CAC/E,MAAM,YAAY,OAAO,mBAAmB,aAAa,eAAe,KAAK,IAAI;CAEjF,OACE,qBAAC,KAAD;EACE,UAAU,WAAW,KAAK;EAC1B,MAAK;EACL,cAAY;EACZ,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,kBAAgB;EAChB,iBAAe;EACf,oBAAkB;EACb;EACL,QAAQ,EAAE,yBAAyB,GAAG,SAAS,GAAG;EAClD,GAAI,UAAU,SAAS,EAAE,WAAW,KAAK,CAAC;EAC1C,KAAK;GAAE;GAAU;EAAS;EAC1B,UAAU,UAAU;GAClB,WAAW,IAAI;GACf,OAAO,YAAY,cAAc,QAAQ,KAAK;EAChD;EACA,SAAS,UAAU;GACjB,WAAW,KAAK;GAChB,OAAO,WAAW,cAAc,OAAO,KAAK;EAC9C;EACA,cAAc;EACD;EACK;EAClB,UAAU,UAAU,MAAM,gBAAgB;YAzB5C,CA2BG,UACD,oBAAC,YAAD;GACE,SAAS,SAAS,QAAQ,CAAC,CAAC;GAC5B,YAAW;GACX,UAAU;GACV,GAAI;cAEF,qBACA,oBAAC,OAAD;IAAK,GAAI,UAAU,SAAS,EAAE,OAAO,iBAAiB,CAAC;cAAI;GAAW,CAAA;EAE9D,CAAA,CACT;;AAET;AAEA,MAAM,cAAc"}

package/esm/components/Slider/Track/Track.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Track.mjs","names":[],"sources":["../../../../src/components/Slider/Track/Track.tsx"],"sourcesContent":["import { Box } from '../../../core';\nimport { Marks } from '../Marks/Marks';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface TrackProps {\n  filled: number;\n  offset?: number;\n  marksOffset?: number;\n  marks: { value: number; label?: React.ReactNode }[] | undefined;\n  min: number;\n  max: number;\n  value: number;\n  startPointValue?: number;\n  children: React.ReactNode;\n  disabled: boolean | undefined;\n  inverted: boolean | undefined;\n  containerProps?: React.ComponentProps<'div'>;\n}\n\nexport function Track({\n  filled,\n  children,\n  offset,\n  disabled,\n  marksOffset,\n  inverted,\n  startPointValue,\n  containerProps,\n  ...others\n}: TrackProps) {\n  const { getStyles } = useSliderContext();\n\n  return (\n    <Box {...getStyles('trackContainer')} mod={{ disabled }} {...containerProps}>\n      <Box {...getStyles('track')} mod={{ inverted, disabled }}>\n        <Box\n          mod={{ inverted, disabled }}\n          __vars={{\n            '--slider-bar-width': `calc(${filled}% + 2 * var(--slider-size))`,\n            '--slider-bar-offset': `calc(${offset}% - var(--slider-size))`,\n          }}\n          {...getStyles('bar')}\n        />\n\n        {children}\n\n        <Marks\n          {...others}\n          offset={marksOffset}\n          disabled={disabled}\n          inverted={inverted}\n          startPointValue={startPointValue}\n        />\n      </Box>\n    </Box>\n  );\n}\n\nTrack.displayName = '@mantine/core/SliderTrack';\n"],"mappings":";;;;;;AAmBA,SAAgB,MAAM,EACpB,QACA,UACA,QACA,UACA,aACA,UACA,iBACA,gBACA,GAAG,UACU;CACb,MAAM,EAAE,cAAc,kBAAkB;AAExC,QACE,oBAAC,KAAD;EAAK,GAAI,UAAU,iBAAiB;EAAE,KAAK,EAAE,UAAU;EAAE,GAAI;YAC3D,qBAAC,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,KAAK;IAAE;IAAU;IAAU;aAAxD;IACE,oBAAC,KAAD;KACE,KAAK;MAAE;MAAU;MAAU;KAC3B,QAAQ;MACN,sBAAsB,QAAQ,OAAO;MACrC,uBAAuB,QAAQ,OAAO;MACvC;KACD,GAAI,UAAU,MAAM;KACpB,CAAA;IAED;IAED,oBAAC,OAAD;KACE,GAAI;KACJ,QAAQ;KACE;KACA;KACO;KACjB,CAAA;IACE;;EACF,CAAA;;AAIV,MAAM,cAAc"}
+{"version":3,"file":"Track.mjs","names":[],"sources":["../../../../src/components/Slider/Track/Track.tsx"],"sourcesContent":["import { Box } from '../../../core';\nimport { Marks } from '../Marks/Marks';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface TrackProps {\n  filled: number;\n  offset?: number;\n  marksOffset?: number;\n  marks: { value: number; label?: React.ReactNode }[] | undefined;\n  min: number;\n  max: number;\n  value: number;\n  startPointValue?: number;\n  children: React.ReactNode;\n  disabled: boolean | undefined;\n  inverted: boolean | undefined;\n  containerProps?: React.ComponentProps<'div'>;\n}\n\nexport function Track({\n  filled,\n  children,\n  offset,\n  disabled,\n  marksOffset,\n  inverted,\n  startPointValue,\n  containerProps,\n  ...others\n}: TrackProps) {\n  const { getStyles } = useSliderContext();\n\n  return (\n    <Box {...getStyles('trackContainer')} mod={{ disabled }} {...containerProps}>\n      <Box {...getStyles('track')} mod={{ inverted, disabled }}>\n        <Box\n          mod={{ inverted, disabled }}\n          __vars={{\n            '--slider-bar-width': `calc(${filled}% + 2 * var(--slider-size))`,\n            '--slider-bar-offset': `calc(${offset}% - var(--slider-size))`,\n          }}\n          {...getStyles('bar')}\n        />\n\n        {children}\n\n        <Marks\n          {...others}\n          offset={marksOffset}\n          disabled={disabled}\n          inverted={inverted}\n          startPointValue={startPointValue}\n        />\n      </Box>\n    </Box>\n  );\n}\n\nTrack.displayName = '@mantine/core/SliderTrack';\n"],"mappings":";;;;;;AAmBA,SAAgB,MAAM,EACpB,QACA,UACA,QACA,UACA,aACA,UACA,iBACA,gBACA,GAAG,UACU;CACb,MAAM,EAAE,cAAc,iBAAiB;CAEvC,OACE,oBAAC,KAAD;EAAK,GAAI,UAAU,gBAAgB;EAAG,KAAK,EAAE,SAAS;EAAG,GAAI;YAC3D,qBAAC,KAAD;GAAK,GAAI,UAAU,OAAO;GAAG,KAAK;IAAE;IAAU;GAAS;aAAvD;IACE,oBAAC,KAAD;KACE,KAAK;MAAE;MAAU;KAAS;KAC1B,QAAQ;MACN,sBAAsB,QAAQ,OAAO;MACrC,uBAAuB,QAAQ,OAAO;KACxC;KACA,GAAI,UAAU,KAAK;IACpB,CAAA;IAEA;IAED,oBAAC,OAAD;KACE,GAAI;KACJ,QAAQ;KACE;KACA;KACO;IAClB,CAAA;GACE;;CACF,CAAA;AAET;AAEA,MAAM,cAAc"}

package/esm/components/Slider/utils/get-change-value/get-change-value.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-change-value.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-change-value/get-change-value.ts"],"sourcesContent":["interface GetChangeValue {\n  value: number;\n  containerWidth?: number;\n  min: number;\n  max: number;\n  step: number;\n  precision?: number;\n}\n\nexport function getChangeValue({\n  value,\n  containerWidth,\n  min,\n  max,\n  step,\n  precision,\n}: GetChangeValue) {\n  const left = !containerWidth\n    ? value\n    : Math.min(Math.max(value, 0), containerWidth) / containerWidth;\n  const dx = left * (max - min);\n  const nextValue = (dx !== 0 ? Math.round(dx / step) * step : 0) + min;\n\n  const nextValueWithinStep = Math.max(nextValue, min);\n\n  if (precision !== undefined) {\n    return Number(nextValueWithinStep.toFixed(precision));\n  }\n\n  return nextValueWithinStep;\n}\n"],"mappings":";;AASA,SAAgB,eAAe,EAC7B,OACA,gBACA,KACA,KACA,MACA,aACiB;CAIjB,MAAM,MAHO,CAAC,iBACV,QACA,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,EAAE,eAAe,GAAG,mBAChC,MAAM;CACzB,MAAM,aAAa,OAAO,IAAI,KAAK,MAAM,KAAK,KAAK,GAAG,OAAO,KAAK;CAElE,MAAM,sBAAsB,KAAK,IAAI,WAAW,IAAI;AAEpD,KAAI,cAAc,KAAA,EAChB,QAAO,OAAO,oBAAoB,QAAQ,UAAU,CAAC;AAGvD,QAAO"}
+{"version":3,"file":"get-change-value.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-change-value/get-change-value.ts"],"sourcesContent":["interface GetChangeValue {\n  value: number;\n  containerWidth?: number;\n  min: number;\n  max: number;\n  step: number;\n  precision?: number;\n}\n\nexport function getChangeValue({\n  value,\n  containerWidth,\n  min,\n  max,\n  step,\n  precision,\n}: GetChangeValue) {\n  const left = !containerWidth\n    ? value\n    : Math.min(Math.max(value, 0), containerWidth) / containerWidth;\n  const dx = left * (max - min);\n  const nextValue = (dx !== 0 ? Math.round(dx / step) * step : 0) + min;\n\n  const nextValueWithinStep = Math.max(nextValue, min);\n\n  if (precision !== undefined) {\n    return Number(nextValueWithinStep.toFixed(precision));\n  }\n\n  return nextValueWithinStep;\n}\n"],"mappings":";;AASA,SAAgB,eAAe,EAC7B,OACA,gBACA,KACA,KACA,MACA,aACiB;CAIjB,MAAM,MAHO,CAAC,iBACV,QACA,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,cAAc,IAAI,mBAChC,MAAM;CACzB,MAAM,aAAa,OAAO,IAAI,KAAK,MAAM,KAAK,IAAI,IAAI,OAAO,KAAK;CAElE,MAAM,sBAAsB,KAAK,IAAI,WAAW,GAAG;CAEnD,IAAI,cAAc,KAAA,GAChB,OAAO,OAAO,oBAAoB,QAAQ,SAAS,CAAC;CAGtD,OAAO;AACT"}

package/esm/components/Slider/utils/get-client-position/get-client-position.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-client-position.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-client-position/get-client-position.ts"],"sourcesContent":["export function getClientPosition(event: any, orientation?: 'horizontal' | 'vertical') {\n  if ('TouchEvent' in window && event instanceof window.TouchEvent) {\n    const touch = event.touches[0];\n    return orientation === 'vertical' ? touch.clientY : touch.clientX;\n  }\n\n  return orientation === 'vertical' ? event.clientY : event.clientX;\n}\n"],"mappings":";;AAAA,SAAgB,kBAAkB,OAAY,aAAyC;AACrF,KAAI,gBAAgB,UAAU,iBAAiB,OAAO,YAAY;EAChE,MAAM,QAAQ,MAAM,QAAQ;AAC5B,SAAO,gBAAgB,aAAa,MAAM,UAAU,MAAM;;AAG5D,QAAO,gBAAgB,aAAa,MAAM,UAAU,MAAM"}
+{"version":3,"file":"get-client-position.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-client-position/get-client-position.ts"],"sourcesContent":["export function getClientPosition(event: any, orientation?: 'horizontal' | 'vertical') {\n  if ('TouchEvent' in window && event instanceof window.TouchEvent) {\n    const touch = event.touches[0];\n    return orientation === 'vertical' ? touch.clientY : touch.clientX;\n  }\n\n  return orientation === 'vertical' ? event.clientY : event.clientX;\n}\n"],"mappings":";;AAAA,SAAgB,kBAAkB,OAAY,aAAyC;CACrF,IAAI,gBAAgB,UAAU,iBAAiB,OAAO,YAAY;EAChE,MAAM,QAAQ,MAAM,QAAQ;EAC5B,OAAO,gBAAgB,aAAa,MAAM,UAAU,MAAM;CAC5D;CAEA,OAAO,gBAAgB,aAAa,MAAM,UAAU,MAAM;AAC5D"}

package/esm/components/Slider/utils/get-floating-value/get-floating-value.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-floating-value.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-floating-value/get-floating-value.ts"],"sourcesContent":["export function getFloatingValue(value: number, precision: number) {\n  return parseFloat(value.toFixed(precision));\n}\n"],"mappings":";;AAAA,SAAgB,iBAAiB,OAAe,WAAmB;AACjE,QAAO,WAAW,MAAM,QAAQ,UAAU,CAAC"}
+{"version":3,"file":"get-floating-value.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-floating-value/get-floating-value.ts"],"sourcesContent":["export function getFloatingValue(value: number, precision: number) {\n  return parseFloat(value.toFixed(precision));\n}\n"],"mappings":";;AAAA,SAAgB,iBAAiB,OAAe,WAAmB;CACjE,OAAO,WAAW,MAAM,QAAQ,SAAS,CAAC;AAC5C"}

package/esm/components/Slider/utils/get-position/get-position.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-position.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-position/get-position.ts"],"sourcesContent":["interface GetPosition {\n  value: number;\n  min: number;\n  max: number;\n}\n\nexport function getPosition({ value, min, max }: GetPosition) {\n  const position = ((value - min) / (max - min)) * 100;\n  return Math.min(Math.max(position, 0), 100);\n}\n"],"mappings":";;AAMA,SAAgB,YAAY,EAAE,OAAO,KAAK,OAAoB;CAC5D,MAAM,YAAa,QAAQ,QAAQ,MAAM,OAAQ;AACjD,QAAO,KAAK,IAAI,KAAK,IAAI,UAAU,EAAE,EAAE,IAAI"}
+{"version":3,"file":"get-position.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-position/get-position.ts"],"sourcesContent":["interface GetPosition {\n  value: number;\n  min: number;\n  max: number;\n}\n\nexport function getPosition({ value, min, max }: GetPosition) {\n  const position = ((value - min) / (max - min)) * 100;\n  return Math.min(Math.max(position, 0), 100);\n}\n"],"mappings":";;AAMA,SAAgB,YAAY,EAAE,OAAO,KAAK,OAAoB;CAC5D,MAAM,YAAa,QAAQ,QAAQ,MAAM,OAAQ;CACjD,OAAO,KAAK,IAAI,KAAK,IAAI,UAAU,CAAC,GAAG,GAAG;AAC5C"}

package/esm/components/Slider/utils/get-precision/get-precision.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-precision.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-precision/get-precision.ts"],"sourcesContent":["export function getPrecision(step: number) {\n  if (!step) {\n    return 0;\n  }\n  const split = step.toString().split('.');\n  return split.length > 1 ? split[1].length : 0;\n}\n"],"mappings":";;AAAA,SAAgB,aAAa,MAAc;AACzC,KAAI,CAAC,KACH,QAAO;CAET,MAAM,QAAQ,KAAK,UAAU,CAAC,MAAM,IAAI;AACxC,QAAO,MAAM,SAAS,IAAI,MAAM,GAAG,SAAS"}
+{"version":3,"file":"get-precision.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-precision/get-precision.ts"],"sourcesContent":["export function getPrecision(step: number) {\n  if (!step) {\n    return 0;\n  }\n  const split = step.toString().split('.');\n  return split.length > 1 ? split[1].length : 0;\n}\n"],"mappings":";;AAAA,SAAgB,aAAa,MAAc;CACzC,IAAI,CAAC,MACH,OAAO;CAET,MAAM,QAAQ,KAAK,SAAS,EAAE,MAAM,GAAG;CACvC,OAAO,MAAM,SAAS,IAAI,MAAM,GAAG,SAAS;AAC9C"}

package/esm/components/Slider/utils/get-step-mark-value/get-step-mark-value.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-step-mark-value.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-step-mark-value/get-step-mark-value.ts"],"sourcesContent":["export function getNextMarkValue(\n  currentValue: number,\n  marks: { value: number; label?: React.ReactNode }[]\n) {\n  const sortedMarks = [...marks].sort((a, b) => a.value - b.value);\n  const nextMark = sortedMarks.find((mark) => mark.value > currentValue);\n  return nextMark ? nextMark.value : currentValue;\n}\n\nexport function getPreviousMarkValue(\n  currentValue: number,\n  marks: { value: number; label?: React.ReactNode }[]\n) {\n  const sortedMarks = [...marks].sort((a, b) => b.value - a.value);\n  const previousMark = sortedMarks.find((mark) => mark.value < currentValue);\n  return previousMark ? previousMark.value : currentValue;\n}\n\nexport function getFirstMarkValue(marks: { value: number; label?: React.ReactNode }[]) {\n  const sortedMarks = [...marks].sort((a, b) => a.value - b.value);\n  return sortedMarks.length > 0 ? sortedMarks[0].value : 0;\n}\n\nexport function getLastMarkValue(marks: { value: number; label?: React.ReactNode }[]) {\n  const sortedMarks = [...marks].sort((a, b) => a.value - b.value);\n  return sortedMarks.length > 0 ? sortedMarks[sortedMarks.length - 1].value : 100;\n}\n"],"mappings":";;AAAA,SAAgB,iBACd,cACA,OACA;CAEA,MAAM,WADc,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,CACnC,MAAM,SAAS,KAAK,QAAQ,aAAa;AACtE,QAAO,WAAW,SAAS,QAAQ;;AAGrC,SAAgB,qBACd,cACA,OACA;CAEA,MAAM,eADc,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,CAC/B,MAAM,SAAS,KAAK,QAAQ,aAAa;AAC1E,QAAO,eAAe,aAAa,QAAQ;;AAG7C,SAAgB,kBAAkB,OAAqD;CACrF,MAAM,cAAc,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM;AAChE,QAAO,YAAY,SAAS,IAAI,YAAY,GAAG,QAAQ;;AAGzD,SAAgB,iBAAiB,OAAqD;CACpF,MAAM,cAAc,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM;AAChE,QAAO,YAAY,SAAS,IAAI,YAAY,YAAY,SAAS,GAAG,QAAQ"}
+{"version":3,"file":"get-step-mark-value.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-step-mark-value/get-step-mark-value.ts"],"sourcesContent":["export function getNextMarkValue(\n  currentValue: number,\n  marks: { value: number; label?: React.ReactNode }[]\n) {\n  const sortedMarks = [...marks].sort((a, b) => a.value - b.value);\n  const nextMark = sortedMarks.find((mark) => mark.value > currentValue);\n  return nextMark ? nextMark.value : currentValue;\n}\n\nexport function getPreviousMarkValue(\n  currentValue: number,\n  marks: { value: number; label?: React.ReactNode }[]\n) {\n  const sortedMarks = [...marks].sort((a, b) => b.value - a.value);\n  const previousMark = sortedMarks.find((mark) => mark.value < currentValue);\n  return previousMark ? previousMark.value : currentValue;\n}\n\nexport function getFirstMarkValue(marks: { value: number; label?: React.ReactNode }[]) {\n  const sortedMarks = [...marks].sort((a, b) => a.value - b.value);\n  return sortedMarks.length > 0 ? sortedMarks[0].value : 0;\n}\n\nexport function getLastMarkValue(marks: { value: number; label?: React.ReactNode }[]) {\n  const sortedMarks = [...marks].sort((a, b) => a.value - b.value);\n  return sortedMarks.length > 0 ? sortedMarks[sortedMarks.length - 1].value : 100;\n}\n"],"mappings":";;AAAA,SAAgB,iBACd,cACA,OACA;CAEA,MAAM,WADc,CAAC,GAAG,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAC/B,EAAE,MAAM,SAAS,KAAK,QAAQ,YAAY;CACrE,OAAO,WAAW,SAAS,QAAQ;AACrC;AAEA,SAAgB,qBACd,cACA,OACA;CAEA,MAAM,eADc,CAAC,GAAG,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAC3B,EAAE,MAAM,SAAS,KAAK,QAAQ,YAAY;CACzE,OAAO,eAAe,aAAa,QAAQ;AAC7C;AAEA,SAAgB,kBAAkB,OAAqD;CACrF,MAAM,cAAc,CAAC,GAAG,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;CAC/D,OAAO,YAAY,SAAS,IAAI,YAAY,GAAG,QAAQ;AACzD;AAEA,SAAgB,iBAAiB,OAAqD;CACpF,MAAM,cAAc,CAAC,GAAG,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;CAC/D,OAAO,YAAY,SAAS,IAAI,YAAY,YAAY,SAAS,GAAG,QAAQ;AAC9E"}

package/esm/components/Space/Space.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Space.mjs","names":[],"sources":["../../../src/components/Space/Space.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n} from '../../core';\n\nexport interface SpaceProps extends BoxProps, StylesApiProps<SpaceFactory>, ElementProps<'div'> {}\n\nexport type SpaceFactory = Factory<{\n  props: SpaceProps;\n  ref: HTMLDivElement;\n}>;\n\nexport const Space = factory<SpaceFactory>((props) => {\n  const { w, h, miw, mih, ...others } = useProps('Space', null, props);\n  return <Box {...others} w={w} miw={miw ?? w} h={h} mih={mih ?? h} />;\n});\n\nSpace.displayName = '@mantine/core/Space';\n\nexport namespace Space {\n  export type Props = SpaceProps;\n  export type Factory = SpaceFactory;\n}\n"],"mappings":";;;;;;AAiBA,MAAa,QAAQ,SAAuB,UAAU;CACpD,MAAM,EAAE,GAAG,GAAG,KAAK,KAAK,GAAG,WAAW,SAAS,SAAS,MAAM,MAAM;AACpE,QAAO,oBAAC,KAAD;EAAK,GAAI;EAAW;EAAG,KAAK,OAAO;EAAM;EAAG,KAAK,OAAO;EAAK,CAAA;EACpE;AAEF,MAAM,cAAc"}
+{"version":3,"file":"Space.mjs","names":[],"sources":["../../../src/components/Space/Space.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  StylesApiProps,\n  useProps,\n} from '../../core';\n\nexport interface SpaceProps extends BoxProps, StylesApiProps<SpaceFactory>, ElementProps<'div'> {}\n\nexport type SpaceFactory = Factory<{\n  props: SpaceProps;\n  ref: HTMLDivElement;\n}>;\n\nexport const Space = factory<SpaceFactory>((props) => {\n  const { w, h, miw, mih, ...others } = useProps('Space', null, props);\n  return <Box {...others} w={w} miw={miw ?? w} h={h} mih={mih ?? h} />;\n});\n\nSpace.displayName = '@mantine/core/Space';\n\nexport namespace Space {\n  export type Props = SpaceProps;\n  export type Factory = SpaceFactory;\n}\n"],"mappings":";;;;;;AAiBA,MAAa,QAAQ,SAAuB,UAAU;CACpD,MAAM,EAAE,GAAG,GAAG,KAAK,KAAK,GAAG,WAAW,SAAS,SAAS,MAAM,KAAK;CACnE,OAAO,oBAAC,KAAD;EAAK,GAAI;EAAW;EAAG,KAAK,OAAO;EAAM;EAAG,KAAK,OAAO;CAAI,CAAA;AACrE,CAAC;AAED,MAAM,cAAc"}

package/esm/components/Spoiler/Spoiler.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Spoiler.mjs","names":["classes"],"sources":["../../../src/components/Spoiler/Spoiler.tsx"],"sourcesContent":["import { useElementSize, useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Anchor } from '../Anchor';\nimport classes from './Spoiler.module.css';\n\nexport type SpoilerStylesNames = 'root' | 'control' | 'content';\nexport type SpoilerCssVariables = {\n  root: '--spoiler-transition-duration';\n};\n\nexport interface SpoilerProps\n  extends BoxProps, StylesApiProps<SpoilerFactory>, ElementProps<'div'> {\n  /** Maximum height of visible content in px. When content exceeds this height, the toggle control appears @default 100 */\n  maxHeight?: number;\n\n  /** Content displayed in the toggle button when content is collapsed (to expand) */\n  showLabel: React.ReactNode;\n\n  /** Content displayed in the toggle button when content is expanded (to collapse) */\n  hideLabel: React.ReactNode;\n\n  /** Ref of the toggle button element */\n  controlRef?: React.Ref<HTMLButtonElement>;\n\n  /** Initial expanded state in uncontrolled mode. If `true`, content starts expanded. If `false`, content starts collapsed @default false */\n  defaultExpanded?: boolean;\n\n  /** Controlled expanded state value */\n  expanded?: boolean;\n\n  /** Called when expanded state changes (when spoiler visibility is toggled by the user) */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Spoiler reveal transition duration in ms. Set to 0 to disable animation @default 200 */\n  transitionDuration?: number;\n\n  /** Accessible label for the toggle button when collapsed. If not set, `showLabel` is used */\n  showAriaLabel?: string;\n\n  /** Accessible label for the toggle button when expanded. If not set, `hideLabel` is used */\n  hideAriaLabel?: string;\n}\n\nexport type SpoilerFactory = Factory<{\n  props: SpoilerProps;\n  ref: HTMLDivElement;\n  stylesNames: SpoilerStylesNames;\n  vars: SpoilerCssVariables;\n}>;\n\nconst defaultProps = {\n  maxHeight: 100,\n  defaultExpanded: false,\n} satisfies Partial<SpoilerProps>;\n\nconst varsResolver = createVarsResolver<SpoilerFactory>((_, { transitionDuration }) => ({\n  root: {\n    '--spoiler-transition-duration':\n      transitionDuration !== undefined ? `${transitionDuration}ms` : undefined,\n  },\n}));\n\nexport const Spoiler = factory<SpoilerFactory>((_props) => {\n  const props = useProps('Spoiler', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    defaultExpanded,\n    maxHeight,\n    hideLabel,\n    showLabel,\n    children,\n    controlRef,\n    transitionDuration,\n    id,\n    expanded,\n    onExpandedChange,\n    showAriaLabel,\n    hideAriaLabel,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SpoilerFactory>({\n    name: 'Spoiler',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _id = useId(id);\n  const regionId = `${_id}-region`;\n  const [show, setShowState] = useUncontrolled({\n    value: expanded,\n    defaultValue: defaultExpanded,\n    finalValue: false,\n    onChange: onExpandedChange,\n  });\n  const { ref: contentRef, height } = useElementSize();\n  const spoilerMoreContent = show ? hideLabel : showLabel;\n  const spoiler = spoilerMoreContent !== null && maxHeight! < height;\n  const ariaLabel = show ? hideAriaLabel : showAriaLabel;\n\n  return (\n    <Box {...getStyles('root')} id={_id} data-has-spoiler={spoiler || undefined} {...others}>\n      {spoiler && (\n        <Anchor\n          component=\"button\"\n          type=\"button\"\n          ref={controlRef}\n          onClick={() => setShowState(!show)}\n          aria-expanded={show}\n          aria-controls={regionId}\n          aria-label={ariaLabel}\n          {...getStyles('control')}\n        >\n          {spoilerMoreContent}\n        </Anchor>\n      )}\n      <div\n        {...getStyles('content', {\n          style: { maxHeight: !show ? rem(maxHeight) : height ? rem(height) : undefined },\n        })}\n        data-reduce-motion\n        role=\"region\"\n        id={regionId}\n      >\n        <div ref={contentRef}>{children}</div>\n      </div>\n    </Box>\n  );\n});\n\nSpoiler.classes = classes;\nSpoiler.varsResolver = varsResolver;\nSpoiler.displayName = '@mantine/core/Spoiler';\n\nexport namespace Spoiler {\n  export type Props = SpoilerProps;\n  export type StylesNames = SpoilerStylesNames;\n  export type CssVariables = SpoilerCssVariables;\n  export type Factory = SpoilerFactory;\n}\n"],"mappings":";;;;;;;;;;;;AA6DA,MAAM,eAAe;CACnB,WAAW;CACX,iBAAiB;CAClB;AAED,MAAM,eAAe,oBAAoC,GAAG,EAAE,0BAA0B,EACtF,MAAM,EACJ,iCACE,uBAAuB,KAAA,IAAY,GAAG,mBAAmB,MAAM,KAAA,GAClE,EACF,EAAE;AAEH,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,cAAc,OAAO;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,iBACA,WACA,WACA,WACA,UACA,YACA,oBACA,IACA,UACA,kBACA,eACA,eACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA0B;EAC1C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,MAAM,MAAM,GAAG;CACrB,MAAM,WAAW,GAAG,IAAI;CACxB,MAAM,CAAC,MAAM,gBAAgB,gBAAgB;EAC3C,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;EACX,CAAC;CACF,MAAM,EAAE,KAAK,YAAY,WAAW,gBAAgB;CACpD,MAAM,qBAAqB,OAAO,YAAY;CAC9C,MAAM,UAAU,uBAAuB,QAAQ,YAAa;CAC5D,MAAM,YAAY,OAAO,gBAAgB;AAEzC,QACE,qBAAC,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,IAAI;EAAK,oBAAkB,WAAW,KAAA;EAAW,GAAI;YAAjF,CACG,WACC,oBAAC,QAAD;GACE,WAAU;GACV,MAAK;GACL,KAAK;GACL,eAAe,aAAa,CAAC,KAAK;GAClC,iBAAe;GACf,iBAAe;GACf,cAAY;GACZ,GAAI,UAAU,UAAU;aAEvB;GACM,CAAA,EAEX,oBAAC,OAAD;GACE,GAAI,UAAU,WAAW,EACvB,OAAO,EAAE,WAAW,CAAC,OAAO,IAAI,UAAU,GAAG,SAAS,IAAI,OAAO,GAAG,KAAA,GAAW,EAChF,CAAC;GACF,sBAAA;GACA,MAAK;GACL,IAAI;aAEJ,oBAAC,OAAD;IAAK,KAAK;IAAa;IAAe,CAAA;GAClC,CAAA,CACF;;EAER;AAEF,QAAQ,UAAUA;AAClB,QAAQ,eAAe;AACvB,QAAQ,cAAc"}
+{"version":3,"file":"Spoiler.mjs","names":["classes"],"sources":["../../../src/components/Spoiler/Spoiler.tsx"],"sourcesContent":["import { useElementSize, useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Anchor } from '../Anchor';\nimport classes from './Spoiler.module.css';\n\nexport type SpoilerStylesNames = 'root' | 'control' | 'content';\nexport type SpoilerCssVariables = {\n  root: '--spoiler-transition-duration';\n};\n\nexport interface SpoilerProps\n  extends BoxProps, StylesApiProps<SpoilerFactory>, ElementProps<'div'> {\n  /** Maximum height of visible content in px. When content exceeds this height, the toggle control appears @default 100 */\n  maxHeight?: number;\n\n  /** Content displayed in the toggle button when content is collapsed (to expand) */\n  showLabel: React.ReactNode;\n\n  /** Content displayed in the toggle button when content is expanded (to collapse) */\n  hideLabel: React.ReactNode;\n\n  /** Ref of the toggle button element */\n  controlRef?: React.Ref<HTMLButtonElement>;\n\n  /** Initial expanded state in uncontrolled mode. If `true`, content starts expanded. If `false`, content starts collapsed @default false */\n  defaultExpanded?: boolean;\n\n  /** Controlled expanded state value */\n  expanded?: boolean;\n\n  /** Called when expanded state changes (when spoiler visibility is toggled by the user) */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Spoiler reveal transition duration in ms. Set to 0 to disable animation @default 200 */\n  transitionDuration?: number;\n\n  /** Accessible label for the toggle button when collapsed. If not set, `showLabel` is used */\n  showAriaLabel?: string;\n\n  /** Accessible label for the toggle button when expanded. If not set, `hideLabel` is used */\n  hideAriaLabel?: string;\n}\n\nexport type SpoilerFactory = Factory<{\n  props: SpoilerProps;\n  ref: HTMLDivElement;\n  stylesNames: SpoilerStylesNames;\n  vars: SpoilerCssVariables;\n}>;\n\nconst defaultProps = {\n  maxHeight: 100,\n  defaultExpanded: false,\n} satisfies Partial<SpoilerProps>;\n\nconst varsResolver = createVarsResolver<SpoilerFactory>((_, { transitionDuration }) => ({\n  root: {\n    '--spoiler-transition-duration':\n      transitionDuration !== undefined ? `${transitionDuration}ms` : undefined,\n  },\n}));\n\nexport const Spoiler = factory<SpoilerFactory>((_props) => {\n  const props = useProps('Spoiler', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    defaultExpanded,\n    maxHeight,\n    hideLabel,\n    showLabel,\n    children,\n    controlRef,\n    transitionDuration,\n    id,\n    expanded,\n    onExpandedChange,\n    showAriaLabel,\n    hideAriaLabel,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SpoilerFactory>({\n    name: 'Spoiler',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _id = useId(id);\n  const regionId = `${_id}-region`;\n  const [show, setShowState] = useUncontrolled({\n    value: expanded,\n    defaultValue: defaultExpanded,\n    finalValue: false,\n    onChange: onExpandedChange,\n  });\n  const { ref: contentRef, height } = useElementSize();\n  const spoilerMoreContent = show ? hideLabel : showLabel;\n  const spoiler = spoilerMoreContent !== null && maxHeight! < height;\n  const ariaLabel = show ? hideAriaLabel : showAriaLabel;\n\n  return (\n    <Box {...getStyles('root')} id={_id} data-has-spoiler={spoiler || undefined} {...others}>\n      {spoiler && (\n        <Anchor\n          component=\"button\"\n          type=\"button\"\n          ref={controlRef}\n          onClick={() => setShowState(!show)}\n          aria-expanded={show}\n          aria-controls={regionId}\n          aria-label={ariaLabel}\n          {...getStyles('control')}\n        >\n          {spoilerMoreContent}\n        </Anchor>\n      )}\n      <div\n        {...getStyles('content', {\n          style: { maxHeight: !show ? rem(maxHeight) : height ? rem(height) : undefined },\n        })}\n        data-reduce-motion\n        role=\"region\"\n        id={regionId}\n      >\n        <div ref={contentRef}>{children}</div>\n      </div>\n    </Box>\n  );\n});\n\nSpoiler.classes = classes;\nSpoiler.varsResolver = varsResolver;\nSpoiler.displayName = '@mantine/core/Spoiler';\n\nexport namespace Spoiler {\n  export type Props = SpoilerProps;\n  export type StylesNames = SpoilerStylesNames;\n  export type CssVariables = SpoilerCssVariables;\n  export type Factory = SpoilerFactory;\n}\n"],"mappings":";;;;;;;;;;;;AA6DA,MAAM,eAAe;CACnB,WAAW;CACX,iBAAiB;AACnB;AAEA,MAAM,eAAe,oBAAoC,GAAG,EAAE,0BAA0B,EACtF,MAAM,EACJ,iCACE,uBAAuB,KAAA,IAAY,GAAG,mBAAmB,MAAM,KAAA,EACnE,EACF,EAAE;AAEF,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,cAAc,MAAM;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,iBACA,WACA,WACA,WACA,UACA,YACA,oBACA,IACA,UACA,kBACA,eACA,eACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA0B;EAC1C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,MAAM,MAAM,EAAE;CACpB,MAAM,WAAW,GAAG,IAAI;CACxB,MAAM,CAAC,MAAM,gBAAgB,gBAAgB;EAC3C,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CACD,MAAM,EAAE,KAAK,YAAY,WAAW,eAAe;CACnD,MAAM,qBAAqB,OAAO,YAAY;CAC9C,MAAM,UAAU,uBAAuB,QAAQ,YAAa;CAC5D,MAAM,YAAY,OAAO,gBAAgB;CAEzC,OACE,qBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,IAAI;EAAK,oBAAkB,WAAW,KAAA;EAAW,GAAI;YAAjF,CACG,WACC,oBAAC,QAAD;GACE,WAAU;GACV,MAAK;GACL,KAAK;GACL,eAAe,aAAa,CAAC,IAAI;GACjC,iBAAe;GACf,iBAAe;GACf,cAAY;GACZ,GAAI,UAAU,SAAS;aAEtB;EACK,CAAA,GAEV,oBAAC,OAAD;GACE,GAAI,UAAU,WAAW,EACvB,OAAO,EAAE,WAAW,CAAC,OAAO,IAAI,SAAS,IAAI,SAAS,IAAI,MAAM,IAAI,KAAA,EAAU,EAChF,CAAC;GACD,sBAAA;GACA,MAAK;GACL,IAAI;aAEJ,oBAAC,OAAD;IAAK,KAAK;IAAa;GAAc,CAAA;EAClC,CAAA,CACF;;AAET,CAAC;AAED,QAAQ,UAAUA;AAClB,QAAQ,eAAe;AACvB,QAAQ,cAAc"}

package/esm/components/Stack/Stack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.mjs","names":["classes"],"sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Stack.module.css';\n\nexport type StackStylesNames = 'root';\nexport type StackCssVariables = {\n  root: '--stack-gap' | '--stack-align' | '--stack-justify';\n};\n\nexport interface StackProps extends BoxProps, StylesApiProps<StackFactory>, ElementProps<'div'> {\n  /** Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem @default 'md' */\n  gap?: MantineSpacing;\n\n  /** Controls `align-items` CSS property @default 'stretch' */\n  align?: React.CSSProperties['alignItems'];\n\n  /** Controls `justify-content` CSS property @default 'flex-start' */\n  justify?: React.CSSProperties['justifyContent'];\n}\n\nexport type StackFactory = Factory<{\n  props: StackProps;\n  ref: HTMLDivElement;\n  stylesNames: StackStylesNames;\n  vars: StackCssVariables;\n}>;\n\nconst defaultProps = {\n  gap: 'md',\n  align: 'stretch',\n  justify: 'flex-start',\n} satisfies Partial<StackProps>;\n\nconst varsResolver = createVarsResolver<StackFactory>((_, { gap, align, justify }) => ({\n  root: {\n    '--stack-gap': getSpacing(gap),\n    '--stack-align': align,\n    '--stack-justify': justify,\n  },\n}));\n\nexport const Stack = factory<StackFactory>((_props) => {\n  const props = useProps('Stack', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    align,\n    justify,\n    gap,\n    variant,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<StackFactory>({\n    name: 'Stack',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return <Box {...getStyles('root')} variant={variant} {...others} />;\n});\n\nStack.classes = classes;\nStack.varsResolver = varsResolver;\nStack.displayName = '@mantine/core/Stack';\n\nexport namespace Stack {\n  export type Props = StackProps;\n  export type StylesNames = StackStylesNames;\n  export type CssVariables = StackCssVariables;\n  export type Factory = StackFactory;\n}\n"],"mappings":";;;;;;;;;;AAsCA,MAAM,eAAe;CACnB,KAAK;CACL,OAAO;CACP,SAAS;CACV;AAED,MAAM,eAAe,oBAAkC,GAAG,EAAE,KAAK,OAAO,eAAe,EACrF,MAAM;CACJ,eAAe,WAAW,IAAI;CAC9B,iBAAiB;CACjB,mBAAmB;CACpB,EACF,EAAE;AAEH,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,OAAO;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,SACA,KACA,SACA,YACA,GAAG,WACD;AAgBJ,QAAO,oBAAC,KAAD;EAAK,GAdM,UAAwB;GACxC,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,CAEwB,OAAO;EAAW;EAAS,GAAI;EAAU,CAAA;EACnE;AAEF,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}
+{"version":3,"file":"Stack.mjs","names":["classes"],"sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Stack.module.css';\n\nexport type StackStylesNames = 'root';\nexport type StackCssVariables = {\n  root: '--stack-gap' | '--stack-align' | '--stack-justify';\n};\n\nexport interface StackProps extends BoxProps, StylesApiProps<StackFactory>, ElementProps<'div'> {\n  /** Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem @default 'md' */\n  gap?: MantineSpacing;\n\n  /** Controls `align-items` CSS property @default 'stretch' */\n  align?: React.CSSProperties['alignItems'];\n\n  /** Controls `justify-content` CSS property @default 'flex-start' */\n  justify?: React.CSSProperties['justifyContent'];\n}\n\nexport type StackFactory = Factory<{\n  props: StackProps;\n  ref: HTMLDivElement;\n  stylesNames: StackStylesNames;\n  vars: StackCssVariables;\n}>;\n\nconst defaultProps = {\n  gap: 'md',\n  align: 'stretch',\n  justify: 'flex-start',\n} satisfies Partial<StackProps>;\n\nconst varsResolver = createVarsResolver<StackFactory>((_, { gap, align, justify }) => ({\n  root: {\n    '--stack-gap': getSpacing(gap),\n    '--stack-align': align,\n    '--stack-justify': justify,\n  },\n}));\n\nexport const Stack = factory<StackFactory>((_props) => {\n  const props = useProps('Stack', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    align,\n    justify,\n    gap,\n    variant,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<StackFactory>({\n    name: 'Stack',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return <Box {...getStyles('root')} variant={variant} {...others} />;\n});\n\nStack.classes = classes;\nStack.varsResolver = varsResolver;\nStack.displayName = '@mantine/core/Stack';\n\nexport namespace Stack {\n  export type Props = StackProps;\n  export type StylesNames = StackStylesNames;\n  export type CssVariables = StackCssVariables;\n  export type Factory = StackFactory;\n}\n"],"mappings":";;;;;;;;;;AAsCA,MAAM,eAAe;CACnB,KAAK;CACL,OAAO;CACP,SAAS;AACX;AAEA,MAAM,eAAe,oBAAkC,GAAG,EAAE,KAAK,OAAO,eAAe,EACrF,MAAM;CACJ,eAAe,WAAW,GAAG;CAC7B,iBAAiB;CACjB,mBAAmB;AACrB,EACF,EAAE;AAEF,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,SACA,KACA,SACA,YACA,GAAG,WACD;CAgBJ,OAAO,oBAAC,KAAD;EAAK,GAdM,UAAwB;GACxC,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAEwB,EAAE,MAAM;EAAY;EAAS,GAAI;CAAS,CAAA;AACpE,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}

package/esm/components/Stepper/Stepper.context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.context.mjs","names":[],"sources":["../../../src/components/Stepper/Stepper.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { StepperFactory } from './Stepper';\n\nexport interface StepperContextValue {\n  getStyles: GetStylesApi<StepperFactory>;\n  orientation: 'horizontal' | 'vertical' | undefined;\n  iconPosition: 'left' | 'right' | undefined;\n}\n\nexport const [StepperProvider, useStepperContext] = createSafeContext<StepperContextValue>(\n  'Stepper component was not found in tree'\n);\n"],"mappings":";;;AASA,MAAa,CAAC,iBAAiB,qBAAqB,kBAClD,0CACD"}
+{"version":3,"file":"Stepper.context.mjs","names":[],"sources":["../../../src/components/Stepper/Stepper.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { StepperFactory } from './Stepper';\n\nexport interface StepperContextValue {\n  getStyles: GetStylesApi<StepperFactory>;\n  orientation: 'horizontal' | 'vertical' | undefined;\n  iconPosition: 'left' | 'right' | undefined;\n}\n\nexport const [StepperProvider, useStepperContext] = createSafeContext<StepperContextValue>(\n  'Stepper component was not found in tree'\n);\n"],"mappings":";;;AASA,MAAa,CAAC,iBAAiB,qBAAqB,kBAClD,yCACF"}

package/esm/components/Stepper/Stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.mjs","names":["classes"],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Activity, Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getSpacing,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  MantineSpacing,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { StepperProvider, type StepperContextValue } from './Stepper.context';\nimport { StepperCompleted, StepperCompletedProps } from './StepperCompleted/StepperCompleted';\nimport { StepperStep, StepperStepProps } from './StepperStep/StepperStep';\nimport classes from './Stepper.module.css';\nexport type StepFragmentComponent = React.FC<{ step: number }>;\n\nexport type StepperStylesNames =\n  | 'root'\n  | 'separator'\n  | 'steps'\n  | 'content'\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepIconContent'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport type StepperCssVariables = {\n  root:\n    | '--stepper-color'\n    | '--stepper-icon-color'\n    | '--stepper-icon-size'\n    | '--stepper-content-padding'\n    | '--stepper-radius'\n    | '--stepper-fz'\n    | '--stepper-spacing';\n};\n\nexport interface StepperProps\n  extends BoxProps, StylesApiProps<StepperFactory>, ElementProps<'div'> {\n  /** `Stepper.Step` components */\n  children: React.ReactNode;\n\n  /** Called when a clickable step is clicked with its 0-based index. Not called for the currently active step. */\n  onStepClick?: (stepIndex: number) => void;\n\n  /** Index of the active step */\n  active: number;\n\n  /** Step icon @default step index + 1 */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed @default CheckIcon */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress @default step index + 1 */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the step icon, by default icon size is inferred from `size` prop */\n  iconSize?: number | string;\n\n  /** Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content @default 'md' */\n  contentPadding?: MantineSpacing;\n\n  /** Stepper orientation @default 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Icon position relative to the step body @default 'left' */\n  iconPosition?: 'right' | 'left';\n\n  /** Controls size of various Stepper elements */\n  size?: MantineSize;\n\n  /** Key of `theme.radius` or any valid CSS value to set steps border-radius @default \"xl\" */\n  radius?: MantineRadius;\n\n  /** When true, users can click and jump to any step. When false, users can only navigate to completed steps @default true */\n  allowNextStepsSelect?: boolean;\n\n  /** Determines whether steps should wrap to the next line if no space is available @default true */\n  wrap?: boolean;\n\n  /** When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color */\n  autoContrast?: boolean;\n\n  /** If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. @default false */\n  keepMounted?: boolean;\n}\n\nexport type StepperFactory = Factory<{\n  props: StepperProps;\n  ref: HTMLDivElement;\n  stylesNames: StepperStylesNames;\n  vars: StepperCssVariables;\n  staticComponents: {\n    Step: typeof StepperStep;\n    Completed: typeof StepperCompleted;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  iconPosition: 'left',\n  allowNextStepsSelect: true,\n  wrap: true,\n} satisfies Partial<StepperProps>;\n\nconst varsResolver = createVarsResolver<StepperFactory>(\n  (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({\n    root: {\n      '--stepper-color': color ? getThemeColor(color, theme) : undefined,\n      '--stepper-icon-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n      '--stepper-icon-size':\n        iconSize === undefined ? getSize(size, 'stepper-icon-size') : rem(iconSize),\n      '--stepper-content-padding': getSpacing(contentPadding),\n      '--stepper-radius': radius === undefined ? undefined : getRadius(radius),\n      '--stepper-fz': getFontSize(size),\n      '--stepper-spacing': getSpacing(size),\n    },\n  })\n);\n\nexport const Stepper = factory<StepperFactory>((_props) => {\n  const props = useProps('Stepper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    onStepClick,\n    active,\n    icon,\n    completedIcon,\n    progressIcon,\n    color,\n    iconSize,\n    contentPadding,\n    orientation,\n    iconPosition,\n    size,\n    radius,\n    allowNextStepsSelect,\n    wrap,\n    autoContrast,\n    keepMounted,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<StepperFactory>({\n    name: 'Stepper',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const convertedChildren = Children.toArray(children) as React.ReactElement[];\n  const _children = convertedChildren.filter(\n    (child) => child.type !== StepperCompleted\n  ) as React.ReactElement<StepperStepProps>[];\n  const completedStep = convertedChildren.find(\n    (item) => item.type === StepperCompleted\n  ) as React.ReactElement<StepperCompletedProps>;\n\n  const items = _children.reduce<React.ReactElement<StepperStepProps>[]>(\n    (acc, item: React.ReactElement<StepperStepProps>, index) => {\n      const state =\n        active === index ? 'stepProgress' : active > index ? 'stepCompleted' : 'stepInactive';\n\n      const shouldAllowSelect = () => {\n        if (typeof onStepClick !== 'function') {\n          return false;\n        }\n\n        if (typeof item.props.allowStepSelect === 'boolean') {\n          return item.props.allowStepSelect;\n        }\n\n        return state === 'stepCompleted' || allowNextStepsSelect;\n      };\n\n      const isStepSelectionEnabled = shouldAllowSelect();\n\n      acc.push(\n        cloneElement(item, {\n          icon: item.props.icon || icon || index + 1,\n          key: index,\n          step: index,\n          state,\n          onClick: () => isStepSelectionEnabled && onStepClick?.(index),\n          allowStepClick: isStepSelectionEnabled,\n          completedIcon: item.props.completedIcon || completedIcon,\n          progressIcon: item.props.progressIcon || progressIcon,\n          color: item.props.color || color,\n          iconSize,\n          iconPosition: item.props.iconPosition || iconPosition,\n          orientation,\n        })\n      );\n\n      if (orientation === 'horizontal' && index !== _children.length - 1) {\n        acc.push(\n          <div\n            {...getStyles('separator')}\n            data-active={index < active || undefined}\n            data-orientation={orientation}\n            key={`separator-${index}`}\n          />\n        );\n      }\n\n      return acc;\n    },\n    []\n  );\n\n  const stepContent = _children[active]?.props?.children;\n  const completedContent = completedStep?.props?.children;\n  const content = active > _children.length - 1 ? completedContent : stepContent;\n\n  const contentSection = keepMounted ? (\n    <>\n      {_children.map((child, index) => (\n        <Activity key={index} mode={active === index ? 'visible' : 'hidden'}>\n          <div {...getStyles('content')}>{child.props.children}</div>\n        </Activity>\n      ))}\n      {completedStep && (\n        <Activity mode={active > _children.length - 1 ? 'visible' : 'hidden'}>\n          <div {...getStyles('content')}>{completedStep.props.children}</div>\n        </Activity>\n      )}\n    </>\n  ) : (\n    content && <div {...getStyles('content')}>{content}</div>\n  );\n\n  return (\n    <StepperProvider value={{ getStyles, orientation, iconPosition }}>\n      <Box {...getStyles('root')} size={size} {...others}>\n        <Box\n          {...getStyles('steps')}\n          mod={{\n            orientation,\n            'icon-position': iconPosition,\n            wrap: wrap && orientation !== 'vertical',\n          }}\n        >\n          {items}\n        </Box>\n        {contentSection}\n      </Box>\n    </StepperProvider>\n  );\n});\n\nStepper.classes = classes;\nStepper.varsResolver = varsResolver;\nStepper.displayName = '@mantine/core/Stepper';\nStepper.Completed = StepperCompleted;\nStepper.Step = StepperStep;\n\nexport namespace Stepper {\n  export type Props = StepperProps;\n  export type StylesNames = StepperStylesNames;\n  export type CssVariables = StepperCssVariables;\n  export type Factory = StepperFactory;\n  export type Step = StepFragmentComponent;\n  export type ContextValue = StepperContextValue;\n\n  export namespace Step {\n    export type Props = StepperStepProps;\n  }\n\n  export namespace Completed {\n    export type Props = StepperCompletedProps;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Stepper.mjs","names":["classes"],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Activity, Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getSpacing,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  MantineSpacing,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { StepperProvider, type StepperContextValue } from './Stepper.context';\nimport { StepperCompleted, StepperCompletedProps } from './StepperCompleted/StepperCompleted';\nimport { StepperStep, StepperStepProps } from './StepperStep/StepperStep';\nimport classes from './Stepper.module.css';\nexport type StepFragmentComponent = React.FC<{ step: number }>;\n\nexport type StepperStylesNames =\n  | 'root'\n  | 'separator'\n  | 'steps'\n  | 'content'\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepIconContent'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport type StepperCssVariables = {\n  root:\n    | '--stepper-color'\n    | '--stepper-icon-color'\n    | '--stepper-icon-size'\n    | '--stepper-content-padding'\n    | '--stepper-radius'\n    | '--stepper-fz'\n    | '--stepper-spacing';\n};\n\nexport interface StepperProps\n  extends BoxProps, StylesApiProps<StepperFactory>, ElementProps<'div'> {\n  /** `Stepper.Step` components */\n  children: React.ReactNode;\n\n  /** Called when a clickable step is clicked with its 0-based index. Not called for the currently active step. */\n  onStepClick?: (stepIndex: number) => void;\n\n  /** Index of the active step */\n  active: number;\n\n  /** Step icon @default step index + 1 */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed @default CheckIcon */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress @default step index + 1 */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the step icon, by default icon size is inferred from `size` prop */\n  iconSize?: number | string;\n\n  /** Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content @default 'md' */\n  contentPadding?: MantineSpacing;\n\n  /** Stepper orientation @default 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Icon position relative to the step body @default 'left' */\n  iconPosition?: 'right' | 'left';\n\n  /** Controls size of various Stepper elements */\n  size?: MantineSize;\n\n  /** Key of `theme.radius` or any valid CSS value to set steps border-radius @default \"xl\" */\n  radius?: MantineRadius;\n\n  /** When true, users can click and jump to any step. When false, users can only navigate to completed steps @default true */\n  allowNextStepsSelect?: boolean;\n\n  /** Determines whether steps should wrap to the next line if no space is available @default true */\n  wrap?: boolean;\n\n  /** When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color */\n  autoContrast?: boolean;\n\n  /** If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. @default false */\n  keepMounted?: boolean;\n}\n\nexport type StepperFactory = Factory<{\n  props: StepperProps;\n  ref: HTMLDivElement;\n  stylesNames: StepperStylesNames;\n  vars: StepperCssVariables;\n  staticComponents: {\n    Step: typeof StepperStep;\n    Completed: typeof StepperCompleted;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  iconPosition: 'left',\n  allowNextStepsSelect: true,\n  wrap: true,\n} satisfies Partial<StepperProps>;\n\nconst varsResolver = createVarsResolver<StepperFactory>(\n  (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({\n    root: {\n      '--stepper-color': color ? getThemeColor(color, theme) : undefined,\n      '--stepper-icon-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n      '--stepper-icon-size':\n        iconSize === undefined ? getSize(size, 'stepper-icon-size') : rem(iconSize),\n      '--stepper-content-padding': getSpacing(contentPadding),\n      '--stepper-radius': radius === undefined ? undefined : getRadius(radius),\n      '--stepper-fz': getFontSize(size),\n      '--stepper-spacing': getSpacing(size),\n    },\n  })\n);\n\nexport const Stepper = factory<StepperFactory>((_props) => {\n  const props = useProps('Stepper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    onStepClick,\n    active,\n    icon,\n    completedIcon,\n    progressIcon,\n    color,\n    iconSize,\n    contentPadding,\n    orientation,\n    iconPosition,\n    size,\n    radius,\n    allowNextStepsSelect,\n    wrap,\n    autoContrast,\n    keepMounted,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<StepperFactory>({\n    name: 'Stepper',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const convertedChildren = Children.toArray(children) as React.ReactElement[];\n  const _children = convertedChildren.filter(\n    (child) => child.type !== StepperCompleted\n  ) as React.ReactElement<StepperStepProps>[];\n  const completedStep = convertedChildren.find(\n    (item) => item.type === StepperCompleted\n  ) as React.ReactElement<StepperCompletedProps>;\n\n  const items = _children.reduce<React.ReactElement<StepperStepProps>[]>(\n    (acc, item: React.ReactElement<StepperStepProps>, index) => {\n      const state =\n        active === index ? 'stepProgress' : active > index ? 'stepCompleted' : 'stepInactive';\n\n      const shouldAllowSelect = () => {\n        if (typeof onStepClick !== 'function') {\n          return false;\n        }\n\n        if (typeof item.props.allowStepSelect === 'boolean') {\n          return item.props.allowStepSelect;\n        }\n\n        return state === 'stepCompleted' || allowNextStepsSelect;\n      };\n\n      const isStepSelectionEnabled = shouldAllowSelect();\n\n      acc.push(\n        cloneElement(item, {\n          icon: item.props.icon || icon || index + 1,\n          key: index,\n          step: index,\n          state,\n          onClick: () => isStepSelectionEnabled && onStepClick?.(index),\n          allowStepClick: isStepSelectionEnabled,\n          completedIcon: item.props.completedIcon || completedIcon,\n          progressIcon: item.props.progressIcon || progressIcon,\n          color: item.props.color || color,\n          iconSize,\n          iconPosition: item.props.iconPosition || iconPosition,\n          orientation,\n        })\n      );\n\n      if (orientation === 'horizontal' && index !== _children.length - 1) {\n        acc.push(\n          <div\n            {...getStyles('separator')}\n            data-active={index < active || undefined}\n            data-orientation={orientation}\n            key={`separator-${index}`}\n          />\n        );\n      }\n\n      return acc;\n    },\n    []\n  );\n\n  const stepContent = _children[active]?.props?.children;\n  const completedContent = completedStep?.props?.children;\n  const content = active > _children.length - 1 ? completedContent : stepContent;\n\n  const contentSection = keepMounted ? (\n    <>\n      {_children.map((child, index) => (\n        <Activity key={index} mode={active === index ? 'visible' : 'hidden'}>\n          <div {...getStyles('content')}>{child.props.children}</div>\n        </Activity>\n      ))}\n      {completedStep && (\n        <Activity mode={active > _children.length - 1 ? 'visible' : 'hidden'}>\n          <div {...getStyles('content')}>{completedStep.props.children}</div>\n        </Activity>\n      )}\n    </>\n  ) : (\n    content && <div {...getStyles('content')}>{content}</div>\n  );\n\n  return (\n    <StepperProvider value={{ getStyles, orientation, iconPosition }}>\n      <Box {...getStyles('root')} size={size} {...others}>\n        <Box\n          {...getStyles('steps')}\n          mod={{\n            orientation,\n            'icon-position': iconPosition,\n            wrap: wrap && orientation !== 'vertical',\n          }}\n        >\n          {items}\n        </Box>\n        {contentSection}\n      </Box>\n    </StepperProvider>\n  );\n});\n\nStepper.classes = classes;\nStepper.varsResolver = varsResolver;\nStepper.displayName = '@mantine/core/Stepper';\nStepper.Completed = StepperCompleted;\nStepper.Step = StepperStep;\n\nexport namespace Stepper {\n  export type Props = StepperProps;\n  export type StylesNames = StepperStylesNames;\n  export type CssVariables = StepperCssVariables;\n  export type Factory = StepperFactory;\n  export type Step = StepFragmentComponent;\n  export type ContextValue = StepperContextValue;\n\n  export namespace Step {\n    export type Props = StepperStepProps;\n  }\n\n  export namespace Completed {\n    export type Props = StepperCompletedProps;\n  }\n}\n"],"mappings":"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"}

package/esm/components/Stepper/StepperStep/StepperStep.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStep.mjs","names":["classes"],"sources":["../../../../src/components/Stepper/StepperStep/StepperStep.tsx"],"sourcesContent":["import {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { Loader } from '../../Loader';\nimport { Transition } from '../../Transition';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport type { StepFragmentComponent } from '../Stepper';\nimport { useStepperContext } from '../Stepper.context';\nimport classes from '../Stepper.module.css';\n\nconst getStepFragment = (\n  Fragment: StepFragmentComponent | React.ReactNode,\n  step: number | undefined\n) => {\n  if (typeof Fragment === 'function') {\n    return <Fragment step={step || 0} />;\n  }\n\n  return Fragment;\n};\n\nexport type StepperStepStylesNames =\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepIconContent'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport interface StepperStepProps\n  extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {\n  /** 0-based step index, automatically set by Stepper component */\n  step?: number;\n\n  /** Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed */\n  state?: 'stepInactive' | 'stepProgress' | 'stepCompleted';\n\n  /** Key of `theme.colors`, by default controlled by Stepper component */\n  color?: MantineColor;\n\n  /** When false, hides the step icon. Useful for creating compact steppers with only labels @default true */\n  withIcon?: boolean;\n\n  /** Step icon, defaults to `step index + 1` when rendered within Stepper */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step label, render after icon */\n  label?: React.ReactNode | StepFragmentComponent;\n\n  /** Step description */\n  description?: React.ReactNode | StepFragmentComponent;\n\n  /** Icon wrapper size */\n  iconSize?: string | number;\n\n  /** Icon position relative to step body, controlled by Stepper component */\n  iconPosition?: 'right' | 'left';\n\n  /** Indicates loading state of the step */\n  loading?: boolean;\n\n  /** Set to false to disable clicks on step */\n  allowStepClick?: boolean;\n\n  /** Should step selection be allowed */\n  allowStepSelect?: boolean;\n\n  /** Static selector base */\n  __staticSelector?: string;\n\n  /** Component orientation */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nexport type StepperStepFactory = Factory<{\n  props: StepperStepProps;\n  ref: HTMLButtonElement;\n  stylesNames: StepperStepStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  withIcon: true,\n  allowStepClick: true,\n  iconPosition: 'left',\n} satisfies Partial<StepperStepProps>;\n\nexport const StepperStep = factory<StepperStepFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    step,\n    state,\n    color,\n    icon,\n    completedIcon,\n    progressIcon,\n    label,\n    description,\n    withIcon,\n    iconSize,\n    loading,\n    allowStepClick,\n    allowStepSelect,\n    iconPosition,\n    orientation,\n    mod,\n    ...others\n  } = useProps('StepperStep', defaultProps, props);\n\n  const ctx = useStepperContext();\n  const theme = useMantineTheme();\n  const stylesApi = { classNames, styles };\n\n  const _icon = state === 'stepCompleted' ? null : state === 'stepProgress' ? progressIcon : icon;\n  const dataAttributes = {\n    'data-progress': state === 'stepProgress' || undefined,\n    'data-completed': state === 'stepCompleted' || undefined,\n  };\n\n  return (\n    <UnstyledButton\n      {...ctx.getStyles('step', { className, style, variant: ctx.orientation, ...stylesApi })}\n      mod={[\n        { 'icon-position': iconPosition || ctx.iconPosition, 'allow-click': allowStepClick },\n        mod,\n      ]}\n      {...dataAttributes}\n      {...others}\n      __vars={{ '--step-color': color ? getThemeColor(color, theme) : undefined }}\n      tabIndex={allowStepClick ? 0 : -1}\n    >\n      {withIcon && (\n        <span {...ctx.getStyles('stepWrapper', stylesApi)}>\n          <span {...ctx.getStyles('stepIcon', stylesApi)} {...dataAttributes}>\n            <Transition mounted={state === 'stepCompleted'} transition=\"pop\" duration={200}>\n              {(transitionStyles) => (\n                <span\n                  {...ctx.getStyles('stepCompletedIcon', { style: transitionStyles, ...stylesApi })}\n                >\n                  {loading ? (\n                    <Loader\n                      color=\"var(--mantine-color-white)\"\n                      size=\"calc(var(--stepper-icon-size) / 2)\"\n                      {...ctx.getStyles('stepLoader', stylesApi)}\n                    />\n                  ) : (\n                    getStepFragment(completedIcon, step) || <CheckIcon size=\"60%\" />\n                  )}\n                </span>\n              )}\n            </Transition>\n\n            {state !== 'stepCompleted' ? (\n              <span {...ctx.getStyles('stepIconContent', stylesApi)}>\n                {loading ? (\n                  <Loader\n                    {...ctx.getStyles('stepLoader', stylesApi)}\n                    size=\"calc(var(--stepper-icon-size) / 2)\"\n                    color={color}\n                  />\n                ) : (\n                  getStepFragment(_icon || icon, step)\n                )}\n              </span>\n            ) : null}\n          </span>\n          {orientation === 'vertical' && (\n            <span\n              {...ctx.getStyles('verticalSeparator', stylesApi)}\n              data-active={state === 'stepCompleted' || undefined}\n            />\n          )}\n        </span>\n      )}\n\n      {(label || description) && (\n        <span\n          {...ctx.getStyles('stepBody', stylesApi)}\n          data-orientation={ctx.orientation}\n          data-icon-position={iconPosition || ctx.iconPosition}\n        >\n          {label && (\n            <span {...ctx.getStyles('stepLabel', stylesApi)}>{getStepFragment(label, step)}</span>\n          )}\n          {description && (\n            <span {...ctx.getStyles('stepDescription', stylesApi)}>\n              {getStepFragment(description, step)}\n            </span>\n          )}\n        </span>\n      )}\n    </UnstyledButton>\n  );\n});\n\nStepperStep.classes = classes;\nStepperStep.displayName = '@mantine/core/StepperStep';\n"],"mappings":";;;;;;;;;;;;;AAmBA,MAAM,mBACJ,UACA,SACG;AACH,KAAI,OAAO,aAAa,WACtB,QAAO,oBAAC,UAAD,EAAU,MAAM,QAAQ,GAAK,CAAA;AAGtC,QAAO;;AAyET,MAAM,eAAe;CACnB,UAAU;CACV,gBAAgB;CAChB,cAAc;CACf;AAED,MAAa,cAAc,SAA6B,UAAU;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,MACA,OACA,OACA,MACA,eACA,cACA,OACA,aACA,UACA,UACA,SACA,gBACA,iBACA,cACA,aACA,KACA,GAAG,WACD,SAAS,eAAe,cAAc,MAAM;CAEhD,MAAM,MAAM,mBAAmB;CAC/B,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,YAAY;EAAE;EAAY;EAAQ;CAExC,MAAM,QAAQ,UAAU,kBAAkB,OAAO,UAAU,iBAAiB,eAAe;CAC3F,MAAM,iBAAiB;EACrB,iBAAiB,UAAU,kBAAkB,KAAA;EAC7C,kBAAkB,UAAU,mBAAmB,KAAA;EAChD;AAED,QACE,qBAAC,gBAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO,SAAS,IAAI;GAAa,GAAG;GAAW,CAAC;EACvF,KAAK,CACH;GAAE,iBAAiB,gBAAgB,IAAI;GAAc,eAAe;GAAgB,EACpF,IACD;EACD,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,gBAAgB,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA,GAAW;EAC3E,UAAU,iBAAiB,IAAI;YATjC,CAWG,YACC,qBAAC,QAAD;GAAM,GAAI,IAAI,UAAU,eAAe,UAAU;aAAjD,CACE,qBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,UAAU;IAAE,GAAI;cAApD,CACE,oBAAC,YAAD;KAAY,SAAS,UAAU;KAAiB,YAAW;KAAM,UAAU;gBACvE,qBACA,oBAAC,QAAD;MACE,GAAI,IAAI,UAAU,qBAAqB;OAAE,OAAO;OAAkB,GAAG;OAAW,CAAC;gBAEhF,UACC,oBAAC,QAAD;OACE,OAAM;OACN,MAAK;OACL,GAAI,IAAI,UAAU,cAAc,UAAU;OAC1C,CAAA,GAEF,gBAAgB,eAAe,KAAK,IAAI,oBAAC,WAAD,EAAW,MAAK,OAAQ,CAAA;MAE7D,CAAA;KAEE,CAAA,EAEZ,UAAU,kBACT,oBAAC,QAAD;KAAM,GAAI,IAAI,UAAU,mBAAmB,UAAU;eAClD,UACC,oBAAC,QAAD;MACE,GAAI,IAAI,UAAU,cAAc,UAAU;MAC1C,MAAK;MACE;MACP,CAAA,GAEF,gBAAgB,SAAS,MAAM,KAAK;KAEjC,CAAA,GACL,KACC;OACN,gBAAgB,cACf,oBAAC,QAAD;IACE,GAAI,IAAI,UAAU,qBAAqB,UAAU;IACjD,eAAa,UAAU,mBAAmB,KAAA;IAC1C,CAAA,CAEC;OAGP,SAAS,gBACT,qBAAC,QAAD;GACE,GAAI,IAAI,UAAU,YAAY,UAAU;GACxC,oBAAkB,IAAI;GACtB,sBAAoB,gBAAgB,IAAI;aAH1C,CAKG,SACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,aAAa,UAAU;cAAG,gBAAgB,OAAO,KAAK;IAAQ,CAAA,EAEvF,eACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,mBAAmB,UAAU;cAClD,gBAAgB,aAAa,KAAK;IAC9B,CAAA,CAEJ;KAEM;;EAEnB;AAEF,YAAY,UAAUA;AACtB,YAAY,cAAc"}
+{"version":3,"file":"StepperStep.mjs","names":["classes"],"sources":["../../../../src/components/Stepper/StepperStep/StepperStep.tsx"],"sourcesContent":["import {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { Loader } from '../../Loader';\nimport { Transition } from '../../Transition';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport type { StepFragmentComponent } from '../Stepper';\nimport { useStepperContext } from '../Stepper.context';\nimport classes from '../Stepper.module.css';\n\nconst getStepFragment = (\n  Fragment: StepFragmentComponent | React.ReactNode,\n  step: number | undefined\n) => {\n  if (typeof Fragment === 'function') {\n    return <Fragment step={step || 0} />;\n  }\n\n  return Fragment;\n};\n\nexport type StepperStepStylesNames =\n  | 'step'\n  | 'stepLoader'\n  | 'verticalSeparator'\n  | 'stepWrapper'\n  | 'stepIcon'\n  | 'stepCompletedIcon'\n  | 'stepIconContent'\n  | 'stepBody'\n  | 'stepLabel'\n  | 'stepDescription';\n\nexport interface StepperStepProps\n  extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {\n  /** 0-based step index, automatically set by Stepper component */\n  step?: number;\n\n  /** Step state, automatically set by Stepper component based on active prop. stepInactive: not reached, stepProgress: current, stepCompleted: passed */\n  state?: 'stepInactive' | 'stepProgress' | 'stepCompleted';\n\n  /** Key of `theme.colors`, by default controlled by Stepper component */\n  color?: MantineColor;\n\n  /** When false, hides the step icon. Useful for creating compact steppers with only labels @default true */\n  withIcon?: boolean;\n\n  /** Step icon, defaults to `step index + 1` when rendered within Stepper */\n  icon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is completed */\n  completedIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step icon displayed when step is in progress */\n  progressIcon?: React.ReactNode | StepFragmentComponent;\n\n  /** Step label, render after icon */\n  label?: React.ReactNode | StepFragmentComponent;\n\n  /** Step description */\n  description?: React.ReactNode | StepFragmentComponent;\n\n  /** Icon wrapper size */\n  iconSize?: string | number;\n\n  /** Icon position relative to step body, controlled by Stepper component */\n  iconPosition?: 'right' | 'left';\n\n  /** Indicates loading state of the step */\n  loading?: boolean;\n\n  /** Set to false to disable clicks on step */\n  allowStepClick?: boolean;\n\n  /** Should step selection be allowed */\n  allowStepSelect?: boolean;\n\n  /** Static selector base */\n  __staticSelector?: string;\n\n  /** Component orientation */\n  orientation?: 'vertical' | 'horizontal';\n}\n\nexport type StepperStepFactory = Factory<{\n  props: StepperStepProps;\n  ref: HTMLButtonElement;\n  stylesNames: StepperStepStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  withIcon: true,\n  allowStepClick: true,\n  iconPosition: 'left',\n} satisfies Partial<StepperStepProps>;\n\nexport const StepperStep = factory<StepperStepFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    step,\n    state,\n    color,\n    icon,\n    completedIcon,\n    progressIcon,\n    label,\n    description,\n    withIcon,\n    iconSize,\n    loading,\n    allowStepClick,\n    allowStepSelect,\n    iconPosition,\n    orientation,\n    mod,\n    ...others\n  } = useProps('StepperStep', defaultProps, props);\n\n  const ctx = useStepperContext();\n  const theme = useMantineTheme();\n  const stylesApi = { classNames, styles };\n\n  const _icon = state === 'stepCompleted' ? null : state === 'stepProgress' ? progressIcon : icon;\n  const dataAttributes = {\n    'data-progress': state === 'stepProgress' || undefined,\n    'data-completed': state === 'stepCompleted' || undefined,\n  };\n\n  return (\n    <UnstyledButton\n      {...ctx.getStyles('step', { className, style, variant: ctx.orientation, ...stylesApi })}\n      mod={[\n        { 'icon-position': iconPosition || ctx.iconPosition, 'allow-click': allowStepClick },\n        mod,\n      ]}\n      {...dataAttributes}\n      {...others}\n      __vars={{ '--step-color': color ? getThemeColor(color, theme) : undefined }}\n      tabIndex={allowStepClick ? 0 : -1}\n    >\n      {withIcon && (\n        <span {...ctx.getStyles('stepWrapper', stylesApi)}>\n          <span {...ctx.getStyles('stepIcon', stylesApi)} {...dataAttributes}>\n            <Transition mounted={state === 'stepCompleted'} transition=\"pop\" duration={200}>\n              {(transitionStyles) => (\n                <span\n                  {...ctx.getStyles('stepCompletedIcon', { style: transitionStyles, ...stylesApi })}\n                >\n                  {loading ? (\n                    <Loader\n                      color=\"var(--mantine-color-white)\"\n                      size=\"calc(var(--stepper-icon-size) / 2)\"\n                      {...ctx.getStyles('stepLoader', stylesApi)}\n                    />\n                  ) : (\n                    getStepFragment(completedIcon, step) || <CheckIcon size=\"60%\" />\n                  )}\n                </span>\n              )}\n            </Transition>\n\n            {state !== 'stepCompleted' ? (\n              <span {...ctx.getStyles('stepIconContent', stylesApi)}>\n                {loading ? (\n                  <Loader\n                    {...ctx.getStyles('stepLoader', stylesApi)}\n                    size=\"calc(var(--stepper-icon-size) / 2)\"\n                    color={color}\n                  />\n                ) : (\n                  getStepFragment(_icon || icon, step)\n                )}\n              </span>\n            ) : null}\n          </span>\n          {orientation === 'vertical' && (\n            <span\n              {...ctx.getStyles('verticalSeparator', stylesApi)}\n              data-active={state === 'stepCompleted' || undefined}\n            />\n          )}\n        </span>\n      )}\n\n      {(label || description) && (\n        <span\n          {...ctx.getStyles('stepBody', stylesApi)}\n          data-orientation={ctx.orientation}\n          data-icon-position={iconPosition || ctx.iconPosition}\n        >\n          {label && (\n            <span {...ctx.getStyles('stepLabel', stylesApi)}>{getStepFragment(label, step)}</span>\n          )}\n          {description && (\n            <span {...ctx.getStyles('stepDescription', stylesApi)}>\n              {getStepFragment(description, step)}\n            </span>\n          )}\n        </span>\n      )}\n    </UnstyledButton>\n  );\n});\n\nStepperStep.classes = classes;\nStepperStep.displayName = '@mantine/core/StepperStep';\n"],"mappings":";;;;;;;;;;;;;AAmBA,MAAM,mBACJ,UACA,SACG;CACH,IAAI,OAAO,aAAa,YACtB,OAAO,oBAAC,UAAD,EAAU,MAAM,QAAQ,EAAI,CAAA;CAGrC,OAAO;AACT;AAwEA,MAAM,eAAe;CACnB,UAAU;CACV,gBAAgB;CAChB,cAAc;AAChB;AAEA,MAAa,cAAc,SAA6B,UAAU;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,MACA,OACA,OACA,MACA,eACA,cACA,OACA,aACA,UACA,UACA,SACA,gBACA,iBACA,cACA,aACA,KACA,GAAG,WACD,SAAS,eAAe,cAAc,KAAK;CAE/C,MAAM,MAAM,kBAAkB;CAC9B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,YAAY;EAAE;EAAY;CAAO;CAEvC,MAAM,QAAQ,UAAU,kBAAkB,OAAO,UAAU,iBAAiB,eAAe;CAC3F,MAAM,iBAAiB;EACrB,iBAAiB,UAAU,kBAAkB,KAAA;EAC7C,kBAAkB,UAAU,mBAAmB,KAAA;CACjD;CAEA,OACE,qBAAC,gBAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO,SAAS,IAAI;GAAa,GAAG;EAAU,CAAC;EACtF,KAAK,CACH;GAAE,iBAAiB,gBAAgB,IAAI;GAAc,eAAe;EAAe,GACnF,GACF;EACA,GAAI;EACJ,GAAI;EACJ,QAAQ,EAAE,gBAAgB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA,EAAU;EAC1E,UAAU,iBAAiB,IAAI;YATjC,CAWG,YACC,qBAAC,QAAD;GAAM,GAAI,IAAI,UAAU,eAAe,SAAS;aAAhD,CACE,qBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,SAAS;IAAG,GAAI;cAApD,CACE,oBAAC,YAAD;KAAY,SAAS,UAAU;KAAiB,YAAW;KAAM,UAAU;gBACvE,qBACA,oBAAC,QAAD;MACE,GAAI,IAAI,UAAU,qBAAqB;OAAE,OAAO;OAAkB,GAAG;MAAU,CAAC;gBAE/E,UACC,oBAAC,QAAD;OACE,OAAM;OACN,MAAK;OACL,GAAI,IAAI,UAAU,cAAc,SAAS;MAC1C,CAAA,IAED,gBAAgB,eAAe,IAAI,KAAK,oBAAC,WAAD,EAAW,MAAK,MAAO,CAAA;KAE7D,CAAA;IAEE,CAAA,GAEX,UAAU,kBACT,oBAAC,QAAD;KAAM,GAAI,IAAI,UAAU,mBAAmB,SAAS;eACjD,UACC,oBAAC,QAAD;MACE,GAAI,IAAI,UAAU,cAAc,SAAS;MACzC,MAAK;MACE;KACR,CAAA,IAED,gBAAgB,SAAS,MAAM,IAAI;IAEjC,CAAA,IACJ,IACA;OACL,gBAAgB,cACf,oBAAC,QAAD;IACE,GAAI,IAAI,UAAU,qBAAqB,SAAS;IAChD,eAAa,UAAU,mBAAmB,KAAA;GAC3C,CAAA,CAEC;OAGN,SAAS,gBACT,qBAAC,QAAD;GACE,GAAI,IAAI,UAAU,YAAY,SAAS;GACvC,oBAAkB,IAAI;GACtB,sBAAoB,gBAAgB,IAAI;aAH1C,CAKG,SACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,aAAa,SAAS;cAAI,gBAAgB,OAAO,IAAI;GAAQ,CAAA,GAEtF,eACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,mBAAmB,SAAS;cACjD,gBAAgB,aAAa,IAAI;GAC9B,CAAA,CAEJ;IAEM;;AAEpB,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,cAAc"}

package/esm/components/Switch/Switch.mjs

@@ -47,6 +47,11 @@ const Switch = factory((_props) => {
 	});
 	const { styleProps, rest } = extractStyleProps(others);
 	const uuid = useId$1(id);
+	const describedBy = [
+		description ? `${uuid}-description` : void 0,
+		error && typeof error !== "boolean" ? `${uuid}-error` : void 0,
+		rest["aria-describedby"]
+	].filter(Boolean).join(" ") || void 0;
 	const withContextProps = {
 		checked: ctx?.value.includes(rest.value) ?? checked,
 		onChange: (event) => {
@@ -98,6 +103,7 @@ const Switch = factory((_props) => {
 			type: "checkbox",
 			role: "switch",
 			inert: rest.inert,
+			"aria-describedby": describedBy,
 			...getStyles("input")
 		}), /* @__PURE__ */ jsxs(Box, {
 			"aria-hidden": "true",

package/esm/components/Switch/Switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.mjs","names":["useId","classes"],"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  SwitchGroup,\n  SwitchGroupContext,\n  type SwitchGroupProps,\n  type SwitchGroupStylesNames,\n  type SwitchGroupFactory,\n  type SwitchGroupContextValue,\n} from './SwitchGroup/SwitchGroup';\nimport classes from './Switch.module.css';\nexport type SwitchStylesNames =\n  | 'root'\n  | 'track'\n  | 'trackLabel'\n  | 'thumb'\n  | 'input'\n  | InlineInputStylesNames;\n\nexport type SwitchCssVariables = {\n  root:\n    | '--switch-radius'\n    | '--switch-height'\n    | '--switch-width'\n    | '--switch-thumb-size'\n    | '--switch-label-font-size'\n    | '--switch-track-label-padding'\n    | '--switch-color';\n};\n\nexport interface SwitchProps\n  extends BoxProps, StylesApiProps<SwitchFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Id used to bind input and label, if not passed, unique id will be generated instead */\n  id?: string;\n\n  /** Content of the label associated with the switch */\n  label?: React.ReactNode;\n\n  /** Inner label when the `Switch` is in unchecked state */\n  offLabel?: React.ReactNode;\n\n  /** Inner label when the `Switch` is in checked state */\n  onLabel?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of all elements */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Icon inside the thumb of the switch */\n  thumbIcon?: React.ReactNode;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description displayed below the label */\n  description?: React.ReactNode;\n\n  /** Error displayed below the label */\n  error?: React.ReactNode;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** If set, displays a colored dot inside the thumb that matches the track background color @default true */\n  withThumbIndicator?: boolean;\n}\n\nexport type SwitchFactory = Factory<{\n  props: SwitchProps;\n  ref: HTMLInputElement;\n  stylesNames: SwitchStylesNames;\n  vars: SwitchCssVariables;\n  staticComponents: {\n    Group: typeof SwitchGroup;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  withThumbIndicator: true,\n} satisfies Partial<SwitchProps>;\n\nconst varsResolver = createVarsResolver<SwitchFactory>((theme, { radius, color, size }) => ({\n  root: {\n    '--switch-radius': radius === undefined ? undefined : getRadius(radius),\n    '--switch-height': getSize(size, 'switch-height'),\n    '--switch-width': getSize(size, 'switch-width'),\n    '--switch-thumb-size': getSize(size, 'switch-thumb-size'),\n    '--switch-label-font-size': getSize(size, 'switch-label-font-size'),\n    '--switch-track-label-padding': getSize(size, 'switch-track-label-padding'),\n    '--switch-color': color ? getThemeColor(color, theme) : undefined,\n  },\n}));\n\nexport const Switch = factory<SwitchFactory>((_props) => {\n  const props = useProps('Switch', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    offLabel,\n    onLabel,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    thumbIcon,\n    checked,\n    defaultChecked,\n    onChange,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    rootRef,\n    mod,\n    withThumbIndicator,\n    attributes,\n    ...others\n  } = props;\n\n  const ctx = use(SwitchGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<SwitchFactory>({\n    name: 'Switch',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const _disabled = disabled || ctx?.isDisabled?.(rest.value as string);\n\n  const [_checked, handleChange] = useUncontrolled({\n    value: withContextProps.checked ?? checked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n  });\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Switch\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={_disabled}\n      bodyElement=\"label\"\n      labelElement=\"span\"\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <input\n        {...rest}\n        {...withContextProps}\n        disabled={_disabled}\n        checked={_checked}\n        data-checked={withContextProps.checked}\n        onChange={(event) => {\n          withContextProps.onChange?.(event);\n          handleChange(event.currentTarget.checked);\n        }}\n        id={uuid}\n        type=\"checkbox\"\n        role=\"switch\"\n        inert={rest.inert}\n        {...getStyles('input')}\n      />\n\n      <Box\n        aria-hidden=\"true\"\n        component=\"span\"\n        mod={{ error, 'label-position': labelPosition, 'without-labels': !onLabel && !offLabel }}\n        {...getStyles('track')}\n      >\n        <Box\n          component=\"span\"\n          mod={{ 'reduce-motion': true, 'with-thumb-indicator': withThumbIndicator && !thumbIcon }}\n          {...getStyles('thumb')}\n        >\n          {thumbIcon}\n        </Box>\n        <span {...getStyles('trackLabel')}>{_checked ? onLabel : offLabel}</span>\n      </Box>\n    </InlineInput>\n  );\n});\n\nSwitch.classes = { ...classes, ...InlineInputClasses };\nSwitch.varsResolver = varsResolver;\nSwitch.displayName = '@mantine/core/Switch';\nSwitch.Group = SwitchGroup;\n\nexport namespace Switch {\n  export type Props = SwitchProps;\n  export type StylesNames = SwitchStylesNames;\n  export type CssVariables = SwitchCssVariables;\n  export type Factory = SwitchFactory;\n\n  export namespace Group {\n    export type Props = SwitchGroupProps;\n    export type StylesNames = SwitchGroupStylesNames;\n    export type Factory = SwitchGroupFactory;\n    export type Context = SwitchGroupContextValue;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyGA,MAAM,eAAe;CACnB,eAAe;CACf,oBAAoB;CACrB;AAED,MAAM,eAAe,oBAAmC,OAAO,EAAE,QAAQ,OAAO,YAAY,EAC1F,MAAM;CACJ,mBAAmB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;CACvE,mBAAmB,QAAQ,MAAM,gBAAgB;CACjD,kBAAkB,QAAQ,MAAM,eAAe;CAC/C,uBAAuB,QAAQ,MAAM,oBAAoB;CACzD,4BAA4B,QAAQ,MAAM,yBAAyB;CACnE,gCAAgC,QAAQ,MAAM,6BAA6B;CAC3E,kBAAkB,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA;CACzD,EACF,EAAE;AAEH,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,cAAc,OAAO;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,UACA,SACA,IACA,MACA,QACA,cACA,WACA,SACA,gBACA,UACA,eACA,aACA,OACA,UACA,SACA,SACA,KACA,oBACA,YACA,GAAG,WACD;CAEJ,MAAM,MAAM,IAAI,mBAAmB;CACnC,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,YAAY,SAAS,kBAAkB,OAAO;CACtD,MAAM,OAAOA,QAAM,GAAG;CAEtB,MAAM,mBAAmB;EACvB,SAAS,KAAK,MAAM,SAAS,KAAK,MAAgB,IAAI;EACtD,WAAW,UAA+C;AACxD,QAAK,SAAS,MAAM;AACpB,cAAW,MAAM;;EAEpB;CAED,MAAM,YAAY,YAAY,KAAK,aAAa,KAAK,MAAgB;CAErE,MAAM,CAAC,UAAU,gBAAgB,gBAAgB;EAC/C,OAAO,iBAAiB,WAAW;EACnC,cAAc;EACd,YAAY;EACb,CAAC;AAEF,QACE,qBAAC,aAAD;EACE,GAAI,UAAU,OAAO;EACrB,kBAAiB;EACjB,kBAAkB;EAClB,IAAI;EACJ,MAAM;EACS;EACR;EACM;EACN;EACP,UAAU;EACV,aAAY;EACZ,cAAa;EACD;EACJ;EACE;EACV,gBAAc,iBAAiB;EACtB;EACT,KAAK;EACA;EACO;EACZ,OAAO,KAAK;EACZ,GAAI;EACJ,GAAI;YAvBN,CAyBE,oBAAC,SAAD;GACE,GAAI;GACJ,GAAI;GACJ,UAAU;GACV,SAAS;GACT,gBAAc,iBAAiB;GAC/B,WAAW,UAAU;AACnB,qBAAiB,WAAW,MAAM;AAClC,iBAAa,MAAM,cAAc,QAAQ;;GAE3C,IAAI;GACJ,MAAK;GACL,MAAK;GACL,OAAO,KAAK;GACZ,GAAI,UAAU,QAAQ;GACtB,CAAA,EAEF,qBAAC,KAAD;GACE,eAAY;GACZ,WAAU;GACV,KAAK;IAAE;IAAO,kBAAkB;IAAe,kBAAkB,CAAC,WAAW,CAAC;IAAU;GACxF,GAAI,UAAU,QAAQ;aAJxB,CAME,oBAAC,KAAD;IACE,WAAU;IACV,KAAK;KAAE,iBAAiB;KAAM,wBAAwB,sBAAsB,CAAC;KAAW;IACxF,GAAI,UAAU,QAAQ;cAErB;IACG,CAAA,EACN,oBAAC,QAAD;IAAM,GAAI,UAAU,aAAa;cAAG,WAAW,UAAU;IAAgB,CAAA,CACrE;KACM;;EAEhB;AAEF,OAAO,UAAU;CAAE,GAAGC;CAAS,GAAG;CAAoB;AACtD,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,QAAQ"}
+{"version":3,"file":"Switch.mjs","names":["useId","classes"],"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  SwitchGroup,\n  SwitchGroupContext,\n  type SwitchGroupProps,\n  type SwitchGroupStylesNames,\n  type SwitchGroupFactory,\n  type SwitchGroupContextValue,\n} from './SwitchGroup/SwitchGroup';\nimport classes from './Switch.module.css';\nexport type SwitchStylesNames =\n  | 'root'\n  | 'track'\n  | 'trackLabel'\n  | 'thumb'\n  | 'input'\n  | InlineInputStylesNames;\n\nexport type SwitchCssVariables = {\n  root:\n    | '--switch-radius'\n    | '--switch-height'\n    | '--switch-width'\n    | '--switch-thumb-size'\n    | '--switch-label-font-size'\n    | '--switch-track-label-padding'\n    | '--switch-color';\n};\n\nexport interface SwitchProps\n  extends BoxProps, StylesApiProps<SwitchFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Id used to bind input and label, if not passed, unique id will be generated instead */\n  id?: string;\n\n  /** Content of the label associated with the switch */\n  label?: React.ReactNode;\n\n  /** Inner label when the `Switch` is in unchecked state */\n  offLabel?: React.ReactNode;\n\n  /** Inner label when the `Switch` is in checked state */\n  onLabel?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of all elements */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Icon inside the thumb of the switch */\n  thumbIcon?: React.ReactNode;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description displayed below the label */\n  description?: React.ReactNode;\n\n  /** Error displayed below the label */\n  error?: React.ReactNode;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** If set, displays a colored dot inside the thumb that matches the track background color @default true */\n  withThumbIndicator?: boolean;\n}\n\nexport type SwitchFactory = Factory<{\n  props: SwitchProps;\n  ref: HTMLInputElement;\n  stylesNames: SwitchStylesNames;\n  vars: SwitchCssVariables;\n  staticComponents: {\n    Group: typeof SwitchGroup;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  withThumbIndicator: true,\n} satisfies Partial<SwitchProps>;\n\nconst varsResolver = createVarsResolver<SwitchFactory>((theme, { radius, color, size }) => ({\n  root: {\n    '--switch-radius': radius === undefined ? undefined : getRadius(radius),\n    '--switch-height': getSize(size, 'switch-height'),\n    '--switch-width': getSize(size, 'switch-width'),\n    '--switch-thumb-size': getSize(size, 'switch-thumb-size'),\n    '--switch-label-font-size': getSize(size, 'switch-label-font-size'),\n    '--switch-track-label-padding': getSize(size, 'switch-track-label-padding'),\n    '--switch-color': color ? getThemeColor(color, theme) : undefined,\n  },\n}));\n\nexport const Switch = factory<SwitchFactory>((_props) => {\n  const props = useProps('Switch', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    offLabel,\n    onLabel,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    thumbIcon,\n    checked,\n    defaultChecked,\n    onChange,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    rootRef,\n    mod,\n    withThumbIndicator,\n    attributes,\n    ...others\n  } = props;\n\n  const ctx = use(SwitchGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<SwitchFactory>({\n    name: 'Switch',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n  const descriptionId = description ? `${uuid}-description` : undefined;\n  const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n  const describedBy =\n    [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const _disabled = disabled || ctx?.isDisabled?.(rest.value as string);\n\n  const [_checked, handleChange] = useUncontrolled({\n    value: withContextProps.checked ?? checked,\n    defaultValue: defaultChecked,\n    finalValue: false,\n  });\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Switch\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={_disabled}\n      bodyElement=\"label\"\n      labelElement=\"span\"\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <input\n        {...rest}\n        {...withContextProps}\n        disabled={_disabled}\n        checked={_checked}\n        data-checked={withContextProps.checked}\n        onChange={(event) => {\n          withContextProps.onChange?.(event);\n          handleChange(event.currentTarget.checked);\n        }}\n        id={uuid}\n        type=\"checkbox\"\n        role=\"switch\"\n        inert={rest.inert}\n        aria-describedby={describedBy}\n        {...getStyles('input')}\n      />\n\n      <Box\n        aria-hidden=\"true\"\n        component=\"span\"\n        mod={{ error, 'label-position': labelPosition, 'without-labels': !onLabel && !offLabel }}\n        {...getStyles('track')}\n      >\n        <Box\n          component=\"span\"\n          mod={{ 'reduce-motion': true, 'with-thumb-indicator': withThumbIndicator && !thumbIcon }}\n          {...getStyles('thumb')}\n        >\n          {thumbIcon}\n        </Box>\n        <span {...getStyles('trackLabel')}>{_checked ? onLabel : offLabel}</span>\n      </Box>\n    </InlineInput>\n  );\n});\n\nSwitch.classes = { ...classes, ...InlineInputClasses };\nSwitch.varsResolver = varsResolver;\nSwitch.displayName = '@mantine/core/Switch';\nSwitch.Group = SwitchGroup;\n\nexport namespace Switch {\n  export type Props = SwitchProps;\n  export type StylesNames = SwitchStylesNames;\n  export type CssVariables = SwitchCssVariables;\n  export type Factory = SwitchFactory;\n\n  export namespace Group {\n    export type Props = SwitchGroupProps;\n    export type StylesNames = SwitchGroupStylesNames;\n    export type Factory = SwitchGroupFactory;\n    export type Context = SwitchGroupContextValue;\n  }\n}\n"],"mappings":"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"}

package/esm/components/Switch/SwitchGroup/SwitchGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchGroup.mjs","names":[],"sources":["../../../../src/components/Switch/SwitchGroup/SwitchGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  DataAttributes,\n  Factory,\n  genericFactory,\n  MantineSize,\n  Primitive,\n  useProps,\n} from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface SwitchGroupContextValue<Value extends Primitive = string> {\n  value: Value[];\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  size: MantineSize | (string & {}) | undefined;\n  isDisabled?: (value: Value) => boolean;\n}\n\nexport const SwitchGroupContext = createContext<SwitchGroupContextValue | null>(null);\n\nexport type SwitchGroupStylesNames = InputWrapperStylesNames;\n\nexport interface SwitchGroupProps<Value extends Primitive = string> extends Omit<\n  InputWrapperProps,\n  'onChange' | 'value' | 'defaultValue'\n> {\n  /** `Switch` components */\n  children: React.ReactNode;\n\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Default value for uncontrolled component */\n  defaultValue?: Value[];\n\n  /** Called when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Props passed down to the `Input.Wrapper` */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Controls size of the `Input.Wrapper` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** If set, value cannot be changed */\n  readOnly?: boolean;\n\n  /** `name` attribute of the hidden input for uncontrolled forms */\n  name?: string;\n\n  /** Props passed down to the hidden input for uncontrolled forms */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Separator for values in the hidden input for uncontrolled forms @default ',' */\n  hiddenInputValuesSeparator?: string;\n\n  /** Maximum number of switches that can be selected. When the limit is reached, unselected switches will be disabled */\n  maxSelectedValues?: number;\n\n  /** Sets `disabled` attribute, prevents interactions */\n  disabled?: boolean;\n}\n\nexport type SwitchGroupFactory = Factory<{\n  props: SwitchGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: SwitchGroupStylesNames;\n  signature: <Value extends Primitive = string>(\n    props: SwitchGroupProps<Value>\n  ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  hiddenInputValuesSeparator: ',',\n} satisfies Partial<SwitchGroupProps>;\n\nexport const SwitchGroup = genericFactory<SwitchGroupFactory>(((\n  props: SwitchGroupProps<string>\n) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    size,\n    wrapperProps,\n    children,\n    readOnly,\n    name,\n    hiddenInputValuesSeparator,\n    hiddenInputProps,\n    maxSelectedValues,\n    disabled,\n    ...others\n  } = useProps('SwitchGroup', defaultProps, props);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const itemValue = event.currentTarget.value;\n\n    if (readOnly) {\n      return;\n    }\n\n    const isCurrentlySelected = _value.includes(itemValue);\n\n    if (!isCurrentlySelected && maxSelectedValues && _value.length >= maxSelectedValues) {\n      return;\n    }\n\n    setValue(\n      isCurrentlySelected ? _value.filter((item) => item !== itemValue) : [..._value, itemValue]\n    );\n  };\n\n  const isDisabled = (switchValue: string) => {\n    if (disabled) {\n      return true;\n    }\n\n    if (!maxSelectedValues) {\n      return false;\n    }\n\n    const isCurrentlySelected = _value.includes(switchValue);\n    const hasReachedLimit = _value.length >= maxSelectedValues;\n    return !isCurrentlySelected && hasReachedLimit;\n  };\n\n  const hiddenInputValue = _value.join(hiddenInputValuesSeparator);\n\n  return (\n    <SwitchGroupContext value={{ value: _value, onChange: handleChange, size, isDisabled }}>\n      <Input.Wrapper\n        size={size}\n        {...wrapperProps}\n        {...others}\n        labelElement=\"div\"\n        __staticSelector=\"SwitchGroup\"\n      >\n        <InputsGroupFieldset role=\"group\">{children}</InputsGroupFieldset>\n        <input type=\"hidden\" name={name} value={hiddenInputValue} {...hiddenInputProps} />\n      </Input.Wrapper>\n    </SwitchGroupContext>\n  );\n}) as any);\n\nSwitchGroup.classes = Input.Wrapper.classes;\nSwitchGroup.displayName = '@mantine/core/SwitchGroup';\n"],"mappings":";;;;;;;;;AAoBA,MAAa,qBAAqB,cAA8C,KAAK;AAsDrF,MAAM,eAAe,EACnB,4BAA4B,KAC7B;AAED,MAAa,cAAc,iBACzB,UACG;CACH,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,UACA,MACA,4BACA,kBACA,mBACA,UACA,GAAG,WACD,SAAS,eAAe,cAAc,MAAM;CAEhD,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,EAAE;EACd;EACD,CAAC;CAEF,MAAM,gBAAgB,UAA+C;EACnE,MAAM,YAAY,MAAM,cAAc;AAEtC,MAAI,SACF;EAGF,MAAM,sBAAsB,OAAO,SAAS,UAAU;AAEtD,MAAI,CAAC,uBAAuB,qBAAqB,OAAO,UAAU,kBAChE;AAGF,WACE,sBAAsB,OAAO,QAAQ,SAAS,SAAS,UAAU,GAAG,CAAC,GAAG,QAAQ,UAAU,CAC3F;;CAGH,MAAM,cAAc,gBAAwB;AAC1C,MAAI,SACF,QAAO;AAGT,MAAI,CAAC,kBACH,QAAO;EAGT,MAAM,sBAAsB,OAAO,SAAS,YAAY;EACxD,MAAM,kBAAkB,OAAO,UAAU;AACzC,SAAO,CAAC,uBAAuB;;CAGjC,MAAM,mBAAmB,OAAO,KAAK,2BAA2B;AAEhE,QACE,oBAAC,oBAAD;EAAoB,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM;GAAY;YACpF,qBAAC,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;aALnB,CAOE,oBAAC,qBAAD;IAAqB,MAAK;IAAS;IAA+B,CAAA,EAClE,oBAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAkB,GAAI;IAAoB,CAAA,CACpE;;EACG,CAAA;GAEf;AAEV,YAAY,UAAU,MAAM,QAAQ;AACpC,YAAY,cAAc"}
+{"version":3,"file":"SwitchGroup.mjs","names":[],"sources":["../../../../src/components/Switch/SwitchGroup/SwitchGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  DataAttributes,\n  Factory,\n  genericFactory,\n  MantineSize,\n  Primitive,\n  useProps,\n} from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface SwitchGroupContextValue<Value extends Primitive = string> {\n  value: Value[];\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  size: MantineSize | (string & {}) | undefined;\n  isDisabled?: (value: Value) => boolean;\n}\n\nexport const SwitchGroupContext = createContext<SwitchGroupContextValue | null>(null);\n\nexport type SwitchGroupStylesNames = InputWrapperStylesNames;\n\nexport interface SwitchGroupProps<Value extends Primitive = string> extends Omit<\n  InputWrapperProps,\n  'onChange' | 'value' | 'defaultValue'\n> {\n  /** `Switch` components */\n  children: React.ReactNode;\n\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Default value for uncontrolled component */\n  defaultValue?: Value[];\n\n  /** Called when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Props passed down to the `Input.Wrapper` */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Controls size of the `Input.Wrapper` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** If set, value cannot be changed */\n  readOnly?: boolean;\n\n  /** `name` attribute of the hidden input for uncontrolled forms */\n  name?: string;\n\n  /** Props passed down to the hidden input for uncontrolled forms */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Separator for values in the hidden input for uncontrolled forms @default ',' */\n  hiddenInputValuesSeparator?: string;\n\n  /** Maximum number of switches that can be selected. When the limit is reached, unselected switches will be disabled */\n  maxSelectedValues?: number;\n\n  /** Sets `disabled` attribute, prevents interactions */\n  disabled?: boolean;\n}\n\nexport type SwitchGroupFactory = Factory<{\n  props: SwitchGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: SwitchGroupStylesNames;\n  signature: <Value extends Primitive = string>(\n    props: SwitchGroupProps<Value>\n  ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  hiddenInputValuesSeparator: ',',\n} satisfies Partial<SwitchGroupProps>;\n\nexport const SwitchGroup = genericFactory<SwitchGroupFactory>(((\n  props: SwitchGroupProps<string>\n) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    size,\n    wrapperProps,\n    children,\n    readOnly,\n    name,\n    hiddenInputValuesSeparator,\n    hiddenInputProps,\n    maxSelectedValues,\n    disabled,\n    ...others\n  } = useProps('SwitchGroup', defaultProps, props);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const itemValue = event.currentTarget.value;\n\n    if (readOnly) {\n      return;\n    }\n\n    const isCurrentlySelected = _value.includes(itemValue);\n\n    if (!isCurrentlySelected && maxSelectedValues && _value.length >= maxSelectedValues) {\n      return;\n    }\n\n    setValue(\n      isCurrentlySelected ? _value.filter((item) => item !== itemValue) : [..._value, itemValue]\n    );\n  };\n\n  const isDisabled = (switchValue: string) => {\n    if (disabled) {\n      return true;\n    }\n\n    if (!maxSelectedValues) {\n      return false;\n    }\n\n    const isCurrentlySelected = _value.includes(switchValue);\n    const hasReachedLimit = _value.length >= maxSelectedValues;\n    return !isCurrentlySelected && hasReachedLimit;\n  };\n\n  const hiddenInputValue = _value.join(hiddenInputValuesSeparator);\n\n  return (\n    <SwitchGroupContext value={{ value: _value, onChange: handleChange, size, isDisabled }}>\n      <Input.Wrapper\n        size={size}\n        {...wrapperProps}\n        {...others}\n        labelElement=\"div\"\n        __staticSelector=\"SwitchGroup\"\n      >\n        <InputsGroupFieldset role=\"group\">{children}</InputsGroupFieldset>\n        <input type=\"hidden\" name={name} value={hiddenInputValue} {...hiddenInputProps} />\n      </Input.Wrapper>\n    </SwitchGroupContext>\n  );\n}) as any);\n\nSwitchGroup.classes = Input.Wrapper.classes;\nSwitchGroup.displayName = '@mantine/core/SwitchGroup';\n"],"mappings":";;;;;;;;;AAoBA,MAAa,qBAAqB,cAA8C,IAAI;AAsDpF,MAAM,eAAe,EACnB,4BAA4B,IAC9B;AAEA,MAAa,cAAc,iBACzB,UACG;CACH,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,UACA,MACA,4BACA,kBACA,mBACA,UACA,GAAG,WACD,SAAS,eAAe,cAAc,KAAK;CAE/C,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,gBAAgB,UAA+C;EACnE,MAAM,YAAY,MAAM,cAAc;EAEtC,IAAI,UACF;EAGF,MAAM,sBAAsB,OAAO,SAAS,SAAS;EAErD,IAAI,CAAC,uBAAuB,qBAAqB,OAAO,UAAU,mBAChE;EAGF,SACE,sBAAsB,OAAO,QAAQ,SAAS,SAAS,SAAS,IAAI,CAAC,GAAG,QAAQ,SAAS,CAC3F;CACF;CAEA,MAAM,cAAc,gBAAwB;EAC1C,IAAI,UACF,OAAO;EAGT,IAAI,CAAC,mBACH,OAAO;EAGT,MAAM,sBAAsB,OAAO,SAAS,WAAW;EACvD,MAAM,kBAAkB,OAAO,UAAU;EACzC,OAAO,CAAC,uBAAuB;CACjC;CAEA,MAAM,mBAAmB,OAAO,KAAK,0BAA0B;CAE/D,OACE,oBAAC,oBAAD;EAAoB,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM;EAAW;YACnF,qBAAC,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;aALnB,CAOE,oBAAC,qBAAD;IAAqB,MAAK;IAAS;GAA8B,CAAA,GACjE,oBAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAkB,GAAI;GAAmB,CAAA,CACpE;;CACG,CAAA;AAExB,EAAS;AAET,YAAY,UAAU,MAAM,QAAQ;AACpC,YAAY,cAAc"}

package/esm/components/Table/Table.components.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.components.mjs","names":["classes"],"sources":["../../../src/components/Table/Table.components.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  FactoryPayload,\n  useProps,\n} from '../../core';\nimport type { TableFactory } from './Table';\nimport { TableContextValue, useTableContext } from './Table.context';\nimport classes from './Table.module.css';\n\nexport interface TableElementProps<Selector extends string>\n  extends\n    BoxProps,\n    CompoundStylesApiProps<Omit<TableFactory, 'stylesNames'> & { stylesNames: Selector }> {}\n\nexport interface TableThProps extends TableElementProps<'th'>, ElementProps<'th'> {}\nexport interface TableTdProps extends TableElementProps<'td'>, ElementProps<'td'> {}\nexport interface TableTrProps extends TableElementProps<'tr'>, ElementProps<'tr'> {}\nexport interface TableTheadProps extends TableElementProps<'thead'>, ElementProps<'thead'> {}\nexport interface TableTbodyProps extends TableElementProps<'tbody'>, ElementProps<'tbody'> {}\nexport interface TableTfootProps extends TableElementProps<'tfoot'>, ElementProps<'tfoot'> {}\nexport interface TableCaptionProps extends TableElementProps<'caption'>, ElementProps<'caption'> {}\n\nexport type TableThFactory = Factory<{\n  props: TableThProps;\n  ref: HTMLTableCellElement;\n  stylesNames: 'th';\n  compound: true;\n}>;\n\nexport type TableTdFactory = Factory<{\n  props: TableTdProps;\n  ref: HTMLTableCellElement;\n  stylesNames: 'td';\n  compound: true;\n}>;\n\nexport type TableTrFactory = Factory<{\n  props: TableTrProps;\n  ref: HTMLTableRowElement;\n  stylesNames: 'tr';\n  compound: true;\n}>;\n\nexport type TableTheadFactory = Factory<{\n  props: TableTheadProps;\n  ref: HTMLTableSectionElement;\n  stylesNames: 'thead';\n  compound: true;\n}>;\n\nexport type TableTbodyFactory = Factory<{\n  props: TableTbodyProps;\n  ref: HTMLTableSectionElement;\n  stylesNames: 'tbody';\n  compound: true;\n}>;\n\nexport type TableTfootFactory = Factory<{\n  props: TableTfootProps;\n  ref: HTMLTableSectionElement;\n  stylesNames: 'tfoot';\n  compound: true;\n}>;\n\nexport type TableCaptionFactory = Factory<{\n  props: TableCaptionProps;\n  ref: HTMLTableCaptionElement;\n  stylesNames: 'caption';\n  compound: true;\n}>;\n\ninterface TableElementOptions {\n  columnBorder?: true;\n  rowBorder?: true;\n  striped?: true;\n  highlightOnHover?: true;\n  captionSide?: true;\n  stickyHeader?: true;\n}\n\nfunction getDataAttributes(ctx: TableContextValue, options?: TableElementOptions) {\n  if (!options) {\n    return undefined;\n  }\n\n  const data: Record<string, boolean | string> = {};\n\n  if (options.columnBorder && ctx.withColumnBorders) {\n    data['data-with-column-border'] = true;\n  }\n\n  if (options.rowBorder && ctx.withRowBorders) {\n    data['data-with-row-border'] = true;\n  }\n\n  if (options.striped && ctx.striped) {\n    data['data-striped'] = ctx.striped;\n  }\n\n  if (options.highlightOnHover && ctx.highlightOnHover) {\n    data['data-hover'] = true;\n  }\n\n  if (options.captionSide && ctx.captionSide) {\n    data['data-side'] = ctx.captionSide;\n  }\n\n  if (options.stickyHeader && ctx.stickyHeader) {\n    data['data-sticky'] = true;\n  }\n\n  return data;\n}\n\nexport function tableElement<Factory extends FactoryPayload>(\n  element: 'th' | 'td' | 'tr' | 'thead' | 'tbody' | 'tfoot' | 'caption',\n  options?: TableElementOptions\n) {\n  const name = `Table${element.charAt(0).toUpperCase()}${element.slice(1)}`;\n  const Component = factory<Factory>((_props) => {\n    const props = useProps(name, {}, _props);\n    const { classNames, className, style, styles, ...others } = props;\n\n    const ctx = useTableContext();\n\n    return (\n      <Box\n        component={element}\n        {...getDataAttributes(ctx, options)}\n        {...ctx.getStyles(element, { className, classNames, style, styles, props })}\n        {...others}\n      />\n    );\n  });\n\n  Component.displayName = `@mantine/core/${name}`;\n  Component.classes = classes;\n  return Component;\n}\n\nexport const TableTh = tableElement<TableThFactory>('th', { columnBorder: true });\nexport const TableTd = tableElement<TableTdFactory>('td', { columnBorder: true });\nexport const TableTr = tableElement<TableTrFactory>('tr', {\n  rowBorder: true,\n  striped: true,\n  highlightOnHover: true,\n});\nexport const TableThead = tableElement<TableTheadFactory>('thead', { stickyHeader: true });\nexport const TableTbody = tableElement<TableTbodyFactory>('tbody');\nexport const TableTfoot = tableElement<TableTfootFactory>('tfoot');\nexport const TableCaption = tableElement<TableCaptionFactory>('caption', { captionSide: true });\n"],"mappings":";;;;;;;;AAqFA,SAAS,kBAAkB,KAAwB,SAA+B;AAChF,KAAI,CAAC,QACH;CAGF,MAAM,OAAyC,EAAE;AAEjD,KAAI,QAAQ,gBAAgB,IAAI,kBAC9B,MAAK,6BAA6B;AAGpC,KAAI,QAAQ,aAAa,IAAI,eAC3B,MAAK,0BAA0B;AAGjC,KAAI,QAAQ,WAAW,IAAI,QACzB,MAAK,kBAAkB,IAAI;AAG7B,KAAI,QAAQ,oBAAoB,IAAI,iBAClC,MAAK,gBAAgB;AAGvB,KAAI,QAAQ,eAAe,IAAI,YAC7B,MAAK,eAAe,IAAI;AAG1B,KAAI,QAAQ,gBAAgB,IAAI,aAC9B,MAAK,iBAAiB;AAGxB,QAAO;;AAGT,SAAgB,aACd,SACA,SACA;CACA,MAAM,OAAO,QAAQ,QAAQ,OAAO,EAAE,CAAC,aAAa,GAAG,QAAQ,MAAM,EAAE;CACvE,MAAM,YAAY,SAAkB,WAAW;EAC7C,MAAM,QAAQ,SAAS,MAAM,EAAE,EAAE,OAAO;EACxC,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,GAAG,WAAW;EAE5D,MAAM,MAAM,iBAAiB;AAE7B,SACE,oBAAC,KAAD;GACE,WAAW;GACX,GAAI,kBAAkB,KAAK,QAAQ;GACnC,GAAI,IAAI,UAAU,SAAS;IAAE;IAAW;IAAY;IAAO;IAAQ;IAAO,CAAC;GAC3E,GAAI;GACJ,CAAA;GAEJ;AAEF,WAAU,cAAc,iBAAiB;AACzC,WAAU,UAAUA;AACpB,QAAO;;AAGT,MAAa,UAAU,aAA6B,MAAM,EAAE,cAAc,MAAM,CAAC;AACjF,MAAa,UAAU,aAA6B,MAAM,EAAE,cAAc,MAAM,CAAC;AACjF,MAAa,UAAU,aAA6B,MAAM;CACxD,WAAW;CACX,SAAS;CACT,kBAAkB;CACnB,CAAC;AACF,MAAa,aAAa,aAAgC,SAAS,EAAE,cAAc,MAAM,CAAC;AAC1F,MAAa,aAAa,aAAgC,QAAQ;AAClE,MAAa,aAAa,aAAgC,QAAQ;AAClE,MAAa,eAAe,aAAkC,WAAW,EAAE,aAAa,MAAM,CAAC"}
+{"version":3,"file":"Table.components.mjs","names":["classes"],"sources":["../../../src/components/Table/Table.components.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  FactoryPayload,\n  useProps,\n} from '../../core';\nimport type { TableFactory } from './Table';\nimport { TableContextValue, useTableContext } from './Table.context';\nimport classes from './Table.module.css';\n\nexport interface TableElementProps<Selector extends string>\n  extends\n    BoxProps,\n    CompoundStylesApiProps<Omit<TableFactory, 'stylesNames'> & { stylesNames: Selector }> {}\n\nexport interface TableThProps extends TableElementProps<'th'>, ElementProps<'th'> {}\nexport interface TableTdProps extends TableElementProps<'td'>, ElementProps<'td'> {}\nexport interface TableTrProps extends TableElementProps<'tr'>, ElementProps<'tr'> {}\nexport interface TableTheadProps extends TableElementProps<'thead'>, ElementProps<'thead'> {}\nexport interface TableTbodyProps extends TableElementProps<'tbody'>, ElementProps<'tbody'> {}\nexport interface TableTfootProps extends TableElementProps<'tfoot'>, ElementProps<'tfoot'> {}\nexport interface TableCaptionProps extends TableElementProps<'caption'>, ElementProps<'caption'> {}\n\nexport type TableThFactory = Factory<{\n  props: TableThProps;\n  ref: HTMLTableCellElement;\n  stylesNames: 'th';\n  compound: true;\n}>;\n\nexport type TableTdFactory = Factory<{\n  props: TableTdProps;\n  ref: HTMLTableCellElement;\n  stylesNames: 'td';\n  compound: true;\n}>;\n\nexport type TableTrFactory = Factory<{\n  props: TableTrProps;\n  ref: HTMLTableRowElement;\n  stylesNames: 'tr';\n  compound: true;\n}>;\n\nexport type TableTheadFactory = Factory<{\n  props: TableTheadProps;\n  ref: HTMLTableSectionElement;\n  stylesNames: 'thead';\n  compound: true;\n}>;\n\nexport type TableTbodyFactory = Factory<{\n  props: TableTbodyProps;\n  ref: HTMLTableSectionElement;\n  stylesNames: 'tbody';\n  compound: true;\n}>;\n\nexport type TableTfootFactory = Factory<{\n  props: TableTfootProps;\n  ref: HTMLTableSectionElement;\n  stylesNames: 'tfoot';\n  compound: true;\n}>;\n\nexport type TableCaptionFactory = Factory<{\n  props: TableCaptionProps;\n  ref: HTMLTableCaptionElement;\n  stylesNames: 'caption';\n  compound: true;\n}>;\n\ninterface TableElementOptions {\n  columnBorder?: true;\n  rowBorder?: true;\n  striped?: true;\n  highlightOnHover?: true;\n  captionSide?: true;\n  stickyHeader?: true;\n}\n\nfunction getDataAttributes(ctx: TableContextValue, options?: TableElementOptions) {\n  if (!options) {\n    return undefined;\n  }\n\n  const data: Record<string, boolean | string> = {};\n\n  if (options.columnBorder && ctx.withColumnBorders) {\n    data['data-with-column-border'] = true;\n  }\n\n  if (options.rowBorder && ctx.withRowBorders) {\n    data['data-with-row-border'] = true;\n  }\n\n  if (options.striped && ctx.striped) {\n    data['data-striped'] = ctx.striped;\n  }\n\n  if (options.highlightOnHover && ctx.highlightOnHover) {\n    data['data-hover'] = true;\n  }\n\n  if (options.captionSide && ctx.captionSide) {\n    data['data-side'] = ctx.captionSide;\n  }\n\n  if (options.stickyHeader && ctx.stickyHeader) {\n    data['data-sticky'] = true;\n  }\n\n  return data;\n}\n\nexport function tableElement<Factory extends FactoryPayload>(\n  element: 'th' | 'td' | 'tr' | 'thead' | 'tbody' | 'tfoot' | 'caption',\n  options?: TableElementOptions\n) {\n  const name = `Table${element.charAt(0).toUpperCase()}${element.slice(1)}`;\n  const Component = factory<Factory>((_props) => {\n    const props = useProps(name, {}, _props);\n    const { classNames, className, style, styles, ...others } = props;\n\n    const ctx = useTableContext();\n\n    return (\n      <Box\n        component={element}\n        {...getDataAttributes(ctx, options)}\n        {...ctx.getStyles(element, { className, classNames, style, styles, props })}\n        {...others}\n      />\n    );\n  });\n\n  Component.displayName = `@mantine/core/${name}`;\n  Component.classes = classes;\n  return Component;\n}\n\nexport const TableTh = tableElement<TableThFactory>('th', { columnBorder: true });\nexport const TableTd = tableElement<TableTdFactory>('td', { columnBorder: true });\nexport const TableTr = tableElement<TableTrFactory>('tr', {\n  rowBorder: true,\n  striped: true,\n  highlightOnHover: true,\n});\nexport const TableThead = tableElement<TableTheadFactory>('thead', { stickyHeader: true });\nexport const TableTbody = tableElement<TableTbodyFactory>('tbody');\nexport const TableTfoot = tableElement<TableTfootFactory>('tfoot');\nexport const TableCaption = tableElement<TableCaptionFactory>('caption', { captionSide: true });\n"],"mappings":";;;;;;;;AAqFA,SAAS,kBAAkB,KAAwB,SAA+B;CAChF,IAAI,CAAC,SACH;CAGF,MAAM,OAAyC,CAAC;CAEhD,IAAI,QAAQ,gBAAgB,IAAI,mBAC9B,KAAK,6BAA6B;CAGpC,IAAI,QAAQ,aAAa,IAAI,gBAC3B,KAAK,0BAA0B;CAGjC,IAAI,QAAQ,WAAW,IAAI,SACzB,KAAK,kBAAkB,IAAI;CAG7B,IAAI,QAAQ,oBAAoB,IAAI,kBAClC,KAAK,gBAAgB;CAGvB,IAAI,QAAQ,eAAe,IAAI,aAC7B,KAAK,eAAe,IAAI;CAG1B,IAAI,QAAQ,gBAAgB,IAAI,cAC9B,KAAK,iBAAiB;CAGxB,OAAO;AACT;AAEA,SAAgB,aACd,SACA,SACA;CACA,MAAM,OAAO,QAAQ,QAAQ,OAAO,CAAC,EAAE,YAAY,IAAI,QAAQ,MAAM,CAAC;CACtE,MAAM,YAAY,SAAkB,WAAW;EAC7C,MAAM,QAAQ,SAAS,MAAM,CAAC,GAAG,MAAM;EACvC,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,GAAG,WAAW;EAE5D,MAAM,MAAM,gBAAgB;EAE5B,OACE,oBAAC,KAAD;GACE,WAAW;GACX,GAAI,kBAAkB,KAAK,OAAO;GAClC,GAAI,IAAI,UAAU,SAAS;IAAE;IAAW;IAAY;IAAO;IAAQ;GAAM,CAAC;GAC1E,GAAI;EACL,CAAA;CAEL,CAAC;CAED,UAAU,cAAc,iBAAiB;CACzC,UAAU,UAAUA;CACpB,OAAO;AACT;AAEA,MAAa,UAAU,aAA6B,MAAM,EAAE,cAAc,KAAK,CAAC;AAChF,MAAa,UAAU,aAA6B,MAAM,EAAE,cAAc,KAAK,CAAC;AAChF,MAAa,UAAU,aAA6B,MAAM;CACxD,WAAW;CACX,SAAS;CACT,kBAAkB;AACpB,CAAC;AACD,MAAa,aAAa,aAAgC,SAAS,EAAE,cAAc,KAAK,CAAC;AACzF,MAAa,aAAa,aAAgC,OAAO;AACjE,MAAa,aAAa,aAAgC,OAAO;AACjE,MAAa,eAAe,aAAkC,WAAW,EAAE,aAAa,KAAK,CAAC"}

package/esm/components/Table/Table.context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.context.mjs","names":[],"sources":["../../../src/components/Table/Table.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { TableFactory } from './Table';\n\nexport interface TableContextValue {\n  getStyles: GetStylesApi<TableFactory>;\n  stickyHeader: boolean | undefined;\n  striped: 'odd' | 'even' | undefined;\n  highlightOnHover: boolean | undefined;\n  withColumnBorders: boolean | undefined;\n  withRowBorders: boolean | undefined;\n  captionSide: 'top' | 'bottom';\n}\n\nexport const [TableProvider, useTableContext] = createSafeContext<TableContextValue>(\n  'Table component was not found in the tree'\n);\n"],"mappings":";;;AAaA,MAAa,CAAC,eAAe,mBAAmB,kBAC9C,4CACD"}
+{"version":3,"file":"Table.context.mjs","names":[],"sources":["../../../src/components/Table/Table.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { TableFactory } from './Table';\n\nexport interface TableContextValue {\n  getStyles: GetStylesApi<TableFactory>;\n  stickyHeader: boolean | undefined;\n  striped: 'odd' | 'even' | undefined;\n  highlightOnHover: boolean | undefined;\n  withColumnBorders: boolean | undefined;\n  withRowBorders: boolean | undefined;\n  captionSide: 'top' | 'bottom';\n}\n\nexport const [TableProvider, useTableContext] = createSafeContext<TableContextValue>(\n  'Table component was not found in the tree'\n);\n"],"mappings":";;;AAaA,MAAa,CAAC,eAAe,mBAAmB,kBAC9C,2CACF"}