@elementor/editor-editing-panel 0.14.2 → 0.16.0

package/src/components/style-sections/size-section.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { AccordionSection } from '../accordion-section';
 import { StyleControl, StyleControlProps } from '../../controls/style-control';
-import { CollapsibleContent } from '../collapsible-content';
-import { SizeControl, Unit } from '../../controls/control-types/size-control';
 import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
+import { Control as BaseControl } from '../../controls/control';
+import { ControlContainer } from '../../controls/components/control-container';
 
 export const SizeSection = () => {
 	return (
@@ -14,25 +14,21 @@ export const SizeSection = () => {
 					<Control bind="width" label={ __( 'Width', 'elementor' ) } />
 					<Control bind="height" label={ __( 'Height', 'elementor' ) } />
 				</Stack>
-				<CollapsibleContent>
-					<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
-						<Stack direction="row" gap={ 2 }>
-							<Control bind="minWidth" label={ __( 'Min. Width', 'elementor' ) } />
-							<Control bind="minHeight" label={ __( 'Min. Height', 'elementor' ) } />
-						</Stack>
-						<Stack direction="row" gap={ 2 }>
-							<Control bind="maxWidth" label={ __( 'Max. Width', 'elementor' ) } />
-							<Control bind="maxHeight" label={ __( 'Max. Height', 'elementor' ) } />
-						</Stack>
+				<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
+					<Stack direction="row" gap={ 2 }>
+						<Control bind="minWidth" label={ __( 'Min. Width', 'elementor' ) } />
+						<Control bind="minHeight" label={ __( 'Min. Height', 'elementor' ) } />
 					</Stack>
-				</CollapsibleContent>
+					<Stack direction="row" gap={ 2 }>
+						<Control bind="maxWidth" label={ __( 'Max. Width', 'elementor' ) } />
+						<Control bind="maxHeight" label={ __( 'Max. Height', 'elementor' ) } />
+					</Stack>
+				</Stack>
 			</Stack>
 		</AccordionSection>
 	);
 };
 
-const units: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];
-
 type ControlProps = {
 	bind: StyleControlProps[ 'bind' ];
 	label: string;
@@ -41,10 +37,10 @@ type ControlProps = {
 const Control = ( { label, bind }: ControlProps ) => {
 	return (
 		<StyleControl bind={ bind }>
-			<Stack gap={ 1 } sx={ { flex: '0 1 50%' } }>
+			<ControlContainer direction="column">
 				<StyleControl.Label>{ label }</StyleControl.Label>
-				<SizeControl units={ units } />
-			</Stack>
+				<BaseControl type={ 'size' } />
+			</ControlContainer>
 		</StyleControl>
 	);
 };

package/src/components/style-sections/spacing-section/linked-dimensions-control.tsx

@@ -0,0 +1,140 @@
+import { PropValue } from '../../../types';
+import { SizeControl } from '../../../controls/control-types/size-control';
+import * as React from 'react';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { Stack, ToggleButton } from '@elementor/ui';
+import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
+import { ControlLabel } from '../../control-label';
+import { ControlContext, useControl } from '../../../controls/control-context';
+import { __ } from '@wordpress/i18n';
+
+export type Position = 'top' | 'right' | 'bottom' | 'left';
+
+export type LinkedDimensionsValue = {
+	$$type: 'linked-dimensions';
+	value: {
+		isLinked: boolean;
+		top: PropValue;
+		right: PropValue;
+		bottom: PropValue;
+		left: PropValue;
+	};
+};
+
+export const LinkedDimensionsControl = ( { label }: { label: string } ) => {
+	const { value, setValue } = useControl< LinkedDimensionsValue >();
+	const { top, right, bottom, left, isLinked = false } = value?.value || {};
+
+	const setLinkedValue = ( position: Position, newValue: PropValue ) => {
+		const updatedValue = {
+			isLinked,
+			top: isLinked ? newValue : top,
+			right: isLinked ? newValue : right,
+			bottom: isLinked ? newValue : bottom,
+			left: isLinked ? newValue : left,
+			[ position ]: newValue,
+		};
+
+		setValue( {
+			$$type: 'linked-dimensions',
+			value: updatedValue,
+		} );
+	};
+
+	const toggleLinked = () => {
+		const updatedValue = {
+			isLinked: ! isLinked,
+			top,
+			right: ! isLinked ? top : right,
+			bottom: ! isLinked ? top : bottom,
+			left: ! isLinked ? top : left,
+		};
+
+		setValue( {
+			$$type: 'linked-dimensions',
+			value: updatedValue,
+		} );
+	};
+
+	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
+
+	return (
+		<>
+			<Stack direction="row" gap={ 2 }>
+				<ControlLabel>{ label }</ControlLabel>
+				<ToggleButton
+					aria-label={ __( 'Link Inputs', 'elementor' ) }
+					size={ 'tiny' }
+					value={ 'check' }
+					selected={ isLinked }
+					sx={ { marginLeft: 'auto' } }
+					onChange={ toggleLinked }
+				>
+					<LinkedIcon fontSize={ 'tiny' } />
+				</ToggleButton>
+			</Stack>
+			<Stack direction="row" gap={ 2 }>
+				<ControlContainer direction={ 'column' }>
+					<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
+					<Control
+						bind={ 'top' }
+						value={ top }
+						setValue={ setLinkedValue }
+						startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
+					/>
+				</ControlContainer>
+				<ControlContainer direction={ 'column' }>
+					<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
+					<Control
+						bind={ 'right' }
+						value={ right }
+						setValue={ setLinkedValue }
+						startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
+					/>
+				</ControlContainer>
+			</Stack>
+			<Stack direction="row" gap={ 2 }>
+				<ControlContainer direction={ 'column' }>
+					<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
+					<Control
+						bind={ 'bottom' }
+						value={ bottom }
+						setValue={ setLinkedValue }
+						startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
+					/>
+				</ControlContainer>
+				<ControlContainer direction={ 'column' }>
+					<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
+					<Control
+						bind={ 'left' }
+						value={ left }
+						setValue={ setLinkedValue }
+						startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
+					/>
+				</ControlContainer>
+			</Stack>
+		</>
+	);
+};
+
+const Control = ( {
+	bind,
+	startIcon,
+	value,
+	setValue,
+}: {
+	bind: Position;
+	value: PropValue;
+	startIcon: React.ReactNode;
+	setValue: ( bind: Position, newValue: PropValue ) => void;
+} ) => (
+	<ControlContext.Provider
+		value={ {
+			bind,
+			setValue: ( newValue ) => setValue( bind, newValue ),
+			value,
+		} }
+	>
+		<SizeControl startIcon={ startIcon } />
+	</ControlContext.Provider>
+);

package/src/components/style-sections/spacing-section/spacing-section.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { AccordionSection } from '../../accordion-section';
+import { Divider, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+import { LinkedDimensionsControl } from './linked-dimensions-control';
+import { StyleControl } from '../../../controls/style-control';
+
+export const SpacingSection = () => {
+	return (
+		<AccordionSection title={ __( 'Spacing', 'elementor' ) }>
+			<Stack gap={ 1.5 }>
+				<StyleControl bind={ 'padding' }>
+					<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } />
+				</StyleControl>
+				<Divider />
+				<StyleControl bind={ 'margin' }>
+					<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } />
+				</StyleControl>
+			</Stack>
+		</AccordionSection>
+	);
+};

package/src/components/style-sections/typography-section/font-size-control.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { StyleControl } from '../../../controls/style-control';
+import { SizeControl } from '../../../controls/control-types/size-control';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { __ } from '@wordpress/i18n';
+
+export const FontSizeControl = () => {
+	return (
+		<StyleControl bind="font-size">
+			<ControlContainer>
+				<StyleControl.Label>{ __( 'Font Size', 'elementor' ) }</StyleControl.Label>
+				<SizeControl />
+			</ControlContainer>
+		</StyleControl>
+	);
+};

package/src/components/style-sections/typography-section/font-weight-control.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { StyleControl } from '../../../controls/style-control';
+import { SelectControl } from '../../../controls/control-types/select-control';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { __ } from '@wordpress/i18n';
+
+const fontWeightOptions = [
+	{ label: __( 'Light - 400', 'elementor' ), value: 400 },
+	{ label: __( 'Regular - 500', 'elementor' ), value: 500 },
+	{ label: __( 'Semi Bold - 600', 'elementor' ), value: 600 },
+	{ label: __( 'Bold - 700', 'elementor' ), value: 700 },
+	{ label: __( 'Black - 900', 'elementor' ), value: 900 },
+];
+
+export const FontWeightControl = () => {
+	return (
+		<StyleControl bind="fontWeight">
+			<ControlContainer>
+				<StyleControl.Label>{ __( 'Font Weight', 'elementor' ) }</StyleControl.Label>
+				<SelectControl options={ fontWeightOptions } />
+			</ControlContainer>
+		</StyleControl>
+	);
+};

package/src/components/style-sections/typography-section/letter-spacing-control.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { StyleControl } from '../../../controls/style-control';
+import { SizeControl } from '../../../controls/control-types/size-control';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { __ } from '@wordpress/i18n';
+
+export const LetterSpacingControl = () => {
+	return (
+		<StyleControl bind="letter-spacing">
+			<ControlContainer>
+				<StyleControl.Label>{ __( 'Letter Spacing', 'elementor' ) }</StyleControl.Label>
+				<SizeControl />
+			</ControlContainer>
+		</StyleControl>
+	);
+};

package/src/components/style-sections/typography-section/text-color-control.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { StyleControl } from '../../../controls/style-control';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { __ } from '@wordpress/i18n';
+import { ColorControl } from '../../../controls/control-types/color-control';
+
+export const TextColorControl = () => {
+	return (
+		<StyleControl bind="color">
+			<ControlContainer>
+				<StyleControl.Label>{ __( 'Text Color', 'elementor' ) }</StyleControl.Label>
+				<ColorControl />
+			</ControlContainer>
+		</StyleControl>
+	);
+};

package/src/{controls/control-types → components/style-sections/typography-section}/text-style-control.tsx

@@ -1,8 +1,12 @@
 import * as React from 'react';
-import { Stack, ToggleButton as ToggleButtonBase, ToggleButtonGroup } from '@elementor/ui';
-import { ControlLabel } from '../../components/control-label';
-import { useStyleControl } from '../hooks/use-style-control';
+import { ToggleButton as ToggleButtonBase, ToggleButtonGroup, ToggleButtonProps } from '@elementor/ui';
+import { ItalicIcon, StrikethroughIcon, UnderlineIcon } from '@elementor/icons';
+import { ControlLabel } from '../../control-label';
+import { useStyleControl } from '../../../controls/hooks/use-style-control';
 import { __ } from '@wordpress/i18n';
+import { ControlContainer } from '../../../controls/components/control-container';
+
+const buttonSize = 'tiny';
 
 export const TextStyleControl = () => {
 	const [ fontStyle, setFontStyle ] = useStyleControl< string | null >( 'fontStyle' );
@@ -11,15 +15,16 @@ export const TextStyleControl = () => {
 	const formats = [ fontStyle, ...( textDecoration || '' ).split( ' ' ) ];
 
 	return (
-		<Stack direction="row" justifyContent="space-between" alignItems="center">
+		<ControlContainer>
 			<ControlLabel>{ __( 'Style', 'elementor' ) }</ControlLabel>
 			<ToggleButtonGroup value={ formats }>
 				<ToggleButton
 					value="italic"
 					onChange={ ( v ) => setFontStyle( fontStyle === v ? null : v ) }
 					aria-label="italic"
+					sx={ { marginLeft: 'auto' } }
 				>
-					<span style={ { fontStyle: 'italic', fontSize: '12px' } }>I</span>
+					<ItalicIcon fontSize={ buttonSize } />
 				</ToggleButton>
 				<ShorthandControl
 					value="line-through"
@@ -27,7 +32,7 @@ export const TextStyleControl = () => {
 					updateValues={ setTextDecoration }
 					aria-label="line-through"
 				>
-					<span style={ { textDecoration: 'line-through', fontSize: '12px' } }>S</span>
+					<StrikethroughIcon fontSize={ buttonSize } />
 				</ShorthandControl>
 				<ShorthandControl
 					value="underline"
@@ -35,10 +40,10 @@ export const TextStyleControl = () => {
 					updateValues={ setTextDecoration }
 					aria-label="underline"
 				>
-					<span style={ { textDecoration: 'underline', fontSize: '12px' } }>U</span>
+					<UnderlineIcon fontSize={ buttonSize } />
 				</ShorthandControl>
 			</ToggleButtonGroup>
-		</Stack>
+		</ControlContainer>
 	);
 };
 
@@ -74,17 +79,14 @@ export const ShorthandControl = ( {
 	);
 };
 
-type ControlToggleButtonProps = React.PropsWithChildren< {
-	value: string;
+type ControlToggleButtonProps = Omit< ToggleButtonProps, 'onChange' > & {
 	onChange: ( newValue: string ) => void;
-	selected?: boolean;
-	'aria-label': string;
-} >;
+};
 
 const ToggleButton = ( { onChange, ...props }: ControlToggleButtonProps ) => {
 	const handleChange = ( _e: React.MouseEvent< HTMLElement >, newValue: string ) => {
 		onChange( newValue );
 	};
 
-	return <ToggleButtonBase { ...props } onChange={ handleChange } size="tiny" sx={ { px: 1.5 } } />;
+	return <ToggleButtonBase { ...props } onChange={ handleChange } size={ buttonSize } />;
 };

package/src/components/style-sections/typography-section/transform-control.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { StyleControl } from '../../../controls/style-control';
+import { __ } from '@wordpress/i18n';
+import { ToggleControl } from '../../../controls/control-types/toggle-control';
+import { LetterCaseIcon, LetterCaseLowerIcon, LetterCaseUpperIcon } from '@elementor/icons';
+
+const options = [
+	{ value: 'capitalize', label: __( 'Capitalize', 'elementor' ), icon: LetterCaseIcon },
+	{ value: 'uppercase', label: __( 'Uppercase', 'elementor' ), icon: LetterCaseUpperIcon },
+	{ value: 'lowercase', label: __( 'Lowercase', 'elementor' ), icon: LetterCaseLowerIcon },
+];
+
+export const TransformControl = () => {
+	return (
+		<ControlContainer>
+			<StyleControl.Label>{ __( 'Transform', 'elementor' ) }</StyleControl.Label>
+			<StyleControl bind={ 'text-transform' }>
+				<ToggleControl options={ options } />
+			</StyleControl>
+		</ControlContainer>
+	);
+};

package/src/components/style-sections/typography-section/typography-section.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { AccordionSection } from '../../accordion-section';
+import { Divider, Stack } from '@elementor/ui';
+import { TextStyleControl } from './text-style-control';
+import { __ } from '@wordpress/i18n';
+import { FontSizeControl } from './font-size-control';
+import { FontWeightControl } from './font-weight-control';
+import { TextColorControl } from './text-color-control';
+import { LetterSpacingControl } from './letter-spacing-control';
+import { WordSpacingControl } from './word-spacing-control';
+import { CollapsibleContent } from '../../collapsible-content';
+import { TransformControl } from './transform-control';
+
+export const TypographySection = () => {
+	return (
+		<AccordionSection title={ __( 'Typography', 'elementor' ) }>
+			<Stack gap={ 1.5 }>
+				<FontWeightControl />
+				<FontSizeControl />
+				<Divider />
+				<TextColorControl />
+				<CollapsibleContent>
+					<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
+						<LetterSpacingControl />
+						<WordSpacingControl />
+						<Divider />
+						<TextStyleControl />
+						<TransformControl />
+					</Stack>
+				</CollapsibleContent>
+			</Stack>
+		</AccordionSection>
+	);
+};

package/src/components/style-sections/typography-section/word-spacing-control.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { StyleControl } from '../../../controls/style-control';
+import { SizeControl } from '../../../controls/control-types/size-control';
+import { ControlContainer } from '../../../controls/components/control-container';
+import { __ } from '@wordpress/i18n';
+
+export const WordSpacingControl = () => {
+	return (
+		<StyleControl bind="word-spacing">
+			<ControlContainer>
+				<StyleControl.Label>{ __( 'Word Spacing', 'elementor' ) }</StyleControl.Label>
+				<SizeControl />
+			</ControlContainer>
+		</StyleControl>
+	);
+};

package/src/components/style-tab.tsx

@@ -4,20 +4,44 @@ import { useElementContext } from '../contexts/element-context';
 import { useElementStyles } from '../hooks/use-element-styles';
 import { Stack } from '@elementor/ui';
 import { SizeSection } from './style-sections/size-section';
-import { TypographySection } from './style-sections/typography-section';
+import { TypographySection } from './style-sections/typography-section/typography-section';
+import { PositionSection } from './style-sections/position-section/position-section';
+import { StyleDefinition } from '@elementor/editor-style';
+import { SpacingSection } from './style-sections/spacing-section/spacing-section';
+
+const CLASSES_PROP_KEY = 'classes';
 
 export const StyleTab = () => {
-	const { element } = useElementContext();
-	const elementStyles = useElementStyles( element.id );
-	// TODO: Handle selected style state.
-	const [ selectedStyleDef = null ] = Object.values( elementStyles || {} );
+	const styleDefinition = useStyleDefinition();
+	const classesProp = useClassesProp();
 
 	return (
-		<StyleContext selectedStyleDef={ selectedStyleDef }>
+		<StyleContext selectedStyleDef={ styleDefinition } selectedClassesProp={ classesProp }>
 			<Stack>
 				<SizeSection />
+				<PositionSection />
 				<TypographySection />
+				<SpacingSection />
 			</Stack>
 		</StyleContext>
 	);
 };
+
+function useClassesProp(): string {
+	const { elementType } = useElementContext();
+
+	const prop = Object.entries( elementType.propsSchema ).find( ( [ , { type } ] ) => type.key === CLASSES_PROP_KEY );
+
+	if ( ! prop ) {
+		throw new Error( 'Element does not have a classes prop' );
+	}
+
+	return prop[ 0 ];
+}
+
+function useStyleDefinition(): StyleDefinition | null {
+	const { element } = useElementContext();
+	const elementStyles = useElementStyles( element.id );
+
+	return Object.values( elementStyles || {} )[ 0 ] ?? null;
+}

package/src/contexts/element-context.tsx

@@ -1,20 +1,22 @@
 import * as React from 'react';
 import { createContext, ReactNode, useContext } from 'react';
-import { Element } from '../types';
+import { Element, ElementType } from '../types';
 
 type ContextValue = {
 	element: Element;
+	elementType: ElementType;
 };
 
 const Context = createContext< ContextValue | null >( null );
 
 type Props = {
 	element: Element;
+	elementType: ElementType;
 	children?: ReactNode;
 };
 
-export function ElementContext( { children, element }: Props ) {
-	return <Context.Provider value={ { element } }>{ children }</Context.Provider>;
+export function ElementContext( { children, element, elementType }: Props ) {
+	return <Context.Provider value={ { element, elementType } }>{ children }</Context.Provider>;
 }
 
 export function useElementContext() {

package/src/contexts/style-context.tsx

@@ -6,6 +6,7 @@ import { StyleDefinition, StyleVariant } from '@elementor/editor-style';
 type ContextValue = {
 	selectedStyleDef: StyleDefinition | null;
 	selectedMeta: StyleVariant[ 'meta' ];
+	selectedClassesProp: string;
 };
 
 const Context = createContext< ContextValue | null >( null );
@@ -13,14 +14,19 @@ const Context = createContext< ContextValue | null >( null );
 type Props = {
 	children: ReactNode;
 	selectedStyleDef: StyleDefinition | null;
+	selectedClassesProp: string;
 };
 
-export function StyleContext( { children, selectedStyleDef }: Props ) {
+export function StyleContext( { children, selectedStyleDef, selectedClassesProp }: Props ) {
 	const breakpoint = useActiveBreakpoint();
 	// TODO: Handle state when we support it.
 	const selectedMeta = { breakpoint, state: null } as const;
 
-	return <Context.Provider value={ { selectedStyleDef, selectedMeta } }>{ children }</Context.Provider>;
+	return (
+		<Context.Provider value={ { selectedStyleDef, selectedMeta, selectedClassesProp } }>
+			{ children }
+		</Context.Provider>
+	);
 }
 
 export function useStyleContext() {

package/src/controls/components/control-container.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Stack, StackProps, styled } from '@elementor/ui';
+
+const StyledStack = styled( Stack )( ( { theme, gap, direction } ) => ( {
+	'> :only-child': {
+		width: '100%',
+	},
+	'&:where( :has( > :nth-child( 2 ):last-child ) ) > :where( * )': {
+		width: direction === 'column' ? '100%' : `calc( 50% - ${ theme.spacing( gap / 2 ) })`,
+	},
+	'&:where( :has( > :nth-child( 3 ):last-child ) ) > :where( * )': {
+		width: direction === 'column' ? '100%' : `calc( 33.3333% - ${ theme.spacing( gap * 2 ) } / 3)`,
+	},
+} ) );
+
+export const ControlContainer = ( props: StackProps ) => (
+	<StyledStack gap={ 1 } direction="row" alignItems="center" justifyContent="space-between" { ...props } />
+);

package/src/controls/components/control-toggle-button-group.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { JSX } from 'react';
+import { StackProps, styled, ToggleButton, ToggleButtonGroup } from '@elementor/ui';
+
+export type ToggleButtonGroupItem< TValue > = {
+	value: TValue;
+	label: string;
+	icon: JSX.ElementType;
+};
+
+const StyledToggleButtonGroup = styled( ToggleButtonGroup )`
+	${ ( { justify } ) => `justify-content: ${ justify };` }
+`;
+
+type ExclusiveValue< TValue > = TValue | null;
+type NonExclusiveValue< TValue > = TValue[];
+
+type Props< TValue > = {
+	justify?: StackProps[ 'justifyContent' ];
+	size?: 'tiny' | 'small' | 'medium' | 'large';
+	items: ToggleButtonGroupItem< TValue >[];
+} & (
+	| {
+			exclusive?: false;
+			value: NonExclusiveValue< TValue >;
+			onChange: ( value: NonExclusiveValue< TValue > ) => void;
+	  }
+	| {
+			exclusive: true;
+			value: ExclusiveValue< TValue >;
+			onChange: ( value: ExclusiveValue< TValue > ) => void;
+	  }
+);
+
+export const ControlToggleButtonGroup = < TValue, >( {
+	justify = 'end',
+	size = 'tiny',
+	value,
+	onChange,
+	items,
+	exclusive = false,
+}: Props< TValue > ) => {
+	const handleChange = (
+		_: React.MouseEvent< HTMLElement >,
+		newValue: typeof exclusive extends true ? ExclusiveValue< TValue > : NonExclusiveValue< TValue >
+	) => {
+		onChange( newValue as never );
+	};
+
+	return (
+		<StyledToggleButtonGroup justify={ justify } value={ value } onChange={ handleChange } exclusive={ exclusive }>
+			{ items.map( ( { label, value: buttonValue, icon: Icon } ) => (
+				<ToggleButton key={ buttonValue } value={ buttonValue } aria-label={ label } size={ size }>
+					<Icon fontSize={ size } />
+				</ToggleButton>
+			) ) }
+		</StyledToggleButtonGroup>
+	);
+};