CHANGED: README

README.md

@@ -7,14 +7,14 @@ This repository is including and will be including components, enumerates in tab
   - [x] Icon
   - [x] FAB
   - [X] Radio
-  - [ ] Segmented
+  - [ ] Segmented (WIP)
 - [X] Checkbox
 - [x] Text fields
 - [X] Switches
 - [ ] Chips
 - [x] Icon
 - [x] Ripple Effect
-- [x] Dividers
+- [ ] Dividers (WIP)
 - [x] Badges
 - [ ] Select field
 - [ ] Bottom sheets

app/components/buttons.tsx

@@ -12,9 +12,24 @@ export default function Buttons() {
     );
 
     return (
-        <div className={'m3 m3-wrapper'}>
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
             <h1> Buttons </h1>
-            <div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    gap: '2em',
+                    width: '100%',
+                    height: '100%',
+                }}
+            >
                 <div>
                     <h2> Default buttons </h2>
                     <div
@@ -30,7 +45,7 @@ export default function Buttons() {
                             onClick={callback}
                             variant={'filled'}
                         >
-                            Label + {state}
+                            Label
                         </Button>
                         <Button variant={'outlined'}>Label</Button>
                         <Button variant={'tonal'}>Label</Button>

app/components/icon-buttons.tsx

@@ -5,7 +5,14 @@ import { IconButton } from '../../src/primitive-components/components';
 
 function IconButtons() {
     return (
-        <div className={'m3 m3-wrapper'}>
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
             <h1> Icon buttons </h1>
             <div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
                 <div>

app/page.tsx

@@ -9,6 +9,7 @@ import IconButtons from './components/icon-buttons';
 import { TextFields } from './components/text-fields';
 import {
     ButtonLayout,
+    Divider,
     SegmentedButtons,
 } from '../src/primitive-components/components';
 
@@ -35,23 +36,79 @@ export default function Page() {
                         alignItems: 'center',
                     }}
                 >
-                    <Buttons />
+                    <div className={'m3 m3-wrapper'}>
-                    <IconButtons />
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'row',
+                                padding: '25px',
+                            }}
+                        >
+                            <SegmentedButtons>
+                                <ButtonLayout>Segment 1</ButtonLayout>
+                                <ButtonLayout>Segment 2</ButtonLayout>
+                            </SegmentedButtons>
+                        </div>
+                    </div>
+                    <div
+                        className={'m3 m3-wrapper'}
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            gap: '0.5em',
+                            justifyContent: 'space-evenly',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'row',
+                                padding: '25px',
+                            }}
+                        >
+                            <Buttons />
+                        </div>
+                        <Divider
+                            orientation={'vertical'}
+                            variant={'middle-inset'}
+                        />
+                        <div
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'row',
+                                padding: '25px',
+                            }}
+                        >
+                            <IconButtons />
+                        </div>
+                    </div>
+                    <div
+                        className={'m3 m3-wrapper'}
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            gap: '0.5em',
+                            justifyContent: 'space-evenly',
+                            alignItems: 'center',
+                        }}
+                    >
+                        <Checkboxes />
+                        <Divider
+                            orientation={'vertical'}
+                            variant={'middle-inset'}
+                        />
+                        <Radios />
+                        <Divider
+                            orientation={'vertical'}
+                            variant={'middle-inset'}
+                        />
+                        <Badges />
+                    </div>
                     <Switches />
-                    <Checkboxes />
-                    <Radios />
                     <TextFields />
                     <Fabs />
-                    <Badges />
                 </div>
-                <SegmentedButtons>
-                    <ButtonLayout>
-                        <span>Segment 1</span>
-                    </ButtonLayout>
-                    <ButtonLayout>
-                        <span>Segment 1</span>
-                    </ButtonLayout>
-                </SegmentedButtons>
             </div>
         </Fragment>
     );

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

@@ -7,15 +7,14 @@ import useRippleEffect from '../ripple/hooks/useRippleEffect';
 import React, { forwardRef, useId, useRef, useState } from 'react';
 
 export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
