{"version":3,"file":"Thumb.cjs","names":["useSliderContext","Box","Transition"],"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,cAAcA,uBAAAA,iBAAiB;CAEvC,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,KAAK;CAE5C,MAAM,YAAY,iBAAiB,YAAY,WAAY,oBAAoB;CAC/E,MAAM,YAAY,OAAO,mBAAmB,aAAa,eAAe,KAAK,IAAI;CAEjF,OACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,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,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,SAAS,SAAS,QAAQ,CAAC,CAAC;GAC5B,YAAW;GACX,UAAU;GACV,GAAI;cAEF,qBACA,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,GAAI,UAAU,SAAS,EAAE,OAAO,iBAAiB,CAAC;cAAI;GAAW,CAAA;EAE9D,CAAA,CACT;;AAET;AAEA,MAAM,cAAc"}