@mantine/core/cjs/components/Slider/Thumb/Thumb.cjs

React components library focused on usability, accessibility and developer experience

'use client';
'use strict';

var React = require('react');
require('clsx');
require('@mantine/hooks');
require('../../../core/MantineProvider/Mantine.context.cjs');
require('../../../core/MantineProvider/default-theme.cjs');
require('../../../core/MantineProvider/MantineProvider.cjs');
require('../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs');
var Box = require('../../../core/Box/Box.cjs');
require('../../../core/DirectionProvider/DirectionProvider.cjs');
require('../../Transition/transitions.cjs');
var Transition = require('../../Transition/Transition.cjs');
var Slider_context = require('../Slider.context.cjs');

const Thumb = React.forwardRef(
  ({
    max,
    min,
    value,
    position,
    label,
    dragging,
    onMouseDown,
    onKeyDownCapture,
    labelTransitionProps,
    labelAlwaysOn,
    thumbLabel,
    onFocus,
    onBlur,
    showLabelOnHover,
    isHovered,
    children = null,
    disabled
  }, ref) => {
    const { getStyles } = Slider_context.useSliderContext();
    const [focused, setFocused] = React.useState(false);
    const isVisible = labelAlwaysOn || dragging || focused || showLabelOnHover && isHovered;
    return /* @__PURE__ */ React.createElement(
      Box.Box,
      {
        tabIndex: 0,
        role: "slider",
        "aria-label": thumbLabel,
        "aria-valuemax": max,
        "aria-valuemin": min,
        "aria-valuenow": value,
        ref,
        __vars: { "--slider-thumb-offset": `${position}%` },
        ...getStyles("thumb", { focusable: true }),
        mod: { dragging, disabled },
        onFocus: () => {
          setFocused(true);
          typeof onFocus === "function" && onFocus();
        },
        onBlur: () => {
          setFocused(false);
          typeof onBlur === "function" && onBlur();
        },
        onTouchStart: onMouseDown,
        onMouseDown,
        onKeyDownCapture,
        onClick: (event) => event.stopPropagation()
      },
      children,
      /* @__PURE__ */ React.createElement(
        Transition.Transition,
        {
          mounted: label != null && !!isVisible,
          transition: "fade",
          duration: 0,
          ...labelTransitionProps
        },
        (transitionStyles) => /* @__PURE__ */ React.createElement("div", { ...getStyles("label", { style: transitionStyles }) }, label)
      )
    );
  }
);
Thumb.displayName = "@mantine/core/SliderThumb";

exports.Thumb = Thumb;
//# sourceMappingURL=Thumb.cjs.map