ADDED: Icon wrapper for more elegant way to placement icon in buttons

TODO: Add styles for selected segmented button
DONE: Base styles for segmented buttons

app/page.tsx

@@ -5,13 +5,11 @@ import { CardBody } from '../src/primitive-components/card/card-body';
 import { CardMedia } from '../src/primitive-components/card/card-media';
 import { CardFooter } from '../src/primitive-components/card/card-footer';
 import { CardHeader } from '../src/primitive-components/card/card-header';
+import { SegmentedButtons } from '../src/primitive-components/components';
+import { Typography } from '../src/primitive-components/typography/typography';
 import { CardActionArea } from '../src/primitive-components/card/card-action-area';
 import { Button } from '../src/primitive-components/button-components/button/button';
-import { Typography } from '../src/primitive-components/typography/typography';
+import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
-import {
-    ButtonLayout,
-    SegmentedButtons,
-} from '../src/primitive-components/components';
 
 export default function Page() {
     return (
@@ -50,11 +48,21 @@ export default function Page() {
                         </CardActionArea>
                         <CardFooter>
                             <div className={'flex flex-row gap-3'}>
-                                <Button>label</Button>
+                                <Button icon={'add'}>Label 1</Button>
+                                <Button icon={'add'} iconPlace={'right'}>
+                                    Label 2
+                                </Button>
                                 <SegmentedButtons>
-                                    <ButtonLayout>Label 1</ButtonLayout>
+                                    <SegmentButton icon={'add'}>
-                                    <ButtonLayout>Label 2</ButtonLayout>
+                                        Label 1
-                                    <ButtonLayout>Label 3</ButtonLayout>
+                                    </SegmentButton>
+                                    <SegmentButton
+                                        icon={'add'}
+                                        iconPlace={'right'}
+                                    >
+                                        Label 2
+                                    </SegmentButton>
+                                    <SegmentButton>Label 3</SegmentButton>
                                 </SegmentedButtons>
                             </div>
                         </CardFooter>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { bool, string } from 'prop-types';
+import { bool } from 'prop-types';
 import { RippleEffect } from '../../ripple/ripple-effect';
 import { ButtonLayoutProps } from './button-layout.types';
 import useRippleEffect from '../../ripple/hooks/useRippleEffect';
@@ -37,6 +37,5 @@ export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
 );
 
 ButtonLayout.propTypes = {
-    children: string,
     centralRipple: bool,
 };

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

@@ -1,10 +1,10 @@
 'use client';
 
 import { forwardRef } from 'react';
-import { Icon } from '../../components';
 import { ButtonProps } from './button.types';
 import { bool, oneOf, string } from 'prop-types';
 import { ButtonLayout } from '../button-layout/button-layout';
+import { IconWrapper } from '../../icon/icon-wrapper';
 
 /**
  * Button component
@@ -14,10 +14,11 @@ import { ButtonLayout } from '../button-layout/button-layout';
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     (
         {
-            icon,
+            icon = undefined,
             className = '',
             disabled = false,
             variant = 'filled',
+            iconPlace = 'left',
             centralRipple = false,
             ...props
         },
@@ -30,8 +31,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             disabled={disabled}
             ref={ref}
         >
-            {icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
+            <IconWrapper icon={icon} iconPlace={iconPlace}>
-            <span className={'label-large'}>{props.children}</span>
+                <span className={'label-large'}>{props.children}</span>
+            </IconWrapper>
         </ButtonLayout>
     ),
 );

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

@@ -6,6 +6,7 @@ export interface ButtonMainProps {
     children?: string;
     disabled?: boolean;
     variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
+    iconPlace?: 'left' | 'right';
 }
 
 export type ButtonProps = RipplePropsForComponents<HTMLButtonElement> &

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

@@ -1,29 +1,51 @@
-import React, { cloneElement, forwardRef, ReactElement } from 'react';
+import React, { forwardRef } from 'react';
-import { SegmentedButtonProps } from './segmented-buttons.types';
+import {
+    SegmentedButton,
+    SegmentedButtonsProps,
+} from './segmented-buttons.types';
+import { string } from 'prop-types';
+import { ButtonLayout } from '../../components';
+import { ButtonLayoutProps } from '../button-layout/button-layout.types';
+import { IconWrapper } from '../../icon/icon-wrapper';
+
+export const SegmentButton = forwardRef<
+    HTMLButtonElement,
+    ButtonLayoutProps & SegmentedButton
+>(({ centralRipple = false, iconPlace = 'left', icon, ...props }, ref) => {
+    const classes = `m3-button-segment ${props.className ?? ''}`.trimEnd();
+    return (
+        <ButtonLayout
+            {...props}
+            centralRipple={centralRipple}
+            className={classes}
+            ref={ref}
+        >
+            <IconWrapper icon={icon} iconPlace={iconPlace}>
+                {props.children}
+            </IconWrapper>
+            <span className={'m3 m3-button-segment-state-layer'} />
+        </ButtonLayout>
+    );
+});
+
+SegmentButton.propTypes = {
+    children: string,
+};
 
 export const SegmentedButtons = forwardRef<
     HTMLDivElement,
-    SegmentedButtonProps
+    SegmentedButtonsProps
 >(({ children, ...props }, ref) => {
     if (children.length <= 1) {
         throw 'You must build segmented button with 2 or more buttton';
     }
 
-    const buttons = children.map((button: ReactElement, index) => {
-        const classes =
-            `m3-button-segment ${button.props.className ?? ''}`.trimEnd();
-        return cloneElement(button, {
-            className: classes,
-            key: index,
-        });
-    });
-
     return (
         <div
             className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
             ref={ref}
         >
-            {buttons}
+            {children}
         </div>
     );
 });

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

@@ -1,8 +1,14 @@
 import { HTMLAttributes, ReactElement } from 'react';
+import { IconWrapperProps } from '../../icon/icon.types';
 
-export interface SegmentedButton {
+export type SegmentedButton = IconWrapperProps & {
+    icon?: string;
+    centralRipple?: boolean;
+};
+
+export interface SegmentedButtons {
     children?: ReactElement<HTMLButtonElement>[];
 }
 
-export type SegmentedButtonProps = SegmentedButton &
+export type SegmentedButtonsProps = SegmentedButtons &
     HTMLAttributes<HTMLDivElement>;

src/primitive-components/components.tsx

@@ -3,9 +3,9 @@ export { Icon } from './icon/icon';
 export { Badge } from './badge/badge';
 export { Ripple } from './ripple/ripple';
 export { Divider } from './divider/divider';
+export { FAB } from './button-components/fab/fab';
 export { Container } from './container/container';
 export { RippleEffect } from './ripple/ripple-effect';
-export { FAB } from './button-components/fab/fab';
 export { Radio } from './input-components/radio/radio';
 export { Switch } from './input-components/switch/switch';
 export { Button } from './button-components/button/button';

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Icon } from './icon';
+import { IconWrapperProps } from './icon.types';
+
+export function IconWrapper({
+    children,
+    icon,
+    iconPlace,
+    ...props
+}: IconWrapperProps) {
+    return (
+        <>
+            {icon && iconPlace === 'left' && <Icon {...props}>{icon}</Icon>}
+            {children}
+            {icon && iconPlace === 'right' && <Icon {...props}>{icon}</Icon>}
+        </>
+    );
+}

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

@@ -1,12 +1,26 @@
-import { SVGProps } from 'react';
+import { PropsWithChildren, SVGProps } from 'react';
 
-export interface IconProps extends SVGProps<SVGSVGElement> {
+export interface IconPlacement {
+    iconPlace?: 'left' | 'right';
+}
+
+export interface GeneralIconProps {
     grade?: number;
     svgSize?: number;
     fillIcon?: 0 | 1;
     iconSize?: number;
     opticalSize?: number;
-    children?: string | undefined;
     type?: 'outlined' | 'rounded' | 'sharp';
     weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
 }
+
+export type IconWrapperProps = IconPlacement &
+    GeneralIconProps &
+    PropsWithChildren & {
+        icon?: string;
+    };
+
+export type IconProps = SVGProps<SVGSVGElement> &
+    GeneralIconProps & {
+        children?: string | undefined;
+    };

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

@@ -30,7 +30,7 @@ export interface RipplePropsForComponents<T> extends HTMLAttributes<T> {
 }
 
 export interface RippleAreaProps extends HTMLAttributes<HTMLElement> {
-    callback: Dispatch<SetStateAction<boolean>>;
+    callback?: Dispatch<SetStateAction<boolean>>;
     central?: boolean;
 }
 

src/styles/button-styles/button.sass

@@ -1,7 +1,9 @@
 button:not(.m3-fab, .m3-icon-button)
     width: min-content
     height: min-content
+    max-height: 40px
     box-sizing: border-box
+    white-space: nowrap
     font-size: var(--md-sys-typescale-label-large-font-size)
     font-weight: var(--md-sys-typescale-label-large-font-weight)
     line-height: var(--md-sys-typescale-label-large-line-height)

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

@@ -1,7 +1,6 @@
 div.m3.m3-segmented-buttons
     display: flex
     flex-direction: row
-    outline-offset: -1px
     width: min-content
     border-radius: 20px
 
@@ -21,3 +20,23 @@ div.m3.m3-segmented-buttons
 
         &:last-child
             border-radius: 0 20px 20px 0
+
+        & > span.m3.m3-button-segment-state-layer
+            position: absolute
+            width: 100%
+            height: 100%
+
+        & > span.m3.m3-button-segment-state-layer, span.m3.m3-ripple-domain
+            transition: .2s cubic-bezier(0.2, 0, 0, 1)
+
+        &:hover
+            & > span.m3.m3-button-segment-state-layer
+                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent)
+
+        &:is(&:active, &:focus-visible)
+            & > span.m3.m3-button-segment-state-layer
+                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)
+
+        &:active
+            & > span.m3.m3-ripple-domain > span.m3.ripple
+                background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent)

src/styles/card.sass

@@ -80,8 +80,5 @@ div.m3.m3-card-action-area
             & > span.m3.m3-card-state-layer
                 background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)
 
-        & > span.m3.m3-card-state-layer
-            background-color: transparent
-
         & > span.m3.m3-ripple-domain > .m3.ripple
             background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)

src/styles/generics.css

@@ -71,9 +71,6 @@ div.m3.m3-card-action-area:active.m3-card-elevated {
 div.m3.m3-card-action-area:active:not(div.m3.m3-card-action-area:active:has(span.m3.m3-ripple-domain)) > span.m3.m3-card-state-layer {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
-div.m3.m3-card-action-area:active > span.m3.m3-card-state-layer {
-  background-color: transparent;
-}
 div.m3.m3-card-action-area:active > span.m3.m3-ripple-domain > .m3.ripple {
   background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
@@ -449,7 +446,9 @@ button.m3.m3-fab:focus-visible.tertiary::before {
 button:not(.m3-fab, .m3-icon-button) {
   width: min-content;
   height: min-content;
+  max-height: 40px;
   box-sizing: border-box;
+  white-space: nowrap;
   font-size: var(--md-sys-typescale-label-large-font-size);
   font-weight: var(--md-sys-typescale-label-large-font-weight);
   line-height: var(--md-sys-typescale-label-large-line-height);
@@ -715,7 +714,6 @@ button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
 div.m3.m3-segmented-buttons {
   display: flex;
   flex-direction: row;
-  outline-offset: -1px;
   width: min-content;
   border-radius: 20px;
 }
@@ -736,6 +734,23 @@ 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 > span.m3.m3-button-segment-state-layer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span.m3.m3-button-segment-state-layer, div.m3.m3-segmented-buttons > button.m3.m3-button-segment span.m3.m3-ripple-domain {
+  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:hover > span.m3.m3-button-segment-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 8%, transparent);
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:is(div.m3.m3-segmented-buttons > button.m3.m3-button-segment:active, div.m3.m3-segmented-buttons > button.m3.m3-button-segment:focus-visible) > span.m3.m3-button-segment-state-layer {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment:active > span.m3.m3-ripple-domain > span.m3.ripple {
+  background-color: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 12%, transparent);
+}
 
 div.m3.m3-radio {
   width: 20px;