mui-dialog 1.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Virtual Internships
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,194 @@
+# mui-dialog
+
+A reusable dialog component for React applications built with Material-UI (MUI).
+
+## Installation
+
+```bash
+# Using npm
+npm install mui-dialog
+
+# Using yarn
+yarn add mui-dialog
+```
+
+## Features
+
+- Built with Material-UI (MUI) components
+- TypeScript support
+- Multiple dialog types:
+  - Information
+  - Confirmation
+  - Input
+- Customizable sizes and layouts
+- Support for primary, secondary, and tertiary actions
+- Responsive design
+- Theme customization
+
+## Usage
+
+```tsx
+import { ViDialog } from "mui-dialog";
+import { MODAL_TYPES, INFORMATION_SUBTYPES } from "mui-dialog";
+
+// Basic Information Dialog
+const MyComponent = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <ViDialog
+      type={MODAL_TYPES.INFORMATION}
+      subtype={INFORMATION_SUBTYPES.ACKNOWLEDGEMENT}
+      open={open}
+      onClose={() => setOpen(false)}
+      title="Dialog Title"
+      description="This is a dialog description"
+      actions={{
+        primaryCtaTitle: "Confirm",
+        onPrimaryCtaClick: () => {
+          // Handle primary action
+          setOpen(false);
+        },
+      }}
+    >
+      {/* Optional content */}
+    </ViDialog>
+  );
+};
+```
+
+## Props
+
+## Modal Types
+
+| Type           | Description                          | Subtypes                                 | Allowed Sizes     |
+| -------------- | ------------------------------------ | ---------------------------------------- | ----------------- |
+| `information`  | For displaying information to users  | `acknowledgement`, `progress`, `passive` | Varies by subtype |
+| `confirmation` | For user confirmations and decisions | `default`, `destructive`, `nested`       | `small` only      |
+| `input`        | For collecting user input            | `default`, `destructive`                 | All sizes         |
+
+### Subtype Details
+
+#### Information Modal Subtypes
+
+| Subtype           | Description                            | Allowed Sizes                   | Dismissible |
+| ----------------- | -------------------------------------- | ------------------------------- | ----------- |
+| `acknowledgement` | For simple acknowledgements            | `small`                         | `full`      |
+| `progress`        | For showing progress or status updates | `small`, `medium`, `large`      | `partial`   |
+| `passive`         | For passive information display        | `medium`, `large`, `extraLarge` | `full`      |
+
+#### Confirmation Modal Subtypes
+
+| Subtype       | Description              | Allowed Sizes | Dismissible |
+| ------------- | ------------------------ | ------------- | ----------- |
+| `default`     | Standard confirmation    | `small`       | `partial`   |
+| `destructive` | For destructive actions  | `small`       | `partial`   |
+| `nested`      | For nested confirmations | `small`       | `partial`   |
+
+#### Input Modal Subtypes
+
+| Subtype       | Description                   | Allowed Sizes | Dismissible |
+| ------------- | ----------------------------- | ------------- | ----------- |
+| `default`     | Standard input                | All sizes     | `partial`   |
+| `destructive` | For destructive input actions | All sizes     | `partial`   |
+
+## Props Reference
+
+### Base Props
+
+| Prop               | Type                                             | Required | Default   | Description                    |
+| ------------------ | ------------------------------------------------ | -------- | --------- | ------------------------------ |
+| `type`             | `"information" \| "confirmation" \| "input"`     | Yes      | -         | Type of the modal              |
+| `subtype`          | `string`                                         | Yes      | -         | Subtype of the modal           |
+| `open`             | `boolean`                                        | Yes      | -         | Controls modal visibility      |
+| `onClose`          | `() => void`                                     | Yes      | -         | Callback when modal is closed  |
+| `title`            | `string \| React.ReactNode`                      | No       | -         | Modal title                    |
+| `subTitle`         | `string \| React.ReactNode`                      | No       | -         | Modal subtitle                 |
+| `description`      | `string \| React.ReactNode`                      | No       | -         | Modal description              |
+| `children`         | `React.ReactNode`                                | No       | -         | Additional content             |
+| `size`             | `"small" \| "medium" \| "large" \| "extraLarge"` | No       | `"small"` | Modal size                     |
+| `wrapperClassName` | `string`                                         | No       | -         | Custom class for modal wrapper |
+| `showCloseIcon`    | `boolean`                                        | No       | `true`    | Show/hide close icon           |
+| `showDivider`      | `boolean`                                        | No       | `true`    | Show/hide divider              |
+| `showActions`      | `boolean`                                        | No       | `true`    | Show/hide action buttons       |
+
+### Action Props
+
+| Prop                     | Type              | Required | Default | Description                           |
+| ------------------------ | ----------------- | -------- | ------- | ------------------------------------- |
+| `primaryCtaTitle`        | `string`          | No       | -       | Primary button text                   |
+| `secondaryCtaTitle`      | `string`          | No       | -       | Secondary button text                 |
+| `tertiaryCtaTitle`       | `string`          | No       | -       | Tertiary button text                  |
+| `isPrimaryCtaLoading`    | `boolean`         | No       | `false` | Show loading state for primary button |
+| `isPrimaryCtaDisabled`   | `boolean`         | No       | `false` | Disable primary button                |
+| `isSecondaryCtaDisabled` | `boolean`         | No       | `false` | Disable secondary button              |
+| `isTertiaryCtaDisabled`  | `boolean`         | No       | `false` | Disable tertiary button               |
+| `onPrimaryCtaClick`      | `() => void`      | No       | -       | Primary button click handler          |
+| `onSecondaryCtaClick`    | `() => void`      | No       | -       | Secondary button click handler        |
+| `onTertiaryCtaClick`     | `() => void`      | No       | -       | Tertiary button click handler         |
+| `tertiaryCtaStartIcon`   | `React.ReactNode` | No       | -       | Icon for tertiary button              |
+
+## Size Breakpoints
+
+| Size         | Breakpoint | Max Width |
+| ------------ | ---------- | --------- |
+| `small`      | `xs`       | 600px     |
+| `medium`     | `sm`       | 900px     |
+| `large`      | `md`       | 1200px    |
+| `extraLarge` | `lg`       | 1536px    |
+
+## Usage Example
+
+```tsx
+import { ViDialog } from "mui-dialog";
+
+// Input Modal
+<ViDialog
+  type="input"
+  subtype="default"
+  open={true}
+  onClose={() => {}}
+  title="Input Required"
+  description="Please provide your input"
+  size="medium"
+  actions={{
+    primaryCtaTitle: "Submit",
+    secondaryCtaTitle: "Cancel",
+    onPrimaryCtaClick: () => {},
+    onSecondaryCtaClick: () => {},
+  }}
+>
+  <input type="text" />
+</ViDialog>;
+```
+
+## Modal Configuration
+
+Each modal type and subtype has specific configurations for:
+
+- Dismissibility: 'full' or 'partial'
+- Allowed sizes: Array of allowed size options
+
+These configurations are automatically enforced by the component to ensure consistent behavior across different use cases.
+
+## Development
+
+### Local Setup
+
+```bash
+# Install dependencies
+yarn install
+
+# Build package
+yarn build
+
+# Run tests
+yarn test
+
+# Run tests with coverage
+yarn test:coverage
+```
+
+## License
+
+© [Virtual Internships]

