@xyhp915/slack-base-ui 0.0.12 → 0.0.14

package/libs/theme.d.ts

@@ -0,0 +1,3 @@
+export { ThemeContext, ThemeProvider, type Theme, type ThemeColor, type ThemeContextType, } from './context/ThemeContext';
+export { useTheme } from './context/useTheme';
+//# sourceMappingURL=theme.d.ts.map

package/libs/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,aAAa,EACb,KAAK,KAAK,EACV,KAAK,UAAU,EACf,KAAK,gBAAgB,GACtB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA"}

package/libs/theme.js

@@ -0,0 +1,2 @@
+import { n as e, r as t, t as n } from "./useTheme-P7tC1A4a.js";
+export { e as ThemeContext, t as ThemeProvider, n as useTheme };

package/libs/useTheme-P7tC1A4a.js

@@ -0,0 +1,26 @@
+import { createContext as e, useContext as t, useEffect as n, useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/context/ThemeContext.tsx
+var a = e(void 0), o = ({ children: e }) => {
+	let [t, o] = r(() => localStorage.getItem("theme") || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")), [s, c] = r(() => localStorage.getItem("themeColor") || "slack");
+	return n(() => {
+		let e = window.document.documentElement;
+		e.classList.remove("light", "dark"), e.classList.add(t), e.setAttribute("data-theme-color", s), localStorage.setItem("theme", t), localStorage.setItem("themeColor", s);
+	}, [t, s]), /* @__PURE__ */ i(a.Provider, {
+		value: {
+			theme: t,
+			themeColor: s,
+			toggleTheme: () => {
+				o((e) => e === "light" ? "dark" : "light");
+			},
+			setThemeColor: c
+		},
+		children: e
+	});
+}, s = () => {
+	let e = t(a);
+	if (e === void 0) throw Error("useTheme must be used within a ThemeProvider");
+	return e;
+};
+//#endregion
+export { a as n, o as r, s as t };

package/package.json

@@ -1,9 +1,32 @@
 {
   "name": "@xyhp915/slack-base-ui",
   "main": "libs/index.js",
+  "module": "libs/index.js",
   "types": "libs/index.d.ts",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
+  "exports": {
+    ".": {
+      "types": "./libs/index.d.ts",
+      "import": "./libs/index.js",
+      "default": "./libs/index.js"
+    },
+    "./theme": {
+      "types": "./libs/theme.d.ts",
+      "import": "./libs/theme.js",
+      "default": "./libs/theme.js"
+    },
+    "./src/context/ThemeContext.tsx": {
+      "types": "./libs/theme.d.ts",
+      "import": "./libs/theme.js",
+      "default": "./libs/theme.js"
+    },
+    "./src/context/useTheme.ts": {
+      "types": "./libs/theme.d.ts",
+      "import": "./libs/theme.js",
+      "default": "./libs/theme.js"
+    }
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",

package/src/context/ThemeContext.tsx

@@ -1,9 +1,9 @@
 import React, { createContext, useEffect, useState } from 'react';
 
-type Theme = 'light' | 'dark';
-type ThemeColor = 'slack' | 'blue' | 'green' | 'aubergine';
+export type Theme = 'light' | 'dark';
+export type ThemeColor = 'slack' | 'blue' | 'green' | 'aubergine';
 
-interface ThemeContextType {
+export interface ThemeContextType {
     theme: Theme;
     themeColor: ThemeColor;
     toggleTheme: () => void;

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components'
+export { ThemeContext, ThemeProvider } from './context/ThemeContext'
+export { useTheme } from './context/useTheme'

package/src/theme.ts

@@ -0,0 +1,8 @@
+export {
+  ThemeContext,
+  ThemeProvider,
+  type Theme,
+  type ThemeColor,
+  type ThemeContextType,
+} from './context/ThemeContext'
+export { useTheme } from './context/useTheme'

package/tsconfig.libs.json

@@ -14,12 +14,17 @@
     "emitDeclarationOnly": true,
 
     "outDir": "libs",
-    "rootDir": "src/components",
+    "rootDir": "src",
 
     "stripInternal": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true
   },
-  "include": ["src/components/index.ts", "src/components/**/*"]
+  "include": [
+    "src/index.ts",
+    "src/theme.ts",
+    "src/components/**/*",
+    "src/context/**/*"
+  ]
 }
 

package/vite.libs.config.ts

@@ -1,8 +1,6 @@
 // @ts-ignore
 import { defineConfig } from 'vite'
 // @ts-ignore
-import { esmExternalRequirePlugin } from 'rolldown/plugins'
-// @ts-ignore
 import react from '@vitejs/plugin-react'
 // @ts-ignore
 import tailwindcss from '@tailwindcss/vite'
@@ -14,25 +12,29 @@ import { resolve } from 'node:path'
  * Entrypoint: src/index.ts
  */
 export default defineConfig({
-  plugins: [
-    react(),
-    tailwindcss(),
-    esmExternalRequirePlugin(),
-  ],
+  plugins: [react(), tailwindcss()],
   build: {
     outDir: 'libs',
     emptyOutDir: false,
     lib: {
-      entry: resolve(__dirname, 'src/components/index.ts'),
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+        theme: resolve(__dirname, 'src/theme.ts'),
+      },
       name: 'ViteSlackBaseUI',
       formats: ['es'],
-      fileName: () => 'index.js',
+      fileName: (_, entryName) => `${entryName}.js`,
     },
     rollupOptions: {
-      // Don't bundle peer deps; consumers provide these.
-      external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'],
+      // Keep React/Base UI/icon libraries external so the published ESM bundle
+      // doesn't inline CommonJS shims that call `require(...)` in the browser.
+      external: (id) =>
+        /^react(?:\/.*)?$/.test(id) ||
+        /^react-dom(?:\/.*)?$/.test(id) ||
+        /^@base-ui\/react(?:\/.*)?$/.test(id) ||
+        /^lucide-react(?:\/.*)?$/.test(id),
       output: {
-        // Keep React as external. (Format is ESM, so globals aren't required.)
+        // Format is ESM, so globals aren't required.
         exports: 'named',
       },
     },