@stratakit/mui 0.4.2 → 0.5.1

package/dist/~createTheme.d.ts

@@ -1,3 +1,6 @@
+interface CreateThemeArgs {
+    portalContainer?: HTMLElement | null;
+}
 /** Creates a StrataKit theme for MUI. Should be used with MUI's `ThemeProvider`. */
-declare function createTheme(): import("@mui/material/styles").Theme;
+declare function createTheme(args: CreateThemeArgs): import("@mui/material/styles").Theme;
 export { createTheme };

package/dist/~createTheme.js

@@ -5,23 +5,31 @@ import OutlinedInput from "@mui/material/OutlinedInput";
 import StepConnector from "@mui/material/StepConnector";
 import { createTheme as createMuiTheme } from "@mui/material/styles";
 import cx from "classnames";
-import { MuiAutocomplete } from "./~components/MuiAutocomplete.js";
+import { MuiAccordionRootSlot, MuiAccordionSummary } from "./~components/MuiAccordion.js";
+import { MuiAlert, MuiAlertTitle } from "./~components/MuiAlert.js";
+import { MuiAutocomplete, MuiAutocompleteChip, MuiAutocompleteChipDeleteIcon, MuiAutocompleteClearIndicator } from "./~components/MuiAutocomplete.js";
 import { MuiAvatarGroup } from "./~components/MuiAvatarGroup.js";
-import { MuiBadge } from "./~components/MuiBadge.js";
+import { MuiBadge, MuiBadgeBadge } from "./~components/MuiBadge.js";
 import { MuiBottomNavigationAction } from "./~components/MuiBottomNavigation.js";
 import { MuiButtonBase } from "./~components/MuiButtonBase.js";
-import { MuiCard, MuiCardActionArea, MuiCardMedia } from "./~components/MuiCard.js";
+import { MuiCard, MuiCardActionArea, MuiCardHeaderTitle, MuiCardMedia } from "./~components/MuiCard.js";
 import { MuiChip, MuiChipDeleteIcon, MuiChipLabel } from "./~components/MuiChip.js";
 import { MuiDivider } from "./~components/MuiDivider.js";
 import { MuiIconButton } from "./~components/MuiIconButton.js";
 import { MuiInputLabel } from "./~components/MuiInputLabel.js";
+import { MuiMenuListSlot } from "./~components/MuiMenu.js";
+import { MuiPopoverPaperSlot } from "./~components/MuiPopover.js";
 import { MuiSnackbar } from "./~components/MuiSnackbar.js";
 import { MuiStepIcon } from "./~components/MuiStepper.js";
 import { MuiTableBody, MuiTableCell, MuiTableHead } from "./~components/MuiTable.js";
+import { MuiTab, MuiTabs } from "./~components/MuiTabs.js";
 import { MuiToggleButton } from "./~components/MuiToggleButton.js";
