npm - @webpros/mui-theme - Versions diffs - 0.1.2 → 0.1.4 - Mend

@webpros/mui-theme 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (323) hide show

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

@@ -0,0 +1,503 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { chipClasses, alpha, } from '@mui/material';
+import { ChipDeleteIcon } from '../../../components/data-display/Chip/components/ChipDeleteIcon';
+import { getStateLayerColorByOpacityKey, getStateLayerColor, OnStateLayer, StateLayer, getOnStateLayerColor, } from '../../../utils/getStateLayerColor';
+export const getChip = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiChip: {
+            defaultProps: {
+                deleteIcon: ChipDeleteIcon,
+                color: 'primary',
+            },
+            styleOverrides: {
+                root: {
+                    textTransform: 'none',
+                    fontWeight: 500,
+                },
+            },
+            variants: [
+                {
+                    props: { size: 'small' },
+                    style: {
+                        borderRadius: '3px',
+                    },
+                },
+                {
+                    props: { size: 'medium' },
+                    style: {
+                        fontSize: '0.875rem',
+                        fontWeight: 500,
+                        lineHeight: '1.25rem',
+                        letterSpacing: '0.006rem',
+                        borderRadius: 10,
+                    },
+                },
+                {
+                    // color="default"
+                    props: { variant: 'filled' },
+                    style: {
+                        background: palette.undefinedContainer.main,
+                        color: palette.onUndefinedContainer.main,
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onUndefinedContainer.main,
+                        },
+                        '&:hover, &:focus': {
+                            background: palette.onSurfaceVariant.main,
+                            color: palette.onPrimary.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onPrimary.main,
+                            },
+                        },
+                        '&.Mui-disabled': {
+                            background: alpha(palette.onSurfaceVariant.main, 0.12),
+                            color: alpha(palette.onSurface.main, 0.38),
+                            opacity: 1,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: alpha(palette.onSurface.main, 0.38),
+                            },
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', selected: true },
+                    style: {
+                        background: palette.onSurfaceVariant.main,
+                        color: palette.onPrimary.main,
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onPrimary.main,
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', clickable: false },
+                    style: {
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            cursor: 'default',
+                        },
+                        '&:hover, &:focus': {
+                            cursor: 'default',
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                cursor: 'default',
+                            },
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'primary' },
+                    style: {
+                        background: palette.secondaryContainer.main,
+                        color: palette.onSecondaryContainer.main,
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onSecondaryContainer.main,
+                        },
+                        '&:hover, &:focus': {
+                            background: palette.primary.main,
+                            color: palette.onPrimary.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onPrimary.main,
+                            },
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'primary', selected: true },
+                    style: {
+                        background: palette.primary.main,
+                        color: palette.onPrimary.main,
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onPrimary.main,
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'error' },
+                    style: {
+                        // Enabled state
+                        background: palette.errorContainer.main,
+                        color: palette.onErrorContainer.main,
+                        // Trailing Icon: On Surface Variant
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onSurfaceVariant.main,
+                        },
+                        // Start Icon: On Error Container
+                        [`& > .${chipClasses.icon}`]: {
+                            color: palette.onErrorContainer.main,
+                        },
+                        // Hovered state
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.errorContainer.main, palette.onErrorContainer.main),
+                            color: palette.onErrorContainer.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: palette.onErrorContainer.main,
+                            },
+                        },
+                        // Focused state
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.errorContainer.main, palette.onErrorContainer.main),
+                            color: palette.onErrorContainer.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: palette.onErrorContainer.main,
+                            },
+                        },
+                        // Pressed state
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.errorContainer.main, palette.onErrorContainer.main),
+                            color: palette.onErrorContainer.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: palette.onErrorContainer.main,
+                            },
+                        },
+                        // Disabled state
+                        '&.Mui-disabled': {
+                            background: getStateLayerColor(StateLayer.Disabled, palette.onSurfaceVariant.main),
+                            color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            },
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'error', selected: true },
+                    style: {
+                        background: getStateLayerColor(StateLayer.Selected, palette.errorContainer.main, palette.onErrorContainer.main),
+                        color: palette.onErrorContainer.main,
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onSurfaceVariant.main,
+                        },
+                        [`& > .${chipClasses.icon}`]: {
+                            color: palette.onErrorContainer.main,
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'warning' },
+                    style: {
+                        // Enabled state
+                        background: palette.warningContainer.main,
+                        color: palette.onWarningContainer.main,
+                        // Trailing Icon: On Surface Variant
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onSurfaceVariant.main,
+                        },
+                        // Start Icon: On Warning Container
+                        [`& > .${chipClasses.icon}`]: {
+                            color: palette.onWarningContainer.main,
+                        },
+                        // Hovered state
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.warningContainer.main, palette.onWarningContainer.main),
+                            color: palette.onWarningContainer.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: palette.onWarningContainer.main,
+                            },
+                        },
+                        // Focused state
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.warningContainer.main, palette.onWarningContainer.main),
+                            color: palette.onWarningContainer.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: palette.onWarningContainer.main,
+                            },
+                        },
+                        // Pressed state
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.warningContainer.main, palette.onWarningContainer.main),
+                            color: palette.onWarningContainer.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: palette.onWarningContainer.main,
+                            },
+                        },
+                        // Disabled state
+                        '&.Mui-disabled': {
+                            background: getStateLayerColor(StateLayer.Disabled, palette.onSurfaceVariant.main),
+                            color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            },
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'warning', selected: true },
+                    style: {
+                        background: getStateLayerColor(StateLayer.Selected, palette.warningContainer.main, palette.onWarningContainer.main),
+                        color: palette.onWarningContainer.main,
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onSurfaceVariant.main,
+                        },
+                        [`& > .${chipClasses.icon}`]: {
+                            color: palette.onWarningContainer.main,
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'info' },
+                    style: {
+                        // Enabled state
+                        background: palette.infoContainer.main,
+                        color: palette.onInfoContainer.main,
+                        // Trailing Icon: On Surface Variant
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onSurfaceVariant.main,
+                        },
+                        // Start Icon: On Info Container
+                        [`& > .${chipClasses.icon}`]: {
+                            color: palette.onInfoContainer.main,
+                        },
+                        // Hovered state
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.infoContainer.main, palette.onInfoContainer.main),
+                            color: palette.onInfoContainer.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: palette.onInfoContainer.main,
+                            },
+                        },
+                        // Focused state
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.infoContainer.main, palette.onInfoContainer.main),
+                            color: palette.onInfoContainer.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: palette.onInfoContainer.main,
+                            },
+                        },
+                        // Pressed state
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.infoContainer.main, palette.onInfoContainer.main),
+                            color: palette.onInfoContainer.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: palette.onInfoContainer.main,
+                            },
+                        },
+                        // Disabled state
+                        '&.Mui-disabled': {
+                            background: getStateLayerColor(StateLayer.Disabled, palette.onSurfaceVariant.main),
+                            color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            },
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'info', selected: true },
+                    style: {
+                        background: getStateLayerColor(StateLayer.Selected, palette.infoContainer.main, palette.onInfoContainer.main),
+                        color: palette.onInfoContainer.main,
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onSurfaceVariant.main,
+                        },
+                        [`& > .${chipClasses.icon}`]: {
+                            color: palette.onInfoContainer.main,
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'success' },
+                    style: {
+                        background: palette.successContainer.main,
+                        color: palette.onSuccessContainer.main,
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onSurfaceVariant.main,
+                        },
+                        [`& > .${chipClasses.icon}`]: {
+                            color: palette.onSuccessContainer.main,
+                        },
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.successContainer.main, palette.onSuccessContainer.main),
+                            color: palette.onSuccessContainer.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: palette.onSuccessContainer.main,
+                            },
+                        },
+                        // Focused state
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.successContainer.main, palette.onSuccessContainer.main),
+                            color: palette.onSuccessContainer.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: palette.onSuccessContainer.main,
+                            },
+                        },
+                        // Pressed state
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.successContainer.main, palette.onSuccessContainer.main),
+                            color: palette.onSuccessContainer.main,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: palette.onSuccessContainer.main,
+                            },
+                        },
+                        // Disabled state
+                        '&.Mui-disabled': {
+                            background: getStateLayerColor(StateLayer.Disabled, palette.onSurfaceVariant.main),
+                            color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            },
+                            [`& > .${chipClasses.icon}`]: {
+                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            },
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'filled', color: 'success', selected: true },
+                    style: {
+                        background: getStateLayerColor(StateLayer.Selected, palette.successContainer.main, palette.onSurfaceVariant.main),
+                        color: palette.onSuccessContainer.main,
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onSurfaceVariant.main,
+                        },
+                        [`& > .${chipClasses.icon}`]: {
+                            color: palette.onSuccessContainer.main,
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'outlined' },
+                    style: {
+                        color: palette.onSurfaceVariant.main,
+                        borderColor: getStateLayerColorByOpacityKey(0.48, palette.outline.main),
+                        [`& > .${chipClasses.icon}`]: {
+                            color: palette.primary.main,
+                        },
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onSurfaceVariant.main,
+                        },
+                        '&:hover': {
+                            color: palette.onSurfaceVariant.main,
+                            borderColor: getStateLayerColorByOpacityKey(0.48, palette.outline.main),
+                            background: getStateLayerColor(StateLayer.Disabled, palette.surface.main, palette.onSurfaceVariant.main),
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                        },
+                        '&:focus': {
+                            color: palette.onSurfaceVariant.main,
+                            borderColor: getStateLayerColorByOpacityKey(0.48, palette.outline.main),
+                            background: getStateLayerColor(StateLayer.Focus, palette.surface.main, palette.onSurfaceVariant.main),
+                        },
+                        '&:active': {
+                            color: palette.onSurfaceVariant.main,
+                            borderColor: getStateLayerColorByOpacityKey(0.48, palette.outline.main),
+                            background: getStateLayerColor(StateLayer.Active, palette.surface.main, palette.onSurfaceVariant.main),
+                            boxShadow: theme.shadows[0],
+                        },
+                        '&.Mui-disabled': {
+                            color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            [`& > .${chipClasses.icon}`]: {
+                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            },
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: getOnStateLayerColor(OnStateLayer.Disabled, palette.onSurface.main),
+                            },
+                            borderColor: getStateLayerColorByOpacityKey(0.12, palette.outline.main),
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'outlined', selected: true },
+                    style: {
+                        color: palette.onSecondaryContainer.main,
+                        background: palette.secondaryContainer.main,
+                        border: 'none',
+                        [`& > .${chipClasses.icon}`]: {
+                            color: palette.onSecondaryContainer.main,
+                        },
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onSecondaryContainer.main,
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'ghost' },
+                    style: {
+                        color: palette.onSurfaceVariant.main,
+                        borderColor: 'transparent',
+                        background: 'transparent',
+                        [`& > .${chipClasses.deleteIcon}`]: {
+                            color: palette.onSurfaceVariant.main,
+                        },
+                        '&:hover': {
+                            background: alpha(palette.onSurfaceVariant.main, 0.04),
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: palette.onSurfaceVariant.main,
+                            },
+                        },
+                        '&:focus': {
+                            background: alpha(palette.onSurfaceVariant.main, 0.12),
+                            borderColor: palette.onSurface.main,
+                        },
+                        '&:active': {
+                            background: alpha(palette.onSurfaceVariant.main, 0.12),
+                            boxShadow: theme.shadows[0],
+                        },
+                        '&.Mui-disabled': {
+                            background: 'transparent',
+                            color: alpha(palette.onSurface.main, 0.38),
+                            opacity: 1,
+                            [`& > .${chipClasses.deleteIcon}`]: {
+                                color: alpha(palette.onSurface.main, 0.38),
+                            },
+                        },
+                    },
+                },
+                {
+                    props: { variant: 'ghost', clickable: false },
+                    style: {
+                        color: theme.palette.onSurfaceVariant.main,
+                        background: 'transparent',
+                        boxShadow: theme.shadows[0],
+                        borderColor: 'transparent',
+                    },
+                },
+            ],
+        },
+    };
+};
+export default {};

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

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

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

