@pingux/astro 2.118.0-alpha.0 → 2.118.0-alpha.1

package/lib/components/SliderField/SliderField.test.js

@@ -0,0 +1,354 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
+import SliderField from './SliderField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var thumbId = 'thumb';
+var outputId = 'output';
+var wrapperId = 'wrapper';
+var labelId = 'label';
+var trackId = 'track-id';
+var activeTrackId = 'active-track-id';
+var labelClassName = 'labelClass';
+var wrapperClassName = 'wrapperClass';
+var testLabel = 'Slider Field';
+var wrapperProps = {
+  'data-testid': wrapperId,
+  className: wrapperClassName
+};
+var labelProps = {
+  'data-testid': labelId,
+  className: labelClassName
+};
+var sliderTestId = 'slider-id';
+var outputProps = {
+  'data-testid': outputId
+};
+var defaultProps = {
+  thumbProps: {
+    'data-testid': thumbId
+  },
+  outputProps: outputProps,
+  label: testLabel,
+  'data-testid': sliderTestId
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(SliderField, _extends({}, defaultProps, props)));
+};
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(SliderField, _extends({}, props, defaultProps));
+  }
+});
+universalFieldComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(SliderField, _extends({}, defaultProps, props));
+  },
+  testValue: 50,
+  testLabel: testLabel,
+  componentType: 'SliderField'
+});
+describe('SliderField Component', function () {
+  test('renders SliderField with default props', function () {
+    getComponent({
+      label: 'Slider Field',
+      defaultValue: 50
+    });
+    expect(screen.getByText('Slider Field')).toBeInTheDocument();
+    expect(screen.getByRole('slider')).toHaveValue('50');
+  });
+  test('renders SliderField with custom value', function () {
+    getComponent({
+      label: 'Custom Slider',
+      value: 30
+    });
+    expect(screen.getByText('Custom Slider')).toBeInTheDocument();
+    expect(screen.getByRole('slider')).toHaveValue('30');
+  });
+  test('calls onChange when slider value changes', function () {
+    var onChangeMock = jest.fn();
+    getComponent({
+      label: 'Slider Field',
+      onChange: onChangeMock,
+      defaultValue: 40
+    });
+    var slider = screen.getByRole('slider');
+    fireEvent.change(slider, {
+      target: {
+        value: 60
+      }
+    });
+    expect(onChangeMock).toHaveBeenCalledWith(60);
+  });
+  test('renders vertical orientation', function () {
+    getComponent({
+      label: 'Vertical Slider',
+      orientation: 'vertical',
+      defaultValue: 20
+    });
+    expect(screen.getByText('Vertical Slider')).toBeInTheDocument();
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-orientation', 'vertical');
+  });
+  test('disables the slider when isDisabled is true', function () {
+    getComponent({
+      label: 'Disabled Slider',
+      isDisabled: true
+    });
+    var slider = screen.getByRole('slider');
+    expect(slider).toBeDisabled();
+  });
+  test('renders display value correctly', function () {
+    getComponent({
+      label: 'Slider with Display',
+      defaultValue: 70,
+      displayValue: '70%'
+    });
+    expect(screen.getByText('70%')).toBeInTheDocument();
+  });
+  test('hides display value when isDisplayValueHidden is true', function () {
+    getComponent({
+      label: 'Hidden Display Slider',
+      defaultValue: 50,
+      isDisplayValueHidden: true
+    });
+    expect(screen.queryByText('50')).not.toBeInTheDocument();
+  });
+  test('calls onChangeEnd when slider interaction ends', function () {
+    var onChangeEndMock = jest.fn();
+    getComponent({
+      label: 'Slider Field',
+      onChangeEnd: onChangeEndMock,
+      defaultValue: 40
+    });
+    var slider = screen.getByRole('slider');
+    fireEvent.mouseDown(slider);
+    fireEvent.mouseUp(slider);
+    expect(onChangeEndMock).toHaveBeenCalled();
+  });
+  test('handles keyboard functionality', function () {
+    var onChangeMock = jest.fn();
+    getComponent({
+      label: 'Keyboard Slider',
+      onChange: onChangeMock,
+      defaultValue: 50,
+      step: 10
+    });
+    var slider = screen.getByRole('slider');
+    var output = screen.getByTestId(outputId);
+    userEvent.tab();
+    fireEvent.keyDown(slider, {
+      key: 'ArrowRight'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'ArrowRight'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('60');
+    fireEvent.keyDown(slider, {
+      key: 'ArrowLeft'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'ArrowLeft'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('50');
+    fireEvent.keyDown(slider, {
+      key: 'Home'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'Home'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(3);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('0');
+    fireEvent.keyDown(slider, {
+      key: 'End'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'End'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(4);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('100');
+  });
+  test('handles minValue and maxValue', function () {
+    var onChangeMock = jest.fn();
+    getComponent({
+      label: 'Keyboard Slider',
+      onChange: onChangeMock,
+      defaultValue: 50,
+      step: 10,
+      minValue: 10,
+      maxValue: 190
+    });
+    var slider = screen.getByRole('slider');
+    var output = screen.getByTestId(outputId);
+    userEvent.tab();
+    fireEvent.keyDown(slider, {
+      key: 'Home'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'Home'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('10');
+    fireEvent.keyDown(slider, {
+      key: 'End'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'End'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('190');
+  });
+  test('handles vertical slider keyboard functionality', function () {
+    var onChangeMock = jest.fn();
+    getComponent({
+      label: 'Vertical Slider',
+      onChange: onChangeMock,
+      defaultValue: 50,
+      step: 10,
+      orientation: 'vertical'
+    });
+    var slider = screen.getByRole('slider');
+    var output = screen.getByTestId(outputId);
+    userEvent.tab();
+    fireEvent.keyDown(slider, {
+      key: 'ArrowUp'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'ArrowUp'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('60');
+    fireEvent.keyDown(slider, {
+      key: 'ArrowDown'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'ArrowDown'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    output = screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('50');
+  });
+  test('handles multi-thumb slider functionality', function () {
+    var onChangeMock = jest.fn();
+    getComponent({
+      label: 'Multi Thumb Slider',
+      onChange: onChangeMock,
+      defaultValue: [20, 80],
+      isMultiThumb: true
+    });
+    var thumbs = screen.getAllByTestId(thumbId);
+    expect(thumbs).toHaveLength(2);
+    var _thumbs = _slicedToArray(thumbs, 2),
+      thumb1 = _thumbs[0],
+      thumb2 = _thumbs[1];
+    fireEvent.keyDown(thumb1, {
+      key: 'ArrowRight'
+    });
+    fireEvent.keyUp(thumb1, {
+      key: 'ArrowRight'
+    });
+    expect(onChangeMock).toHaveBeenCalledWith([30, 80]);
+    fireEvent.keyDown(thumb2, {
+      key: 'ArrowLeft'
+    });
+    fireEvent.keyUp(thumb2, {
+      key: 'ArrowLeft'
+    });
+    expect(onChangeMock).toHaveBeenCalledWith([30, 70]);
+  });
+  test('adds custom class names to trackProps and activeTrackProps', function () {
+    var trackClassName = 'custom-track-class';
+    var activeTrackClassName = 'custom-active-track-class';
+    getComponent(_objectSpread({
+      trackProps: {
+        className: trackClassName,
+        'data-testid': trackId
+      },
+      activeTrackProps: {
+        className: activeTrackClassName,
+        'data-testid': activeTrackId
+      }
+    }, defaultProps));
+    var track = screen.getByTestId(trackId);
+    var activeTrack = screen.getByTestId(activeTrackId);
+    var slider = screen.getByRole('slider');
+    userEvent.tab();
+    fireEvent.keyDown(slider, {
+      key: 'ArrowRight'
+    });
+    fireEvent.keyUp(slider, {
+      key: 'ArrowRight'
+    });
+    expect(track).toBeInTheDocument();
+    expect(track).toHaveClass(trackClassName);
+    expect(activeTrack).toBeInTheDocument();
+    expect(activeTrack).toHaveClass(activeTrackClassName);
+  });
+  test('adds custom class names to labelProps and wrapperProps', function () {
+    getComponent(_objectSpread({
+      labelProps: labelProps,
+      wrapperProps: wrapperProps
+    }, defaultProps));
+    var label = screen.getByText('Slider Field');
+    var wrapper = screen.getByTestId(wrapperId);
+    userEvent.tab();
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveClass(labelClassName);
+    expect(wrapper).toBeInTheDocument();
+    expect(wrapper).toHaveClass(wrapperClassName);
+  });
+  test('changes size property', function () {
+    var _getComponent = getComponent({
+        size: '300px'
+      }),
+      rerender = _getComponent.rerender;
+    var container = screen.getByTestId(sliderTestId);
+    expect(container).toHaveStyle({
+      width: '300px'
+    });
+    rerender(___EmotionJSX(SliderField, _extends({}, defaultProps, {
+      size: "500px"
+    })));
+    expect(container).toHaveStyle({
+      width: '500px'
+    });
+  });
+  test('applies custom styles via sx prop', function () {
+    var customStyles = {
+      backgroundColor: 'red',
+      padding: '20px'
+    };
+    getComponent({
+      sx: customStyles
+    });
+    var container = screen.getByTestId(sliderTestId);
+    expect(container).toHaveStyle({
+      backgroundColor: 'red',
+      padding: '20px'
+    });
+  });
+});

package/lib/components/SliderField/SliderLabelContainer.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { forwardRef } from 'react';
+import { Box, Label, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var SliderLabelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var displayValue = props.displayValue,
+    label = props.label,
+    labelProps = props.labelProps,
+    isDisplayValueHidden = props.isDisplayValueHidden,
+    outputProps = props.outputProps,
+    className = props.className;
+  return ___EmotionJSX(Box, {
+    ref: ref,
+    className: className,
+    variant: "slider.labelContainer"
+  }, label && ___EmotionJSX(Box, {
+    sx: {
+      gap: '0px'
+    }
+  }, ___EmotionJSX(Label, _extends({}, labelProps, {
+    sx: {
+      mb: '0px'
+    }
+  }), label)), !isDisplayValueHidden && ___EmotionJSX(Box, {
+    className: className,
+    variant: "slider.outputContainer"
+  }, ___EmotionJSX(Text, outputProps, displayValue)));
+});
+export default SliderLabelContainer;

package/lib/components/SliderField/SliderThumb.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "index", "inputProps", "isHorizontal", "isVertical", "name", "onFocus", "onFocusChange", "onPress", "state", "trackRef"];
+import React, { forwardRef, useRef } from 'react';
+import { mergeProps, useFocusRing, useSliderThumb, VisuallyHidden } from 'react-aria';
+import { useHover, usePress } from '@react-aria/interactions';
+import { useLocalOrForwardRef, useStatusClasses } from '../../hooks';
+import Box from '../Box';
+import Input from '../Input';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var SliderThumb = /*#__PURE__*/forwardRef(function (props, ref) {
+  var inputRef = useRef(null);
+  var thumbRef = useLocalOrForwardRef(ref);
+  var className = props.className,
+    index = props.index,
+    inputProps = props.inputProps,
+    isHorizontal = props.isHorizontal,
+    isVertical = props.isVertical,
+    name = props.name,
+    onFocus = props.onFocus,
+    onFocusChange = props.onFocusChange,
+    onPress = props.onPress,
+    state = props.state,
+    trackRef = props.trackRef,
+    others = _objectWithoutProperties(props, _excluded);
+  var _useSliderThumb = useSliderThumb({
+      index: index,
+      trackRef: trackRef,
+      inputRef: inputRef,
+      name: name
+    }, state),
+    thumbProps = _useSliderThumb.thumbProps,
+    raInputProps = _useSliderThumb.inputProps,
+    isDragging = _useSliderThumb.isDragging;
+  var _useFocusRing = useFocusRing(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _usePress = usePress({
+      ref: thumbRef,
+      onPress: onPress
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
+  var _useStatusClasses = useStatusClasses(className, {
+      isDragging: isDragging,
+      isFocused: isFocusVisible,
+      isHorizontal: isHorizontal,
+      isVertical: isVertical,
+      isHovered: isHovered,
+      isPressed: isPressed
+    }),
+    classNames = _useStatusClasses.classNames;
+  var mergedThumbProps = mergeProps(pressProps, others, hoverProps, thumbProps);
+  return ___EmotionJSX(Box, _extends({
+    className: classNames,
+    variant: "slider.thumb",
+    "data-testid": "thumb"
+  }, mergedThumbProps), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(Input, _extends({
+    ref: inputRef,
+    "data-testid": "input"
+  }, mergeProps(inputProps, raInputProps, focusProps), {
+    name: name
+  }))));
+});
+export default SliderThumb;

package/lib/components/SliderField/index.js

@@ -0,0 +1 @@
+export { default } from './SliderField';

package/lib/hooks/index.js

@@ -19,5 +19,6 @@ export { default as useProgressiveState } from './useProgressiveState';
 export { default as usePropWarning } from './usePropWarning';
 export { default as useRockerButton } from './useRockerButton';
 export { default as useSelectField } from './useSelectField';
+export { default as useSliderField } from './useSliderField';
 export { default as useStatusClasses } from './useStatusClasses';
 export { default as useTShirtSize } from './useTShirtSize';

package/lib/hooks/useSliderField/index.js

@@ -0,0 +1 @@
+export { default } from './useSliderField';

package/lib/hooks/useSliderField/useSliderField.js

@@ -0,0 +1,220 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["activeTrackProps", "autoFocus", "className", "defaultValue", "displayValue", "formatOptions", "helperTextProps", "isDisabled", "isDisplayValueHidden", "isMultiThumb", "label", "labelProps", "maxValue", "minValue", "name", "onBlur", "onChange", "onChangeEnd", "onFocus", "onFocusChange", "onKeyDown", "onKeyUp", "orientation", "outputProps", "size", "status", "step", "sx", "thumbProps", "trackProps", "trackRef", "value", "wrapperProps"];
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import { mergeProps, useNumberFormatter, useSlider } from 'react-aria';
+import { useSliderState } from 'react-stately';
+import { getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
+import useStatusClasses from '../useStatusClasses';
+export var getDefaultValue = function getDefaultValue(_ref) {
+  var defaultValueProp = _ref.defaultValueProp,
+    minValue = _ref.minValue,
+    step = _ref.step;
+  if (defaultValueProp !== undefined) {
+    return defaultValueProp;
+  }
+  return [minValue, step * 3];
+};
+export var getDisplayValue = function getDisplayValue(_ref2) {
+  var displayValueProp = _ref2.displayValueProp,
+    isMultiThumb = _ref2.isMultiThumb,
+    state = _ref2.state;
+  if (displayValueProp) {
+    return displayValueProp;
+  }
+  if (isMultiThumb) {
+    var _context;
+    return _concatInstanceProperty(_context = "".concat(state.getThumbValueLabel(0), " - ")).call(_context, state.getThumbValueLabel(1));
+  }
+  return state.getThumbValueLabel(0);
+};
+var useSliderField = function useSliderField(props) {
+  var activeTrackProps = props.activeTrackProps,
+    autoFocus = props.autoFocus,
+    className = props.className,
+    defaultValueProp = props.defaultValue,
+    displayValueProp = props.displayValue,
+    formatOptions = props.formatOptions,
+    helperTextProps = props.helperTextProps,
+    isDisabled = props.isDisabled,
+    _props$isDisplayValue = props.isDisplayValueHidden,
+    isDisplayValueHidden = _props$isDisplayValue === void 0 ? false : _props$isDisplayValue,
+    _props$isMultiThumb = props.isMultiThumb,
+    isMultiThumb = _props$isMultiThumb === void 0 ? false : _props$isMultiThumb,
+    label = props.label,
+    labelProps = props.labelProps,
+    _props$maxValue = props.maxValue,
+    maxValue = _props$maxValue === void 0 ? 100 : _props$maxValue,
+    _props$minValue = props.minValue,
+    minValue = _props$minValue === void 0 ? 0 : _props$minValue,
+    name = props.name,
+    onBlur = props.onBlur,
+    onChange = props.onChange,
+    onChangeEnd = props.onChangeEnd,
+    onFocus = props.onFocus,
+    onFocusChange = props.onFocusChange,
+    onKeyDown = props.onKeyDown,
+    onKeyUp = props.onKeyUp,
+    orientation = props.orientation,
+    outputProps = props.outputProps,
+    _props$size = props.size,
+    size = _props$size === void 0 ? '300px' : _props$size,
+    status = props.status,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 10 : _props$step,
+    _props$sx = props.sx,
+    sx = _props$sx === void 0 ? {} : _props$sx,
+    thumbProps = props.thumbProps,
+    trackProps = props.trackProps,
+    trackRef = props.trackRef,
+    value = props.value,
+    wrapperProps = props.wrapperProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var defaultValue = !isMultiThumb ? defaultValueProp : getDefaultValue({
+    defaultValueProp: defaultValueProp,
+    minValue: minValue,
+    step: step
+  });
+  var numberFormatter = useNumberFormatter(formatOptions);
+  var sliderStateOptions = {
+    defaultValue: defaultValue,
+    isDisabled: isDisabled,
+    label: label,
+    maxValue: maxValue,
+    minValue: minValue,
+    numberFormatter: numberFormatter,
+    onChange: onChange,
+    onChangeEnd: onChangeEnd,
+    orientation: orientation,
+    step: step,
+    value: value
+  };
+  var state = useSliderState(sliderStateOptions);
+  var _getAriaAttributeProp = getAriaAttributeProps(others),
+    ariaProps = _getAriaAttributeProp.ariaProps,
+    nonAriaProps = _getAriaAttributeProp.nonAriaProps;
+  var thumbOptions = _objectSpread(_objectSpread({}, thumbProps), {}, {
+    autoFocus: autoFocus,
+    isDisabled: isDisabled,
+    name: name,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onFocusChange: onFocusChange,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp
+  });
+  var sliderOptions = _objectSpread(_objectSpread({}, ariaProps), {}, {
+    defaultValue: defaultValue,
+    isDisabled: isDisabled,
+    label: label,
+    maxValue: maxValue,
+    minValue: minValue,
+    name: name,
+    onChange: onChange,
+    onChangeEnd: onChangeEnd,
+    orientation: orientation,
+    value: value
+  });
+  var _useSlider = useSlider(sliderOptions, state, trackRef),
+    groupProps = _useSlider.groupProps,
+    raTrackProps = _useSlider.trackProps,
+    raLabelProps = _useSlider.labelProps,
+    raOutputProps = _useSlider.outputProps;
+  var isHorizontal = state.orientation === 'horizontal';
+  var isVertical = state.orientation === 'vertical';
+  var displayValue = getDisplayValue({
+    displayValueProp: displayValueProp,
+    state: state,
+    isMultiThumb: isMultiThumb
+  });
+  var statusClasses = {
+    isHorizontal: isHorizontal,
+    isVertical: isVertical,
+    isMultiThumb: isMultiThumb,
+    isSingleThumb: !isMultiThumb
+  };
+  var _useStatusClasses = useStatusClasses(className, statusClasses),
+    classNames = _useStatusClasses.classNames;
+  var _useStatusClasses2 = useStatusClasses(trackProps === null || trackProps === void 0 ? void 0 : trackProps.className, statusClasses),
+    visibleTrackClassNames = _useStatusClasses2.classNames;
+  var _useStatusClasses3 = useStatusClasses(labelProps === null || labelProps === void 0 ? void 0 : labelProps.className, statusClasses),
+    labelContainerClassNames = _useStatusClasses3.classNames;
+  var _useStatusClasses4 = useStatusClasses(className, statusClasses),
+    hiddenTrackClassNames = _useStatusClasses4.classNames;
+  var _useStatusClasses5 = useStatusClasses(wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className, statusClasses),
+    wrapperClassName = _useStatusClasses5.classNames;
+  var _useStatusClasses6 = useStatusClasses(activeTrackProps === null || activeTrackProps === void 0 ? void 0 : activeTrackProps.className, statusClasses),
+    activeTrackClassNames = _useStatusClasses6.classNames;
+  var thumbPropsSpread = _objectSpread(_objectSpread(_objectSpread({}, thumbOptions), thumbProps), {}, {
+    isHorizontal: isHorizontal,
+    isVertical: isVertical,
+    state: state,
+    trackRef: trackRef
+  });
+  var mergedOuputProps = mergeProps(outputProps, raOutputProps, {
+    as: 'output',
+    variant: 'label'
+  });
+  var mergedLabelProps = mergeProps(labelProps, raLabelProps);
+  var labelContainerProps = {
+    label: label,
+    labelProps: mergedLabelProps,
+    isDisplayValueHidden: isDisplayValueHidden,
+    outputProps: mergedOuputProps,
+    isHorizontal: isHorizontal,
+    displayValue: displayValue,
+    isVertical: isVertical,
+    className: labelContainerClassNames
+  };
+  var sliderActiveTrackProps = _objectSpread(_objectSpread({}, activeTrackProps), {}, {
+    isMultiThumb: isMultiThumb,
+    className: activeTrackClassNames,
+    isHorizontal: isHorizontal,
+    isVertical: isVertical,
+    state: state
+  });
+  var wrapperPropsSpread = _objectSpread(_objectSpread({}, wrapperProps), {}, {
+    className: wrapperClassName,
+    variant: 'slider.wrapper'
+  });
+  var sizeProperty = isHorizontal ? 'width' : 'height';
+  var containerProps = _objectSpread(_objectSpread(_objectSpread({}, others), groupProps), {}, {
+    sx: _objectSpread(_defineProperty({}, sizeProperty, size), sx),
+    variant: 'slider.slider',
+    className: classNames
+  });
+  var hiddenTrackProps = _objectSpread(_objectSpread({}, raTrackProps), {}, {
+    trackRef: trackRef,
+    variant: 'slider.hiddenTrack',
+    className: hiddenTrackClassNames
+  });
+  var visibleTrackProps = _objectSpread({
+    variant: 'slider.track',
+    className: visibleTrackClassNames
+  }, trackProps);
+  var helperTextPropsSpread = _objectSpread(_objectSpread({}, helperTextProps), {}, {
+    status: status
+  });
+  return {
+    containerProps: containerProps,
+    labelContainerProps: labelContainerProps,
+    sliderActiveTrackProps: sliderActiveTrackProps,
+    hiddenTrackProps: hiddenTrackProps,
+    thumbPropsSpread: thumbPropsSpread,
+    classNames: classNames,
+    visibleTrackProps: visibleTrackProps,
+    helperTextProps: helperTextPropsSpread,
+    wrapperProps: wrapperPropsSpread
+  };
+};
+export default useSliderField;