-import { MuiTypography } from "./~components/MuiTypography.js";
+import { MuiTypography, variantMapping } from "./~components/MuiTypography.js";
 import { ArrowDownIcon, CaretsUpDownIcon, ChevronDownIcon, ChevronLeftDoubleIcon, ChevronLeftIcon, ChevronRightDoubleIcon, ChevronRightIcon, DismissIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "./Icon.js";
-function createTheme() {
+function createTheme(args) {
+  const {
+    portalContainer: container
+  } = args;
   const palette = {
     primary: {
       main: "var(--stratakit-mui-palette-primary-main)"
@@ -72,31 +80,35 @@ function createTheme() {
         fontSize: 14
       },
       h1: {
-        fontSize: 48
+        fontSize: 20
       },
       h2: {
-        fontSize: 40
+        fontSize: 18
       },
       h3: {
-        fontSize: 32
+        fontSize: 16
       },
       h4: {
-        fontSize: 28
+        fontSize: 14
       },
       h5: {
-        fontSize: 24
+        fontSize: 12
       },
       h6: {
-        fontSize: 20
+        fontSize: 12
       },
       caption: {
         fontSize: 12
       },
+      overline: {
+        fontSize: 12,
+        textTransform: "none"
+      },
       subtitle1: {
-        fontSize: 12
+        fontSize: 16
       },
       subtitle2: {
-        fontSize: 11
+        fontSize: 14
       }
     },
     shadows: [
@@ -123,6 +135,10 @@ function createTheme() {
       MuiAccordion: {
         defaultProps: {
           component: Role.div,
+          disableGutters: true,
+          slots: {
+            root: MuiAccordionRootSlot
+          },
           slotProps: {
             region: {
               role: void 0,
@@ -133,26 +149,34 @@ function createTheme() {
       },
       MuiAccordionSummary: {
         defaultProps: {
-          component: Role.div,
+          component: MuiAccordionSummary,
           nativeButton: false,
           expandIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {})
         }
       },
       MuiAlert: {
         defaultProps: {
-          component: Role.div,
+          component: MuiAlert,
           variant: "outlined",
+          severity: "none",
+          role: "group",
+          // Overriding role="alert".
           iconMapping: {
             error: /* @__PURE__ */ jsx(ErrorIcon, {}),
             info: /* @__PURE__ */ jsx(InfoIcon, {}),
             success: /* @__PURE__ */ jsx(SuccessIcon, {}),
             warning: /* @__PURE__ */ jsx(WarningIcon, {})
+          },
+          slotProps: {
+            closeButton: {
+              edge: "end"
+            }
           }
         }
       },
       MuiAlertTitle: {
         defaultProps: {
-          component: Role.div
+          component: MuiAlertTitle
         }
       },
       MuiAutocomplete: {
@@ -165,6 +189,7 @@ function createTheme() {
           }, option, _, ownerState) => /* @__PURE__ */ jsx("li", {
             ...props,
             className: cx("MuiMenuItem-root", props.className),
+            "data-_sk-dense": ownerState.size === "small" ? "" : void 0,
             children: ownerState.getOptionLabel(option)
           }, key),
           slotProps: {
@@ -176,9 +201,12 @@ function createTheme() {
               // match Menu elevation
             },
             chip: {
-              size: "small"
+              size: "small",
+              component: MuiAutocompleteChip,
+              deleteIcon: /* @__PURE__ */ jsx(MuiAutocompleteChipDeleteIcon, {})
             },
             clearIndicator: {
+              component: MuiAutocompleteClearIndicator,
               tabIndex: 0,
               // make clear indicator focusable
               size: "small"
@@ -223,7 +251,12 @@ function createTheme() {
       MuiBadge: {
         defaultProps: {
           component: MuiBadge,
-          color: "secondary"
+          color: "secondary",
+          slotProps: {
+            badge: {
+              component: MuiBadgeBadge
+            }
+          }
         }
       },
       MuiBottomNavigation: {
@@ -266,12 +299,16 @@ function createTheme() {
       },
       MuiCard: {
         defaultProps: {
-          component: MuiCard
+          component: MuiCard,
+          variant: "outlined"
         }
       },
       MuiCardActionArea: {
         defaultProps: {
-          component: MuiCardActionArea
+          component: MuiCardActionArea,
+          slots: {
+            focusHighlight: Nothing
+          }
         }
       },
       MuiCardContent: {
@@ -285,7 +322,7 @@ function createTheme() {
           slotProps: {
             title: {
               // biome-ignore lint/suspicious/noExplicitAny: MUI's CardHeader.title.component is hardcoded to "span"
-              component: Role.h2
+              component: MuiCardHeaderTitle
             }
           }
         }
@@ -334,7 +371,8 @@ function createTheme() {
       },
       MuiDialogTitle: {
         defaultProps: {
-          component: Role.h2
+          component: Role.h2,
+          variant: "body-lg"
         }
       },
       MuiDivider: {
@@ -410,50 +448,7 @@ function createTheme() {
         defaultProps: {
           component: Role.a,
           color: "textPrimary"
-        },
-        variants: [{
-          props: {
-            color: "primary"
-          },
-          style: {
-            color: "var(--stratakit-color-text-accent-strong)"
-          }
-        }, {
-          props: {
-            color: "secondary"
-          },
-          style: {
-            color: "var(--stratakit-color-text-neutral-primary)"
-          }
-        }, {
-          props: {
-            color: "error"
-          },
-          style: {
-            color: "var(--stratakit-color-text-critical-base)"
-          }
-        }, {
-          props: {
-            color: "info"
-          },
-          style: {
-            color: "var(--stratakit-color-text-info-base)"
-          }
-        }, {
-          props: {
-            color: "success"
-          },
-          style: {
-            color: "var(--stratakit-color-text-positive-base)"
-          }
-        }, {
-          props: {
-            color: "warning"
-          },
-          style: {
-            color: "var(--stratakit-color-text-attention-base)"
-          }
-        }]
+        }
       },
       MuiList: {
         defaultProps: {
@@ -488,6 +483,9 @@ function createTheme() {
       MuiMenu: {
         defaultProps: {
           component: Role.div,
+          slots: {
+            list: MuiMenuListSlot
+          },
           slotProps: {
             paper: {
               role: "presentation"
@@ -513,7 +511,8 @@ function createTheme() {
       },
       MuiModal: {
         defaultProps: {
-          component: Role.div
+          component: Role.div,
+          container
         }
       },
       MuiOutlinedInput: {
@@ -547,6 +546,12 @@ function createTheme() {
       MuiPopover: {
         defaultProps: {
           component: Role.div,
+          disableScrollLock: true,
+          // Popover passes down `container` prop to `Modal` https://github.com/mui/material-ui/blob/708ef10e874efa63d2e4972bd902befa1912f2dc/packages/mui-material/src/Popover/Popover.js#L389
+          container,
+          slots: {
+            paper: MuiPopoverPaperSlot
+          },
           slotProps: {
             paper: {
               role: "dialog"
@@ -554,6 +559,11 @@ function createTheme() {
           }
         }
       },
+      MuiPopper: {
+        defaultProps: {
+          container
+        }
+      },
       MuiRadio: {
         defaultProps: {
           component: Role.span,
@@ -656,7 +666,25 @@ function createTheme() {
       },
       MuiTabs: {
         defaultProps: {
-          component: Role.div
+          component: MuiTabs,
+          allowScrollButtonsMobile: true,
+          slotProps: {
+            scrollButtons: {
+              "aria-hidden": true
+            },
+            startScrollButtonIcon: {
+              component: ChevronLeftIcon
+            },
+            endScrollButtonIcon: {
+              component: ChevronRightIcon
+            }
+          }
+        }
+      },
+      MuiTab: {
+        defaultProps: {
+          component: MuiTab,
+          iconPosition: "start"
         }
       },
       MuiTable: {
@@ -756,9 +784,60 @@ function createTheme() {
       },
       MuiTypography: {
         defaultProps: {
-          variant: "body2",
+          variant: "inherit",
+          variantMapping,
           component: MuiTypography
-        }
+        },
+        variants: [{
+          props: {
+            color: "primary"
+          },
+          style: {
+            color: "var(--stratakit-color-text-accent-strong)"
+          }
+        }, {
+          props: {
+            color: "secondary"
+          },
+          style: {
+            color: "var(--stratakit-color-text-neutral-primary)"
+          }
+        }, {
+          props: {
+            color: "textTertiary"
+          },
+          style: {
+            color: "var(--stratakit-color-text-neutral-tertiary)"
+          }
+        }, {
+          props: {
+            color: "error"
+          },
+          style: {
+            color: "var(--stratakit-color-text-critical-base)"
+          }
+        }, {
+          props: {
+            color: "info"
+          },
+          style: {
+            color: "var(--stratakit-color-text-info-base)"
+          }
+        }, {
+          props: {
+            color: "success"
+          },
+          style: {
+            color: "var(--stratakit-color-text-positive-base)"
+          }
+        }, {
+          props: {
+            color: "warning"
+          },
+          style: {
+            color: "var(--stratakit-color-text-attention-base)"
+          }
+        }]
       }
     }
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stratakit/mui",
   "type": "module",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "license": "MIT",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
@@ -45,21 +45,21 @@
     "design system"
   ],
   "dependencies": {
-    "@ariakit/react": "^0.4.25",
+    "@ariakit/react": "^0.4.29",
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@stratakit/foundations": "^0.4.8",
-    "@stratakit/icons": "^0.3.2",
+    "@stratakit/foundations": "^0.4.9",
+    "@stratakit/icons": "^0.4.1",
     "classnames": "^2.5.1",
     "react-compiler-runtime": "^1.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
-    "esbuild": "^0.27.7",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "esbuild": "^0.28.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "typescript": "~6.0.3"
   },
   "peerDependencies": {