@webpros/mui-theme 0.3.12 → 0.4.1

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@webpros/mui-theme",
     "description": "MUI v7 theme for WebPros products",
-    "version": "0.3.12",
+    "version": "0.4.1",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -83,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/Chip/Chip.theme.js

@@ -48,6 +48,7 @@ export const getChip = (theme) => {
     const getStylesByColor = (color, viewContext) => {
         const chipColors = viewContext === 'inverse' ? inverseColorsMap[color] : colorsMap[color];
         return [
+            // Base styles for all chips
             {
                 props: { color, viewContext },
                 style: {
@@ -62,6 +63,12 @@ export const getChip = (theme) => {
                             color: chipColors.baseColor.deleteIcon.hover,
                         },
                     },
+                },
+            },
+            // Interactive styles only for clickable chips
+            {
+                props: { color, viewContext, clickable: true },
+                style: {
                     '&:hover': {
                         background: chipColors.hover,
                     },
@@ -104,6 +111,12 @@ export const getChip = (theme) => {
                             color: chipColors.selectedColor.deleteIcon.hover,
                         },
                     },
+                },
+            },
+            // Interactive styles for selected + clickable chips
+            {
+                props: { color, viewContext, selected: true, clickable: true },
+                style: {
                     '&:hover, &:focus, &:active': {
                         background: chipColors.selectedColor.background,
                     },

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/inputs/Filter/Filter.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback } from 'react';
 import { Autocomplete, Box, IconButton, TextField, autocompleteClasses, } from '@mui/material';
 import { FunnelSimpleIcon } from '../../../icons/FunnelSimpleIcon';
-import { XIcon } from '../../../icons/XIcon';
+import { CloseIcon } from '../../../icons/CloseIcon';
 const FILTER_SX = {
     '& .MuiAutocomplete-inputRoot': {
         flexWrap: 'nowrap',
@@ -75,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/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 {};

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

@@ -1,4 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { ToggleButtonGroup as MuiToggleButtonGroup } from '@mui/material';
-import './ToggleButtonGroup.theme';
-export const ToggleButtonGroup = MuiToggleButtonGroup;
+import { Box } from '@mui/material';
+import { createContext, useState } from 'react';
+export const ToggleContext = createContext({
+    value: '',
+    handleToggle: () => { },
+});
+const toggleGroupSX = {
+    borderRadius: '50px',
+    overflow: 'clip',
+    display: 'inline-flex',
+    gap: 0.25,
+    width: 'fit-content',
+};
+export const ToggleButtonGroup = ({ children, multiple = false }) => {
+    const [value, setValue] = useState(multiple ? [] : '');
+    const handleToggle = (e) => {
+        const clickedValue = e.currentTarget.value;
+        if (Array.isArray(value)) {
+            const newValue = value.includes(clickedValue)
+                ? value.filter((item) => item !== clickedValue)
+                : [...value, clickedValue];
+            setValue(newValue);
+        }
+        else {
+            setValue(clickedValue);
+        }
+        e.currentTarget.blur();
+    };
+    const toggleContextValue = { value, handleToggle };
+    return (_jsx(ToggleContext.Provider, { value: toggleContextValue, children: _jsx(Box, { sx: toggleGroupSX, children: children }) }));
+};

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

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

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

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

package/dist/src/index.d.ts

@@ -1,6 +1,9 @@
 export { default as WebProsMuiThemeProvider } from './providers/WebProsMuiThemeProvider';
 export type { WebProsMuiThemeProviderProps } from './providers/WebProsMuiThemeProvider';
 export { useThemeModeContext } from './providers/ThemeModeProvider';
+export { ToggleButtonGroup } from './components/inputs/ToggleButtonGroup';
+export { ToggleButton } from './components/inputs/ToggleButton';
+export { Filter } from './components/inputs/Filter';
 export * from './utils';
 export * from './tokens';
 export * from './constants';

package/dist/src/index.js

@@ -1,6 +1,9 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 export { default as WebProsMuiThemeProvider } from './providers/WebProsMuiThemeProvider';
 export { useThemeModeContext } from './providers/ThemeModeProvider';
+export { ToggleButtonGroup } from './components/inputs/ToggleButtonGroup';
+export { ToggleButton } from './components/inputs/ToggleButton';
+export { Filter } from './components/inputs/Filter';
 export * from './utils';
 export * from './tokens';
 export * from './constants';

package/dist/src/tokens/ThemeColorTokens.d.ts

@@ -15,3 +15,4 @@ export type ThemeColorTokens = {
 };
 export declare const LightTokensDefault: ThemeColorTokens;
 export declare const DarkTokensDefault: ThemeColorTokens;
+export declare const WptkTokensDefault: ThemeColorTokens;

package/dist/src/tokens/ThemeColorTokens.js

@@ -1,5 +1,5 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { DarkSchemes, DarkSchemesGenerated, DarkStateLayers, DarkStateLayersGenerated, DarkInverseSchemes, DarkInverseSchemesGenerated, DarkInverseStateLayers, DarkInverseStateLayersGenerated, DarkOnPrimarySchemes, DarkOnPrimarySchemesGenerated, DarkOnPrimaryStateLayers, DarkOnPrimaryStateLayersGenerated, LightSchemes, LightSchemesGenerated, LightStateLayers, LightStateLayersGenerated, LightInverseSchemes, LightInverseSchemesGenerated, LightInverseStateLayers, LightInverseStateLayersGenerated, LightOnPrimarySchemes, LightOnPrimarySchemesGenerated, LightOnPrimaryStateLayers, LightOnPrimaryStateLayersGenerated, } from '../tokens/colors';
+import { DarkSchemes, DarkSchemesGenerated, DarkStateLayers, DarkStateLayersGenerated, DarkInverseSchemes, DarkInverseSchemesGenerated, DarkInverseStateLayers, DarkInverseStateLayersGenerated, DarkOnPrimarySchemes, DarkOnPrimarySchemesGenerated, DarkOnPrimaryStateLayers, DarkOnPrimaryStateLayersGenerated, LightSchemes, LightSchemesGenerated, LightStateLayers, LightStateLayersGenerated, LightInverseSchemes, LightInverseSchemesGenerated, LightInverseStateLayers, LightInverseStateLayersGenerated, LightOnPrimarySchemes, LightOnPrimarySchemesGenerated, LightOnPrimaryStateLayers, LightOnPrimaryStateLayersGenerated, WptkSchemes, WptkSchemesGenerated, WptkStateLayers, WptkStateLayersGenerated, WptkInverseSchemes, WptkInverseSchemesGenerated, WptkInverseStateLayers, WptkInverseStateLayersGenerated, WptkOnPrimarySchemes, WptkOnPrimarySchemesGenerated, WptkOnPrimaryStateLayers, WptkOnPrimaryStateLayersGenerated, } from '../tokens/colors';
 // reference
 export const LightTokensDefault = {
     schemes: LightSchemes,
@@ -31,3 +31,18 @@ export const DarkTokensDefault = {
     generatedOnPrimarySchemes: DarkOnPrimarySchemesGenerated,
     generatedOnPrimaryStateLayers: DarkOnPrimaryStateLayersGenerated,
 };
+// WPTK theme
+export const WptkTokensDefault = {
+    schemes: WptkSchemes,
+    stateLayers: WptkStateLayers,
+    inverseSchemes: WptkInverseSchemes,
+    inverseStateLayers: WptkInverseStateLayers,
+    onPrimarySchemes: WptkOnPrimarySchemes,
+    onPrimaryStateLayers: WptkOnPrimaryStateLayers,
+    generatedSchemes: WptkSchemesGenerated,
+    generatedStateLayers: WptkStateLayersGenerated,
+    generatedInverseSchemes: WptkInverseSchemesGenerated,
+    generatedInverseStateLayers: WptkInverseStateLayersGenerated,
+    generatedOnPrimarySchemes: WptkOnPrimarySchemesGenerated,
+    generatedOnPrimaryStateLayers: WptkOnPrimaryStateLayersGenerated,
+};

package/dist/src/tokens/ThemeMode.d.ts

@@ -1 +1 @@
-export type ThemeMode = 'light' | 'dark';
+export type ThemeMode = 'light' | 'dark' | 'wptk';

package/dist/src/tokens/ThemeScheme.d.ts

@@ -2,8 +2,10 @@ import { ThemeColorTokens } from './ThemeColorTokens';
 export type ThemeScheme = {
     light: ThemeColorTokens;
     dark: ThemeColorTokens;
+    wptk: ThemeColorTokens;
 };
 export declare const ThemeSchemeDefault: {
     light: ThemeColorTokens;
     dark: ThemeColorTokens;
+    wptk: ThemeColorTokens;
 };

package/dist/src/tokens/ThemeScheme.js

@@ -1,6 +1,7 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { DarkTokensDefault, LightTokensDefault } from './ThemeColorTokens';
+import { DarkTokensDefault, LightTokensDefault, WptkTokensDefault, } from './ThemeColorTokens';
 export const ThemeSchemeDefault = {
     light: LightTokensDefault,
     dark: DarkTokensDefault,
+    wptk: WptkTokensDefault,
 };