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

package/lib/cjs/hooks/useSliderField/useSliderField.js

@@ -0,0 +1,230 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDisplayValue = exports.getDefaultValue = exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _reactAria = require("react-aria");
+var _reactStately = require("react-stately");
+var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+var _useStatusClasses7 = _interopRequireDefault(require("../useStatusClasses"));
+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) { (0, _defineProperty2["default"])(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; }
+var getDefaultValue = function getDefaultValue(_ref) {
+  var defaultValueProp = _ref.defaultValueProp,
+    minValue = _ref.minValue,
+    step = _ref.step;
+  if (defaultValueProp !== undefined) {
+    return defaultValueProp;
+  }
+  return [minValue, step * 3];
+};
+exports.getDefaultValue = getDefaultValue;
+var getDisplayValue = function getDisplayValue(_ref2) {
+  var displayValueProp = _ref2.displayValueProp,
+    isMultiThumb = _ref2.isMultiThumb,
+    state = _ref2.state;
+  if (displayValueProp) {
+    return displayValueProp;
+  }
+  if (isMultiThumb) {
+    var _context;
+    return (0, _concat["default"])(_context = "".concat(state.getThumbValueLabel(0), " - ")).call(_context, state.getThumbValueLabel(1));
+  }
+  return state.getThumbValueLabel(0);
+};
+exports.getDisplayValue = getDisplayValue;
+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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var defaultValue = !isMultiThumb ? defaultValueProp : getDefaultValue({
+    defaultValueProp: defaultValueProp,
+    minValue: minValue,
+    step: step
+  });
+  var numberFormatter = (0, _reactAria.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 = (0, _reactStately.useSliderState)(sliderStateOptions);
+  var _getAriaAttributeProp = (0, _ariaAttributes.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 = (0, _reactAria.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 = (0, _useStatusClasses7["default"])(className, statusClasses),
+    classNames = _useStatusClasses.classNames;
+  var _useStatusClasses2 = (0, _useStatusClasses7["default"])(trackProps === null || trackProps === void 0 ? void 0 : trackProps.className, statusClasses),
+    visibleTrackClassNames = _useStatusClasses2.classNames;
+  var _useStatusClasses3 = (0, _useStatusClasses7["default"])(labelProps === null || labelProps === void 0 ? void 0 : labelProps.className, statusClasses),
+    labelContainerClassNames = _useStatusClasses3.classNames;
+  var _useStatusClasses4 = (0, _useStatusClasses7["default"])(className, statusClasses),
+    hiddenTrackClassNames = _useStatusClasses4.classNames;
+  var _useStatusClasses5 = (0, _useStatusClasses7["default"])(wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className, statusClasses),
+    wrapperClassName = _useStatusClasses5.classNames;
+  var _useStatusClasses6 = (0, _useStatusClasses7["default"])(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 = (0, _reactAria.mergeProps)(outputProps, raOutputProps, {
+    as: 'output',
+    variant: 'label'
+  });
+  var mergedLabelProps = (0, _reactAria.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((0, _defineProperty2["default"])({}, 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
+  };
+};
+var _default = useSliderField;
+exports["default"] = _default;

package/lib/cjs/hooks/useSliderField/useSliderField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/hooks/useSliderField/useSliderField.test.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
+var _react = require("@testing-library/react");
+var _useSliderField = _interopRequireWildcard(require("./useSliderField"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2["default"])(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; }
+var defaultProps = {
+  minValue: 0,
+  maxValue: 100,
+  step: 10,
+  defaultValue: 50,
+  isMultiThumb: false,
+  label: 'test label',
+  trackRef: {
+    current: null
+  }
+};
+describe('useSliderField utility functions', function () {
+  describe('getDefaultValue', function () {
+    test('returns defaultValueProp if provided', function () {
+      var result = (0, _useSliderField.getDefaultValue)({
+        defaultValueProp: [10, 50],
+        minValue: 0,
+        step: 10
+      });
+      expect(result).toEqual([10, 50]);
+    });
+    test('calculates default value if defaultValueProp is not provided', function () {
+      var result = (0, _useSliderField.getDefaultValue)({
+        defaultValueProp: undefined,
+        minValue: 0,
+        step: 10
+      });
+      expect(result).toEqual([0, 30]);
+    });
+  });
+  describe('getDisplayValue', function () {
+    var mockState = {
+      getThumbValueLabel: jest.fn(function (index) {
+        return index === 0 ? '10' : '50';
+      })
+    };
+    test('returns displayValueProp if provided', function () {
+      var result = (0, _useSliderField.getDisplayValue)({
+        displayValueProp: 'Custom Display',
+        isMultiThumb: false,
+        state: mockState
+      });
+      expect(result).toEqual('Custom Display');
+    });
+    test('returns single thumb value if isMultiThumb is false', function () {
+      var result = (0, _useSliderField.getDisplayValue)({
+        displayValueProp: undefined,
+        isMultiThumb: false,
+        state: mockState
+      });
+      expect(result).toEqual('10');
+    });
+    test('returns range value if isMultiThumb is true', function () {
+      var result = (0, _useSliderField.getDisplayValue)({
+        displayValueProp: undefined,
+        isMultiThumb: true,
+        state: mockState
+      });
+      expect(result).toEqual('10 - 50');
+    });
+  });
+});
+describe('useSliderField hook', function () {
+  test('should initialize with default minValue and maxValue', function () {
+    var _renderHook = (0, _react.renderHook)(function () {
+        return (0, _useSliderField["default"])(defaultProps);
+      }),
+      result = _renderHook.result;
+    var containerProps = result.current.containerProps;
+    expect(containerProps).toBeDefined();
+    expect((0, _values["default"])(result.current.sliderActiveTrackProps.state)).toEqual([50]);
+  });
+  test('should update minValue and maxValue when props change', function () {
+    var _renderHook2 = (0, _react.renderHook)(function (props) {
+        return (0, _useSliderField["default"])(props);
+      }, {
+        initialProps: defaultProps
+      }),
+      result = _renderHook2.result,
+      rerender = _renderHook2.rerender;
+    expect((0, _values["default"])(result.current.sliderActiveTrackProps.state)).toEqual([50]);
+    rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      minValue: 20,
+      maxValue: 80,
+      defaultValue: 30
+    }));
+  });
+});

package/lib/cjs/index.d.ts

@@ -168,6 +168,7 @@ export { default as Separator } from './components/Separator';
 export * from './components/Separator';
 export { default as Skeleton } from './components/Skeleton';
 export * from './components/Skeleton';
+export { default as SliderField } from './components/SliderField/SliderField';
 export { Step, default as Stepper } from './components/Stepper';
 export * from './components/Stepper';
 export { default as Switch } from './components/Switch';

package/lib/cjs/index.js

@@ -121,6 +121,7 @@ var _exportNames = {
   SelectField: true,
   Separator: true,
   Skeleton: true,
+  SliderField: true,
   Step: true,
   Stepper: true,
   Switch: true,
@@ -860,6 +861,12 @@ _Object$defineProperty(exports, "Skeleton", {
     return _Skeleton["default"];
   }
 });
+_Object$defineProperty(exports, "SliderField", {
+  enumerable: true,
+  get: function get() {
+    return _SliderField["default"];
+  }
+});
 _Object$defineProperty(exports, "Step", {
   enumerable: true,
   get: function get() {
@@ -1806,6 +1813,7 @@ _forEachInstanceProperty(_context61 = _Object$keys(_Skeleton)).call(_context61,
     }
   });
 });
+var _SliderField = _interopRequireDefault(require("./components/SliderField/SliderField"));
 var _Stepper = _interopRequireWildcard(require("./components/Stepper"));
 _forEachInstanceProperty(_context62 = _Object$keys(_Stepper)).call(_context62, function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/cjs/styles/colors.d.ts

@@ -197,6 +197,9 @@ declare const allColors: {
         dark: string;
         light: string;
     };
+    slider: {
+        track: string;
+    };
 };
 export default allColors;
 export declare const flatColorList: any;
@@ -299,4 +302,7 @@ export declare const getBaseHexColor: (colorName: string) => string | {
         dark: string;
         light: string;
     };
+    slider: {
+        track: string;
+    };
 };

package/lib/cjs/styles/colors.js

@@ -64,6 +64,9 @@ var accentBase = '303F5F';
 var accentLight = 'F7F8FD';
 var accentSteps = 8;
 var accentScale = _chromaJs["default"].scale([accentBase, accentLight]).mode('hsl');
+var slider = {
+  track: '#E4E6E9'
+};
 var accent = {
   5: (0, _chromaJs["default"])(accentBase).darken(1).hex(),
   10: (0, _chromaJs["default"])(accentBase).darken(0.5).hex(),
@@ -154,7 +157,8 @@ var allColors = {
   text: text,
   line: line,
   button: button,
-  warning: warning
+  warning: warning,
+  slider: slider
 };
 var _default = allColors;
 exports["default"] = _default;

package/lib/cjs/styles/variants/variants.js

@@ -53,6 +53,7 @@ var _RockerButton = _interopRequireDefault(require("../../components/RockerButto
 var _ScrollBox = _interopRequireDefault(require("../../components/ScrollBox/ScrollBox.styles"));
 var _Separator = _interopRequireDefault(require("../../components/Separator/Separator.styles"));
 var _Skeleton = _interopRequireDefault(require("../../components/Skeleton/Skeleton.styles"));
+var _Slider = _interopRequireDefault(require("../../components/SliderField/Slider.styles"));
 var _Stepper = _interopRequireDefault(require("../../components/Stepper/Stepper.styles"));
 var _Table = _interopRequireDefault(require("../../components/Table/Table.styles"));
 var tab = _interopRequireWildcard(require("../../components/Tabs/Tabs.style"));
@@ -101,6 +102,7 @@ var _default = _objectSpread({
   rockerButton: _RockerButton["default"],
   scrollBox: _ScrollBox["default"],
   separator: _Separator["default"],
+  slider: _Slider["default"],
   stepper: _Stepper["default"],
   skeleton: _Skeleton["default"],
   table: _Table["default"],

package/lib/cjs/types/sliderField.d.ts

@@ -0,0 +1,79 @@
+import React, { ReactNode, RefObject } from 'react';
+import { SliderState } from 'react-stately';
+import type { PressEvent } from '@react-types/shared';
+import { ThemeUICSSObject } from 'theme-ui';
+import { BoxProps } from './box';
+import { FieldHelperTextProps } from './fieldHelperText';
+import { InputProps } from './input';
+import { Status } from './item';
+import { LabelProps } from './label';
+import { TextProps } from './text';
+export type NumberOrNumberPair = number | [number, number];
+export interface SliderThumbProps {
+    className?: string;
+    index: number;
+    inputProps?: InputProps;
+    isHorizontal?: boolean;
+    isVertical?: boolean;
+    name?: string;
+    onFocus?: (e: React.FocusEvent) => void;
+    onFocusChange?: (isFocused: boolean) => void;
+    onPress?: (e: PressEvent) => void;
+    state: SliderState;
+    thumbProps?: object;
+    trackRef: RefObject<Element>;
+}
+export interface SliderLabelContainerProps {
+    displayValue?: ReactNode;
+    label?: ReactNode;
+    labelProps?: LabelProps;
+    isDisplayValueHidden?: boolean;
+    outputProps?: TextProps;
+    className?: string;
+}
+export interface SliderActiveTrackProps {
+    className?: string;
+    isHorizontal?: boolean;
+    isMultiThumb?: boolean;
+    isVertical?: boolean;
+    state: SliderState;
+    sx?: ThemeUICSSObject | object;
+}
+export interface SliderFieldProps {
+    activeTrackProps?: BoxProps;
+    autoFocus?: boolean;
+    className?: string;
+    defaultValue?: NumberOrNumberPair;
+    displayValue?: string;
+    formatOptions?: Intl.NumberFormatOptions;
+    helperText?: string;
+    helperTextProps?: FieldHelperTextProps;
+    isDisabled?: boolean;
+    isDisplayValueHidden?: boolean;
+    isMultiThumb?: boolean;
+    label?: ReactNode;
+    labelProps?: LabelProps;
+    maxValue?: number;
+    minValue?: number;
+    name?: string;
+    onBlur?: () => void;
+    onChange?: (value: NumberOrNumberPair) => void;
+    onChangeEnd?: (event: React.KeyboardEvent) => void;
+    onFocus?: () => void;
+    onFocusChange?: (isFocused: boolean) => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    onKeyUp?: (event: React.KeyboardEvent) => void;
+    orientation?: 'vertical' | 'horizontal';
+    outputProps?: TextProps;
+    size?: string;
+    status?: Status;
+    step?: number;
+    sx?: ThemeUICSSObject | object;
+    trackProps?: BoxProps;
+    thumbProps?: object;
+    value?: NumberOrNumberPair;
+    wrapperProps?: BoxProps;
+}
+export interface UseSliderFieldProps extends SliderFieldProps {
+    trackRef: RefObject<Element>;
+}

package/lib/cjs/types/sliderField.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/utils/testUtils/universalFormSubmitTest.js

@@ -67,6 +67,12 @@ var useDefaultProps = function useDefaultProps(componentType) {
   };
   var handleChange = jest.fn();
   switch (componentType) {
+    case 'SliderField':
+      return {
+        value: value,
+        onChange: setValue,
+        name: name
+      };
     case 'CheckboxField':
     case 'SwitchField':
       return {
@@ -150,6 +156,11 @@ var getDefaultProps = function getDefaultProps(componentType, testValue) {
         name: name,
         value: testValue
       };
+    case 'SliderField':
+      return {
+        name: name,
+        value: testValue
+      };
     case 'SwitchField':
       return {
         isDefaultSelected: true,
@@ -346,6 +357,12 @@ var universalFieldComponentTests = function universalFieldComponentTests(_ref3)
                 return cell.getAttribute('aria-selected') === 'true';
               });
               expect(selected === null || selected === void 0 ? void 0 : selected.children[0]).toHaveAttribute('aria-label', 'Wednesday, August 10, 2022 selected');
+            } else if (componentType === 'SliderField') {
+              _react2.fireEvent.change(_react2.screen.getByRole('slider'), {
+                target: {
+                  value: testValue
+                }
+              });
             } else {
               _react2.fireEvent.change(_react2.screen.getAllByLabelText(testLabel)[0], {
                 target: {