@webpros/mui-theme 0.3.11 → 0.4.0

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@webpros/mui-theme",
     "description": "MUI v7 theme for WebPros products",
-    "version": "0.3.11",
+    "version": "0.4.0",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -41,6 +41,7 @@
         "build": "yarn build:main && yarn build:eslint",
         "build:main": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
         "build:eslint": "tsc -p ./eslint/tsconfig.eslint.json",
+        "yalc:publish": "yarn build && yalc publish && cd eslint && yalc publish",
         "storybook:dev": "storybook dev -p 6006",
         "storybook:build": "storybook build",
         "test": "npm run prettier:test && npm run lint && npm run typecheck",
@@ -82,7 +83,6 @@
         "@storybook/addon-a11y": "^9.1.16",
         "@storybook/addon-docs": "^9.1.16",
         "@storybook/addon-onboarding": "^9.1.16",
-        "@storybook/addon-themes": "^9.1.16",
         "@storybook/builder-vite": "^9.1.16",
         "@storybook/react-vite": "^9.1.16",
         "@stylistic/eslint-plugin": "^5.5.0",

package/dist/src/components/data-display/Badge/Badge.theme.js

@@ -10,7 +10,7 @@ const iconBaseStyle = (size) => ({
     minHeight: size,
     padding: 0,
 });
