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

package/lib/cjs/components/SliderField/SliderField.stories.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Vertical = exports.MultiThumb = exports.Default = exports.CustomProps = exports.ControlledMultiThumb = exports.Controlled = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _SliderField = _interopRequireDefault(require("./SliderField.mdx"));
+var _react2 = require("@emotion/react");
+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; }
+var _default = {
+  title: 'Form/SliderField',
+  component: _index.SliderField,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_SliderField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
+  argTypes: {
+    defaultValue: {
+      control: {
+        type: 'number'
+      }
+    },
+    orientation: {
+      control: {
+        type: 'select',
+        options: ['vertical', 'horizontal']
+      }
+    },
+    step: {
+      control: {
+        type: 'number'
+      }
+    },
+    minValue: {
+      control: {
+        type: 'number'
+      }
+    },
+    maxValue: {
+      control: {
+        type: 'number'
+      }
+    },
+    helperText: {
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      control: {
+        type: 'text'
+      }
+    }
+  },
+  args: {
+    defaultValue: 40,
+    step: 10,
+    minValue: 0,
+    maxValue: 100,
+    label: 'Lorem ipsum',
+    helperText: 'Lorem ipsum...'
+  }
+};
+exports["default"] = _default;
+var loremText = 'Lorem ipsum';
+var Default = function Default(_ref) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
+  return (0, _react2.jsx)(_index.SliderField, (0, _extends2["default"])({
+    label: loremText,
+    defaultValue: 40
+  }, args));
+};
+exports.Default = Default;
+var Controlled = function Controlled() {
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return (0, _react2.jsx)(_index.SliderField, {
+    value: value,
+    onChange: setValue,
+    displayValue: "(".concat(value, "px)"),
+    label: loremText
+  });
+};
+exports.Controlled = Controlled;
+var Vertical = function Vertical() {
+  return (0, _react2.jsx)(_index.SliderField, {
+    label: loremText,
+    orientation: "vertical",
+    size: "150px"
+  });
+};
+exports.Vertical = Vertical;
+var MultiThumb = function MultiThumb() {
+  return (0, _react2.jsx)(_index.SliderField, {
+    label: loremText,
+    isMultiThumb: true
+  });
+};
+exports.MultiThumb = MultiThumb;
+var ControlledMultiThumb = function ControlledMultiThumb() {
+  var _useState3 = (0, _react.useState)([0, 50]),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  return (0, _react2.jsx)(_index.SliderField, {
+    label: loremText,
+    isMultiThumb: true,
+    onChange: setValue,
+    value: value
+  });
+};
+exports.ControlledMultiThumb = ControlledMultiThumb;
+var CustomProps = function CustomProps() {
+  var CustomLabel = function CustomLabel() {
+    return (0, _react2.jsx)(_index.Label, {
+      hintText: loremText
+    }, loremText);
+  };
+  return (0, _react2.jsx)(_index.SliderField, {
+    size: "1000px",
+    label: (0, _react2.jsx)(CustomLabel, null),
+    thumbProps: {
+      bg: 'orange'
+    },
+    activeTrackProps: {
+      bg: 'cyan'
+    },
+    trackProps: {
+      bg: 'magenta'
+    },
+    helperText: "Helper text"
+  });
+};
+exports.CustomProps = CustomProps;

package/lib/cjs/components/SliderField/SliderField.test.d.ts

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

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

