Using exports to improve UX/DX

examples/nextjs/src/app/layout.tsx

@@ -1,6 +1,6 @@
 import "./styles.css";
 import "react18-loaders/dist/index.css";
-import { ServerTarget } from "nextjs-darkmode/dist/server";
+import { ServerTarget } from "nextjs-darkmode/server";
 import { Core } from "nextjs-darkmode";
 import { Layout } from "@repo/shared/dist/server";
 import { GlobalLoader, Header } from "@repo/shared";

examples/nextjs/src/app/styles.css

@@ -1,4 +1,4 @@
-@import "nextjs-darkmode/dist/index.css";
+@import "nextjs-darkmode/css";
 @import "@repo/shared/dist/global.css";
 @import "@repo/shared/dist";
 @import "react18-loaders/dist";

lib/package.json

@@ -15,6 +15,13 @@
   "files": [
     "dist/**"
   ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./switch": "./dist/client/switch/index.js",
+    "./server": "./dist/server/index.js",
+    "./hooks": "./dist/hooks/index.js",
+    "./css": "./dist/client/switch/index.css"
+  },
   "scripts": {
     "build": "tsup && tsc -p tsconfig-build.json",
     "clean": "rm -rf dist",
@@ -84,4 +91,4 @@
     "Modern",
     "Seamless integration"
   ]
-}
+}

lib/src/index.ts

@@ -1,3 +1,4 @@
 "use client";
 
 export * from "./client";
+export type { ColorSchemePreference, ResolvedScheme } from "./utils";

packages/shared/src/client/header/theme-switch.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { useMode } from "nextjs-darkmode/dist/hooks";
+import { useMode } from "nextjs-darkmode/hooks";
 import styles from "./header.module.scss";
-import { KeyboardEvent, useCallback } from "react";
-import { ColorSchemePreference } from "nextjs-darkmode/dist/utils";
-import { Switch } from "nextjs-darkmode";
+import { useCallback } from "react";
+import { ColorSchemePreference } from "nextjs-darkmode";
+import { Switch } from "nextjs-darkmode/switch";
 
 const modes: ColorSchemePreference[] = ["dark", "light", "system"];
 
@@ -16,21 +16,10 @@ export default function ThemeSwitch() {
     setMode(modes[(index + 1) % modes.length]);
   }, [mode]);
 
-  const onKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "Enter") toggle();
-    },
-    [toggle],
-  );
   return (
-    <div
-      tabIndex={0}
-      role="button"
-      className={styles.themeswitch}
-      onClick={toggle}
-      onKeyDown={onKeyDown}>
-      <Switch />
+    <button className={styles.themeswitch} onClick={toggle}>
+      <Switch tag="div" />
       <span className="mb">{mode}</span>
-    </div>
+    </button>
   );
 }

packages/shared/src/server/layout/layout.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 import styles from "./layout.module.scss";
 import { ForkMe } from "@mayank1513/fork-me/server";
 import config from "@repo/scripts/rebrand.config.json";
-import "nextjs-darkmode/dist/index.css";
+import "nextjs-darkmode/css";
 
 const { owner, repo } = config;
 interface LayoutProps {