@pingux/astro 2.118.0-alpha.0 → 2.118.0

package/lib/cjs/components/SliderField/Slider.styles.d.ts

@@ -0,0 +1,138 @@
+declare const _default: {
+    test: {
+        bg: string;
+    };
+    slider: {
+        display: string;
+        '&.is-horizontal': {
+            flexDirection: string;
+        };
+    };
+    activeTrack: {
+        bg: string;
+        position: string;
+        '&.is-horizontal': {
+            borderRadius: string;
+            height: string;
+            '&.is-single-track': {
+                left: string;
+            };
+        };
+        '&.is-vertical': {
+            borderRadius: string;
+            width: string;
+            bottom: string;
+        };
+    };
+    thumb: {
+        width: string;
+        height: string;
+        borderRadius: string;
+        bg: string;
+        cursor: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-horizontal': {
+            top: string;
+        };
+        '&.is-vertical': {
+            left: string;
+        };
+        '&.is-hovered': {
+            backgroundColor: string;
+        };
+        '&.is-pressed': {
+            backgroundColor: string;
+        };
+    };
+    track: {
+        backgroundColor: string;
+        cursor: string;
+        mb: string;
+        position: string;
+        '&.is-disabled': {
+            opacity: number;
+        };
+        '&.is-horizontal': {
+            height: string;
+            borderRadius: string;
+            width: string;
+        };
+        '&:before': {
+            content: string;
+            display: string;
+            position: string;
+            height: string;
+            width: string;
+            top: string;
+            transform: string;
+        };
+        '&.is-vertical': {
+            width: string;
+            borderRadius: string;
+            height: string;
+            '&:before': {
+                content: string;
+                display: string;
+                position: string;
+                width: string;
+                height: string;
+                left: string;
+                transform: string;
+            };
+        };
+    };
+    hiddenTrack: {
+        cursor: string;
+        '&.is-horizontal': {
+            height: string;
+            borderRadius: string;
+            width: string;
+            ml: string;
+            mr: string;
+        };
+        '&.is-vertical': {
+            width: string;
+            borderRadius: string;
+            height: string;
+            mt: string;
+            mb: string;
+        };
+    };
+    trackWrapper: {
+        '&.is-vertical': {
+            py: string;
+        };
+        '&.is-horizontal': {
+            px: string;
+        };
+    };
+    labelContainer: {
+        '&.is-horizontal': {
+            mb: string;
+        };
+        '&.is-vertical': {
+            mt: string;
+            gap: string;
+        };
+    };
+    outputContainer: {
+        '&.is-horizontal': {
+            marginLeft: string;
+            mt: string;
+        };
+    };
+    wrapper: {
+        '&.is-horizontal': {
+            width: string;
+        };
+        '&.is-vertical': {
+            height: string;
+            ml: string;
+        };
+    };
+};
+export default _default;

package/lib/cjs/components/SliderField/Slider.styles.js

