feat(Slider): add new component

packages/configs/eslint-config/index.js

@@ -75,6 +75,7 @@ module.exports = {
               'Pagination',
               'PaginationItem',
               'Radio',
+              'Slider',
               'SvgIcon',
               'Switch',
               'Table',
@@ -195,6 +196,10 @@ module.exports = {
             group: ['@mui/material/Radio'],
             importNames: ['default'],
           },
+          {
+            group: ['@mui/material/Slider'],
+            importNames: ['default'],
+          },
           {
             group: ['@mui/material/SvgIcon'],
             importNames: ['default'],

packages/react/src/components/AudioPlayer/AudioPlayer.tsx

@@ -9,7 +9,6 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 
 import { styled, useThemeProps } from '@mui/material/styles';
 import MenuList from '@mui/material/MenuList';
-import Slider, { sliderClasses } from '@mui/material/Slider';
 import Tooltip, { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import TrapFocus from '@mui/material/Unstable_TrapFocus';
@@ -34,6 +33,7 @@ import { Button } from '../Button';
 import { Divider, dividerClasses } from '../Divider';
 import { ListItemIcon, ListItemText, listItemTextClasses } from '../ListItem';
 import { MenuItem } from '../MenuItem';
+import { Slider, sliderClasses } from '../Slider';
 
 import { Instance } from '@popperjs/core';
 
@@ -176,56 +176,53 @@ const AudioPlayerCurrentSlider = styled(Slider, {
     return [styles.currentSlider, isPlaying && styles.currentSliderPlaying, !isPlaying && styles.currentSliderPaused];
   },
 })<{ ownerState: AudioPlayerOwnerState }>(({ theme, ownerState }) => ({
-  [`&.${sliderClasses.colorPrimary}`]: {
-    padding: '18px 0',
-
-    [`& .${sliderClasses.thumb}`]: {
-      '&:hover': {
-        height: 8,
-        width: 8,
-        boxShadow: `0 0 0 10px ${theme.vars.palette.primary.A150}`,
-      },
-      [`&.${sliderClasses.focusVisible}`]: {
-        opacity: 1,
-        height: 10,
-        width: 10,
-        boxShadow: `0 0 0 9px ${theme.vars.palette.primary.A400}`,
-      },
-      [`&.${sliderClasses.active}`]: {
-        height: 10,
-        width: 10,
-        boxShadow: `0 0 0 9px ${theme.vars.palette.primary.A300}`,
-      },
-    },
-    ...(!ownerState.isPlaying && {
-      color: theme.vars.palette.monoA.A600,
-      [`& .${sliderClasses.thumb}`]: {
-        opacity: 0,
-        backdropFilter: 'blur(40px)',
-
-        [`&.${sliderClasses.focusVisible}`]: {
-          opacity: 1,
-          height: 10,
-          width: 10,
-          boxShadow: `0 0 0 9px ${theme.vars.palette.monoA.A75}`,
-        },
-      },
-    }),
-  },
-  [`& .${sliderClasses.thumb}`]: {
-    opacity: 0,
-    height: 8,
-    width: 8,
-
-    '&::after': {
-      width: 12,
-      height: 30,
-      borderRadius: 0,
-    },
-  },
-  [`& .${sliderClasses.rail}`]: {
-    backgroundColor: theme.vars.palette.monoA.A100,
-  },
+  // [`&.${sliderClasses.colorPrimary}`]: {
+  //   padding: '18px 0',
+  //   [`& .${sliderClasses.thumb}`]: {
+  //     '&:hover': {
+  //       height: 8,
+  //       width: 8,
+  //       boxShadow: `0 0 0 10px ${theme.vars.palette.primary.A150}`,
+  //     },
+  //     [`&.${sliderClasses.focusVisible}`]: {
+  //       opacity: 1,
+  //       height: 10,
+  //       width: 10,
+  //       boxShadow: `0 0 0 9px ${theme.vars.palette.primary.A400}`,
+  //     },
+  //     [`&.${sliderClasses.active}`]: {
+  //       height: 10,
+  //       width: 10,
+  //       boxShadow: `0 0 0 9px ${theme.vars.palette.primary.A300}`,
+  //     },
+  //   },
+  //   ...(!ownerState.isPlaying && {
+  //     color: theme.vars.palette.monoA.A600,
+  //     [`& .${sliderClasses.thumb}`]: {
+  //       opacity: 0,
+  //       backdropFilter: 'blur(40px)',
+  //       [`&.${sliderClasses.focusVisible}`]: {
+  //         opacity: 1,
+  //         height: 10,
+  //         width: 10,
+  //         boxShadow: `0 0 0 9px ${theme.vars.palette.monoA.A75}`,
+  //       },
+  //     },
+  //   }),
+  // },
+  // [`& .${sliderClasses.thumb}`]: {
+  //   opacity: 0,
+  //   height: 8,
+  //   width: 8,
+  //   '&::after': {
+  //     width: 12,
+  //     height: 30,
+  //     borderRadius: 0,
+  //   },
+  // },
+  // [`& .${sliderClasses.rail}`]: {
+  //   backgroundColor: theme.vars.palette.monoA.A100,
+  // },
 }));
 
 const AudioPlayerTime = styled(Typography, {

packages/react/src/components/Slider/Slider.api.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/blocks';
+import LinkTo from '@storybook/addon-links/react';
+import { TableInterface } from '~storybook/components/TableInterface';
+
+<Meta title="Components API/Slider" />
+
+# Dropzone API
+
+```js
+import { Slider } from '@elonkit/react';
+```
+
+## Component name
+
+The name `ESSlider` can be used when providing default props or style overrides in the theme.
+
+## Props
+
+<TableInterface name="SliderProps" variant="props" />
+
+<br />
+
+## CSS
+
+<TableInterface name="SliderClasses" variant="css" />
+
+<br />
+
+## Demos
+
+<ul>
+  <li>
+    <LinkTo kind="components-Slider" story="demo">
+      <code>Slider</code>
+    </LinkTo>
+  </li>
+</ul>

packages/react/src/components/Slider/Slider.classes.ts

@@ -0,0 +1,112 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+
+export interface SliderClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `color="primary"`. */
+  colorPrimary: string;
+  /** Styles applied to the root element if `color="secondary"`. */
+  colorSecondary: string;
+  /** Styles applied to the root element if `color="error"`. */
+  colorError: string;
+  /** Styles applied to the root element if `color="info"`. */
+  colorInfo: string;
+  /** Styles applied to the root element if `color="success"`. */
+  colorSuccess: string;
+  /** Styles applied to the root element if `color="warning"`. */
+  colorWarning: string;
+  /** Styles applied to the root element if `marks` is provided with at least one label. */
+  marked: string;
+  /** Styles applied to the root element if `orientation="horizontal"`. */
+  horizontal: string;
+  /** Styles applied to the root element if `orientation="vertical"`. */
+  vertical: string;
+  /** State class applied to the root and thumb element if `disabled={true}`. */
+  disabled: string;
+  /** State class applied to the root if a thumb is being dragged. */
+  dragging: string;
+  /** Styles applied to the rail element. */
+  rail: string;
+  /** Styles applied to the track element. */
+  track: string;
+  /** Styles applied to the root element if `track={false}`. */
+  trackFalse: string;
+  /** Styles applied to the root element if `track="inverted"`. */
+  trackInverted: string;
+  /** Styles applied to the thumb element. */
+  thumb: string;
+  /** State class applied to the thumb element if it's active. */
+  active: string;
+  /** State class applied to the thumb element if keyboard focused. */
+  focusVisible: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to the mark element if active (depending on the value). */
+  markActive: string;
+  /** Styles applied to the mark label element. */
+  markLabel: string;
+  /** Styles applied to the mark label element if active (depending on the value). */
+  markLabelActive: string;
+  /** Styles applied to the thumb element if `color="primary"`. */
+  thumbColorPrimary: string;
+  /** Styles applied to the thumb element if `color="secondary"`. */
+  thumbColorSecondary: string;
+  /** Styles applied to the thumb element if `color="error"`. */
+  thumbColorError: string;
+  /** Styles applied to the thumb element if `color="info"`. */
+  thumbColorInfo: string;
+  /** Styles applied to the thumb element if `color="success"`. */
+  thumbColorSuccess: string;
+  /** Styles applied to the thumb element if `color="warning"`. */
+  thumbColorWarning: string;
+  /** Styles applied to the thumb label element. */
+  valueLabel: string;
+  /** Styles applied to the thumb label element if it's open. */
+  valueLabelOpen: string;
+  /** Styles applied to the thumb label's circle element. */
+  valueLabelCircle: string;
+  /** Styles applied to the thumb label's label element. */
+  valueLabelLabel: string;
+}
+
+export type SliderClassKey = keyof SliderClasses;
+
+export function getSliderUtilityClass(slot: string): string {
+  return generateUtilityClass('ESSlider', slot);
+}
+
+export const sliderClasses: SliderClasses = generateUtilityClasses('MuiSlider', [
+  'root',
+  'active',
+  'colorPrimary',
+  'colorSecondary',
+  'colorError',
+  'colorInfo',
+  'colorSuccess',
+  'colorWarning',
+  'disabled',
+  'dragging',
+  'focusVisible',
+  'mark',
+  'markActive',
+  'marked',
+  'markLabel',
+  'markLabelActive',
+  'rail',
+  'thumb',
+  'thumbColorPrimary',
+  'thumbColorSecondary',
+  'thumbColorError',
+  'thumbColorSuccess',
+  'thumbColorInfo',
+  'thumbColorWarning',
+  'track',
+  'trackInverted',
+  'trackFalse',
+  'valueLabel',
+  'valueLabelOpen',
+  'valueLabelCircle',
+  'valueLabelLabel',
+  'vertical',
+  'horizontal',
+]);