Split package into modules

package.json

@@ -14,6 +14,28 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.esm.js"
+    },
+    "./navigation": {
+      "types": "./dist/navigation.d.ts",
+      "require": "./dist/navigation.cjs.js",
+      "import": "./dist/navigation.esm.js"
+    },
+    "./themes": {
+      "types": "./dist/themes.d.ts",
+      "require": "./dist/themes.cjs.js",
+      "import": "./dist/themes.esm.js"
+    },
+    "./controls": {
+      "types": "./dist/controls.d.ts",
+      "require": "./dist/controls.cjs.js",
+      "import": "./dist/controls.esm.js"
+    }
+  },
   "scripts": {
     "build": "tsc -b && rollup --config rollup.config.mjs",
     "docs:build": "typedoc src",

rollup.config.mjs

@@ -10,35 +10,20 @@ import packageJson from "./package.json" with { type: "json" };
 
 export default [
   {
-    input: "src/index.ts",
-    output: {
-      format: "cjs",
-      file: packageJson.main,
-    },
-    plugins: [
-      peerDepsExternal({
-        includeDependencies: true,
-      }),
-      image(),
-      resolve(),
-      commonjs(),
-      terser(),
-      typescript({
-        tsconfig: "./tsconfig.json",
-        exclude: ["**/*.stories.*", "**/*.test.*"],
-      }),
-      postcss({
-        extensions: [".css"],
-      }),
+    input: ["src/index.ts", "src/navigation.ts", "src/themes.ts", "src/controls.ts"],
+    output: [
+      {
+        format: "cjs",
+        dir: "dist",
+        entryFileNames: "[name].cjs.js",
+      },
+      {
+        format: "esm",
+        sourcemap: true,
+        dir: "dist",
+        entryFileNames: "[name].esm.js",
+      },
     ],
-  },
-  {
-    input: "src/index.ts",
-    output: {
-      format: "esm",
-      sourcemap: true,
-      file: packageJson.module,
-    },
     plugins: [
       peerDepsExternal({
         includeDependencies: true,

src/components/controls/ColourSchemeButton.tsx

@@ -1,10 +1,8 @@
 import { useColorScheme, useTheme } from "@mui/material";
 import { IconButton, IconButtonProps } from "@mui/material";
 
-import {
-  LightMode as LightModeIcon,
-  Bedtime as BedtimeIcon,
-} from "@mui/icons-material";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import BedtimeIcon from "@mui/icons-material/Bedtime";
 
 import { ColourSchemes } from "../../utils/globals";
 

src/components/controls/ScrollableImages.tsx

@@ -1,11 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Box, Button, IconButton, Slider, Stack } from "@mui/material";
-import {
-  ArrowBack as ArrowBackIcon,
-  ArrowForward as ArrowForwardIcon,
-  ArrowBackIosNew as ArrowBackIosNewIcon,
-  ArrowForwardIos as ArrowForwardIosIcon,
-} from "@mui/icons-material";
+
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 
 import { extractFramesFromTiff, isTiff } from "../../utils/TiffUtils";
 

src/components/navigation/Breadcrumbs.tsx

@@ -6,10 +6,8 @@ import {
   styled,
   Typography,
 } from "@mui/material";
-import {
-  Home as HomeIcon,
-  NavigateNext as NavigateNextIcon,
-} from "@mui/icons-material";
+import HomeIcon from "@mui/icons-material/Home";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import { CustomLink } from "types/links";
 
 import { Bar, BarProps } from "../controls/Bar";

src/components/navigation/NavMenu.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { NavMenu, NavMenuLink } from "./NavMenu";
 import { Button, Divider, Typography } from "@mui/material";
-import { Autorenew } from "@mui/icons-material";
+import Autorenew from "@mui/icons-material/Autorenew";
 import { MockLink } from "../../utils/MockLink";
 
 const meta: Meta<typeof NavMenu> = {

src/components/navigation/NavMenu.tsx

@@ -8,7 +8,7 @@ import {
   type MenuItemProps,
 } from "@mui/material";
 import React, { useState, forwardRef, useId } from "react";
-import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { NavLink, NavLinkProps } from "./Navbar";
 
 type NavMenuLinkProps = MenuItemProps & NavLinkProps;

src/controls.ts

@@ -0,0 +1,10 @@
+export * from "./components/controls/AppTitlebar";
+export * from "./components/controls/Bar";
+export * from "./components/controls/ColourSchemeButton";
+export * from "./components/controls/ImageColourSchemeSwitch";
+export * from "./components/controls/Logo";
+export * from "./components/controls/Progress";
+export * from "./components/controls/ProgressDelayed";
+export * from "./components/controls/User";
+export * from "./components/controls/ScrollableImages";
+export * from "./components/controls/VisitInput";

src/navigation.ts

@@ -0,0 +1,4 @@
+export * from "./components/navigation/Breadcrumbs";
+export * from "./components/navigation/Footer";
+export * from "./components/navigation/Navbar";
+export * from "./components/navigation/NavMenu";

src/themes.ts

@@ -0,0 +1,6 @@
+export * from "./themes/BaseTheme";
+export * from "./themes/DiamondTheme";
+export * from "./themes/DiamondOldTheme";
+export * from "./themes/GenericTheme";
+export * from "./themes/ThemeProvider";
+export * from "./themes/ThemeManager";