@@ -0,0 +1,4 @@
+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/data-display/Chip/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './Chip.theme';

package/dist/src/components/data-display/Chip/index.js ADDED Viewed

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

package/dist/src/components/data-display/DataGrid/DataGrid.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { DataGrid as MuiDataGrid, DataGridProps } from '@mui/x-data-grid';
+import './DataGrid.theme';
+export type DataGridComponentType = typeof MuiDataGrid;
+export declare const DataGrid: (props: DataGridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/data-display/DataGrid/DataGrid.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { DataGrid as MuiDataGrid } from '@mui/x-data-grid';
+import './DataGrid.theme';
+// Need to wrap in component, as TS throws export error
+// Exported variable 'DataGrid' has or is using name 'DataGridComponent'
+export const DataGrid = (props) => _jsx(MuiDataGrid, Object.assign({}, props));

package/dist/src/components/data-display/DataGrid/DataGrid.theme.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material';
+import '@mui/x-data-grid/themeAugmentation';
+interface M3DataGrid {
+    MuiDataGrid: {
+        defaultProps?: ComponentsProps['MuiDataGrid'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiDataGrid'];
+        variants?: ComponentsVariants['MuiDataGrid'];
+    };
+}
+export declare const getDataGrid: (theme: Theme) => M3DataGrid;
+export {};

package/dist/src/components/data-display/DataGrid/DataGrid.theme.js ADDED Viewed

@@ -0,0 +1,21 @@
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import '@mui/x-data-grid/themeAugmentation';
+export const getDataGrid = (theme) => {
+    const { palette } = theme;
+    return {
+        MuiDataGrid: {
+            styleOverrides: {
+                cell: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignContent: 'center',
+                    alignItems: 'center',
+                    gap: 2,
+                },
+                columnHeaders: {
+                    color: palette.supportive.main,
+                },
+            },
+        },
+    };
+};

package/dist/src/components/data-display/DataGrid/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './DataGrid.theme';

package/dist/src/components/data-display/DataGrid/index.js ADDED Viewed

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

package/dist/src/components/data-display/DataGrid/mock-data.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { GridColDef } from '@mui/x-data-grid';
+type Data = {
+    id: number;
+    pid: number;
+    parendProcessId: number;
+    user: string;
+    program: string;
+    cpu: number;
+    mem: number;
+    bytesRead: number;
+    bytesWrite: number;
+    ioRead: number;
+    ioWrite: number;
+    openFiles: string;
+};
+export declare const mockColumns: readonly GridColDef[];
+export declare const mockRows: Data[];
+export {};