import React from 'react';
import { Slider as SliderPrimitive, SliderProps as SliderPropsPrimitive } from '@modulz/primitives';

export type SliderProps = SliderPropsPrimitive

type ExtractRefType<TypesThatMayContainReactRef> = TypesThatMayContainReactRef extends {ref?: React.Ref<infer T>} ? T : any;
type PrimitiveRefType = ExtractRefType<SliderPropsPrimitive>  

export const Slider = React.forwardRef<PrimitiveRefType, SliderProps>((props, ref) => {
  return (
    <SliderPrimitive {...props} ref={ref}  styleConfig={{"base":{"track":{"normal":{"backgroundColor":"rgba(226, 229, 233, 1)","borderBottomRightRadius":"2px","borderTopRightRadius":"2px","height":"2px","borderBottomLeftRadius":"2px","borderTopLeftRadius":"2px"}},"thumb":{"normal":{"width":"16px","height":"16px","borderBottomRightRadius":"9999px","borderBottomLeftRadius":"9999px","backgroundColor":"hsl(0, 0%, 100%)","boxShadow":"0 2px 4px 0 rgba(0, 0, 0, 0.15)","borderTopRightRadius":"9999px","borderTopLeftRadius":"9999px"}}},"variants":{}}}/>
  );
});

export {SliderThumb} from '@modulz/primitives';