fix: export module augmentation for consuming applications (#8)

package.json

@@ -16,7 +16,8 @@
     "typecheck": "tsc --noEmit",
     "build:esm": "tsc",
     "build:cjs": "tsc --module commonjs --outDir dist/cjs",
-    "build": "rm -rf dist && rm -f .tsbuildinfo && npm run build:esm && npm run build:cjs",
+    "build:type-augmentation": "cp -r src/type-augmentation dist/type-augmentation",
+    "build": "rm -rf dist && rm -f .tsbuildinfo && npm run build:esm && npm run build:cjs && npm run build:type-augmentation",
     "lint-check": "eslint src/ .storybook/",
     "lint-fix": "yarn lint-check --fix",
     "fmt-check": "prettier --ignore-path .gitignore --ignore-path .prettierignore --check .",
@@ -37,6 +38,11 @@
         "types": "./dist/esm/index.d.ts",
         "default": "./dist/esm/index.js"
       }
+    },
+    "./type-augmentation": {
+      "import": "./dist/type-augmentation/index.d.ts",
+      "require": "./dist/type-augmentation/index.d.ts",
+      "default": "./dist/type-augmentation/index.d.ts"
     }
   },
   "dependencies": {

src/components/ThemeProvider/ThemeProvider.tsx

@@ -9,7 +9,6 @@ import * as typography from "./typography"
 import * as buttons from "./buttons"
 import * as chips from "./chips"
 import { colors } from "./colors"
-import type { CustomTheme } from "../../types/theme"
 
 const shadow = {
   shadowOffsetX: 3,
@@ -94,10 +93,6 @@ const defaultThemeOptions: ThemeOptions = {
   },
 }
 
-type ExtendedTheme = Theme & {
-  custom: CustomTheme
-}
-
 /**
  * Create a customized Smoot Design theme for use with `ThemeProvider`.
  *
@@ -106,7 +101,7 @@ type ExtendedTheme = Theme & {
  */
 const createTheme = (options?: {
   custom: Partial<ThemeOptions["custom"]>
-}): ExtendedTheme =>
+}): Theme =>
   muiCreateTheme({
     ...defaultThemeOptions,
     custom: {

src/index.ts

@@ -1,6 +1,4 @@
 "use client"
-/// <reference types="./types/theme.d.ts" />
-/// <reference types="./types/typography.d.ts" />
 
 export { default as styled } from "@emotion/styled"
 export { css, Global } from "@emotion/react"

src/type-augmentation/TypescriptDocs.mdx

@@ -0,0 +1,17 @@
+import { Meta } from "@storybook/blocks"
+
+<Meta title="Smoot-Design/Typescript" />
+
+# Type Augmentation
+
+Smoot Design uses Typescript's module augmentation to enhance types provided by `@emotion` and `@mui` packages. For example, we add custom theme properties (`theme.custom`) to the default theme and add new properties / values to some MUI components.
+
+To enable this module augmentation in a consuming application or library, either:
+
+- **Method 1:** `"@mitodl/smoot-design/type-augmentation"` to the `"types"` array in the `tsconfig.json` file, or
+- **Method 2:** add `import "@mitodl/smoot-design/type-augmentation";` to a `global.d.ts` file.
+
+For more information on this subject, see:
+
+- TS Documenation: [Declaration Merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)
+- MUI Documentation: [Theming/Typescript](https://mui.com/material-ui/customization/theming/#typescript)

src/type-augmentation/index.d.ts

@@ -0,0 +1,2 @@
+import "./theme"
+import "./typography"

src/types/theme.d.ts → src/type-augmentation/theme.d.ts

@@ -1,15 +1,14 @@
 import type { Theme as MuiTheme } from "@mui/material/styles"
 import "@emotion/react"
 import "@emotion/styled"
-import "./typography"
 
 export interface ColorGroup {
   main: string
   highlight: string
   contrastText: string
 }
 
-interface CustomTheme {
+export interface CustomTheme {
   transitionDuration: string
   shadow: string
   colors: {