-const DIAMOND_STRETCH_CLIP_PATH = 'polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%)';
+const DIAMOND_STRETCH_CLIP_PATH = 'polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%)';
 export const getBadge = (theme) => {
     const { colors } = theme;
     return {
@@ -135,8 +135,8 @@ export const getBadge = (theme) => {
                     props: { size: 'large' },
                     style: {
                         '& .MuiBadge-badge': {
-                            minWidth: 18,
-                            minHeight: 18,
+                            minWidth: 20,
+                            minHeight: 20,
                             borderRadius: 999,
                         },
                     },
@@ -177,8 +177,8 @@ export const getBadge = (theme) => {
                     props: { size: 'medium', color: 'warning', variant: 'dot' },
                     style: {
                         '& .MuiBadge-badge': {
-                            width: 9,
-                            height: 9,
+                            width: 12,
+                            height: 12,
                             clipPath: DIAMOND_CLIP_PATH,
                             borderRadius: 0,
                         },
@@ -189,8 +189,8 @@ export const getBadge = (theme) => {
                     props: { size: 'large', color: 'error', variant: 'standard' },
                     style: {
                         '& .MuiBadge-badge': {
-                            height: 18,
-                            minHeight: 18,
+                            height: 20,
+                            minHeight: 20,
                             padding: '0 6px',
                             clipPath: OCTAGON_CLIP_PATH,
                             borderRadius: 0,
@@ -201,8 +201,8 @@ export const getBadge = (theme) => {
                     props: { size: 'large', color: 'warning', variant: 'standard' },
                     style: {
                         '& .MuiBadge-badge': {
-                            height: 18,
-                            minHeight: 18,
+                            height: 20,
+                            minHeight: 20,
                             padding: '0 6px',
                             clipPath: DIAMOND_STRETCH_CLIP_PATH,
                             borderRadius: 0,
@@ -213,9 +213,9 @@ export const getBadge = (theme) => {
                     props: { size: 'large', color: 'success', variant: 'standard' },
                     style: {
                         '& .MuiBadge-badge': {
-                            minWidth: 18,
-                            height: 18,
-                            minHeight: 18,
+                            minWidth: 20,
+                            height: 20,
+                            minHeight: 20,
                             paddingLeft: 4,
                             paddingRight: 4,
                             borderRadius: 999,
@@ -226,9 +226,9 @@ export const getBadge = (theme) => {
                     props: { size: 'large', color: 'undefined', variant: 'standard' },
                     style: {
                         '& .MuiBadge-badge': {
-                            minWidth: 18,
-                            height: 18,
-                            minHeight: 18,
+                            minWidth: 20,
+                            height: 20,
+                            minHeight: 20,
                             paddingLeft: 4,
                             paddingRight: 4,
                             borderRadius: 999,
@@ -239,7 +239,7 @@ export const getBadge = (theme) => {
                 {
                     props: { size: 'large', color: 'error', icon: true },
                     style: {
-                        '& .MuiBadge-badge': Object.assign(Object.assign({}, iconBaseStyle(18)), { clipPath: OCTAGON_CLIP_PATH, borderRadius: 0 }),
+                        '& .MuiBadge-badge': Object.assign(Object.assign({}, iconBaseStyle(20)), { clipPath: OCTAGON_CLIP_PATH, borderRadius: 0 }),
                     },
                 },
                 {
@@ -251,13 +251,13 @@ export const getBadge = (theme) => {
                 {
                     props: { size: 'large', color: 'success', icon: true },
                     style: {
-                        '& .MuiBadge-badge': Object.assign(Object.assign({}, iconBaseStyle(18)), { borderRadius: 999 }),
+                        '& .MuiBadge-badge': Object.assign(Object.assign({}, iconBaseStyle(20)), { borderRadius: 999 }),
                     },
                 },
                 {
                     props: { size: 'large', color: 'undefined', icon: true },
                     style: {
-                        '& .MuiBadge-badge': Object.assign(Object.assign({}, iconBaseStyle(18)), { borderRadius: 999 }),
+                        '& .MuiBadge-badge': Object.assign(Object.assign({}, iconBaseStyle(20)), { borderRadius: 999 }),
                     },
                 },
                 // Position variants

package/dist/src/components/data-display/Chip/Chip.theme.js

@@ -2,6 +2,7 @@
 import { chipClasses, touchRippleClasses, } from '@mui/material';
 import { getChipColorsMap } from './get-chip-colors-map';
 import { rippleEnterKeyframe } from '../../../shared/rippleEnterKeyframe';
+import { ChipDeleteIcon } from '../../../components/utils/inputIcons';
 export const getChip = (theme) => {
     const { typography } = theme;
     const colorsMap = getChipColorsMap(theme);
@@ -116,6 +117,7 @@ export const getChip = (theme) => {
                 size: 'large',
                 variant: 'filled',
                 color: 'default',
+                deleteIcon: ChipDeleteIcon,
             },
             styleOverrides: {
                 root: {

package/dist/src/components/data-display/Table/Table.theme.js

@@ -23,7 +23,7 @@ export const getTable = (theme) => {
                         padding: 'checkbox',
                     },
                     style: {
-                        width: 38, // TODO: align with checbox width
+                        width: 36,
                         padding: 0,
                     },
                 },

package/dist/src/components/feedback/Alert/Alert.theme.js

@@ -1,23 +1,37 @@
+import { iconMapping } from './alertDefaultIcons';
 export const getAlert = (theme) => {
     const { colors } = theme;
     return {
         MuiAlert: {
-            // Example of how custom iconMapping can be used, though need to pass severity instead of/along with color for it to work
-            // defaultProps: {
-            //     iconMapping: {
-            //         error: <XCircleIcon />,
-            //     },
-            // },
+            defaultProps: {
+                iconMapping,
+            },
             styleOverrides: {
                 root: {
                     borderRadius: '6px',
                     padding: '8px',
-                    '& svg': {
-                        width: '20px',
-                        height: '20px',
-                    },
+                    boxShadow: 'none',
                     '.MuiAlert-action': {
-                        marginTop: '-6px',
+                        marginTop: '-8px',
+                        paddingTop: '6px',
+                        paddingRight: '8px',
+                        paddingLeft: '0px',
+                    },
+                    '.MuiAlert-message': {
+                        paddingLeft: '6px',
+                        paddingRight: '6px',
+                        paddingTop: '7px',
+                        paddingBottom: '7px',
+                    },
+                    '.MuiAlertTitle-root ': {
+                        marginTop: '0px',
+                        marginBottom: '0px',
+                    },
+                    '.MuiAlert-icon': {
+                        paddingLeft: '4px',
+                        paddingRight: '4px',
+                        paddingTop: '7px',
+                        marginRight: '0px',
                     },
                 },
             },
@@ -27,6 +41,9 @@ export const getAlert = (theme) => {
                     style: {
                         color: colors.schemes.status.onErrorContainer,
                         backgroundColor: colors.schemes.status.errorContainer,
+                        '.MuiAlert-action svg, .MuiAlert-icon svg': {
+                            color: colors.schemes.status.onErrorContainer,
+                        },
                     },
                 },
                 {
@@ -34,7 +51,7 @@ export const getAlert = (theme) => {
                     style: {
                         backgroundColor: colors.schemes.status.warningContainer,
                         color: colors.schemes.status.onWarningContainer,
-                        '& svg': {
+                        '.MuiAlert-action svg, .MuiAlert-icon svg': {
                             color: colors.schemes.status.onWarningContainer,
                         },
                     },
@@ -44,7 +61,7 @@ export const getAlert = (theme) => {
                     style: {
                         backgroundColor: colors.schemes.status.infoContainer,
                         color: colors.schemes.status.onInfoContainer,
-                        '& svg': {
+                        '.MuiAlert-action svg, .MuiAlert-icon svg': {
                             color: colors.schemes.status.onInfoContainer,
                         },
                     },
@@ -54,7 +71,7 @@ export const getAlert = (theme) => {
                     style: {
                         backgroundColor: colors.schemes.status.successContainer,
                         color: colors.schemes.status.onSuccessContainer,
-                        '& svg': {
+                        '.MuiAlert-action svg, .MuiAlert-icon svg': {
                             color: colors.schemes.status.onSuccessContainer,
                         },
                     },
@@ -64,11 +81,61 @@ export const getAlert = (theme) => {
                     style: {
                         backgroundColor: colors.schemes.base.primaryContainer,
                         color: colors.schemes.base.onPrimaryContainer,
-                        '& svg': {
+                        '.MuiAlert-action svg, .MuiAlert-icon svg': {
                             color: colors.schemes.base.onPrimaryContainer,
                         },
                     },
                 },
+                {
+                    props: { variant: 'filled', color: 'error' },
+                    style: {
+                        backgroundColor: colors.schemes.status.error,
+                        color: colors.schemes.status.onError,
+                        '.MuiAlert-action svg, .MuiAlert-icon svg': {
+                            color: colors.schemes.status.onError,
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'warning' },
+                    style: {
+                        backgroundColor: colors.schemes.status.warning,
+                        color: colors.schemes.status.onWarning,
+                        '.MuiAlert-action svg, .MuiAlert-icon svg': {
+                            color: colors.schemes.status.onWarning,
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'info' },
+                    style: {
+                        backgroundColor: colors.schemes.status.info,
+                        color: colors.schemes.status.onInfo,
+                        '.MuiAlert-action svg, .MuiAlert-icon svg': {
+                            color: colors.schemes.status.onInfo,
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'success' },
+                    style: {
+                        backgroundColor: colors.schemes.status.success,
+                        color: colors.schemes.status.onSuccess,
+                        '.MuiAlert-action svg, .MuiAlert-icon svg': {
+                            color: colors.schemes.status.onSuccess,
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'primary' },
+                    style: {
+                        backgroundColor: colors.schemes.base.primary,
+                        color: colors.schemes.base.onPrimary,
+                        '.MuiAlert-action svg, .MuiAlert-icon svg': {
+                            color: colors.schemes.base.onPrimary,
+                        },
+                    },
+                },
             ],
         },
     };

package/dist/src/components/feedback/Alert/alertDefaultIcons.d.ts

@@ -0,0 +1,2 @@
+import { AlertProps } from '@mui/material';
+export declare const iconMapping: AlertProps['iconMapping'];

package/dist/src/components/feedback/Alert/alertDefaultIcons.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { CloseCircleIcon } from '../../../icons/CloseCircleIcon';
+import { InfoIcon } from '../../../icons/InfoIcon';
+import { StarIcon } from '../../../icons/StarIcon';
+import { CheckCircleIcon } from '../../../icons/CheckCircleIcon';
+import { WarningIcon } from '../../../icons/WarningIcon';
+export const iconMapping = {
+    error: _jsx(CloseCircleIcon, { size: '20px', className: "MuiSvgIcon-root" }),
+    info: _jsx(InfoIcon, { size: '20px', className: "MuiSvgIcon-root" }),
+    primary: _jsx(StarIcon, { size: '20px', className: "MuiSvgIcon-root" }),
+    success: _jsx(CheckCircleIcon, { size: '20px', className: "MuiSvgIcon-root" }),
+    warning: (_jsx(WarningIcon, { sx: (theme) => ({
+            color: theme.colors.schemes.status.warning,
+        }), size: '20px', className: "MuiSvgIcon-root" })),
+};

package/dist/src/components/feedback/Dialog/Dialog.theme.js

@@ -14,11 +14,8 @@ export const getDialog = (theme) => {
             },
             styleOverrides: {
                 root: {
-                    padding: spacing(3.75, 8.25, 2.375, 4.5),
+                    padding: spacing(3.75, 8.25, 2.375, 5),
                     color: colors.schemes.surfaces.onSurface,
-                    [`& + .${dialogContentClasses.root}`]: {
-                        paddingTop: '0 !important',
-                    },
                     [`& .${iconButtonClasses.root}`]: closeButtonPosition,
                 },
             },
@@ -56,10 +53,10 @@ export const getDialog = (theme) => {
             styleOverrides: {
                 root: {
                     color: colors.schemes.surfaces.onSurfaceVariant,
-                    padding: spacing(0, 4.5, 1, 4.5),
+                    padding: spacing(0, 5, 1, 5),
                 },
                 dividers: {
-                    padding: spacing(2, 4.5),
+                    padding: spacing(2, 5),
                     borderColor: colors.schemes.surfaces.outlineVariant,
                 },
             },
@@ -67,7 +64,7 @@ export const getDialog = (theme) => {
         MuiDialogActions: {
             styleOverrides: {
                 root: {
-                    padding: spacing(2, 4.25, 2.5, 2.375),
+                    padding: spacing(2, 5, 2.5, 5),
                     justifyContent: 'flex-end',
                     gap: spacing(0.5),
                     '& > :not(style) ~ :not(style)': {
@@ -80,7 +77,7 @@ export const getDialog = (theme) => {
                     props: { alignment: 'left' },
                     style: {
                         justifyContent: 'flex-start',
-                        padding: spacing(2, 2.375, 2.5, 4.25),
+                        padding: spacing(2, 5, 2.5, 5),
                     },
                 },
             ],

package/dist/src/components/inputs/Autocomplete/Autocomplete.theme.js

@@ -1,7 +1,6 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { outlinedInputClasses, inputBaseClasses, } from '@mui/material';
-import { AutocompleteCaretDownIcon } from '../../../components/inputs/Autocomplete/components/AutocompleteCaretDownIcon';
-import { AutocompleteXIcon } from '../../../components/inputs/Autocomplete/components/AutocompleteXIcon';
+import { outlinedInputClasses, inputBaseClasses, autocompleteClasses, } from '@mui/material';
+import { AutocompleteCaretDownIcon, AutocompleteXIcon, } from '../../../components/utils/inputIcons';
 export const getAutocomplete = () => {
     return {
         MuiAutocomplete: {
@@ -25,15 +24,45 @@ export const getAutocomplete = () => {
                     },
                     [`& .${outlinedInputClasses.root}`]: {
                         padding: '3.5px 9px 3.5px',
+                        alignItems: 'flex-start',
+                        '& .MuiAutocomplete-tagSizeMedium': {
+                            transform: 'translateY(2.5px)',
+                        },
                     },
+                    [`& .${autocompleteClasses.clearIndicator}`]: {
+                        visibility: 'visible',
+                    },
+                },
+                tag: {
+                    margin: 1, // Creates 2px gap (1px on each side)
                 },
                 endAdornment: {
+                    top: '0px',
+                    alignSelf: 'flex-start',
                     svg: {
                         width: 20,
                         height: 20,
                     },
                 },
             },
+            variants: [
+                {
+                    props: { size: 'small' },
+                    style: {
+                        [`& .MuiAutocomplete-endAdornment`]: {
+                            transform: 'translateX(0px) translateY(2px)',
+                        },
+                    },
+                },
+                {
+                    props: { size: 'medium' },
+                    style: {
+                        [`& .MuiAutocomplete-endAdornment`]: {
+                            transform: 'translateX(0px) translateY(4px)',
+                        },
+                    },
+                },
+            ],
         },
     };
 };

package/dist/src/components/inputs/Checkbox/Checkbox.theme.d.ts

@@ -1,4 +1,4 @@
-import { Theme, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import { Theme, ComponentsOverrides, ComponentsVariants, ComponentsProps } from '@mui/material';
 import { ComponentWithViewContextOwnProps } from '../../../shared/viewContext';
 declare module '@mui/material/Checkbox' {
     interface CheckboxProps extends ComponentWithViewContextOwnProps {
@@ -6,6 +6,7 @@ declare module '@mui/material/Checkbox' {
 }
 interface M3Checkbox {
     MuiCheckbox: {
+        defaultProps?: ComponentsProps['MuiCheckbox'];
         styleOverrides?: ComponentsOverrides<Theme>['MuiCheckbox'];
         variants?: ComponentsVariants<Theme>['MuiCheckbox'];
     };

package/dist/src/components/inputs/Checkbox/Checkbox.theme.js

@@ -1,7 +1,13 @@
+import { CheckboxIntermediate, CheckboxOff, CheckboxOn, } from '../../../components/utils/inputIcons';
 export const getCheckbox = (theme) => {
     const { colors } = theme;
     return {
         MuiCheckbox: {
+            defaultProps: {
+                checkedIcon: CheckboxOn,
+                icon: CheckboxOff,
+                indeterminateIcon: CheckboxIntermediate,
+            },
             styleOverrides: {
                 root: {
                     '&.Mui-disabled': {
@@ -10,6 +16,27 @@ export const getCheckbox = (theme) => {
                 },
             },
             variants: [
+                {
+                    props: { size: 'small' },
+                    style: {
+                        '& .MuiSvgIcon-root': {
+                            width: 20,
+                            height: 20,
+                        },
+                        padding: 5,
+                    },
+                },
+                {
+                    props: { size: 'medium' },
+                    style: {
+                        width: 34,
+                        height: 34,
+                        '& .MuiSvgIcon-root': {
+                            width: 24,
+                            height: 24,
+                        },
+                    },
+                },
                 {
                     props: { color: 'default' },
                     style: {

package/dist/src/components/inputs/Filter/Filter.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 import { useCallback } from 'react';
 import { Autocomplete, Box, IconButton, TextField, autocompleteClasses, } from '@mui/material';
-import { FunnelSimpleIcon, XIcon } from '@phosphor-icons/react';
+import { FunnelSimpleIcon } from '../../../icons/FunnelSimpleIcon';
+import { CloseIcon } from '../../../icons/CloseIcon';
 const FILTER_SX = {
     '& .MuiAutocomplete-inputRoot': {
         flexWrap: 'nowrap',
@@ -74,7 +75,7 @@ export const Filter = (_a) => {
         var _a;
         const chips = (_a = params.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment;
         return (_jsx(TextField, Object.assign({}, params, { placeholder: placeholder, slotProps: {
-                input: Object.assign(Object.assign({}, params.InputProps), { startAdornment: (_jsxs(_Fragment, { children: [_jsx(Box, { sx: FILTER_ICON_SX, children: _jsx(FunnelSimpleIcon, { size: 20 }) }), _jsx(Box, { sx: CHIPS_CONTAINER_SX, children: chips })] })), endAdornment: chips ? (_jsx(IconButton, { size: "small", onClick: handleClear, sx: CLEAR_BUTTON_SX, "aria-label": "Clear", children: _jsx(XIcon, { size: 16 }) })) : null }),
+                input: Object.assign(Object.assign({}, params.InputProps), { startAdornment: (_jsxs(_Fragment, { children: [_jsx(Box, { sx: FILTER_ICON_SX, children: _jsx(FunnelSimpleIcon, { size: 20 }) }), _jsx(Box, { sx: CHIPS_CONTAINER_SX, children: chips })] })), endAdornment: chips ? (_jsx(IconButton, { size: "small", onClick: handleClear, sx: CLEAR_BUTTON_SX, "aria-label": "Clear", children: _jsx(CloseIcon, { size: 16 }) })) : null }),
             } })));
     }, [placeholder, handleClear]);
     return (_jsx(Autocomplete, Object.assign({}, props, { multiple: true, size: size, value: value, onChange: onChange, filterSelectedOptions: filterSelectedOptions, forcePopupIcon: false, disableClearable: true, renderInput: renderInput !== null && renderInput !== void 0 ? renderInput : defaultRenderInput, slotProps: Object.assign(Object.assign({}, slotProps), { chip: {

package/dist/src/components/inputs/Radio/Radio.theme.js

@@ -1,9 +1,15 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
+import { RadioOff, RadioOn } from '../../../components/utils/inputIcons';
 export const getRadio = (theme) => {
     const { colors } = theme;
     return {
         MuiRadio: {
-            defaultProps: { size: 'small', color: 'default' },
+            defaultProps: {
+                size: 'small',
+                color: 'default',
+                checkedIcon: RadioOn,
+                icon: RadioOff,
+            },
             styleOverrides: {
                 root: {
                     color: colors.schemes.surfaces.onSurfaceVariant,
@@ -19,6 +25,16 @@ export const getRadio = (theme) => {
                 },
             },
             variants: [
+                {
+                    props: { size: 'small' },
+                    style: {
+                        '& .MuiSvgIcon-root': {
+                            width: 20,
+                            height: 20,
+                        },
+                        padding: 5,
+                    },
+                },
                 {
                     props: { color: 'error' },
                     style: {

package/dist/src/components/inputs/Select/Select.theme.js

@@ -1,10 +1,10 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { CaretDownIcon } from '@phosphor-icons/react';
+import { SelectCaretDownIcon } from '../../../components/utils/inputIcons';
 export const getSelect = () => {
     return {
         MuiSelect: {
             defaultProps: {
-                IconComponent: CaretDownIcon,
+                IconComponent: SelectCaretDownIcon,
             },
             styleOverrides: {
                 icon: {

package/dist/src/components/inputs/ToggleButton/ToggleButton.d.ts

@@ -1,3 +1,11 @@
-import './ToggleButton.theme';
-export declare const ToggleButton: import("@mui/material").ExtendButtonBase<import("@mui/material").ToggleButtonTypeMap<{}, "button">>;
+import { ReactNode } from 'react';
+import { IconButtonOwnProps } from '@mui/material';
+import { ButtonOwnProps } from '@mui/material/Button';
+type ToggleButtonProps = {
+    children: ReactNode;
+    value: string;
+    isIconButton?: boolean;
+} & ButtonOwnProps & IconButtonOwnProps;
+export declare const ToggleButton: ({ children, value, isIconButton, ...props }: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;
 export type ToggleButtonComponentType = typeof ToggleButton;
+export {};

package/dist/src/components/inputs/ToggleButton/ToggleButton.js

@@ -1,4 +1,27 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { ToggleButton as MuiToggleButton } from '@mui/material';
-import './ToggleButton.theme';
-export const ToggleButton = MuiToggleButton;
+import { useContext } from 'react';
+import { Button } from '../Button/Button';
+import { ToggleContext } from '../ToggleButtonGroup/ToggleButtonGroup';
+import { IconButton } from '@mui/material';
+const isSelected = (btnValue, contextValue) => {
+    if (Array.isArray(contextValue)) {
+        return contextValue.includes(btnValue);
+    }
+    return btnValue === contextValue;
+};
+export const ToggleButton = (_a) => {
+    var { children, value, isIconButton = false } = _a, props = __rest(_a, ["children", "value", "isIconButton"]);
+    const { value: contextValue, handleToggle } = useContext(ToggleContext);
+    const isBtnSelected = isSelected(value, contextValue);
+    const toggleProps = {
+        'aria-pressed': isBtnSelected,
+        onClick: handleToggle,
+        value: value,
+    };
+    const borderRadiusSX = {
+        borderRadius: isBtnSelected ? '17px' : '6px',
+    };
+    return isIconButton ? (_jsx(IconButton, Object.assign({}, toggleProps, props, { variant: "tonal", color: isBtnSelected ? 'primary' : 'default', sx: borderRadiusSX, children: children }))) : (_jsx(Button, Object.assign({}, toggleProps, props, { variant: "tonal", color: isBtnSelected ? 'primary' : 'default', sx: borderRadiusSX, children: children })));
+};

package/dist/src/components/inputs/ToggleButton/index.d.ts

@@ -1 +1 @@
-export * from './ToggleButton.theme';
+export * from './ToggleButton';

package/dist/src/components/inputs/ToggleButton/index.js

@@ -1,2 +1,2 @@
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-export * from './ToggleButton.theme';
+// Copyright 2026 WebPros International GmbH. All rights reserved.
+export * from './ToggleButton';

package/dist/src/components/inputs/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -1,4 +1,13 @@
-import { ToggleButtonGroup as MuiToggleButtonGroup } from '@mui/material';
-import './ToggleButtonGroup.theme';
-export declare const ToggleButtonGroup: typeof MuiToggleButtonGroup;
+import { ReactNode } from 'react';
+type ToggleButtonGroupProps = {
+    children: ReactNode;
+    multiple?: boolean;
+};
+export type ToggleContextType = {
+    value: string | Array<string>;
+    handleToggle: React.MouseEventHandler;
+};
+export declare const ToggleContext: import("react").Context<ToggleContextType>;
+export declare const ToggleButtonGroup: ({ children, multiple }: ToggleButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
 export type ToggleButtonGroupComponentType = typeof ToggleButtonGroup;
+export {};