@mantine/core/cjs/components/Slider/Track/Track.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');
var Marks = require('../Marks/Marks.cjs');
var Slider_context = require('../Slider.context.cjs');

function Track({
  filled,
  children,
  offset,
  disabled,
  marksOffset,
  inverted,
  containerProps,
  ...others
}) {
  const { getStyles } = Slider_context.useSliderContext();
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box.Box, { ...getStyles("trackContainer"), mod: { disabled }, ...containerProps }, /* @__PURE__ */ React.createElement(Box.Box, { ...getStyles("track"), mod: { inverted, disabled } }, /* @__PURE__ */ React.createElement(
    Box.Box,
    {
      mod: { inverted, disabled },
      __vars: {
        "--slider-bar-width": `calc(${filled}% + var(--slider-size))`,
        "--slider-bar-offset": `calc(${offset}% - var(--slider-size))`
      },
      ...getStyles("bar")
    }
  ), children, /* @__PURE__ */ React.createElement(Marks.Marks, { ...others, offset: marksOffset, disabled, inverted }))));
}
Track.displayName = "@mantine/core/SliderTrack";

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