@@ -0,0 +1,163 @@
+"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["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _Buttons = require("../Button/Buttons.styles");
+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 test = {
+  bg: 'active'
+};
+var slider = {
+  display: 'flex',
+  '&.is-horizontal': {
+    flexDirection: 'column'
+  }
+};
+var track = {
+  backgroundColor: 'slider.track',
+  cursor: 'pointer',
+  mb: 'sm',
+  position: 'relative',
+  '&.is-disabled': {
+    opacity: 0.4
+  },
+  '&.is-horizontal': {
+    height: '10px',
+    borderRadius: '11px',
+    width: '100%'
+  },
+  '&:before': {
+    content: 'attr(x)',
+    display: 'block',
+    position: 'absolute',
+    height: '3px',
+    width: '100%',
+    top: '50%',
+    transform: 'translateY(-50%)'
+  },
+  '&.is-vertical': {
+    width: '10px',
+    borderRadius: '11px',
+    height: '100%',
+    '&:before': {
+      content: 'attr(x)',
+      display: 'block',
+      position: 'absolute',
+      width: '3px',
+      height: '100%',
+      left: '50%',
+      transform: 'translateX(-50%)'
+    }
+  }
+};
+var hiddenTrack = {
+  cursor: 'pointer',
+  '&.is-horizontal': {
+    height: '10px',
+    borderRadius: '11px',
+    width: 'calc(100% - 9px)',
+    ml: '4.5px',
+    mr: '4.5px'
+  },
+  '&.is-vertical': {
+    width: '10px',
+    borderRadius: '11px',
+    height: 'calc(100% - 9px)',
+    mt: '4.5px',
+    mb: '4.5px'
+  }
+};
+var thumb = {
+  width: '21px',
+  height: '21px',
+  borderRadius: '50%',
+  bg: 'active',
+  cursor: 'pointer',
+  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-horizontal': {
+    top: '50%'
+  },
+  '&.is-vertical': {
+    left: '50%'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.40'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'accent.20'
+  }
+};
+var activeTrack = {
+  bg: 'active',
+  position: 'absolute',
+  '&.is-horizontal': {
+    borderRadius: '11px 0px 0px 11px',
+    height: '100%',
+    '&.is-single-track': {
+      left: '0%'
+    }
+  },
+  '&.is-vertical': {
+    borderRadius: '11px 11px 11px 11px',
+    width: '100%',
+    bottom: '0%'
+  }
+};
+var trackWrapper = {
+  '&.is-vertical': {
+    py: '9px'
+  },
+  '&.is-horizontal': {
+    px: '9px'
+  }
+};
+var labelContainer = {
+  '&.is-horizontal': {
+    mb: 'xs'
+  },
+  '&.is-vertical': {
+    mt: 'xs',
+    gap: 'xs'
+  }
+};
+var wrapper = {
+  '&.is-horizontal': {
+    width: '100%'
+  },
+  '&.is-vertical': {
+    height: '100%',
+    ml: 'xs'
+  }
+};
+var outputContainer = {
+  '&.is-horizontal': {
+    marginLeft: 'auto',
+    mt: '-3px'
+  }
+};
+var _default = {
+  test: test,
+  slider: slider,
+  activeTrack: activeTrack,
+  thumb: thumb,
+  track: track,
+  hiddenTrack: hiddenTrack,
+  trackWrapper: trackWrapper,
+  labelContainer: labelContainer,
+  outputContainer: outputContainer,
+  wrapper: wrapper
+};
+exports["default"] = _default;

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

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

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

@@ -0,0 +1,49 @@
+"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");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["className", "isHorizontal", "isMultiThumb", "state", "sx"];
+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 SliderActiveTrack = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+    isHorizontal = props.isHorizontal,
+    isMultiThumb = props.isMultiThumb,
+    state = props.state,
+    sx = props.sx,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var length = isMultiThumb ? "".concat((0, _values["default"])(state)[1] - (0, _values["default"])(state)[0], "%") : "".concat((0, _values["default"])(state)[0], "%");
+  var trackStart = "".concat((0, _values["default"])(state)[0], "%");
+  var cssLenProp = isHorizontal ? 'width' : 'height';
+  var cssStartProp = isHorizontal ? 'left' : 'top';
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    ref: ref,
+    className: className,
+    sx: _objectSpread(_objectSpread((0, _defineProperty2["default"])({}, cssLenProp, length), isMultiThumb && (0, _defineProperty2["default"])({}, cssStartProp, trackStart)), sx),
+    variant: "slider.activeTrack"
+  }, others));
+});
+var _default = SliderActiveTrack;
+exports["default"] = _default;

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

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

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

@@ -0,0 +1,58 @@
+"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");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../hooks");
+var _index = require("../../index");
+var _SliderActiveTrack = _interopRequireDefault(require("./SliderActiveTrack"));
+var _SliderLabelContainer = _interopRequireDefault(require("./SliderLabelContainer"));
+var _SliderThumb = _interopRequireDefault(require("./SliderThumb"));
+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; }
+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 SliderField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var helperText = props.helperText,
+    _props$isMultiThumb = props.isMultiThumb,
+    isMultiThumb = _props$isMultiThumb === void 0 ? false : _props$isMultiThumb;
+  var trackRef = _react["default"].useRef(null);
+  var _useSliderField = (0, _hooks.useSliderField)(_objectSpread(_objectSpread({}, props), {}, {
+      trackRef: trackRef
+    })),
+    containerProps = _useSliderField.containerProps,
+    labelContainerProps = _useSliderField.labelContainerProps,
+    sliderActiveTrackProps = _useSliderField.sliderActiveTrackProps,
+    hiddenTrackProps = _useSliderField.hiddenTrackProps,
+    helperTextProps = _useSliderField.helperTextProps,
+    thumbPropsSpread = _useSliderField.thumbPropsSpread,
+    visibleTrackProps = _useSliderField.visibleTrackProps,
+    wrapperProps = _useSliderField.wrapperProps;
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, containerProps, {
+    ref: ref
+  }), (0, _react2.jsx)(_index.Box, wrapperProps, labelContainerProps.isHorizontal && (0, _react2.jsx)(_SliderLabelContainer["default"], labelContainerProps), (0, _react2.jsx)(_index.Box, visibleTrackProps, (0, _react2.jsx)(_SliderActiveTrack["default"], sliderActiveTrackProps), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, hiddenTrackProps, {
+    ref: trackRef
+  }), (0, _react2.jsx)(_SliderThumb["default"], (0, _extends2["default"])({}, thumbPropsSpread, {
+    index: 0
+  })), isMultiThumb && (0, _react2.jsx)(_SliderThumb["default"], (0, _extends2["default"])({}, thumbPropsSpread, {
+    index: 1
+  }))))), labelContainerProps.isVertical && (0, _react2.jsx)(_SliderLabelContainer["default"], labelContainerProps), helperText && (0, _react2.jsx)(_index.FieldHelperText, helperTextProps, helperText));
+});
+var _default = SliderField;
+exports["default"] = _default;

package/lib/cjs/components/SliderField/SliderField.mdx