package/dist/fe-vi-dialog.es.js

@@ -0,0 +1,751 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.appendChild(document.createTextNode(".vi-dialog .close-icon{cursor:pointer;color:#717371}.vi-dialog .MuiPaper-root{border-radius:12px}.vi-dialog .divider{margin-top:28px;margin-bottom:-4px}.vi-dialog .vi-dialog-actions-wrapper{margin-top:28px;display:flex;justify-content:space-between;align-items:center}.vi-dialog .vi-dialog-actions-wrapper .tertiary-cta.destructive{color:#ed1d31;justify-self:flex-start}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.medium{width:50%}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.large{width:33%}.vi-dialog .vi-dialog-actions-wrapper .vi-dialog-actions.extra-large{width:25%}.vi-dialog .vi-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px}.vi-dialog .vi-dialog-actions .vi-dialog-cta{width:-webkit-fill-available}.vi-dialog .vi-dialog-actions .tertiary-cta{padding:0}.vi-dialog .vi-dialog-actions .vi-dialog-cta.destructive{background-color:#ed1d31}.vi-dialog .vi-dialog-actions.without-tertiary{margin-top:28px}.vi-dialog .vi-dialog-actions.small{justify-content:center}.vi-dialog .vi-dialog-actions.without-tertiary.medium{max-width:50%;margin-left:50%}.vi-dialog .vi-dialog-actions.without-tertiary.large{max-width:33%;margin-left:67%}.vi-dialog .vi-dialog-actions.without-tertiary.extra-large{max-width:25%;margin-left:75%}.vi-dialog .vi-dialog-actions.with-tertiary-cta{max-width:100%;margin-left:0}.vi-dialog .vi-dialog-title{margin-bottom:28px}.vi-dialog .vi-dialog-title .description{margin-top:16px!important}.vi-dialog .vi-dialog-title.small{margin-bottom:16px}.vi-dialog .divider{margin-left:-24px;margin-right:-24px}@media only screen and (max-width: 600px){.vi-dialog .MuiPaper-root{margin:16px;width:calc(100% - 32px)}.vi-dialog .vi-dialog-actions-wrapper{flex-direction:column-reverse;gap:12px}.vi-dialog .vi-dialog-actions{flex-direction:column-reverse;width:100%!important;gap:12px}.vi-dialog .vi-dialog-actions.medium,.vi-dialog .vi-dialog-actions.large,.vi-dialog .vi-dialog-actions.extra-large{max-width:100%;margin-left:0}.vi-dialog.medium .MuiPaper-root,.vi-dialog.large .MuiPaper-root{margin:0;width:100%;height:100%;max-height:none;border-radius:0}}")),document.head.appendChild(i)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { forwardRef } from 'react';
+import Dialog from '@mui/material/Dialog';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import { createSvgIcon } from '@mui/material/utils';
+import Slide from '@mui/material/Slide';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme, ThemeProvider } from '@mui/material/styles';
+import { createTheme, Divider } from '@mui/material';
+
+const CloseIcon = createSvgIcon(/*#__PURE__*/jsx("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), 'Close');
+
+let warnedOnce = false;
+const warn = () => {
+  if (!warnedOnce) {
+    console.warn(['MUI: The LoadingButton component functionality is now part of the Button component from Material UI.', '', "You should use `import Button from '@mui/material/Button'`", "or `import { Button } from '@mui/material'`"].join('\n'));
+    warnedOnce = true;
+  }
+};
+
+/**
+ * @ignore - do not document.
+ */
+const LoadingButton = /*#__PURE__*/React.forwardRef(function DeprecatedLoadingButton(props, ref) {
+  warn();
+  return /*#__PURE__*/jsx(Button, {
+    ref: ref,
+    ...props
+  });
+});
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+/**
+ * This method returns `undefined`.
+ *
+ * @static
+ * @memberOf _
+ * @since 2.3.0
+ * @category Util
+ * @example
+ *
+ * _.times(2, _.noop);
+ * // => [undefined, undefined]
+ */
+
+var noop_1;
+var hasRequiredNoop;
+
+function requireNoop () {
+	if (hasRequiredNoop) return noop_1;
+	hasRequiredNoop = 1;
+	function noop() {
+	  // No operation performed.
+	}
+
+	noop_1 = noop;
+	return noop_1;
+}
+
+var noopExports = requireNoop();
+const _noop = /*@__PURE__*/getDefaultExportFromCjs(noopExports);
+
+const textStyles = {
+  fontWeight: {
+    semibold: 590,
+    regular: 400
+  },
+  letterSpacing: {
+    default: "normal"
+  }
+};
+
+const dialogTypography = {
+  fontFamily: "-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Fira Sans,Ubuntu,Oxygen,Oxygen Sans,Cantarell,Droid Sans,Apple Color Emoji,Segoe UI Emoji,Segoe UI Emoji,Segoe UI Symbol,Lucida Grande,Helvetica,Arial,sans-serif",
+  displayL: {
+    fontSize: "80px",
+    fontWeight: textStyles.fontWeight.semibold,
+    lineHeight: "92px",
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  displayM: {
+    fontSize: "40px",
+    fontWeight: textStyles.fontWeight.semibold,
+    lineHeight: "52px",
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  headingL: {
+    fontSize: "32px",
+    fontWeight: textStyles.fontWeight.semibold,
+    lineHeight: "44px",
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  headingM: {
+    fontSize: "28px",
+    fontWeight: textStyles.fontWeight.semibold,
+    lineHeight: "40px",
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  headingS: {
+    fontSize: "24px",
+    fontWeight: textStyles.fontWeight.semibold,
+    lineHeight: "36px",
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  semiBoldLabelL: {
+    fontSize: "20px",
+    lineHeight: "28px",
+    fontWeight: textStyles.fontWeight.semibold,
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  semiBoldLabelM: {
+    fontSize: "16px",
+    lineHeight: "24px",
+    fontWeight: textStyles.fontWeight.semibold,
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  semiBoldLabelS: {
+    fontSize: "14px",
+    lineHeight: "20px",
+    fontWeight: textStyles.fontWeight.semibold,
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  semiBoldLabelXs: {
+    fontSize: "12px",
+    lineHeight: "16px",
+    fontWeight: textStyles.fontWeight.semibold,
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  semiBoldLabelXxs: {
+    fontSize: "10px",
+    lineHeight: "14px",
+    fontWeight: textStyles.fontWeight.semibold,
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  regularLabelL: {
+    fontSize: "20px",
+    lineHeight: "28px",
+    fontWeight: textStyles.fontWeight.regular,
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  regularLabelM: {
+    fontSize: "16px",
+    lineHeight: "24px",
+    fontWeight: textStyles.fontWeight.regular,
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  regularLabelS: {
+    fontSize: "14px",
+    lineHeight: "20px",
+    fontWeight: textStyles.fontWeight.regular,
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  regularLabelXs: {
+    fontSize: "12px",
+    lineHeight: "16px",
+    fontWeight: textStyles.fontWeight.regular,
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  regularLabelXxs: {
+    fontSize: "10px",
+    lineHeight: "14px",
+    fontWeight: textStyles.fontWeight.regular,
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  textXl: {
+    fontSize: "20px",
+    fontWeight: textStyles.fontWeight.regular,
+    lineHeight: "28px",
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  textL: {
+    fontSize: "16px",
+    fontWeight: textStyles.fontWeight.regular,
+    lineHeight: "24px",
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  textM: {
+    fontSize: "14px",
+    fontWeight: textStyles.fontWeight.regular,
+    lineHeight: "20px",
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  subtextM: {
+    fontSize: "12px",
+    fontWeight: textStyles.fontWeight.regular,
+    lineHeight: "16px",
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  subtextS: {
+    fontSize: "10px",
+    fontWeight: textStyles.fontWeight.regular,
+    lineHeight: "14px",
+    letterSpacing: textStyles.letterSpacing.default
+  },
+  semiBoldLinkXL: {
+    fontSize: "20px",
+    fontWeight: textStyles.fontWeight.semibold,
+    lineHeight: "28px",
+    letterSpacing: textStyles.letterSpacing.default,
+    textDecoration: "underline"
+  },
+  semiBoldLinkL: {
+    fontSize: "16px",
+    fontWeight: textStyles.fontWeight.semibold,
+    lineHeight: "24px",
+    letterSpacing: textStyles.letterSpacing.default,
+    textDecoration: "underline"
+  },
+  semiBoldLinkM: {
+    fontSize: "14px",
+    fontWeight: textStyles.fontWeight.semibold,
+    lineHeight: "20px",
+    letterSpacing: textStyles.letterSpacing.default,
+    textDecoration: "underline"
+  },
+  semiBoldLinkS: {
+    fontSize: "12px",
+    fontWeight: textStyles.fontWeight.semibold,
+    lineHeight: "16px",
+    letterSpacing: textStyles.letterSpacing.default,
+    textDecoration: "underline"
+  },
+  semiBoldLinkXs: {
+    fontSize: "10px",
+    fontWeight: textStyles.fontWeight.semibold,
+    lineHeight: "14px",
+    letterSpacing: textStyles.letterSpacing.default,
+    textDecoration: "underline"
+  },
+  regularLinkXL: {
+    fontSize: "20px",
+    fontWeight: textStyles.fontWeight.regular,
+    lineHeight: "20px",
+    letterSpacing: textStyles.letterSpacing.default,
+    textDecoration: "underline"
+  },
+  regularLinkL: {
+    fontSize: "16px",
+    fontWeight: textStyles.fontWeight.regular,
+    lineHeight: "24px",
+    letterSpacing: textStyles.letterSpacing.default,
+    textDecoration: "underline"
+  },
+  h1: {
+    fontSize: "26px",
+    fontWeight: 590,
+    lineHeight: "32px"
+  },
+  h2: {
+    fontSize: "22px",
+    fontWeight: 590,
+    lineHeight: "26px"
+  },
+  h3: {
+    fontSize: "17px",
+    fontWeight: 590,
+    lineHeight: "22px"
+  },
+  h4: {
+    fontSize: "15px",
+    fontWeight: 590,
+    lineHeight: "20px"
+  },
+  h5: {
+    fontSize: "14px",
+    fontWeight: 590,
+    lineHeight: "20px"
+  },
+  headline: {
+    fontSize: "13px",
+    fontWeight: 590,
+    lineHeight: "16px"
+  },
+  body: {
+    fontSize: "13px",
+    lineHeight: "16px",
+    fontWeight: 400
+  },
+  callout: {
+    fontSize: "13px",
+    fontWeight: 510,
+    lineHeight: "15px"
+  },
+  subHeadline1: {
+    fontSize: "14px",
+    lineHeight: "20px",
+    fontWeight: 400
+  },
+  subHeadline2: {
+    fontSize: "13px",
+    lineHeight: "20px",
+    fontWeight: 400
+  },
+  footNote: {
+    fontSize: "12px",
+    lineHeight: "13px",
+    fontWeight: 400
+  },
+  caption1: {
+    fontSize: "10px",
+    lineHeight: "13px",
+    fontWeight: 400
+  },
+  caption2: {
+    fontSize: "10px",
+    lineHeight: "13px",
+    fontWeight: 510
+  }
+};
+const muiTheme = createTheme({
+  palette: {
+    primary: {
+      main: "#1E221E",
+      contrastText: "#ffffff"
+    },
+    secondary: {
+      main: "#0A9083",
+      contrastText: "#000000"
+    },
+    error: {
+      main: "#ED1D31",
+      contrastText: "#ffffff"
+    },
+    warning: {
+      main: "#F3800D",
+      contrastText: "#000000"
+    },
+    info: {
+      main: "#0881EA",
+      contrastText: "#000000"
+    },
+    success: {
+      main: "#0AB22C",
+      contrastText: "#000000"
+    },
+    background: {
+      default: "#F7F9FC"
+    }
+  },
+  typography: dialogTypography,
+  components: {
+    MuiTypography: {
+      defaultProps: {
+        variantMapping: {
+          h1: "h1",
+          h2: "h2",
+          h3: "h3",
+          h4: "h4",
+          headline: "h5",
+          body: "span",
+          callout: "span",
+          subHeadline1: "span",
+          subHeadline2: "span",
+          footNote: "span",
+          caption1: "span",
+          caption2: "span"
+        }
+      }
+    },
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true,
+        size: "large"
+      },
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+          fontSize: "14px",
+          borderRadius: "8px"
+        },
+        text: {
+          textDecoration: "underline",
+          "&:hover": {
+            backgroundColor: "transparent",
+            textDecoration: "underline"
+          },
+          padding: "0px 8px",
+          textAlign: "left"
+        }
+      }
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+          fontSize: "14px"
+        }
+      }
+    },
+    MuiChip: {
+      defaultProps: {
+        size: "small"
+      },
+      styleOverrides: {
+        root: {
+          paddingLeft: "5px",
+          paddingRight: "5px"
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          borderRadius: "16px"
+        }
+      }
+    },
+    MuiCard: {
+      defaultProps: {
+        variant: "outlined"
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: "16px"
+        }
+      }
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          "& .MuiAutocomplete-inputRoot": {
+            paddingLeft: "14px"
+          }
+        }
+      }
+    },
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          fontWeight: "bold",
+          "&:hover": {
+            cursor: "pointer"
+          }
+        }
+      },
+      defaultProps: {
+        variant: "body"
+      }
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          "& .MuiInputBase-root": {
+            borderRadius: "8px"
+          }
+        }
+      }
+    },
+    MuiFormControl: {
+      styleOverrides: {
+        root: {
+          "& .MuiInputBase-root": {
+            borderRadius: "8px"
+          }
+        }
+      }
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          borderRadius: 0
+        }
+      }
+    }
+  }
+});
+
+const MODAL_TYPES = {
+  INFORMATION: "information",
+  CONFIRMATION: "confirmation",
+  INPUT: "input"
+};
+const INFORMATION_SUBTYPES = {
+  ACKNOWLEDGEMENT: "acknowledgement",
+  PROGRESS: "progress",
+  PASSIVE: "passive"
+};
+const CONFIRMATION_SUBTYPES = {
+  DEFAULT: "default",
+  DESTRUCTIVE: "destructive",
+  NESTED: "nested"
+};
+const INPUT_SUBTYPES = {
+  DEFAULT: "default",
+  DESTRUCTIVE: "destructive"
+};
+const MODAL_SIZES = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large",
+  EXTRA_LARGE: "extraLarge"
+};
+const TERTIARY_CTA_TYPES = {
+  DEFAULT: "default",
+  DESTRUCTIVE: "destructive"
+};
+const MODAL_CONFIGS = {
+  [MODAL_TYPES.INFORMATION]: {
+    [INFORMATION_SUBTYPES.ACKNOWLEDGEMENT]: {
+      DISMISSIBLE: "full",
+      ALLOWED_SIZES: [MODAL_SIZES.SMALL]
+    },
+    [INFORMATION_SUBTYPES.PROGRESS]: {
+      DISMISSIBLE: "partial",
+      ALLOWED_SIZES: [MODAL_SIZES.SMALL, MODAL_SIZES.MEDIUM, MODAL_SIZES.LARGE]
+    },
+    [INFORMATION_SUBTYPES.PASSIVE]: {
+      DISMISSIBLE: "full",
+      ALLOWED_SIZES: [MODAL_SIZES.MEDIUM, MODAL_SIZES.LARGE, MODAL_SIZES.EXTRA_LARGE]
+    }
+  },
+  [MODAL_TYPES.CONFIRMATION]: {
+    [CONFIRMATION_SUBTYPES.DEFAULT]: {
+      DISMISSIBLE: "partial",
+      ALLOWED_SIZES: [MODAL_SIZES.SMALL]
+    },
+    [CONFIRMATION_SUBTYPES.DESTRUCTIVE]: {
+      DISMISSIBLE: "partial",
+      ALLOWED_SIZES: [MODAL_SIZES.SMALL]
+    },
+    [CONFIRMATION_SUBTYPES.NESTED]: {
+      DISMISSIBLE: "partial",
+      ALLOWED_SIZES: [MODAL_SIZES.SMALL]
+    }
+  },
+  [MODAL_TYPES.INPUT]: {
+    [INPUT_SUBTYPES.DEFAULT]: {
+      DISMISSIBLE: "partial",
+      ALLOWED_SIZES: Object.values(MODAL_SIZES)
+    },
+    [INPUT_SUBTYPES.DESTRUCTIVE]: {
+      DISMISSIBLE: "partial",
+      ALLOWED_SIZES: Object.values(MODAL_SIZES)
+    }
+  }
+};
+const SIZE_TO_MAX_WIDTH = {
+  [MODAL_SIZES.SMALL]: "xs",
+  [MODAL_SIZES.MEDIUM]: "sm",
+  [MODAL_SIZES.LARGE]: "md",
+  [MODAL_SIZES.EXTRA_LARGE]: "lg"
+};
+const MODAL_SIZE_VS_CLASS_NAMES = {
+  [MODAL_SIZES.SMALL]: "small",
+  [MODAL_SIZES.MEDIUM]: "medium",
+  [MODAL_SIZES.LARGE]: "large",
+  [MODAL_SIZES.EXTRA_LARGE]: "extra-large"
+};
+
+const checkIfTertiaryCtaIsAllowed = (type, subtype, size) => {
+  if (type === MODAL_TYPES.CONFIRMATION) return false;
+  if (subtype === INFORMATION_SUBTYPES.ACKNOWLEDGEMENT) return false;
+  if (size === MODAL_SIZES.SMALL) return false;
+  return true;
+};
+
+const TransitionUp = forwardRef(
+  function Transition(props, ref) {
+    return /* @__PURE__ */ jsx(Slide, { direction: "up", ref, ...props });
+  }
+);
+const ViDialog = (props) => {
+  let parentTheme = useTheme();
+  parentTheme = {
+    ...parentTheme,
+    typography: {
+      ...parentTheme.typography,
+      ...dialogTypography
+    }
+  };
+  const isMobile = useMediaQuery("(min-width:600px)");
+  const subtype = props.type === MODAL_TYPES.INFORMATION ? props.subtype : props.type === MODAL_TYPES.CONFIRMATION ? props.subtype : props.type === MODAL_TYPES.INPUT ? props.subtype : "default";
+  const {
+    wrapperClassName,
+    open,
+    type,
+    size,
+    title,
+    subTitle,
+    description,
+    onClose,
+    children,
+    actions,
+    showActions = true,
+    showDivider = true,
+    showCloseIcon = true,
+    tertiaryCtaType = "default",
+    ...rest
+  } = props;
+  const {
+    primaryCtaTitle,
+    secondaryCtaTitle,
+    isPrimaryCtaLoading = false,
+    isPrimaryCtaDisabled = false,
+    isSecondaryCtaDisabled = false,
+    onPrimaryCtaClick = _noop,
+    onSecondaryCtaClick = _noop,
+    tertiaryCtaTitle,
+    tertiaryCtaStartIcon,
+    isTertiaryCtaLoading = false,
+    isTertiaryCtaDisabled = false,
+    onTertiaryCtaClick = _noop
+  } = actions || {};
+  const config = MODAL_CONFIGS[type][subtype] || MODAL_CONFIGS[type].default;
+  const defaultSize = config?.ALLOWED_SIZES[0] || MODAL_SIZES.SMALL;
+  const selectedSize = size && config?.ALLOWED_SIZES?.includes(size) ? size : defaultSize;
+  const showFooter = showActions && (primaryCtaTitle || secondaryCtaTitle);
+  const showFooterDivider = showDivider && (selectedSize === MODAL_SIZES.LARGE || selectedSize === MODAL_SIZES.EXTRA_LARGE);
+  const isTertiaryCtaAllowed = checkIfTertiaryCtaIsAllowed(
+    type,
+    subtype,
+    selectedSize
+  );
+  const showTertiaryCta = isTertiaryCtaAllowed && tertiaryCtaTitle;
+  const handleClose = () => {
+    if (config?.DISMISSIBLE === "full") {
+      onClose();
+    }
+  };
+  const currentTheme = parentTheme || muiTheme;
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: currentTheme, children: /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      TransitionComponent: isMobile ? TransitionUp : void 0,
+      className: `vi-dialog ${MODAL_SIZE_VS_CLASS_NAMES[selectedSize]} ${wrapperClassName}`,
+      open,
+      onClose: handleClose,
+      maxWidth: SIZE_TO_MAX_WIDTH[selectedSize],
+      fullWidth: true,
+      ...rest,
+      children: /* @__PURE__ */ jsxs("div", { className: "p-24 h-fill", children: [
+        title && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `vi-dialog-title ${MODAL_SIZE_VS_CLASS_NAMES[selectedSize]}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "d-f ai-c jc-sb", children: [
+                /* @__PURE__ */ jsxs("div", { className: "d-f flex-dir-col gap-8", children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "semiBoldLabelL", children: title }),
+                  subTitle && /* @__PURE__ */ jsx(Typography, { variant: "subtextM", children: subTitle })
+                ] }),
+                showCloseIcon && /* @__PURE__ */ jsx(
+                  CloseIcon,
+                  {
+                    fontSize: "small",
+                    className: "close-icon",
+                    "aria-label": "Close dialog",
+                    onClick: onClose
+                  }
+                )
+              ] }),
+              description && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  component: "div",
+                  className: "description",
+                  children: description
+                }
+              )
+            ]
+          }
+        ),
+        children,
+        showFooter && /* @__PURE__ */ jsxs(Fragment, { children: [
+          showFooterDivider && /* @__PURE__ */ jsx(Divider, { className: "divider" }),
+          showTertiaryCta ? /* @__PURE__ */ jsxs("div", { className: "vi-dialog-actions-wrapper", children: [
+            /* @__PURE__ */ jsx(
+              LoadingButton,
+              {
+                className: `tertiary-cta ${tertiaryCtaType === TERTIARY_CTA_TYPES.DESTRUCTIVE ? "destructive" : ""}`,
+                variant: "text",
+                onClick: onTertiaryCtaClick,
+                loading: isTertiaryCtaLoading,
+                disabled: isTertiaryCtaDisabled,
+                startIcon: tertiaryCtaStartIcon,
+                children: tertiaryCtaTitle
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `vi-dialog-actions ${MODAL_SIZE_VS_CLASS_NAMES[selectedSize]}`,
+                children: [
+                  secondaryCtaTitle && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      className: "vi-dialog-cta",
+                      variant: "outlined",
+                      onClick: onSecondaryCtaClick,
+                      disabled: isSecondaryCtaDisabled,
+                      children: secondaryCtaTitle
+                    }
+                  ),
+                  primaryCtaTitle && /* @__PURE__ */ jsx(
+                    LoadingButton,
+                    {
+                      className: `vi-dialog-cta ${subtype === "destructive" ? "destructive" : ""}`,
+                      variant: "contained",
+                      onClick: onPrimaryCtaClick,
+                      loading: isPrimaryCtaLoading,
+                      disabled: isPrimaryCtaDisabled,
+                      children: primaryCtaTitle
+                    }
+                  )
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `vi-dialog-actions without-tertiary ${MODAL_SIZE_VS_CLASS_NAMES[selectedSize]}`,
+              children: [
+                secondaryCtaTitle && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: "vi-dialog-cta",
+                    variant: "outlined",
+                    onClick: onSecondaryCtaClick,
+                    disabled: isSecondaryCtaDisabled,
+                    children: secondaryCtaTitle
+                  }
+                ),
+                primaryCtaTitle && /* @__PURE__ */ jsx(
+                  LoadingButton,
+                  {
+                    className: `vi-dialog-cta ${subtype === "destructive" ? "destructive" : ""}`,
+                    variant: "contained",
+                    onClick: onPrimaryCtaClick,
+                    loading: isPrimaryCtaLoading,
+                    disabled: isPrimaryCtaDisabled,
+                    children: primaryCtaTitle
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+};
+
+export { CONFIRMATION_SUBTYPES, INFORMATION_SUBTYPES, INPUT_SUBTYPES, MODAL_CONFIGS, MODAL_SIZES, MODAL_SIZE_VS_CLASS_NAMES, MODAL_TYPES, SIZE_TO_MAX_WIDTH, TERTIARY_CTA_TYPES, ViDialog };

package/dist/index.d.ts

@@ -0,0 +1,125 @@
+import { Breakpoint } from '@mui/material';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+export declare interface BaseModalProps {
+    wrapperClassName?: string;
+    onClose: () => void;
+    open: boolean;
+    showCloseIcon?: boolean;
+    title?: string | React.ReactNode;
+    subTitle?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    children: React.ReactNode;
+    actions?: IActions;
+    showDivider?: boolean;
+    showActions?: boolean;
+}
+
+export declare const CONFIRMATION_SUBTYPES: {
+    readonly DEFAULT: "default";
+    readonly DESTRUCTIVE: "destructive";
+    readonly NESTED: "nested";
+};
+
+export declare interface ConfirmationModalProps extends BaseModalProps {
+    type: typeof MODAL_TYPES.CONFIRMATION;
+    subtype: (typeof CONFIRMATION_SUBTYPES)[keyof typeof CONFIRMATION_SUBTYPES];
+    size?: ModalSize;
+    tertiaryCtaType?: (typeof TERTIARY_CTA_TYPES)[keyof typeof TERTIARY_CTA_TYPES];
+}
+
+export declare type ConfirmationSubtype = (typeof CONFIRMATION_SUBTYPES)[keyof typeof CONFIRMATION_SUBTYPES];
+
+declare interface IActions {
+    primaryCtaTitle?: string;
+    secondaryCtaTitle?: string;
+    isPrimaryCtaLoading?: boolean;
+    isPrimaryCtaDisabled?: boolean;
+    isSecondaryCtaDisabled?: boolean;
+    onPrimaryCtaClick?: () => void;
+    onSecondaryCtaClick?: () => void;
+    tertiaryCtaTitle?: string;
+    tertiaryCtaStartIcon?: React.ReactNode;
+    isTertiaryCtaLoading?: boolean;
+    isTertiaryCtaDisabled?: boolean;
+    onTertiaryCtaClick?: () => void;
+}
+
+export declare const INFORMATION_SUBTYPES: {
+    readonly ACKNOWLEDGEMENT: "acknowledgement";
+    readonly PROGRESS: "progress";
+    readonly PASSIVE: "passive";
+};
+
+export declare interface InformationModalProps extends BaseModalProps {
+    type: typeof MODAL_TYPES.INFORMATION;
+    subtype: (typeof INFORMATION_SUBTYPES)[keyof typeof INFORMATION_SUBTYPES];
+    size?: ModalSize;
+    tertiaryCtaType?: (typeof TERTIARY_CTA_TYPES)[keyof typeof TERTIARY_CTA_TYPES];
+}
+
+export declare type InformationSubtype = (typeof INFORMATION_SUBTYPES)[keyof typeof INFORMATION_SUBTYPES];
+
+export declare const INPUT_SUBTYPES: {
+    readonly DEFAULT: "default";
+    readonly DESTRUCTIVE: "destructive";
+};
+
+export declare interface InputModalProps extends BaseModalProps {
+    type: typeof MODAL_TYPES.INPUT;
+    subtype: (typeof INPUT_SUBTYPES)[keyof typeof INPUT_SUBTYPES];
+    size?: ModalSize;
+    tertiaryCtaType?: (typeof TERTIARY_CTA_TYPES)[keyof typeof TERTIARY_CTA_TYPES];
+}
+
+export declare type InputSubtype = (typeof INPUT_SUBTYPES)[keyof typeof INPUT_SUBTYPES];
+
+export declare const MODAL_CONFIGS: Record<ModalType, ModalTypeConfig>;
+
+export declare const MODAL_SIZE_VS_CLASS_NAMES: {
+    small: string;
+    medium: string;
+    large: string;
+    extraLarge: string;
+};
+
+export declare const MODAL_SIZES: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+    readonly EXTRA_LARGE: "extraLarge";
+};
+
+export declare const MODAL_TYPES: {
+    readonly INFORMATION: "information";
+    readonly CONFIRMATION: "confirmation";
+    readonly INPUT: "input";
+};
+
+declare type ModalConfig = {
+    DISMISSIBLE: 'full' | 'partial';
+    ALLOWED_SIZES: ModalSize[];
+};
+
+declare type ModalProps = InformationModalProps | ConfirmationModalProps | InputModalProps;
+
+export declare type ModalSize = (typeof MODAL_SIZES)[keyof typeof MODAL_SIZES];
+
+export declare type ModalType = (typeof MODAL_TYPES)[keyof typeof MODAL_TYPES];
+
+declare type ModalTypeConfig = {
+    [subtype: string]: ModalConfig;
+};
+
+export declare const SIZE_TO_MAX_WIDTH: Record<ModalSize, Breakpoint>;
+
+export declare type SubtypeForType<T extends ModalType> = T extends typeof MODAL_TYPES.INFORMATION ? InformationSubtype : T extends typeof MODAL_TYPES.CONFIRMATION ? ConfirmationSubtype : T extends typeof MODAL_TYPES.INPUT ? InputSubtype : never;
+
+export declare const TERTIARY_CTA_TYPES: {
+    DEFAULT: string;
+    DESTRUCTIVE: string;
+};
+
+export declare const ViDialog: (props: ModalProps) => JSX_2.Element;
+
+export { }

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "mui-dialog",
+  "description": "A reusable dialog component for React applications built with Material-UI (MUI).",
+  "author": "Victor de la Fouchardiere <victor.delafouchardiere@gmail.com> (https://github.com/viclafouch)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/viplatform/mui-dialog/issues"
+  },
+  "homepage": "https://github.com/viplatform/mui-dialog#readme",
+  "version": "1.0.6",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/mui-dialog.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/mui-dialog.es.js",
+      "default": "./dist/mui-dialog.es.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/viplatform/mui-dialog.git"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "mui",
+    "javascript",
+    "material"
+  ],
+  "scripts": {
+    "build": "npm run lint && vite build",
+    "lint": "npx tsc --noEmit && eslint",
+    "lint:fix": "npm run lint --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "release": "standard-version",
+    "coverage": "vitest run --coverage",
+    "prepare": "husky",
+    "prepublishOnly": "npm run build"
+  },
+  "standard-version": {
+    "scripts": {
+      "prerelease": "npm run build"
+    },
+    "skip": {
+      "changelog": true
+    }
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^7.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^7.1.0",
+    "@mui/lab": "^7.0.0-beta.12",
+    "@mui/material": "^7.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^7.0.2",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/lodash": "^4.17.17",
+    "@types/node": "^22.14.1",
+    "@types/react-dom": "^19.1.5",
+    "@viclafouch/eslint-config-viclafouch": "4.22.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.24.0",
+    "husky": "^9.1.7",
+    "jsdom": "^26.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "sass-embedded": "^1.89.0",
+    "standard-version": "^9.5.0",
+    "storybook": "^8.6.12",
+    "terser": "^5.39.2",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.6",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.1.1"
+  }
+}