RENAMED: From checkbox-layout -> input-layout

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

app/page.tsx

@@ -11,6 +11,7 @@ import { CardActionArea } from '../src/primitive-components/card/card-action-are
 import { Button } from '../src/primitive-components/button-components/button/button';
 import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
 import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
+import {Slider} from "../src/primitive-components/input-components/slider/slider";
 
 export default function Page() {
     return (
@@ -69,6 +70,7 @@ export default function Page() {
                                     </SegmentButton>
                                     <SegmentButton>Label 3</SegmentButton>
                                 </SegmentedButtons>
+                                <Slider />
                                 <Checkbox />
                             </div>
                         </CardFooter>

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 { InputLayout } from '../input-layout/input-layout';
-import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';
+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}

src/styles/button-styles/segmented-button.sass

@@ -8,24 +8,21 @@ div.m3.m3-segmented-buttons
     border-collapse: collapse
 
     & > button.m3.m3-button-segment
-        margin: 0 -0.5px 0 -0.5px
-
-    & > button.m3.m3-button-segment:first-child
-        border-radius: 20px 0 0 20px
-    & > button.m3.m3-button-segment:last-child
-        border-radius: 0 20px 20px 0
-
-    & >  button.m3.m3-button-segment
         height: 40px
         display: flex
         min-width: 108px
+        border-radius: 0
         width: max-content
         padding-inline: 10px
+        margin: 0 -0.5px 0 -0.5px
+        background-color: transparent
         border: 1px solid var(--md-sys-color-outline)
 
-        &
+        &:first-child
-            border-radius: 0
+            border-radius: 20px 0 0 20px
-            background-color: transparent
+
+        &:last-child
+            border-radius: 0 20px 20px 0
 
         & > span
             color: var(--md-sys-color-on-surface)
@@ -36,11 +33,11 @@ div.m3.m3-segmented-buttons
         &.selected
             background-color: var(--md-sys-color-secondary-container)
 
-        &.selected > span
+            & > span
-            color: var(--md-sys-color-on-secondary-container)
+                color: var(--md-sys-color-on-secondary-container)
 
-        &.selected > svg > text
+                & > text
-            fill: var(--md-sys-color-on-secondary-container)
+                    fill: var(--md-sys-color-on-secondary-container)
 
         & > span.m3.m3-button-segment-state-layer
             position: absolute

src/styles/generics.css

@@ -731,7 +731,15 @@ div.m3.m3-segmented-buttons {
   border-collapse: collapse;
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
+  height: 40px;
+  display: flex;
+  min-width: 108px;
+  border-radius: 0;
+  width: max-content;
+  padding-inline: 10px;
   margin: 0 -0.5px 0 -0.5px;
+  background-color: transparent;
+  border: 1px solid var(--md-sys-color-outline);
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
   border-radius: 20px 0 0 20px;
@@ -739,18 +747,6 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment:first-child {
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment:last-child {
   border-radius: 0 20px 20px 0;
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
-  height: 40px;
-  display: flex;
-  min-width: 108px;
-  width: max-content;
-  padding-inline: 10px;
-  border: 1px solid var(--md-sys-color-outline);
-}
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
-  border-radius: 0;
-  background-color: transparent;
-}
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
   color: var(--md-sys-color-on-surface);
 }
@@ -763,7 +759,7 @@ div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected {
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span {
   color: var(--md-sys-color-on-secondary-container);
 }
-div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > svg > text {
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment.selected > span > text {
   fill: var(--md-sys-color-on-secondary-container);
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer {