RENAMED: From checkbox-layout -> input-layout

ADDED: Slider componnet (without styles and functionality)
CHANGED: segmented-button styles

src/primitive-components/input-components/checkbox/checkbox.tsx

@@ -4,7 +4,7 @@ import { bool } from 'prop-types';
 import { CheckboxProps } from './checkbox.types';
 import { RippleEffect } from '../../ripple/ripple-effect';
 import useRippleEffect from '../../ripple/hooks/useRippleEffect';
-import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
+import { InputLayout } from '../input-layout/input-layout';
 import {
     forwardRef,
     useEffect,
@@ -37,7 +37,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
         return (
             <label {...events} className={extraClassStyles}>
-                <CheckBoxLayout
+                <InputLayout
                     {...props}
                     indeterminate={props.indeterminate}
                     ref={checkboxRef}

src/primitive-components/input-components/input-layout/input-layout.tsx

@@ -7,9 +7,9 @@ import React, {
     useRef,
 } from 'react';
 import { bool, string } from 'prop-types';
-import { CheckboxLayoutProps } from './checkbox-layout.types';
+import { InputLayoutProps } from './input-layout.types';
 
-export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
+export const InputLayout = forwardRef<HTMLInputElement, InputLayoutProps>(
     ({ indeterminate, typeInput, type, ...props }, ref) => {
         const checkboxRef = useRef<HTMLInputElement>(null);
 
@@ -37,7 +37,7 @@ export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
     },
 );
 
-CheckBoxLayout.propTypes = {
+InputLayout.propTypes = {
     typeInput: string,
     indeterminate: bool,
 };

src/primitive-components/input-components/input-layout/input-layout.types.ts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 
-export interface CheckboxLayoutProps
+export interface InputLayoutProps
     extends InputHTMLAttributes<HTMLInputElement> {
     indeterminate?: boolean;
     typeInput?: string;

src/primitive-components/input-components/radio/radio.tsx

@@ -5,7 +5,7 @@ import { RadioProps } from './radio.types';
 import { RippleEffect } from '../../ripple/ripple-effect';
 import { forwardRef, useRef, useState } from 'react';
 import useRippleEffect from '../../ripple/hooks/useRippleEffect';
-import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
+import { InputLayout } from '../input-layout/input-layout';
 
 /**
  * Radio component
@@ -23,7 +23,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
 
         return (
             <div {...events} className={extraClassStyles}>
-                <CheckBoxLayout {...props} ref={ref} type={'radio'} />
+                <InputLayout {...props} ref={ref} type={'radio'} />
                 <span className={'m3 m3-radio-state-layer'} />
                 <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
                     <circle

src/primitive-components/input-components/slider/slider.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef, HTMLAttributes } from 'react';
+import { InputLayout } from '../input-layout/input-layout';
+
+export const Slider = forwardRef<
+    HTMLInputElement,
+    HTMLAttributes<HTMLInputElement>
+>((props, ref) => {
+    return <InputLayout ref={ref} type={'range'} />;
+});

src/primitive-components/input-components/switch/switch.tsx

@@ -3,8 +3,8 @@
 import { bool } from 'prop-types';
 import React, { forwardRef } from 'react';
 import { SwitchMainProps } from './switch.types';
-import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
-import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
+import { InputLayout } from '../input-layout/input-layout';
+import { LabelPlacement } from '../input-layout/input-layout.types';
 
 /**
  * Switch component
@@ -16,7 +16,7 @@ export const Switch = forwardRef<
     SwitchMainProps & LabelPlacement
 >(({ icon, selected = false, ...props }, ref) => (
     <div className={'m3 m3-switch'}>
-        <CheckBoxLayout
+        <InputLayout
             {...props}
             className={`m3 ${props.className ?? ''}`.trimEnd()}
             ref={ref}