@webpros/mui-theme 0.3.11 → 0.4.0

package/dist/src/tokens/colors/index.d.ts

@@ -7,3 +7,4 @@ export type { OnPrimarySchemes, OnPrimarySchemesKey, OnPrimarySchemesGenerated,
 export type { OnPrimaryStateLayers, OnPrimaryStateLayersKey, OnPrimaryStateLayersGenerated, } from './onPrimaryStateLayers';
 export { LightSchemes, LightStateLayers, LightInverseSchemes, LightInverseStateLayers, LightOnPrimarySchemes, LightOnPrimaryStateLayers, LightSchemesGenerated, LightStateLayersGenerated, LightInverseSchemesGenerated, LightInverseStateLayersGenerated, LightOnPrimarySchemesGenerated, LightOnPrimaryStateLayersGenerated, } from './Light';
 export { DarkSchemes, DarkStateLayers, DarkInverseSchemes, DarkInverseStateLayers, DarkOnPrimarySchemes, DarkOnPrimaryStateLayers, DarkSchemesGenerated, DarkStateLayersGenerated, DarkInverseSchemesGenerated, DarkInverseStateLayersGenerated, DarkOnPrimarySchemesGenerated, DarkOnPrimaryStateLayersGenerated, } from './Dark';
+export { WptkSchemes, WptkStateLayers, WptkInverseSchemes, WptkInverseStateLayers, WptkOnPrimarySchemes, WptkOnPrimaryStateLayers, WptkSchemesGenerated, WptkStateLayersGenerated, WptkInverseSchemesGenerated, WptkInverseStateLayersGenerated, WptkOnPrimarySchemesGenerated, WptkOnPrimaryStateLayersGenerated, } from './Wptk';

package/dist/src/tokens/colors/index.js

@@ -2,3 +2,4 @@
 // Auto-generated file - do not edit manually
 export { LightSchemes, LightStateLayers, LightInverseSchemes, LightInverseStateLayers, LightOnPrimarySchemes, LightOnPrimaryStateLayers, LightSchemesGenerated, LightStateLayersGenerated, LightInverseSchemesGenerated, LightInverseStateLayersGenerated, LightOnPrimarySchemesGenerated, LightOnPrimaryStateLayersGenerated, } from './Light';
 export { DarkSchemes, DarkStateLayers, DarkInverseSchemes, DarkInverseStateLayers, DarkOnPrimarySchemes, DarkOnPrimaryStateLayers, DarkSchemesGenerated, DarkStateLayersGenerated, DarkInverseSchemesGenerated, DarkInverseStateLayersGenerated, DarkOnPrimarySchemesGenerated, DarkOnPrimaryStateLayersGenerated, } from './Dark';
+export { WptkSchemes, WptkStateLayers, WptkInverseSchemes, WptkInverseStateLayers, WptkOnPrimarySchemes, WptkOnPrimaryStateLayers, WptkSchemesGenerated, WptkStateLayersGenerated, WptkInverseSchemesGenerated, WptkInverseStateLayersGenerated, WptkOnPrimarySchemesGenerated, WptkOnPrimaryStateLayersGenerated, } from './Wptk';

package/dist/src/utils/createIcon.d.ts

@@ -1,12 +1,23 @@
-import { Icon, IconWeight, IconProps } from '@phosphor-icons/react';
+import { IconProps } from '@phosphor-icons/react';
 import { SxProps, Theme } from '@mui/material/styles';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 type MuiColorToken = 'inherit' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success' | 'action' | 'disabled';
 export type CustomIconProps = Omit<IconProps, 'color'> & {
     color?: string | MuiColorToken;
     sx?: SxProps<Theme>;
+    size?: number | string;
 };
-export type CustomIcon = Icon;
-type WeightPaths = Partial<Record<IconWeight, string>>;
-export declare function createStaticIcon(displayName: string, svg: string): CustomIcon;
-export declare function createIcon(displayName: string, svgOrPath: string | WeightPaths): CustomIcon;
+export type CustomIcon = ForwardRefExoticComponent<CustomIconProps & RefAttributes<SVGSVGElement>>;
+/**
+ * IconWrapper component for pre-compiled icons.
+ * This is used by generated icon components to provide consistent styling.
+ */
+interface IconWrapperProps {
+    color?: string | MuiColorToken;
+    sx?: SxProps<Theme>;
+    size?: number | string;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const IconWrapper: ({ color, sx, size, children, className, }: IconWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/utils/createIcon.js

@@ -1,19 +1,7 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { forwardRef } from 'react';
-import { SSRBase } from '@phosphor-icons/react/dist/ssr';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-function extractPath(svg) {
-    const cleanedSvg = svg.replace(/fill="[^"]*"/g, '');
-    const match = cleanedSvg.match(/d="([^"]+)"/);
-    if (!(match === null || match === void 0 ? void 0 : match[1])) {
-        throw new Error('createIcon: No path found in SVG. Make sure SVG contains a <path d="..."> element.');
-    }
-    return match[1];
-}
-const StyledIconWrapper = styled('span', {
+const StyledIconWrapper = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'iconColor',
 })(({ theme, iconColor }) => {
     const { colors } = theme;
@@ -37,56 +25,6 @@ const StyledIconWrapper = styled('span', {
             color: colorMapping[iconColor],
         };
     }
-    return { display: 'inline-flex', color: iconColor };
+    return { display: 'inline-flex', color: iconColor, height: '100%', width: '100%' };
 });
-function extractPathsData(svg) {
-    var _a, _b;
-    const pathRegex = /<path[^>]*d="([^"]+)"[^>]*\/?>/g;
-    const paths = [];
-    let match;
-    while ((match = pathRegex.exec(svg)) !== null) {
-        const fullMatch = match[0];
-        const d = (_a = match[1]) !== null && _a !== void 0 ? _a : '';
-        const fillMatch = fullMatch.match(/fill="([^"]*)"/);
-        const fill = (_b = fillMatch === null || fillMatch === void 0 ? void 0 : fillMatch[1]) !== null && _b !== void 0 ? _b : 'currentColor';
-        paths.push({ d, fill });
-    }
-    return paths;
-}
-export function createStaticIcon(displayName, svg) {
-    const pathsData = extractPathsData(svg);
-    const IconComponent = forwardRef((props, ref) => {
-        const _a = props, { sx, size = 24, variant = 'outline', color } = _a, rest = __rest(_a, ["sx", "size", "variant", "color"]);
-        const paths = pathsData.map((p, i) => {
-            if (variant === 'outline') {
-                if (i === 0) {
-                    return (_jsx("path", { d: p.d, fill: "transparent", stroke: "currentColor", strokeWidth: 8 }, i));
-                }
-                return _jsx("path", { d: p.d, fill: "currentColor" }, i);
-            }
-            return _jsx("path", { d: p.d, fill: p.fill }, i);
-        });
-        return (_jsx(Box, { component: "span", ref: ref, sx: Object.assign({ display: 'inline-flex', verticalAlign: 'middle', width: size, height: size }, sx), children: _jsx(StyledIconWrapper, { iconColor: variant === 'outline' ? color : undefined, children: _jsx("svg", Object.assign({ viewBox: "0 0 256 256", width: "100%", height: "100%" }, rest, { children: paths })) }) }));
-    });
-    IconComponent.displayName = displayName;
-    return IconComponent;
-}
-export function createIcon(displayName, svgOrPath) {
-    const weights = new Map();
-    if (typeof svgOrPath === 'string') {
-        const pathData = svgOrPath.includes('<svg') ? extractPath(svgOrPath) : svgOrPath;
-        weights.set('regular', _jsx("path", { d: pathData }));
-    }
-    else {
-        Object.entries(svgOrPath).forEach(([weight, pathOrSvg]) => {
-            const pathData = pathOrSvg.includes('<svg') ? extractPath(pathOrSvg) : pathOrSvg;
-            weights.set(weight, _jsx("path", { d: pathData }));
-        });
-    }
-    const IconComponent = forwardRef((props, ref) => {
-        const _a = props, { color, sx } = _a, rest = __rest(_a, ["color", "sx"]);
-        return (_jsx(Box, { component: "span", sx: Object.assign({ display: 'inline-flex', verticalAlign: 'middle' }, sx), children: _jsx(StyledIconWrapper, { iconColor: color, children: _jsx(SSRBase, Object.assign({ ref: ref }, rest, { color: "currentColor", weights: weights })) }) }));
-    });
-    IconComponent.displayName = displayName;
-    return IconComponent;
-}
+export const IconWrapper = ({ color, sx, size = '100%', children, className, }) => (_jsx(Box, { component: "span", className: className, sx: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', width: size, height: size }, sx), children: _jsx(StyledIconWrapper, { iconColor: color, children: children }) }));

package/dist/src/utils/getMUIComponents.js

@@ -1,4 +1,4 @@
-import { getAccordion, getAccordionSummary, getAccordionDetails, getAlert, getAppBar, getBackdrop, getBadge, getBreadcrumbs, getButton, getCheckbox, getChip, getCssBaseline, getDivider, getDrawer, getFab, getIconButton, getLink, getList, getListItem, getListItemButton, getListItemIcon, getListItemAvatar, getListSubheader, getMenu, getMenuItem, getPaginationItem, getPaper, getPopover, getSwitch, getTab, getTabs, getTextField, getToggleButton, getToggleButtonGroup, getTooltip, getTypography, getAvatar, getSelect, getInputLabel, getTimePicker, getSnackbar, getCircularProgress, getLinearProgress, getDialog, getTable, getAutocomplete, getInputBase, getSkeleton, getFormLabel, getOutlinedInput, getFormHelperText, getRadio, } from '../components';
+import { getAccordion, getAccordionSummary, getAccordionDetails, getAlert, getAppBar, getBackdrop, getBadge, getBreadcrumbs, getButton, getCheckbox, getChip, getCssBaseline, getDivider, getDrawer, getFab, getIconButton, getLink, getList, getListItem, getListItemButton, getListItemIcon, getListItemAvatar, getListSubheader, getMenu, getMenuItem, getPaginationItem, getPaper, getPopover, getSwitch, getTab, getTabs, getTextField, getTooltip, getTypography, getAvatar, getSelect, getInputLabel, getTimePicker, getSnackbar, getCircularProgress, getLinearProgress, getDialog, getTable, getAutocomplete, getInputBase, getSkeleton, getFormLabel, getOutlinedInput, getFormHelperText, getRadio, } from '../components';
 export const getMUIComponents = (theme, _mode) => ({
-    components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getCssBaseline(theme)), getBackdrop(theme)), getAccordion(theme)), getAccordionSummary(theme)), getAccordionDetails(theme)), getAlert(theme)), getAppBar(theme)), getAvatar(theme)), getBadge(theme)), getBreadcrumbs(theme)), getSelect()), getTimePicker(theme)), getInputLabel()), getButton(theme)), getCheckbox(theme)), getChip(theme)), getDivider(theme)), getDrawer(theme)), getFab(theme)), getIconButton(theme)), getLink(theme)), getList(theme)), getListItem(theme)), getListItemButton(theme)), getListItemIcon(theme)), getListItemAvatar(theme)), getListSubheader(theme)), getMenu(theme)), getMenuItem(theme)), getPaginationItem(theme)), getPaper(theme)), getPopover(theme)), getSwitch(theme)), getTab(theme)), getTabs(theme)), getTextField(theme)), getToggleButton(theme)), getToggleButtonGroup(theme)), getTooltip(theme)), getTypography(theme)), getSnackbar(theme)), getCircularProgress(theme)), getLinearProgress(theme)), getDialog(theme)), getTable(theme)), getAutocomplete()), getInputBase()), getSkeleton(theme)), getFormLabel()), getOutlinedInput()), getFormHelperText()), getRadio(theme)),
+    components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, getCssBaseline(theme)), getBackdrop(theme)), getAccordion(theme)), getAccordionSummary(theme)), getAccordionDetails(theme)), getAlert(theme)), getAppBar(theme)), getAvatar(theme)), getBadge(theme)), getBreadcrumbs(theme)), getSelect()), getTimePicker(theme)), getInputLabel()), getButton(theme)), getCheckbox(theme)), getChip(theme)), getDivider(theme)), getDrawer(theme)), getFab(theme)), getIconButton(theme)), getLink(theme)), getList(theme)), getListItem(theme)), getListItemButton(theme)), getListItemIcon(theme)), getListItemAvatar(theme)), getListSubheader(theme)), getMenu(theme)), getMenuItem(theme)), getPaginationItem(theme)), getPaper(theme)), getPopover(theme)), getSwitch(theme)), getTab(theme)), getTabs(theme)), getTextField(theme)), getTooltip(theme)), getTypography(theme)), getSnackbar(theme)), getCircularProgress(theme)), getLinearProgress(theme)), getDialog(theme)), getTable(theme)), getAutocomplete()), getInputBase()), getSkeleton(theme)), getFormLabel()), getOutlinedInput()), getFormHelperText()), getRadio(theme)),
 });

package/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",
@@ -123,4 +123,4 @@
   "resolutions": {
     "react-is": "^18.3.1"
   }
-}
+}

package/dist/src/components/data-display/Chip/components/ChipDeleteIcon.d.ts

@@ -1 +0,0 @@
-export declare const ChipDeleteIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { XIcon } from '@phosphor-icons/react';
-export const ChipDeleteIcon = _jsx(XIcon, { size: 18 });

package/dist/src/components/inputs/Autocomplete/components/AutocompleteCaretDownIcon.d.ts

@@ -1 +0,0 @@
-export declare const AutocompleteCaretDownIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { CaretDownIcon } from '@phosphor-icons/react';
-export const AutocompleteCaretDownIcon = _jsx(CaretDownIcon, {});

package/dist/src/components/inputs/Autocomplete/components/AutocompleteXIcon.d.ts

@@ -1 +0,0 @@
-export declare const AutocompleteXIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// Copyright 2025 WebPros International GmbH. All rights reserved.
-import { XIcon } from '@phosphor-icons/react';
-export const AutocompleteXIcon = _jsx(XIcon, {});

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

@@ -1,11 +0,0 @@
-import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
-interface M3ToggleButton {
-    MuiToggleButton: {
-        defaultProps?: ComponentsProps['MuiToggleButton'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiToggleButton'];
-        variants?: ComponentsVariants['MuiToggleButton'];
-    };
-}
-export declare const getToggleButton: (_theme: Theme) => M3ToggleButton;
-declare const _default: {};
-export default _default;

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

@@ -1,26 +0,0 @@
-export const getToggleButton = (_theme) => {
-    // const { palette } = theme;
-    return {
-        MuiToggleButton: {
-            styleOverrides: {
-                root: {
-                    borderRadius: '50px',
-                    textTransform: 'none',
-                    // color: palette.onSurface.main,
-                    // '&.Mui-selected': {
-                    //     color: palette.onSecondaryContainer.main,
-                    //     backgroundColor: palette.secondaryContainer.main,
-                    // },
-                    // '&.MuiToggleButton-primary': {
-                    //     borderColor: 'transparent',
-                    // },
-                    // '&.MuiToggleButton-primary.Mui-selected': {
-                    //     color: palette.onPrimary.main,
-                    //     backgroundColor: palette.primary.main,
-                    // },
-                },
-            },
-        },
-    };
-};
-export default {};

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

@@ -1,11 +0,0 @@
-import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
-interface M3ToggleButtonGroup {
-    MuiToggleButtonGroup: {
-        defaultProps?: ComponentsProps['MuiToggleButtonGroup'];
-        styleOverrides?: ComponentsOverrides<Theme>['MuiToggleButtonGroup'];
-        variants?: ComponentsVariants['MuiToggleButtonGroup'];
-    };
-}
-export declare const getToggleButtonGroup: (theme: Theme) => M3ToggleButtonGroup;
-declare const _default: {};
-export default _default;

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

@@ -1,18 +0,0 @@
-export const getToggleButtonGroup = (theme) => {
-    const { colors } = theme;
-    return {
-        MuiToggleButtonGroup: {
-            styleOverrides: {
-                grouped: {
-                    borderRadius: '50px',
-                    borderColor: colors.schemes.surfaces.outline,
-                    '&:not(:first-of-type)': {
-                        marginLeft: 0,
-                        borderLeft: 0,
-                    },
-                },
-            },
-        },
-    };
-};
-export default {};