CHANGES: Added unoptimized progress bar inside <Slider> component

FIXED: Some styles

app/page.tsx

@@ -61,7 +61,7 @@ export default function Page() {
                                 <Button icon={'add'} iconPlace={'right'}>
                                     Label 2
                                 </Button>
-                                <SegmentedButtons>
+                                <SegmentedButtons toggled={true}>
                                     <SegmentButton
                                         fillIcon={1}
                                         icon={'change_history'}
@@ -80,7 +80,26 @@ export default function Page() {
                                     </SegmentButton>
                                 </SegmentedButtons>
                                 <Checkbox />
-                                <Slider />
+                                <Slider
+                                    defaultValue={0}
+                                    max={100}
+                                    min={0}
+                                    options={[0, 10, 20, 100]}
+                                />
+                                <Slider defaultValue={0} max={100} min={0} />
+                                <div>
+                                    <input
+                                        list={'lol'}
+                                        max={100}
+                                        min={0}
+                                        type={'range'}
+                                    />
+                                    <datalist id={'lol'}>
+                                        <option value={0} />
+                                        <option value={50} />
+                                        <option value={100} />
+                                    </datalist>
+                                </div>
                             </div>
                         </CardFooter>
                     </Card>

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

@@ -6,7 +6,3 @@ export interface InputLayoutProps
     typeInput?: string;
     type?: string;
 }
-
-export interface LabelPlacement {
-    labelPlacement?: 'left' | 'right';
-}

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

@@ -1,18 +1,46 @@
-import React, { forwardRef, HTMLAttributes } from 'react';
+'use client';
-import { InputLayout } from '../input-layout/input-layout';
 
-export const Slider = forwardRef<
+import { InputLayout } from '../input-layout/input-layout';
-    HTMLInputElement,
+import React, { forwardRef, InputHTMLAttributes, useId, useState } from 'react';
-    HTMLAttributes<HTMLInputElement>
+
->((props, ref) => {
+interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
-    return (
+    options?: number[];
-        <div className={'m3 m3-slider-container'}>
+}
-            <InputLayout
+
-                className={props.className}
+export const Slider = forwardRef<HTMLInputElement, SliderProps>(
-                ref={ref}
+    ({ options, ...props }, ref) => {
-                type={'range'}
+        const sliderId = useId();
-                typeInput={'slider'}
+        const [progress, setProgress] = useState<number>(0);
-            />
+
-        </div>
+        return (
-    );
+            <div className={'m3 m3-slider-container'}>
-});
+                <InputLayout
+                    {...props}
+                    className={props.className}
+                    list={sliderId}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                        setProgress(
+                            (parseInt(event.target.value) /
+                                parseInt(event.target.max)) *
+                                100,
+                        );
+                    }}
+                    ref={ref}
+                    style={{
+                        ...props.style,
+                        background: `linear-gradient(to right, var(--md-sys-color-primary) ${progress}%, var(--md-sys-color-surface-container-highest) ${progress}%)`,
+                    }}
+                    type={'range'}
+                    typeInput={'slider'}
+                />
+                {options && (
+                    <datalist id={sliderId}>
+                        {options.map((option, index) => (
+                            <option key={index} value={option} />
+                        ))}
+                    </datalist>
+                )}
+            </div>
+        );
+    },
+);

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

@@ -4,41 +4,41 @@ import { bool } from 'prop-types';
 import React, { forwardRef } from 'react';
 import { SwitchMainProps } from './switch.types';
 import { InputLayout } from '../input-layout/input-layout';
-import { LabelPlacement } from '../input-layout/input-layout.types';
 
 /**
  * Switch component
  ** description
  */
 