@@ -0,0 +1,357 @@
+"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");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _universalFormSubmitTest = require("../../utils/testUtils/universalFormSubmitTest");
+var _SliderField = _interopRequireDefault(require("./SliderField"));
+var _react2 = require("@emotion/react");
+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 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 (0, _testWrapper.render)((0, _react2.jsx)(_SliderField["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_SliderField["default"], (0, _extends2["default"])({}, props, defaultProps));
+  }
+});
+(0, _universalFormSubmitTest.universalFieldComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_SliderField["default"], (0, _extends2["default"])({}, 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(_testWrapper.screen.getByText('Slider Field')).toBeInTheDocument();
+    expect(_testWrapper.screen.getByRole('slider')).toHaveValue('50');
+  });
+  test('renders SliderField with custom value', function () {
+    getComponent({
+      label: 'Custom Slider',
+      value: 30
+    });
+    expect(_testWrapper.screen.getByText('Custom Slider')).toBeInTheDocument();
+    expect(_testWrapper.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 = _testWrapper.screen.getByRole('slider');
+    _testWrapper.fireEvent.change(slider, {
+      target: {
+        value: 60
+      }
+    });
+    expect(onChangeMock).toHaveBeenCalledWith(60);
+  });
+  test('renders vertical orientation', function () {
+    getComponent({
+      label: 'Vertical Slider',
+      orientation: 'vertical',
+      defaultValue: 20
+    });
+    expect(_testWrapper.screen.getByText('Vertical Slider')).toBeInTheDocument();
+    expect(_testWrapper.screen.getByRole('slider')).toHaveAttribute('aria-orientation', 'vertical');
+  });
+  test('disables the slider when isDisabled is true', function () {
+    getComponent({
+      label: 'Disabled Slider',
+      isDisabled: true
+    });
+    var slider = _testWrapper.screen.getByRole('slider');
+    expect(slider).toBeDisabled();
+  });
+  test('renders display value correctly', function () {
+    getComponent({
+      label: 'Slider with Display',
+      defaultValue: 70,
+      displayValue: '70%'
+    });
+    expect(_testWrapper.screen.getByText('70%')).toBeInTheDocument();
+  });
+  test('hides display value when isDisplayValueHidden is true', function () {
+    getComponent({
+      label: 'Hidden Display Slider',
+      defaultValue: 50,
+      isDisplayValueHidden: true
+    });
+    expect(_testWrapper.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 = _testWrapper.screen.getByRole('slider');
+    _testWrapper.fireEvent.mouseDown(slider);
+    _testWrapper.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 = _testWrapper.screen.getByRole('slider');
+    var output = _testWrapper.screen.getByTestId(outputId);
+    _userEvent["default"].tab();
+    _testWrapper.fireEvent.keyDown(slider, {
+      key: 'ArrowRight'
+    });
+    _testWrapper.fireEvent.keyUp(slider, {
+      key: 'ArrowRight'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    output = _testWrapper.screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('60');
+    _testWrapper.fireEvent.keyDown(slider, {
+      key: 'ArrowLeft'
+    });
+    _testWrapper.fireEvent.keyUp(slider, {
+      key: 'ArrowLeft'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    output = _testWrapper.screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('50');
+    _testWrapper.fireEvent.keyDown(slider, {
+      key: 'Home'
+    });
+    _testWrapper.fireEvent.keyUp(slider, {
+      key: 'Home'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(3);
+    output = _testWrapper.screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('0');
+    _testWrapper.fireEvent.keyDown(slider, {
+      key: 'End'
+    });
+    _testWrapper.fireEvent.keyUp(slider, {
+      key: 'End'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(4);
+    output = _testWrapper.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 = _testWrapper.screen.getByRole('slider');
+    var output = _testWrapper.screen.getByTestId(outputId);
+    _userEvent["default"].tab();
+    _testWrapper.fireEvent.keyDown(slider, {
+      key: 'Home'
+    });
+    _testWrapper.fireEvent.keyUp(slider, {
+      key: 'Home'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    output = _testWrapper.screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('10');
+    _testWrapper.fireEvent.keyDown(slider, {
+      key: 'End'
+    });
+    _testWrapper.fireEvent.keyUp(slider, {
+      key: 'End'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    output = _testWrapper.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 = _testWrapper.screen.getByRole('slider');
+    var output = _testWrapper.screen.getByTestId(outputId);
+    _userEvent["default"].tab();
+    _testWrapper.fireEvent.keyDown(slider, {
+      key: 'ArrowUp'
+    });
+    _testWrapper.fireEvent.keyUp(slider, {
+      key: 'ArrowUp'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    output = _testWrapper.screen.getByTestId(outputId);
+    expect(output).toHaveTextContent('60');
+    _testWrapper.fireEvent.keyDown(slider, {
+      key: 'ArrowDown'
+    });
+    _testWrapper.fireEvent.keyUp(slider, {
+      key: 'ArrowDown'
+    });
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+    output = _testWrapper.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 = _testWrapper.screen.getAllByTestId(thumbId);
+    expect(thumbs).toHaveLength(2);
+    var _thumbs = (0, _slicedToArray2["default"])(thumbs, 2),
+      thumb1 = _thumbs[0],
+      thumb2 = _thumbs[1];
+    _testWrapper.fireEvent.keyDown(thumb1, {
+      key: 'ArrowRight'
+    });
+    _testWrapper.fireEvent.keyUp(thumb1, {
+      key: 'ArrowRight'
+    });
+    expect(onChangeMock).toHaveBeenCalledWith([30, 80]);
+    _testWrapper.fireEvent.keyDown(thumb2, {
+      key: 'ArrowLeft'
+    });
+    _testWrapper.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 = _testWrapper.screen.getByTestId(trackId);
+    var activeTrack = _testWrapper.screen.getByTestId(activeTrackId);
+    var slider = _testWrapper.screen.getByRole('slider');
+    _userEvent["default"].tab();
+    _testWrapper.fireEvent.keyDown(slider, {
+      key: 'ArrowRight'
+    });
+    _testWrapper.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 = _testWrapper.screen.getByText('Slider Field');
+    var wrapper = _testWrapper.screen.getByTestId(wrapperId);
+    _userEvent["default"].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 = _testWrapper.screen.getByTestId(sliderTestId);
+    expect(container).toHaveStyle({
+      width: '300px'
+    });
+    rerender((0, _react2.jsx)(_SliderField["default"], (0, _extends2["default"])({}, 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 = _testWrapper.screen.getByTestId(sliderTestId);
+    expect(container).toHaveStyle({
+      backgroundColor: 'red',
+      padding: '20px'
+    });
+  });
+});

package/lib/cjs/components/SliderField/SliderLabelContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SliderLabelContainerProps } from '../../types/sliderField';
+declare const SliderLabelContainer: React.ForwardRefExoticComponent<SliderLabelContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default SliderLabelContainer;

package/lib/cjs/components/SliderField/SliderLabelContainer.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+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; }
+var SliderLabelContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var displayValue = props.displayValue,
+    label = props.label,
+    labelProps = props.labelProps,
+    isDisplayValueHidden = props.isDisplayValueHidden,
+    outputProps = props.outputProps,
+    className = props.className;
+  return (0, _react2.jsx)(_index.Box, {
+    ref: ref,
+    className: className,
+    variant: "slider.labelContainer"
+  }, label && (0, _react2.jsx)(_index.Box, {
+    sx: {
+      gap: '0px'
+    }
+  }, (0, _react2.jsx)(_index.Label, (0, _extends2["default"])({}, labelProps, {
+    sx: {
+      mb: '0px'
+    }
+  }), label)), !isDisplayValueHidden && (0, _react2.jsx)(_index.Box, {
+    className: className,
+    variant: "slider.outputContainer"
+  }, (0, _react2.jsx)(_index.Text, outputProps, displayValue)));
+});
+var _default = SliderLabelContainer;
+exports["default"] = _default;

package/lib/cjs/components/SliderField/SliderThumb.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SliderThumbProps } from '../../types/sliderField';
+declare const SliderThumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLDivElement>>;
+export default SliderThumb;

package/lib/cjs/components/SliderField/SliderThumb.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _interactions = require("@react-aria/interactions");
+var _hooks = require("../../hooks");
+var _Box = _interopRequireDefault(require("../Box"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _react2 = require("@emotion/react");
+var _excluded = ["className", "index", "inputProps", "isHorizontal", "isVertical", "name", "onFocus", "onFocusChange", "onPress", "state", "trackRef"];
+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; }
+var SliderThumb = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var inputRef = (0, _react.useRef)(null);
+  var thumbRef = (0, _hooks.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useSliderThumb = (0, _reactAria.useSliderThumb)({
+      index: index,
+      trackRef: trackRef,
+      inputRef: inputRef,
+      name: name
+    }, state),
+    thumbProps = _useSliderThumb.thumbProps,
+    raInputProps = _useSliderThumb.inputProps,
+    isDragging = _useSliderThumb.isDragging;
+  var _useFocusRing = (0, _reactAria.useFocusRing)(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  var _useHover = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _usePress = (0, _interactions.usePress)({
+      ref: thumbRef,
+      onPress: onPress
+    }),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      isDragging: isDragging,
+      isFocused: isFocusVisible,
+      isHorizontal: isHorizontal,
+      isVertical: isVertical,
+      isHovered: isHovered,
+      isPressed: isPressed
+    }),
+    classNames = _useStatusClasses.classNames;
+  var mergedThumbProps = (0, _reactAria.mergeProps)(pressProps, others, hoverProps, thumbProps);
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    className: classNames,
+    variant: "slider.thumb",
+    "data-testid": "thumb"
+  }, mergedThumbProps), (0, _react2.jsx)(_reactAria.VisuallyHidden, null, (0, _react2.jsx)(_Input["default"], (0, _extends2["default"])({
+    ref: inputRef,
+    "data-testid": "input"
+  }, (0, _reactAria.mergeProps)(inputProps, raInputProps, focusProps), {
+    name: name
+  }))));
+});
+var _default = SliderThumb;
+exports["default"] = _default;

package/lib/cjs/components/SliderField/index.d.ts

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

package/lib/cjs/components/SliderField/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+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
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _SliderField["default"];
+  }
+});
+var _SliderField = _interopRequireDefault(require("./SliderField"));

package/lib/cjs/hooks/index.d.ts

@@ -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';