Fix/range slider align

src/components/RangeSlider/RangeSlider.spec.tsx

@@ -5,7 +5,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { Flowbite, type CustomFlowbiteTheme } from '../Flowbite';
 import { RangeSlider } from './RangeSlider';
 
-describe('Components / Button', () => {
+describe('Components / RangeSlider', () => {
   describe('A11y', () => {
     it('should have `role="progressbar"` by default', () => {
       render(<RangeSlider />);
@@ -127,6 +127,13 @@ describe('Components / Button', () => {
       render(<RangeSlider ref={ref} name="range_slider_name" />);
       expect(ref.current?.name).toBe('range_slider_name');
     });
+
+    it('should allow className as prop', () => {
+      const className = 'dummy-custom-class-name';
+
+      render(<RangeSlider className={className} />);
+      expect(rangeSlider()).toHaveClass(className);
+    });
   });
 
   describe('Rendering', () => {
@@ -140,47 +147,7 @@ describe('Components / Button', () => {
     it('should use `base` classes', () => {
       const theme: CustomFlowbiteTheme = {
         rangeSlider: {
-          root: {
-            base: 'dummy-range-slider-base-classes',
-          },
-        },
-      };
-
-      render(
-        <Flowbite theme={{ theme }}>
-          <RangeSlider />
-        </Flowbite>,
-      );
-
-      expect(rangeSliderContainer()).toHaveClass('dummy-range-slider-base-classes');
-    });
-
-    it('should use `base` classes of field', () => {
-      const theme: CustomFlowbiteTheme = {
-        rangeSlider: {
-          field: {
-            base: 'dummy-range-slider-field-base-classes',
-          },
-        },
-      };
-
-      render(
-        <Flowbite theme={{ theme }}>
-          <RangeSlider />
-        </Flowbite>,
-      );
-
-      expect(rangeSliderContainer().childNodes[0]).toHaveClass('dummy-range-slider-field-base-classes');
-    });
-
-    it('should use `base` classes of input', () => {
-      const theme: CustomFlowbiteTheme = {
-        rangeSlider: {
-          field: {
-            input: {
-              base: 'dummy-range-slider-field-input-base-classes',
-            },
-          },
+          base: 'dummy-range-slider-field-input-base-classes',
         },
       };
 
@@ -193,15 +160,11 @@ describe('Components / Button', () => {
       expect(rangeSlider()).toHaveClass('dummy-range-slider-field-input-base-classes');
     });
 
-    it('should use `sizes` classes of input', () => {
+    it('should use `sizes` classes', () => {
       const theme: CustomFlowbiteTheme = {
         rangeSlider: {
-          field: {
-            input: {
-              sizes: {
-                lg: 'dummy-range-slider-field-input-sizes-lg-classes',
-              },
-            },
+          sizes: {
+            lg: 'dummy-range-slider-field-input-sizes-lg-classes',
           },
         },
       };
@@ -219,50 +182,18 @@ describe('Components / Button', () => {
   describe('Theme as a prop', () => {
     it('should use `base` classes', () => {
       const theme: CustomFlowbiteTheme['rangeSlider'] = {
-        root: {
-          base: 'dummy-range-slider-base-classes',
-        },
-      };
-
-      render(<RangeSlider theme={theme} />);
-
-      expect(rangeSliderContainer()).toHaveClass('dummy-range-slider-base-classes');
-    });
-
-    it('should use `base` classes of field', () => {
-      const theme: CustomFlowbiteTheme['rangeSlider'] = {
-        field: {
-          base: 'dummy-range-slider-field-base-classes',
-        },
-      };
-
-      render(<RangeSlider theme={theme} />);
-
-      expect(rangeSliderContainer().childNodes[0]).toHaveClass('dummy-range-slider-field-base-classes');
-    });
-
-    it('should use `base` classes of input', () => {
-      const theme: CustomFlowbiteTheme['rangeSlider'] = {
-        field: {
-          input: {
-            base: 'dummy-range-slider-field-input-base-classes',
-          },
-        },
+        base: 'dummy-range-slider-field-input-base-classes',
       };
 
       render(<RangeSlider theme={theme} />);
 
       expect(rangeSlider()).toHaveClass('dummy-range-slider-field-input-base-classes');
     });
 
-    it('should use `sizes` classes of input', () => {
+    it('should use `sizes` classes', () => {
       const theme: CustomFlowbiteTheme['rangeSlider'] = {
-        field: {
-          input: {
-            sizes: {
-              lg: 'dummy-range-slider-field-input-sizes-lg-classes',
-            },
-          },
+        sizes: {
+          lg: 'dummy-range-slider-field-input-sizes-lg-classes',
         },
       };
 
@@ -273,6 +204,5 @@ describe('Components / Button', () => {
   });
 });
 
-const rangeSliderContainer = () => screen.getByTestId('flowbite-range-slider');
 const rangeSlider = (role = 'slider') => screen.getByRole(role);
 const rangeSliders = (role = 'slider') => screen.getAllByRole(role);

src/components/RangeSlider/RangeSlider.stories.tsx

@@ -15,7 +15,7 @@ export default {
   ],
   argTypes: {
     sizing: {
-      options: Object.keys(theme.rangeSlider.field.input.sizes),
+      options: Object.keys(theme.rangeSlider.sizes),
       control: { type: 'select' },
     },
     disabled: {

src/components/RangeSlider/RangeSlider.tsx

@@ -7,20 +7,8 @@ import type { DeepPartial } from '../../types';
 import type { FlowbiteTextInputSizes } from '../TextInput';
 
 export interface FlowbiteRangeSliderTheme {
-  root: FlowbiteRangeSliderRootTheme;
-  field: FlowbiteRangeSliderFieldTheme;
-}
-
-export interface FlowbiteRangeSliderRootTheme {
-  base: string;
-}
-
-export interface FlowbiteRangeSliderFieldTheme {
   base: string;
-  input: {
-    base: string;
-    sizes: FlowbiteTextInputSizes;
-  };
+  sizes: FlowbiteTextInputSizes;
 }
 
 export interface RangeSliderProps extends Omit<ComponentProps<'input'>, 'ref' | 'type'> {
@@ -34,16 +22,7 @@ export const RangeSlider = forwardRef<HTMLInputElement, RangeSliderProps>(
 
     return (
       <>
-        <div data-testid="flowbite-range-slider" className={twMerge(theme.root.base, className)}>
-          <div className={theme.field.base}>
-            <input
-              ref={ref}
-              type="range"
-              className={twMerge(theme.field.input.base, theme.field.input.sizes[sizing])}
-              {...props}
-            />
-          </div>
-        </div>
+        <input ref={ref} type="range" className={twMerge(theme.base, theme.sizes[sizing], className)} {...props} />
       </>
     );
   },

src/components/RangeSlider/index.ts

@@ -1,7 +1,2 @@
 export { RangeSlider } from './RangeSlider';
-export type {
-  FlowbiteRangeSliderFieldTheme,
-  FlowbiteRangeSliderRootTheme,
-  FlowbiteRangeSliderTheme,
-  RangeSliderProps,
-} from './RangeSlider';
+export type { FlowbiteRangeSliderTheme, RangeSliderProps } from './RangeSlider';

src/components/RangeSlider/theme.ts

@@ -1,18 +1,10 @@
 import type { FlowbiteRangeSliderTheme } from './RangeSlider';
 
 export const rangeSliderTheme: FlowbiteRangeSliderTheme = {
-  root: {
-    base: 'flex',
-  },
-  field: {
-    base: 'relative w-full',
-    input: {
-      base: 'w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700',
-      sizes: {
-        sm: 'h-1 range-sm',
-        md: 'h-2',
-        lg: 'h-3 range-lg',
-      },
-    },
+  base: 'w-full bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700',
+  sizes: {
+    sm: 'h-1 range-sm',
+    md: 'h-2',
+    lg: 'h-3 range-lg',
   },
 };