@stratakit/mui 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.1.3
+
+- [#1150](https://github.com/iTwin/design-system/pull/1150): Added a new `/types.d.ts` file for augmenting the types from MUI. This file should be included in all projects that rely on `@stratakit/mui`.
+- [#1146](https://github.com/iTwin/design-system/pull/1146): Updated `Button` to use `variant="contained"` by default.
+
 ## 0.1.2
 
 - [#1137](https://github.com/iTwin/design-system/pull/1137): Updated `border-radius` of `IconButton` component.

package/README.md

@@ -14,6 +14,7 @@ Additional setup/considerations:
 
 - `@stratakit/mui` has a direct dependency on [`@stratakit/foundations`](https://www.npmjs.com/package/@stratakit/foundations) and [`@stratakit/icons`](https://www.npmjs.com/package/@stratakit/icons), the latter of which requires [bundler configuration](https://github.com/iTwin/design-system/tree/main/packages/icons#bundler-configuration) to ensure that `.svg` files are not inlined.
 - You should ensure that [StrataKit fonts](#fonts) are loaded in your application.
+- [`/types.d.ts`](#typescript) must be included in your project to ensure that the module augmentation for MUI components is picked up by TypeScript.
 - If you are trying to use this package alongside iTwinUI, you will also need to set up the [theme bridge](https://github.com/iTwin/iTwinUI/wiki/StrataKit-theme-bridge).
 
 ## Usage
@@ -78,6 +79,26 @@ Build tools such as [Vite](https://vite.dev/guide/assets.html#importing-asset-as
 > [!NOTE]
 > If the `<Root>` component cannot find `InterVariable` as a font in the document, it will automatically add a fallback which uses [Inter’s CDN](https://rsms.me/inter/#faq-cdn). In all cases, we recommend self-hosting to avoid any potential security and reliability issues that may arise from the use of a third-party CDN.
 
+## TypeScript
+
+`@stratakit/mui` uses [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) to modify the props of certain MUI components (for example, to change default prop values). To ensure that these changes are picked up by TypeScript, you must include the `@stratakit/mui/types.d.ts` file in your project.
+
+The preferred way to include `types.d.ts` is to add it to the [`types` array](https://www.typescriptlang.org/tsconfig/#types) in your project's `tsconfig.json`:
+
+```json
+{
+	"compilerOptions": {
+		"types": ["@stratakit/mui/types.d.ts"]
+	}
+}
+```
+
+Alternatively, if your project relies on the implicit inclusion of visible `@types` packages, then you can instead add a reference to `types.d.ts` using a [triple-slash directive](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) in a global declaration file in your project (e.g. in `src/env.d.ts`):
+
+```ts
+/// <reference types="@stratakit/mui/types.d.ts" />
+```
+
 ## Contributing
 
 Are you interested in helping StrataKit grow? You can submit feature requests or bugs by creating [issues](https://github.com/iTwin/design-system/issues).

package/dist/DEV/Root.js

@@ -15,7 +15,7 @@ import { createTheme } from "./createTheme.js";
 import css from "./styles.css.js";
 const theme = createTheme();
 const packageName = "@stratakit/mui";
-const key = `${packageName}@${"0.1.2"}`;
+const key = `${packageName}@${"0.1.3"}`;
 const Root = React.forwardRef(
   (props, forwardedRef) => {
     const { children, colorScheme, ...rest } = props;
@@ -57,7 +57,7 @@ DEV: ColorScheme.displayName = "ColorScheme";
 function Styles() {
   const rootContext = useSafeContext(RootContext);
   if (!rootContext.versions?.has(packageName))
-    rootContext.versions?.set(packageName, "0.1.2");
+    rootContext.versions?.set(packageName, "0.1.3");
   const { rootNode, loadStyles } = rootContext;
   React.useInsertionEffect(() => {
     if (!rootNode || !loadStyles) return;

package/dist/DEV/createTheme.js

@@ -15,6 +15,19 @@ import {
   WarningIcon
 } from "./Icon.js";
 function createTheme() {
+  const palette = {
+    primary: { main: "var(--stratakit-mui-palette-primary-main)" },
+    secondary: { main: "var(--stratakit-mui-palette-secondary-main)" },
+    error: { main: "var(--stratakit-mui-palette-error-main)" },
+    warning: { main: "var(--stratakit-mui-palette-warning-main)" },
+    info: { main: "var(--stratakit-mui-palette-info-main)" },
+    success: { main: "var(--stratakit-mui-palette-success-main)" },
+    grey: Object.fromEntries(
+      ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"].map(
+        (shade) => [shade, `var(--stratakit-mui-palette-grey-${shade})`]
+      )
+    )
+  };
   return createMuiTheme({
     cssVariables: {
       nativeColor: true,
@@ -22,8 +35,8 @@ function createTheme() {
       cssVarPrefix: "stratakit-mui"
     },
     colorSchemes: {
-      light: true,
-      dark: true
+      light: { palette },
+      dark: { palette }
     },
     typography: {
       fontFamily: "var(--stratakit-font-family-sans)",
@@ -89,7 +102,8 @@ function createTheme() {
       },
       MuiButton: {
         defaultProps: {
-          color: "secondary"
+          color: "secondary",
+          variant: "contained"
         }
       },
       MuiChip: {

package/dist/Root.js

@@ -9,7 +9,7 @@ import { createTheme } from "./createTheme.js";
 import css from "./styles.css.js";
 const theme = createTheme();
 const packageName = "@stratakit/mui";
-const key = `${packageName}@${"0.1.2"}`;
+const key = `${packageName}@${"0.1.3"}`;
 const Root = React.forwardRef((props, forwardedRef) => {
   const {
     children,
@@ -77,7 +77,7 @@ function Styles() {
   const $ = _c(4);
   const rootContext = useSafeContext(RootContext);
   if (!rootContext.versions?.has(packageName)) {
-    rootContext.versions?.set(packageName, "0.1.2");
+    rootContext.versions?.set(packageName, "0.1.3");
   }
   const {
     rootNode,

package/dist/createTheme.js

@@ -2,6 +2,27 @@ import { jsx } from "react/jsx-runtime";
 import { createTheme as createMuiTheme } from "@mui/material/styles";
 import { ArrowDownIcon, CaretsUpDownIcon, ChevronDownIcon, ChevronLeftDoubleIcon, ChevronLeftIcon, ChevronRightDoubleIcon, ChevronRightIcon, DismissIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "./Icon.js";
 function createTheme() {
+  const palette = {
+    primary: {
+      main: "var(--stratakit-mui-palette-primary-main)"
+    },
+    secondary: {
+      main: "var(--stratakit-mui-palette-secondary-main)"
+    },
+    error: {
+      main: "var(--stratakit-mui-palette-error-main)"
+    },
+    warning: {
+      main: "var(--stratakit-mui-palette-warning-main)"
+    },
+    info: {
+      main: "var(--stratakit-mui-palette-info-main)"
+    },
+    success: {
+      main: "var(--stratakit-mui-palette-success-main)"
+    },
+    grey: Object.fromEntries(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"].map((shade) => [shade, `var(--stratakit-mui-palette-grey-${shade})`]))
+  };
   return createMuiTheme({
     cssVariables: {
       nativeColor: true,
@@ -9,8 +30,12 @@ function createTheme() {
       cssVarPrefix: "stratakit-mui"
     },
     colorSchemes: {
-      light: true,
-      dark: true
+      light: {
+        palette
+      },
+      dark: {
+        palette
+      }
     },
     typography: {
       fontFamily: "var(--stratakit-font-family-sans)",
@@ -76,7 +101,8 @@ function createTheme() {
       },
       MuiButton: {
         defaultProps: {
-          color: "secondary"
+          color: "secondary",
+          variant: "contained"
         }
       },
       MuiChip: {

package/dist/types.d.ts

@@ -0,0 +1,11 @@
+import "@mui/material/Button";
+declare module "@mui/material/Button" {
+    interface ButtonOwnProps {
+        /**
+         * The default variant with `@stratakit/mui` is `"contained"`.
+         *
+         * @default 'contained'
+         */
+        variant?: "contained" | "outlined" | "text";
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stratakit/mui",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "MIT",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
@@ -12,6 +12,11 @@
       "development": "./dist/DEV/index.js",
       "default": "./dist/index.js"
     },
+    "./types.d.ts": {
+      "@stratakit/source": "./src/types.d.ts",
+      "types": "./dist/types.d.ts",
+      "default": "./dist/types.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -49,8 +54,8 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "esbuild": "^0.27.0",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {