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

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

@@ -0,0 +1,155 @@
+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";
+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 { defaultFocus } from '../Button/Buttons.styles';
+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({}, 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'
+  }
+};
+export default {
+  test: test,
+  slider: slider,
+  activeTrack: activeTrack,
+  thumb: thumb,
+  track: track,
+  hiddenTrack: hiddenTrack,
+  trackWrapper: trackWrapper,
+  labelContainer: labelContainer,
+  outputContainer: outputContainer,
+  wrapper: wrapper
+};

package/lib/components/SliderField/SliderActiveTrack.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "isHorizontal", "isMultiThumb", "state", "sx"];
+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 _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
+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 React, { forwardRef } from 'react';
+import { Box } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var SliderActiveTrack = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+    isHorizontal = props.isHorizontal,
+    isMultiThumb = props.isMultiThumb,
+    state = props.state,
+    sx = props.sx,
+    others = _objectWithoutProperties(props, _excluded);
+  var length = isMultiThumb ? "".concat(_valuesInstanceProperty(state)[1] - _valuesInstanceProperty(state)[0], "%") : "".concat(_valuesInstanceProperty(state)[0], "%");
+  var trackStart = "".concat(_valuesInstanceProperty(state)[0], "%");
+  var cssLenProp = isHorizontal ? 'width' : 'height';
+  var cssStartProp = isHorizontal ? 'left' : 'top';
+  return ___EmotionJSX(Box, _extends({
+    ref: ref,
+    className: className,
+    sx: _objectSpread(_objectSpread(_defineProperty({}, cssLenProp, length), isMultiThumb && _defineProperty({}, cssStartProp, trackStart)), sx),
+    variant: "slider.activeTrack"
+  }, others));
+});
+export default SliderActiveTrack;

package/lib/components/SliderField/SliderField.js

@@ -0,0 +1,46 @@
+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 _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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, { forwardRef } from 'react';
+import { useSliderField } from '../../hooks';
+import { Box, FieldHelperText } from '../../index';
+import SliderActiveTrack from './SliderActiveTrack';
+import SliderLabelContainer from './SliderLabelContainer';
+import SliderThumb from './SliderThumb';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var SliderField = /*#__PURE__*/forwardRef(function (props, ref) {
+  var helperText = props.helperText,
+    _props$isMultiThumb = props.isMultiThumb,
+    isMultiThumb = _props$isMultiThumb === void 0 ? false : _props$isMultiThumb;
+  var trackRef = React.useRef(null);
+  var _useSliderField = 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 ___EmotionJSX(Box, _extends({}, containerProps, {
+    ref: ref
+  }), ___EmotionJSX(Box, wrapperProps, labelContainerProps.isHorizontal && ___EmotionJSX(SliderLabelContainer, labelContainerProps), ___EmotionJSX(Box, visibleTrackProps, ___EmotionJSX(SliderActiveTrack, sliderActiveTrackProps), ___EmotionJSX(Box, _extends({}, hiddenTrackProps, {
+    ref: trackRef
+  }), ___EmotionJSX(SliderThumb, _extends({}, thumbPropsSpread, {
+    index: 0
+  })), isMultiThumb && ___EmotionJSX(SliderThumb, _extends({}, thumbPropsSpread, {
+    index: 1
+  }))))), labelContainerProps.isVertical && ___EmotionJSX(SliderLabelContainer, labelContainerProps), helperText && ___EmotionJSX(FieldHelperText, helperTextProps, helperText));
+});
+export default SliderField;

package/lib/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/components/SliderField/SliderField.stories.js

@@ -0,0 +1,131 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useState } from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Label, SliderField } from '../../index';
+import SliderFieldReadme from './SliderField.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/SliderField',
+  component: SliderField,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SliderFieldReadme, null), ___EmotionJSX(DocsLayout, 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...'
+  }
+};
+var loremText = 'Lorem ipsum';
+export var Default = function Default(_ref) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return ___EmotionJSX(SliderField, _extends({
+    label: loremText,
+    defaultValue: 40
+  }, args));
+};
+export var Controlled = function Controlled() {
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return ___EmotionJSX(SliderField, {
+    value: value,
+    onChange: setValue,
+    displayValue: "(".concat(value, "px)"),
+    label: loremText
+  });
+};
+export var Vertical = function Vertical() {
+  return ___EmotionJSX(SliderField, {
+    label: loremText,
+    orientation: "vertical",
+    size: "150px"
+  });
+};
+export var MultiThumb = function MultiThumb() {
+  return ___EmotionJSX(SliderField, {
+    label: loremText,
+    isMultiThumb: true
+  });
+};
+export var ControlledMultiThumb = function ControlledMultiThumb() {
+  var _useState3 = useState([0, 50]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  return ___EmotionJSX(SliderField, {
+    label: loremText,
+    isMultiThumb: true,
+    onChange: setValue,
+    value: value
+  });
+};
+export var CustomProps = function CustomProps() {
+  var CustomLabel = function CustomLabel() {
+    return ___EmotionJSX(Label, {
+      hintText: loremText
+    }, loremText);
+  };
+  return ___EmotionJSX(SliderField, {
+    size: "1000px",
+    label: ___EmotionJSX(CustomLabel, null),
+    thumbProps: {
+      bg: 'orange'
+    },
+    activeTrackProps: {
+      bg: 'cyan'
+    },
+    trackProps: {
+      bg: 'magenta'
+    },
+    helperText: "Helper text"
+  });
+};