-    ({ centralRipple = false, variant, ...props }, ref) => {
+    ({ centralRipple = false, ...props }, ref) => {
         const [isActive, setIsActive] = useState<boolean>(false),
             ripplesRef = useRef(null),
             buttonId = useId(),
             events = useRippleEffect(ripplesRef, setIsActive);
 
-        const classes = props.className
+        const classes =
-            ? `m3 ${props.className} ${variant}${isActive ? ' is-active' : ''}`
+            `m3${isActive ? ' is-active' : ''} ${props.className ?? ''}`.trimEnd();
-            : `m3 ${variant}${isActive ? ' is-active' : ''}`;
 
         return (
             <button
@@ -38,7 +37,6 @@ export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
 );
 
 ButtonLayout.propTypes = {
-    variant: string,
-    centralRipple: bool,
     children: string,
+    centralRipple: bool,
 };

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

@@ -2,6 +2,4 @@ import { ButtonHTMLAttributes } from 'react';
 import { RipplePropsForComponents } from '../ripple/ripple.types';
 
 export type ButtonLayoutProps = RipplePropsForComponents<HTMLButtonElement> &
-    ButtonHTMLAttributes<HTMLButtonElement> & {
+    ButtonHTMLAttributes<HTMLButtonElement>;
-        variant?: string;
-    };

src/primitive-components/button/button.tsx

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 import { Icon } from '../components';
 import { ButtonProps } from './button.types';
 import { ButtonLayout } from '../button-layout/button-layout';
+import { bool, oneOf, string } from 'prop-types';
 
 /**
  * Button component
@@ -12,18 +13,32 @@ import { ButtonLayout } from '../button-layout/button-layout';
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     (
-        { centralRipple = false, variant, disabled = false, icon, ...props },
+        {
+            icon,
+            className = '',
+            disabled = false,
+            variant = 'filled',
+            centralRipple = false,
+            ...props
+        },
         ref,
     ) => (
         <ButtonLayout
             {...props}
             centralRipple={centralRipple}
+            className={`${variant} ${className}`}
             disabled={disabled}
             ref={ref}
-            variant={variant ? variant : 'filled'}
         >
             {icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
             <span className={'label-large'}>{props.children}</span>
         </ButtonLayout>
     ),
 );
+
+Button.propTypes = {
+    icon: string,
+    children: string,
+    centralRipple: bool,
+    variant: oneOf(['filled', 'outlined', 'elevated', 'tonal', 'text']),
+};

src/primitive-components/button/button.types.ts

@@ -2,9 +2,10 @@ import { RipplePropsForComponents } from '../ripple/ripple.types';
 import { ButtonHTMLAttributes } from 'react';
 
 export interface ButtonMainProps {
+    icon?: string;
+    children?: string;
     disabled?: boolean;
     variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
-    icon?: string;
 }
 
 export type ButtonProps = RipplePropsForComponents<HTMLButtonElement> &

src/primitive-components/checkbox-layout/check-box-layout.tsx

@@ -38,7 +38,6 @@ export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
 );
 
 CheckBoxLayout.propTypes = {
-    indeterminate: bool,
     typeInput: string,
-    type: string,
+    indeterminate: bool,
 };

src/primitive-components/divider/divider.tsx

@@ -1,7 +1,8 @@
+import { oneOf } from 'prop-types';
 import React, { forwardRef } from 'react';
 import { DividerProps } from './divider.types';
 
-const Divider = forwardRef<HTMLHRElement, DividerProps>(
+export const Divider = forwardRef<HTMLHRElement, DividerProps>(
     ({ orientation, variant, ...props }, ref) => (
         <hr
             {...props}
@@ -11,4 +12,7 @@ const Divider = forwardRef<HTMLHRElement, DividerProps>(
     ),
 );
 
-export { Divider };
+Divider.propTypes = {
+    orientation: oneOf(['vertical', 'horizontal']),
+    variant: oneOf(['full-width', 'inset', 'middle-inset']),
+};

src/primitive-components/fab/fab.tsx

@@ -3,6 +3,7 @@
 import { forwardRef } from 'react';
 import { Icon } from '../components';
 import { FABProps } from './fab.types';
+import { bool, oneOf, string } from 'prop-types';
 import { ButtonLayout } from '../button-layout/button-layout';
 
 /**
@@ -20,12 +21,13 @@ const sizes = {
 export const FAB = forwardRef<HTMLButtonElement, FABProps>(
     (
         {
-            variant,
+            icon = 'edit',
-            disabled,
+            className = '',
-            icon,
-            centralRipple = false,
             size = 'default',
-            elevated,
+            elevated = false,
+            disabled = false,
+            variant = 'surface',
+            centralRipple = false,
             ...props
         },
         ref,
@@ -33,10 +35,9 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
         <ButtonLayout
             {...props}
             centralRipple={centralRipple}
-            className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && 'without-elevation'}`}
+            className={`m3-fab m3-${size}-fab${!elevated ? ' without-elevation' : ''} ${variant} ${className}`}
             disabled={disabled}
             ref={ref}
-            variant={variant ? variant : 'surface'}
         >
             <Icon iconSize={sizes[size]} svgSize={sizes[size]}>
                 {icon}
@@ -49,3 +50,11 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
         </ButtonLayout>
     ),
 );
+
+FAB.propTypes = {
+    icon: string,
+    elevated: bool,
+    children: string,
+    size: oneOf(['small', 'default', 'large', 'extended']),
+    variant: oneOf(['surface', 'primary', 'secondary', 'tertiary']),
+};

src/primitive-components/fab/fab.types.ts

@@ -3,6 +3,7 @@ import { RipplePropsForComponents } from '../ripple/ripple.types';
 
 export interface FABMainProps {
     icon: string;
+    children?: string;
     disabled?: boolean;
     elevated?: boolean;
     size?: 'small' | 'default' | 'large' | 'extended';

src/primitive-components/icon-button/icon-button.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import { Icon } from '../components';
+import { bool, oneOf, string } from 'prop-types';
 import { ButtonLayout } from '../button-layout/button-layout';
-import { IconButtonProps, StateToggleIconType } from './icon-button.types';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { IconButtonProps, StateToggleIconType } from './icon-button.types';
 
 /**
  * Icon button-layout component
@@ -14,11 +15,12 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     (
         {
             icon,
-            variant,
+            className = '',
-            disabled,
-            selected = false,
             toggled = false,
-            centralRipple,
+            disabled = false,
+            selected = false,
+            variant = 'default',
+            centralRipple = false,
             ...props
         },
         ref,
@@ -28,6 +30,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
             icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
         });
 
+        const classes = `m3-icon-button ${toggleIcon.state} ${variant} ${toggled ? 'toggled' : ''} ${className}`;
+
         const toggle = (classes: string, icon: string) => {
             setToggleIcon({
                 state: classes,
@@ -56,11 +60,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
             <ButtonLayout
                 {...props}
                 centralRipple={centralRipple}
-                className={`m3-icon-button ${toggleIcon.state} ${toggled ? 'toggled' : ''}`.trimEnd()}
+                className={classes}
                 disabled={disabled}
                 onClick={callback}
                 ref={buttonRef}
-                variant={variant ? variant : 'default'}
             >
                 <Icon
                     fillIcon={toggleIcon.state === 'selected' ? 1 : 0}
@@ -73,3 +76,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         );
     },
 );
+
+IconButton.propTypes = {
+    icon: string,
+    selected: bool,
+    centralRipple: bool,
+    variant: oneOf(['default', 'filled', 'tonal', 'outlined']),
+};

src/primitive-components/icon/icon.tsx

@@ -2,7 +2,7 @@ import { IconProps } from './icon.types';
 import React, { forwardRef } from 'react';
 import { number, oneOf, string } from 'prop-types';
 
-const Icon = forwardRef<SVGSVGElement, IconProps>(
+export const Icon = forwardRef<SVGSVGElement, IconProps>(
     (
         {
             children = '',
@@ -52,5 +52,3 @@ Icon.propTypes = {
     type: oneOf(['outlined', 'rounded', 'sharp']),
     weight: oneOf([100, 200, 300, 400, 500, 600, 700]),
 };
-
-export { Icon };

src/primitive-components/radio/radio.tsx

@@ -1,11 +1,11 @@
 'use client';
 
+import { bool, string } from 'prop-types';
 import { RadioProps } from './radio.types';
 import { RippleArea } from '../ripple/ripple-area';
 import { forwardRef, useRef, useState } from 'react';
 import useRippleEffect from '../ripple/hooks/useRippleEffect';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
-import { bool, string } from 'prop-types';
 
 /**
  * Radio component

src/primitive-components/ripple/ripple.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import isEmpty from './utils/utils';
-import { RippleProps, RipplesProps } from './ripple.types';
 import { rippleAreaContext } from './ripple-area';
+import { RippleProps, RipplesProps } from './ripple.types';
 import RippleEffectBuild from './utils/ripple-effect-builder';
 import React, {
     ReactElement,
@@ -18,7 +18,7 @@ const Ripples = (props: RipplesProps) => {
     const firstRender = useRef<boolean>(true);
     const [pending, startTransition] = useTransition();
 
-    const LifetimeEnd = (child: ReactElement) => {
+    const endLifetime = (child: ReactElement) => {
         if (child.props.endLifetime) {
             child.props.endLifetime();
         }
@@ -34,11 +34,11 @@ const Ripples = (props: RipplesProps) => {
         if (props.children.length > 0 && !pending) {
             startTransition(() => {
                 if (firstRender.current || isEmpty(ripples)) {
-                    setRipples(RippleEffectBuild(props.children, LifetimeEnd));
+                    setRipples(RippleEffectBuild(props.children, endLifetime));
                     firstRender.current = false;
                 } else {
                     setRipples(
-                        RippleEffectBuild(props.children, LifetimeEnd, ripples),
+                        RippleEffectBuild(props.children, endLifetime, ripples),
                     );
                 }
             });

src/primitive-components/segmented-buttons/segmented-buttons.tsx

@@ -6,8 +6,7 @@ export const SegmentedButtons = forwardRef<
     SegmentedButtonProps
 >(({ children, ...props }, ref) => {
     if (children.length <= 1) {
-        console.error('You must build segmented button with 2 or more buttton');
+        throw 'You must build segmented button with 2 or more buttton';
-        return <></>;
     }
 
     return (
@@ -18,4 +17,4 @@ export const SegmentedButtons = forwardRef<
             {children}
         </div>
     );
-});
+});

src/primitive-components/switch/switch.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { bool } from 'prop-types';
 import React, { forwardRef } from 'react';
 import { SwitchMainProps } from './switch.types';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
@@ -34,3 +35,8 @@ export const Switch = forwardRef<
         </svg>
     </div>
 ));
+
+Switch.propTypes = {
+    icon: bool,
+    selected: bool,
+};

src/primitive-components/text-field/text-field.tsx

@@ -92,8 +92,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldInterface>(
 
 TextField.propTypes = {
     children: string,
-    className: string,
-    placeholder: string,
     withAfterIcon: bool,
     withBeforeIcon: bool,
     supportingText: string,

src/styles/divider.sass

@@ -1,26 +1,26 @@
 hr.m3.m3-divider
-    display: flex
-    align-items: end
-    box-sizing: border-box
     border: none
     outline: 0.5px solid var(--md-sys-color-outline-variant)
-    margin: 4px
+    margin-inline: 4px
+    position: relative
 
     &.vertical
-        writing-mode: tb-rl
+        height: 100%
-        &, &.full-width
+
-            height: 100%
         &.inset
-            align-self: end
+            margin-top: 16px
-            height: calc(100% - 16px)
+
         &.middle-inset
-            height: calc(100% - (2 * 16px))
+            margin-bottom: 16px
+            margin-top: 16px
+
 
     &.horizontal
-        &, &.full-width
+        width: 100%
-            width: 100%
+
         &.inset
-            align-self: end
+            margin-left: 16px
-            width: calc(100% - 16px)
+
         &.middle-inset
-            width: calc(100% - (2 * 16px))
+            margin-left: 16px
+            margin-right: 16px

src/styles/generics.css

@@ -694,35 +694,30 @@ div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
 }
 
 hr.m3.m3-divider {
-  display: flex;
-  align-items: end;
-  box-sizing: border-box;
   border: none;
   outline: 0.5px solid var(--md-sys-color-outline-variant);
-  margin: 4px;
+  margin-inline: 4px;
+  position: relative;
 }
 hr.m3.m3-divider.vertical {
-  writing-mode: tb-rl;
-}
-hr.m3.m3-divider.vertical, hr.m3.m3-divider.vertical.full-width {
   height: 100%;
 }
 hr.m3.m3-divider.vertical.inset {
-  align-self: end;
+  margin-top: 16px;
-  height: calc(100% - 16px);
 }
 hr.m3.m3-divider.vertical.middle-inset {
-  height: calc(100% - 32px);
+  margin-bottom: 16px;
+  margin-top: 16px;
 }
-hr.m3.m3-divider.horizontal, hr.m3.m3-divider.horizontal.full-width {
+hr.m3.m3-divider.horizontal {
   width: 100%;
 }
 hr.m3.m3-divider.horizontal.inset {
-  align-self: end;
+  margin-left: 16px;
-  width: calc(100% - 16px);
 }
 hr.m3.m3-divider.horizontal.middle-inset {
-  width: calc(100% - 32px);
+  margin-left: 16px;
+  margin-right: 16px;
 }
 
 label.m3.m3-checkbox-label {
@@ -1197,13 +1192,10 @@ html {
 
 .m3.m3-wrapper {
   width: 100%;
+  position: relative;
+  display: block;
   background-color: var(--md-sys-color-surface);
   border-radius: 25px;
-  padding: 25px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  height: min-content;
 }
 
 /*# sourceMappingURL=generics.css.map */

src/styles/generics.sass

@@ -26,11 +26,8 @@ html
 
 .m3.m3-wrapper
     width: 100%
+    position: relative
+    display: block
     background-color: var(--md-sys-color-surface)
     border-radius: 25px
-    padding: 25px
-    display: flex
-    align-items: center
-    flex-direction: column
-    height: min-content