@nestbotics/nct_frontend_common_components/dist/context/user_data/StyleProvider.esm.js

A collection of reusable React components with theme management and styling utilities

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { createContext, useContext } from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { GlobalStyles } from '@mui/material';

// Define typography variants - only titleM
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var typographyVariants = {
  titleM: {
    fontSize: '16px',
    fontWeight: 600,
    lineHeight: '1.3',
    letterSpacing: '0.25px'
  }
};

// Create context for style variants
var StyleContext = /*#__PURE__*/createContext();

// Global CSS styles for variants - simplified single class per element
var globalStyles = {
  // Typography variant - single titleM class only
  '.titleM': typographyVariants.titleM,
  // Input variant
  'input.titleM': _objectSpread(_objectSpread({}, typographyVariants.titleM), {}, {
    fontFamily: 'inherit'
  }),
  // Button variant
  'button.titleM': _objectSpread(_objectSpread({}, typographyVariants.titleM), {}, {
    fontFamily: 'inherit'
  }),
  // HTML element variants
  'div.titleM': typographyVariants.titleM,
  'span.titleM': typographyVariants.titleM,
  'p.titleM': typographyVariants.titleM,
  'h1.titleM': typographyVariants.titleM,
  'h2.titleM': typographyVariants.titleM,
  'h3.titleM': typographyVariants.titleM,
  'h4.titleM': typographyVariants.titleM,
  'h5.titleM': typographyVariants.titleM,
  'h6.titleM': typographyVariants.titleM,
  'label.titleM': typographyVariants.titleM,
  'textarea.titleM': _objectSpread(_objectSpread({}, typographyVariants.titleM), {}, {
    fontFamily: 'inherit'
  }),
  // DataGrid variant - single class only
  '.data-grid-titleM': {
    '& .MuiDataGrid-root': {
      fontSize: '18px',
      fontWeight: 600,
      border: '1px solid rgba(224, 224, 224, 1)'
    },
    '& .MuiDataGrid-cell': {
      fontSize: '1rem',
      fontWeight: 400,
      borderRight: '1px solid rgba(224, 224, 224, 1)',
      padding: '10px 14px'
    },
    '& .MuiDataGrid-columnHeader': {
      fontSize: '1.19rem',
      fontWeight: 'bold',
      borderRight: '1px solid rgba(224, 224, 224, 1)',
      height: '95px !important',
      backgroundColor: 'rgba(0, 0, 0, 0.04)'
    },
    '& .MuiDataGrid-columnHeaders': {
      fontSize: '1.19rem',
      fontWeight: 'bold',
      minHeight: '70px !important',
      borderBottom: '2px solid rgba(224, 224, 224, 1)'
    },
    '& .MuiDataGrid-columnHeaderTitle': {
      fontWeight: 'bold',
      fontSize: '1.19rem'
    },
    '& .MuiTablePagination-root': {
      fontSize: '1.18rem'
    },
    '& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows': {
      fontSize: '1.06rem'
    },
    '& .MuiDataGrid-row:hover': {
      backgroundColor: 'rgba(0, 0, 0, 0.04)'
    },
    '& .MuiDataGrid-footer': {
      borderTop: '1px solid rgba(224, 224, 224, 1)'
    }
  },
  // Button styles - single class per style
  '.btn-primary': {
    backgroundColor: '#Ffc71a !important',
    color: '#452970 !important',
    fontWeight: '800 !important',
    padding: '0px 14px !important',
    height: '38px !important',
    border: '1px solid #452970 !important',
    fontSize: '1.12rem !important',
    textTransform: 'none !important',
    '&:hover': {
      backgroundColor: '#ffd600 !important',
      color: '#452970 !important'
    }
  },
  '.btn-secondary': {
    backgroundColor: '#f0f0f0 !important',
    color: '#592d87 !important',
    border: '1px solid #592d87 !important',
    fontWeight: '600 !important',
    padding: '8px 20px !important',
    textTransform: 'none !important',
    '&:hover': {
      backgroundColor: '#e5e5e5 !important',
      boxShadow: '0px 2px 5px rgba(0,0,0,0.15) !important'
    }
  },
  '.btn-tertiary': {
    backgroundColor: 'transparent !important',
    color: '#cf3a23 !important',
    fontWeight: '800 !important',
    padding: '0px 14px !important',
    height: '38px !important',
    border: '1px solid #cf3a23 !important',
    fontSize: '1.12rem !important',
    textTransform: 'none !important',
    '&:hover': {
      backgroundColor: '#E5B39B !important',
      color: '#cf3a23 !important'
    }
  },
  // Icon-only button styles - single class per style
  '.btn-icon-save': {
    backgroundColor: '#28a745 !important',
    color: 'white !important',
    border: '1px solid #28a745 !important',
    minWidth: '40px !important',
    height: '40px !important',
    padding: '8px !important',
    borderRadius: '6px !important',
    '&:hover': {
      backgroundColor: '#218838 !important',
      boxShadow: '0px 2px 8px rgba(40, 167, 69, 0.3) !important'
    }
  },
  '.btn-icon-cancel': {
    backgroundColor: '#6c757d !important',
    color: 'white !important',
    border: '1px solid #6c757d !important',
    minWidth: '40px !important',
    height: '40px !important',
    padding: '8px !important',
    borderRadius: '6px !important',
    '&:hover': {
      backgroundColor: '#5a6268 !important',
      boxShadow: '0px 2px 8px rgba(108, 117, 125, 0.3) !important'
    }
  },
  '.btn-icon-delete': {
    backgroundColor: '#dc3545 !important',
    color: 'white !important',
    border: '1px solid #dc3545 !important',
    minWidth: '40px !important',
    height: '40px !important',
    padding: '8px !important',
    borderRadius: '6px !important',
    '&:hover': {
      backgroundColor: '#c82333 !important',
      boxShadow: '0px 2px 8px rgba(220, 53, 69, 0.3) !important'
    }
  },
  // Default DataGrid styles - applies to all DataGrids
  '.MuiDataGrid-root': {
    border: '1px solid rgba(224, 224, 224, 1)',
    '& .MuiDataGrid-cell': {
      borderRight: '1px solid rgba(224, 224, 224, 1)'
    },
    '& .MuiDataGrid-columnHeader': {
      borderRight: '1px solid rgba(224, 224, 224, 1)',
      backgroundColor: 'rgba(0, 0, 0, 0.04)'
    },
    '& .MuiDataGrid-columnHeaders': {
      borderBottom: '2px solid rgba(224, 224, 224, 1)'
    },
    '& .MuiDataGrid-row:hover': {
      backgroundColor: 'rgba(0, 0, 0, 0.04)'
    },
    '& .MuiDataGrid-footer': {
      borderTop: '1px solid rgba(224, 224, 224, 1)'
    }
  }
};

// Extended Material-UI theme with custom variants
var createStyleTheme = function createStyleTheme() {
  var _baseTheme$components, _baseTheme$components2, _baseTheme$components3, _baseTheme$components4, _baseTheme$components5, _baseTheme$components6, _baseTheme$components7, _baseTheme$components8, _baseTheme$components9, _baseTheme$components0, _baseTheme$components1;
  var baseTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return createTheme(_objectSpread(_objectSpread({}, baseTheme), {}, {
    typography: _objectSpread(_objectSpread({}, baseTheme.typography), {}, {
      titleM: typographyVariants.titleM
    }),
    components: _objectSpread(_objectSpread({}, baseTheme.components), {}, {
      MuiTypography: {
        styleOverrides: _objectSpread(_objectSpread({}, (_baseTheme$components = baseTheme.components) === null || _baseTheme$components === void 0 || (_baseTheme$components = _baseTheme$components.MuiTypography) === null || _baseTheme$components === void 0 ? void 0 : _baseTheme$components.styleOverrides), {}, {
          titleM: typographyVariants.titleM
        }),
        variants: [].concat(_toConsumableArray(((_baseTheme$components2 = baseTheme.components) === null || _baseTheme$components2 === void 0 || (_baseTheme$components2 = _baseTheme$components2.MuiTypography) === null || _baseTheme$components2 === void 0 ? void 0 : _baseTheme$components2.variants) || []), [{
          props: {
            variant: 'titleM'
          },
          style: typographyVariants.titleM
        }])
      },
      MuiTextField: {
        styleOverrides: _objectSpread(_objectSpread({}, (_baseTheme$components3 = baseTheme.components) === null || _baseTheme$components3 === void 0 || (_baseTheme$components3 = _baseTheme$components3.MuiTextField) === null || _baseTheme$components3 === void 0 ? void 0 : _baseTheme$components3.styleOverrides), {}, {
          root: _objectSpread(_objectSpread({}, (_baseTheme$components4 = baseTheme.components) === null || _baseTheme$components4 === void 0 || (_baseTheme$components4 = _baseTheme$components4.MuiTextField) === null || _baseTheme$components4 === void 0 || (_baseTheme$components4 = _baseTheme$components4.styleOverrides) === null || _baseTheme$components4 === void 0 ? void 0 : _baseTheme$components4.root), {}, {
            '&.titleM': {
              '& input, & textarea': typographyVariants.titleM
            }
          })
        })
      },
      MuiButton: {
        styleOverrides: _objectSpread(_objectSpread({}, (_baseTheme$components5 = baseTheme.components) === null || _baseTheme$components5 === void 0 || (_baseTheme$components5 = _baseTheme$components5.MuiButton) === null || _baseTheme$components5 === void 0 ? void 0 : _baseTheme$components5.styleOverrides), {}, {
          root: _objectSpread(_objectSpread({}, (_baseTheme$components6 = baseTheme.components) === null || _baseTheme$components6 === void 0 || (_baseTheme$components6 = _baseTheme$components6.MuiButton) === null || _baseTheme$components6 === void 0 || (_baseTheme$components6 = _baseTheme$components6.styleOverrides) === null || _baseTheme$components6 === void 0 ? void 0 : _baseTheme$components6.root), {}, {
            '&.titleM': typographyVariants.titleM,
            // Button variants
            '&.btn-primary': {
              backgroundColor: '#Ffc71a',
              color: '#452970',
              fontWeight: 800,
              padding: '0px 14px',
              height: '38px',
              border: '1px solid #452970',
              fontSize: '1.12rem',
              textTransform: 'none',
              '&:hover': {
                backgroundColor: '#ffd600',
                color: '#452970'
              }
            },
            '&.btn-secondary': {
              backgroundColor: '#f0f0f0',
              color: '#592d87',
              border: '1px solid #592d87',
              fontWeight: 600,
              padding: '8px 20px',
              textTransform: 'none',
              '&:hover': {
                backgroundColor: '#e5e5e5',
                boxShadow: '0px 2px 5px rgba(0,0,0,0.15)'
              }
            },
            '&.btn-tertiary': {
              backgroundColor: 'transparent',
              color: '#cf3a23',
              fontWeight: 800,
              padding: '0px 14px',
              height: '38px',
              border: '1px solid #cf3a23',
              fontSize: '1.12rem',
              textTransform: 'none',
              '&:hover': {
                backgroundColor: '#E5B39B',
                color: '#cf3a23'
              }
            },
            // Icon-only button variants
            '&.btn-icon-save': {
              backgroundColor: '#28a745',
              color: 'white',
              border: '1px solid #28a745',
              minWidth: '40px',
              height: '40px',
              padding: '8px',
              borderRadius: '6px',
              '&:hover': {
                backgroundColor: '#218838',
                boxShadow: '0px 2px 8px rgba(40, 167, 69, 0.3)'
              }
            },
            '&.btn-icon-cancel': {
              backgroundColor: '#6c757d',
              color: 'white',
              border: '1px solid #6c757d',
              minWidth: '40px',
              height: '40px',
              padding: '8px',
              borderRadius: '6px',
              '&:hover': {
                backgroundColor: '#5a6268',
                boxShadow: '0px 2px 8px rgba(108, 117, 125, 0.3)'
              }
            },
            '&.btn-icon-delete': {
              backgroundColor: '#dc3545',
              color: 'white',
              border: '1px solid #dc3545',
              minWidth: '40px',
              height: '40px',
              padding: '8px',
              borderRadius: '6px',
              '&:hover': {
                backgroundColor: '#c82333',
                boxShadow: '0px 2px 8px rgba(220, 53, 69, 0.3)'
              }
            }
          })
        }),
        variants: [].concat(_toConsumableArray(((_baseTheme$components7 = baseTheme.components) === null || _baseTheme$components7 === void 0 || (_baseTheme$components7 = _baseTheme$components7.MuiButton) === null || _baseTheme$components7 === void 0 ? void 0 : _baseTheme$components7.variants) || []), [{
          props: {
            variant: 'primary'
          },
          style: {
            backgroundColor: '#Ffc71a',
            color: '#452970',
            fontWeight: 800,
            padding: '0px 14px',
            height: '38px',
            border: '1px solid #452970',
            fontSize: '1.12rem',
            textTransform: 'none',
            '&:hover': {
              backgroundColor: '#ffd600',
              color: '#452970'
            }
          }
        }, {
          props: {
            variant: 'secondary'
          },
          style: {
            backgroundColor: '#f0f0f0',
            color: '#592d87',
            border: '1px solid #592d87',
            fontWeight: 600,
            padding: '8px 20px',
            textTransform: 'none',
            '&:hover': {
              backgroundColor: '#e5e5e5',
              boxShadow: '0px 2px 5px rgba(0,0,0,0.15)'
            }
          }
        }, {
          props: {
            variant: 'tertiary'
          },
          style: {
            backgroundColor: 'transparent',
            color: '#cf3a23',
            fontWeight: 800,
            padding: '0px 14px',
            height: '38px',
            border: '1px solid #cf3a23',
            fontSize: '1.12rem',
            textTransform: 'none',
            '&:hover': {
              backgroundColor: '#E5B39B',
              color: '#cf3a23'
            }
          }
        }, {
          props: {
            variant: 'iconSave'
          },
          style: {
            backgroundColor: '#28a745',
            color: 'white',
            border: '1px solid #28a745',
            minWidth: '40px',
            height: '40px',
            padding: '8px',
            borderRadius: '6px',
            '&:hover': {
              backgroundColor: '#218838',
              boxShadow: '0px 2px 8px rgba(40, 167, 69, 0.3)'
            }
          }
        }, {
          props: {
            variant: 'iconCancel'
          },
          style: {
            backgroundColor: '#6c757d',
            color: 'white',
            border: '1px solid #6c757d',
            minWidth: '40px',
            height: '40px',
            padding: '8px',
            borderRadius: '6px',
            '&:hover': {
              backgroundColor: '#5a6268',
              boxShadow: '0px 2px 8px rgba(108, 117, 125, 0.3)'
            }
          }
        }, {
          props: {
            variant: 'iconDelete'
          },
          style: {
            backgroundColor: '#dc3545',
            color: 'white',
            border: '1px solid #dc3545',
            minWidth: '40px',
            height: '40px',
            padding: '8px',
            borderRadius: '6px',
            '&:hover': {
              backgroundColor: '#c82333',
              boxShadow: '0px 2px 8px rgba(220, 53, 69, 0.3)'
            }
          }
        }])
      },
      MuiDataGrid: {
        styleOverrides: _objectSpread(_objectSpread({}, (_baseTheme$components8 = baseTheme.components) === null || _baseTheme$components8 === void 0 || (_baseTheme$components8 = _baseTheme$components8.MuiDataGrid) === null || _baseTheme$components8 === void 0 ? void 0 : _baseTheme$components8.styleOverrides), {}, {
          root: _objectSpread(_objectSpread({}, (_baseTheme$components9 = baseTheme.components) === null || _baseTheme$components9 === void 0 || (_baseTheme$components9 = _baseTheme$components9.MuiDataGrid) === null || _baseTheme$components9 === void 0 || (_baseTheme$components9 = _baseTheme$components9.styleOverrides) === null || _baseTheme$components9 === void 0 ? void 0 : _baseTheme$components9.root), {}, {
            border: '1px solid rgba(224, 224, 224, 1)',
            '&.titleM': {
              fontSize: '18px',
              fontWeight: 600,
              '& .MuiDataGrid-cell': {
                fontSize: '1.16rem',
                borderRight: '1px solid rgba(224, 224, 224, 1)',
                padding: '10px 14px'
              },
              '& .MuiDataGrid-columnHeader': {
                fontSize: '1.19rem',
                fontWeight: 'bold',
                borderRight: '1px solid rgba(224, 224, 224, 1)',
                height: '95px !important',
                backgroundColor: 'rgba(0, 0, 0, 0.04)'
              },
              '& .MuiDataGrid-columnHeaders': {
                fontSize: '1.19rem',
                fontWeight: 'bold',
                minHeight: '70px !important',
                borderBottom: '2px solid rgba(224, 224, 224, 1)'
              },
              '& .MuiDataGrid-columnHeaderTitle': {
                fontWeight: 'bold',
                fontSize: '1.19rem'
              },
              '& .MuiTablePagination-root': {
                fontSize: '1.18rem'
              },
              '& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows': {
                fontSize: '1.06rem'
              }
            },
            // Common styles for all DataGrids
            '& .MuiDataGrid-cell': {
              borderRight: '1px solid rgba(224, 224, 224, 1)'
            },
            '& .MuiDataGrid-columnHeader': {
              borderRight: '1px solid rgba(224, 224, 224, 1)',
              backgroundColor: 'rgba(0, 0, 0, 0.04)'
            },
            '& .MuiDataGrid-columnHeaders': {
              borderBottom: '2px solid rgba(224, 224, 224, 1)'
            },
            '& .MuiDataGrid-row:hover': {
              backgroundColor: 'rgba(0, 0, 0, 0.04)'
            },
            '& .MuiDataGrid-footer': {
              borderTop: '1px solid rgba(224, 224, 224, 1)'
            }
          })
        })
      },
      MuiInputBase: {
        styleOverrides: _objectSpread(_objectSpread({}, (_baseTheme$components0 = baseTheme.components) === null || _baseTheme$components0 === void 0 || (_baseTheme$components0 = _baseTheme$components0.MuiInputBase) === null || _baseTheme$components0 === void 0 ? void 0 : _baseTheme$components0.styleOverrides), {}, {
          root: _objectSpread(_objectSpread({}, (_baseTheme$components1 = baseTheme.components) === null || _baseTheme$components1 === void 0 || (_baseTheme$components1 = _baseTheme$components1.MuiInputBase) === null || _baseTheme$components1 === void 0 || (_baseTheme$components1 = _baseTheme$components1.styleOverrides) === null || _baseTheme$components1 === void 0 ? void 0 : _baseTheme$components1.root), {}, {
            '&.titleM': {
              '& input, & textarea': typographyVariants.titleM
            }
          })
        })
      }
    })
  }));
};

// Hook to use style variants
export var useStyleVariants = function useStyleVariants() {
  var context = useContext(StyleContext);
  if (!context) {
    throw new Error('useStyleVariants must be used within a StyleProvider');
  }
  return context;
};

// Helper function to get variant styles
export var getVariantStyle = function getVariantStyle(variant) {
  return typographyVariants[variant] || {};
};

// Helper function to create sx prop with variant
export var createSxWithVariant = function createSxWithVariant(variant) {
  var additionalStyles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  return _objectSpread(_objectSpread({}, typographyVariants[variant]), additionalStyles);
};

// StyleProvider component
export var StyleProvider = function StyleProvider(_ref) {
  var children = _ref.children,
    baseTheme = _ref.theme;
  var theme = createStyleTheme(baseTheme);
  var contextValue = {
    variants: typographyVariants,
    getVariantStyle: getVariantStyle,
    createSxWithVariant: createSxWithVariant
  };
  return /*#__PURE__*/_jsx(StyleContext.Provider, {
    value: contextValue,
    children: /*#__PURE__*/_jsxs(ThemeProvider, {
      theme: theme,
      children: [/*#__PURE__*/_jsx(GlobalStyles, {
        styles: globalStyles
      }), children]
    })
  });
};
export default StyleProvider;