@@ -0,0 +1,127 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/SliderField" />
+
+# SliderField
+
+The `SliderField` component is used to allow users to select a value from a range by dragging a thumb along a track. It supports both horizontal and vertical orientations, multi-thumb sliders, and provides a customizable display value.
+
+### Recommended Use
+
+- Use the `SliderField` component for selecting numeric values within a defined range.
+- Display the current value dynamically as the user interacts with the slider.
+- Use multi-thumb sliders for selecting a range of values.
+
+### Features
+
+- **Horizontal and Vertical Orientations**: Supports both orientations for flexible UI design.
+- **Multi-Thumb Sliders**: Allows selecting a range of values.
+- **Customizable Display Value**: Allows dynamic display of the current value.
+- **Keyboard Accessibility**: Fully accessible with keyboard navigation.
+- **Customizable Tracks and Thumbs**: Add custom class names or styles to `trackProps` and `activeTrackProps`.
+
+### Props
+
+| Prop                  | Type                 | Description                                                                 |
+| --------------------- | -------------------- | --------------------------------------------------------------------------- |
+| `activeTrackProps`    | `object`            | Props passed to the active track element.                                   |
+| `autoFocus`           | `boolean`           | Automatically focuses the slider when it is rendered.                       |
+| `className`           | `string`            | Additional class names for custom styling.                                  |
+| `defaultValue`        | `number` `[number, number]` | The default value of the slider.                                            |
+| `displayValue`        | `string`            | Custom display value for the slider.                                        |
+| `formatOptions`       | `Intl.NumberFormatOptions` | Options for formatting the display value.                                   |
+| `helperText`          | `string`            | Text displayed below the slider for additional context.                     |
+| `helperTextProps`     | `object`            | Props passed to the helper text element.                                    |
+| `isDisabled`          | `boolean`           | Disables the slider.                                                        |
+| `isDisplayValueHidden`| `boolean`           | Hides the display value if set to `true`.                                   |
+| `isMultiThumb`        | `boolean`           | Enables multi-thumb slider functionality.                                   |
+| `label`               | `string` `ReactNode` | Label for the slider.                                                       |
+| `maxValue`            | `number`            | Maximum value of the slider.                                                |
+| `minValue`            | `number`            | Minimum value of the slider.                                                |
+| `name`                | `string`            | Name of the slider input.                                                   |
+| `onBlur`              | `function`          | Callback triggered when the slider loses focus.                             |
+| `onChange`            | `function`          | Callback triggered when the slider value changes.                           |
+| `onChangeEnd`         | `function`          | Callback triggered when the slider interaction ends.                        |
+| `onFocus`             | `function`          | Callback triggered when the slider gains focus.                             |
+| `onFocusChange`       | `function`          | Callback triggered when the focus state changes.                            |
+| `onKeyDown`           | `function`          | Callback triggered on key down events.                                      |
+| `onKeyUp`             | `function`          | Callback triggered on key up events.                                        |
+| `orientation`         | `'horizontal' 'vertical'` | Orientation of the slider.                                            |
+| `step`                | `number`            | Step size for the slider.                                                   |
+| `thumbProps`          | `object`            | Props passed to the slider thumb.                                           |
+| `trackProps`          | `object`            | Props passed to the track element.                                          |
+| `value`               | `number` `[number, number]` | Controlled value of the slider.                                     |
+
+### Accessibility
+
+This component adheres to accessibility guidelines to ensure a better user experience for all users.
+
+#### Keyboard Navigation
+
+| Keys         | Function                                                                 |
+| ------------ | ----------------------------------------------------------------------- |
+| Tab          | Moves focus to the slider.                                              |
+| Arrow Keys   | Adjusts the slider value incrementally.                                  |
+| Home         | Moves the slider to the minimum value.                                  |
+| End          | Moves the slider to the maximum value.                                  |
+
+#### Screen Readers
+
+- **`aria-valuenow`**: Announces the current value of the slider.
+- **`aria-valuemin` and `aria-valuemax`**: Define the minimum and maximum values of the slider.
+- **`aria-orientation`**: Indicates whether the slider is horizontal or vertical.
+
+### Example Usage
+
+#### Single Thumb Slider
+
+```jsx
+<SliderField
+  label="Volume"
+  defaultValue={50}
+  minValue={0}
+  maxValue={100}
+  step={1}
+  onChange={(value) => console.log('Value:', value)}
+/>
+```
+
+#### Multi-Thumb Slider
+
+```jsx
+<SliderField
+  label="Range"
+  isMultiThumb
+  defaultValue={[20, 80]}
+  minValue={0}
+  maxValue={100}
+  step={5}
+  onChange={(value) => console.log('Range:', value)}
+/>
+```
+
+#### Custom Tracks and Thumbs
+
+```jsx
+<SliderField
+  label="Custom Slider"
+  trackProps={{ className: 'custom-track' }}
+  activeTrackProps={{ className: 'custom-active-track' }}
+  thumbProps={{ className: 'custom-thumb' }}
+  defaultValue={50}
+  minValue={0}
+  maxValue={100}
+/>
+```
+
+#### Vertical Slider
+
+```jsx
+<SliderField
+  label="Vertical Slider"
+  orientation="vertical"
+  defaultValue={50}
+  minValue={0}
+  maxValue={100}
+/>
+```

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

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: ({ ...args }: {
+    [x: string]: any;
+}) => React.JSX.Element;
+export declare const Controlled: () => React.JSX.Element;
+export declare const Vertical: () => React.JSX.Element;
+export declare const MultiThumb: () => React.JSX.Element;
+export declare const ControlledMultiThumb: () => React.JSX.Element;
+export declare const CustomProps: () => React.JSX.Element;