-export const Switch = forwardRef<
+export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
-    HTMLInputElement,
+    ({ icon, selected = false, ...props }, ref) => (
-    SwitchMainProps & LabelPlacement
+        <>
->(({ icon, selected = false, ...props }, ref) => (
+            <div className={'m3 m3-switch'}>
-    <>
+                <InputLayout
-        <div className={'m3 m3-switch'}>
+                    {...props}
-            <InputLayout
+                    className={`m3 ${props.className ?? ''}`.trimEnd()}
-                {...props}
+                    ref={ref}
-                className={`m3 ${props.className ?? ''}`.trimEnd()}
+                    type={'checkbox'}
-                ref={ref}
+                />
-                type={'checkbox'}
+                <svg>
-            />
+                    <rect className={'m3 m3-switch-track'} />
-            <svg>
+                    <circle className={'m3 m3-switch-handler'} />
-                <rect className={'m3 m3-switch-track'} />
+                    <circle className={'m3 m3-switch-handler-state-layer'} />
-                <circle className={'m3 m3-switch-handler'} />
+                    <g>
-                <circle className={'m3 m3-switch-handler-state-layer'} />
+                        {icon && !selected && (
-                <g>
+                            <text className={'m3 m3-icon-unchecked'}>
-                    {icon && !selected && (
+                                close
-                        <text className={'m3 m3-icon-unchecked'}>close</text>
+                            </text>
-                    )}
+                        )}
-                    {icon && (
+                        {icon && (
-                        <text className={'m3 m3-icon-checked'}>check</text>
+                            <text className={'m3 m3-icon-checked'}>check</text>
-                    )}
+                        )}
-                </g>
+                    </g>
-            </svg>
+                </svg>
-        </div>
+            </div>
-    </>
+        </>
-));
+    ),
+);
 
 Switch.propTypes = {
     icon: bool,

src/primitive-components/typography/typography.tsx

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react';
-import { getTypographyRole } from './get-typography-role';
+import { getTypographyRole } from './utils/get-typography-role';
 import {
     TypographyProps,
     Typography as TypographyTargetRef,

src/primitive-components/typography/utils/get-typography-role.ts

@@ -1,4 +1,4 @@
-import { TypographyRole, TypographySize } from './typography.types';
+import { TypographyRole, TypographySize } from '../typography.types';
 
 export function getTypographyRole(role: TypographyRole, size: TypographySize) {
     switch (role) {

src/styles/generics.css

@@ -881,36 +881,39 @@ div.m3.m3-slider-container {
   display: flex;
   align-items: center;
 }
+div.m3.m3-slider-container > datalist {
+  display: none;
+}
 
 input[type=range].m3.m3-slider {
   margin: 0;
-  height: 4px;
   appearance: none;
-  overflow: visible;
   border-radius: 2px;
-  margin-inline: 10px;
+  margin-inline: 8px;
-  background-color: var(--md-sys-color-surface-container-highest);
+  background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%);
 }
 input[type=range].m3.m3-slider::-webkit-slider-container {
-  margin-inline: -8px;
+  appearance: none;
+  box-shadow: none;
+  border-radius: 2px;
+  min-block-size: 4px;
+  height: 4px !important;
+}
+input[type=range].m3.m3-slider::-webkit-slider-runnable-track {
+  height: 4px;
 }
 input[type=range].m3.m3-slider::-webkit-slider-thumb {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   width: 20px;
   aspect-ratio: 1;
   appearance: none;
-  overflow: visible;
   border-radius: 50%;
+  margin-top: -8px;
   box-sizing: border-box;
   outline: 10px solid transparent;
   background: var(--md-sys-color-primary);
   transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
-input[type=range].m3.m3-slider::-webkit-slider-thumb::after {
-  width: 40px;
-  aspect-ratio: 1;
-  background-color: transparent;
-}
 input[type=range].m3.m3-slider::-webkit-slider-thumb:hover {
   outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }

src/styles/input-styles/slider.sass

@@ -3,26 +3,30 @@ div.m3.m3-slider-container
     display: flex
     align-items: center
 
+    & > datalist
+        display: none
+
+
 input[type="range"].m3.m3-slider
     margin: 0
-    height: 4px
     appearance: none
-    overflow: visible
     border-radius: 2px
-    margin-inline: 10px
+    margin-inline: 8px
-    background-color: var(--md-sys-color-surface-container-highest)
+    background: linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-surface-container-highest) 0%)
 
     &::-webkit-slider-container
-        margin-inline: -8px
+        appearance: none
+        box-shadow: none
+        border-radius: 2px
+        min-block-size: 4px
+        height: 4px !important
+
+    &::-webkit-slider-runnable-track
+        height: 4px
 
     &::-webkit-slider-thumb
         @include elevation-1(false)
 
-        &::after
-            width: 40px
-            aspect-ratio: 1
-            background-color: transparent
-
         &:hover
             outline: 10px solid color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent)
 
@@ -32,8 +36,8 @@ input[type="range"].m3.m3-slider
         width: 20px
         aspect-ratio: 1
         appearance: none
-        overflow: visible
         border-radius: 50%
+        margin-top: -8px
         box-sizing: border-box
         outline: 10px solid transparent
         background: var(--md-sys-color-primary)