@busiverse/ui 0.2.11 → 0.2.13

package/README.md

@@ -277,3 +277,19 @@ The frontend should not duplicate BUSIVERSE brand assets in `public/`; brand ass
 ## Theme contract
 
 `@busiverse/ui@0.2.10` owns the shared BUSIVERSE light/dark CSS contract. Apps should place `light` or `dark` on `document.documentElement`; `system` mode should resolve to one of those classes. Do not hard-code `className="dark ..."` on page wrappers, because it prevents light mode from working.
+
+## BUSIVERSE theme contract
+
+This frontend uses the shared BUSIVERSE theme contract from `@busiverse/ui`.
+
+- Theme choices are `light`, `dark`, and `system`.
+- The shared storage key is `busiverse-theme`.
+- The DOM theme class is owned by `next-themes` through `attribute="class"`.
+- App pages must not hard-code `className="dark ..."` wrappers.
+- `vite.config.ts` must keep `loadEnv`; do not remove it while adding build or chunking improvements.
+- Existing `VITE_*` environment variable names must not be renamed without approval.
+
+
+## Theme contract
+
+Use `BusiverseThemeProvider` from `@busiverse/ui/theme` in every separately deployed frontend. The only approved storage key is `busiverse-theme`, and every app must expose Light, Dark, and System through `ThemeModeSelect`. Do not create per-frontend theme storage keys or binary-only toggles.

package/dist/chunk-UWSNRCQW.js

@@ -0,0 +1,89 @@
+import {
+  cn
+} from "./chunk-PYZVP4NI.js";
+
+// src/theme/BusiverseThemeProvider.tsx
+import { ThemeProvider } from "next-themes";
+import { jsx } from "react/jsx-runtime";
+var BUSIVERSE_THEME_STORAGE_KEY = "busiverse-theme";
+function BusiverseThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = BUSIVERSE_THEME_STORAGE_KEY,
+  enableSystem = true,
+  disableTransitionOnChange = true
+}) {
+  return /* @__PURE__ */ jsx(
+    ThemeProvider,
+    {
+      attribute: "class",
+      defaultTheme,
+      enableSystem,
+      storageKey,
+      disableTransitionOnChange,
+      children
+    }
+  );
+}
+
+// src/theme/ThemeModeSelect.tsx
+import { useTheme } from "next-themes";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var MODES = [
+  {
+    value: "light",
+    label: "Light",
+    title: "Use light mode",
+    icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "4" }),
+      /* @__PURE__ */ jsx2("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" })
+    ] })
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    title: "Use dark mode",
+    icon: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("path", { d: "M20.99 12.43A8.5 8.5 0 1 1 11.57 3a6.5 6.5 0 0 0 9.42 9.43Z" }) })
+  },
+  {
+    value: "system",
+    label: "System",
+    title: "Follow system theme",
+    icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx2("rect", { x: "3", y: "4", width: "18", height: "12", rx: "2" }),
+      /* @__PURE__ */ jsx2("path", { d: "M8 20h8M12 16v4" })
+    ] })
+  }
+];
+function ThemeModeSelect({ className, buttonClassName, label = "Theme", compact = false }) {
+  const { theme = "system", setTheme, resolvedTheme } = useTheme();
+  const currentMode = theme === "light" || theme === "dark" || theme === "system" ? theme : "system";
+  return /* @__PURE__ */ jsxs("div", { className: cn("busiverse-theme-mode-select", className), role: "group", "aria-label": label, "data-theme-mode": currentMode, "data-resolved-theme": resolvedTheme ?? currentMode, children: [
+    !compact && /* @__PURE__ */ jsx2("span", { className: "busiverse-theme-mode-label", children: label }),
+    /* @__PURE__ */ jsx2("div", { className: "busiverse-theme-mode-options", children: MODES.map((mode) => {
+      const active = currentMode === mode.value;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          title: mode.title,
+          "aria-pressed": active,
+          className: cn("busiverse-theme-mode-button", { "is-active": active }, buttonClassName),
+          onClick: () => setTheme(mode.value),
+          children: [
+            mode.icon,
+            !compact && /* @__PURE__ */ jsx2("span", { children: mode.label }),
+            compact && /* @__PURE__ */ jsx2("span", { className: "busiverse-sr-only", children: mode.label })
+          ]
+        },
+        mode.value
+      );
+    }) })
+  ] });
+}
+
+export {
+  BUSIVERSE_THEME_STORAGE_KEY,
+  BusiverseThemeProvider,
+  ThemeModeSelect
+};

package/dist/index.d.ts

@@ -7,4 +7,5 @@ export * from "./api";
 export * from "./auth";
 export * from "./i18n";
 export * from "./utils/cn";
+export * from "./theme";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAE3B,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -1,3 +1,8 @@
+import {
+  BUSIVERSE_THEME_STORAGE_KEY,
+  BusiverseThemeProvider,
+  ThemeModeSelect
+} from "./chunk-UWSNRCQW.js";
 import {
   Badge,
   Card,
@@ -345,6 +350,7 @@ function UserMenu() {
 export {
   AppShell,
   AuthSessionProvider,
+  BUSIVERSE_THEME_STORAGE_KEY,
   Badge,
   BusiverseBrandHead,
   BusiverseGithubIcon,
@@ -353,6 +359,7 @@ export {
   BusiverseLogo,
   BusiverseMailIcon,
   BusiverseSocialIcon,
+  BusiverseThemeProvider,
   BusiverseXIcon,
   Button,
   Card,
@@ -383,6 +390,7 @@ export {
   StatCard,
   StatusPill,
   Textarea,
+  ThemeModeSelect,
   TimeSeriesTable,
   UsageQuotaBar,
   UserMenu,

package/dist/styles.css

@@ -487,3 +487,60 @@ img, svg { max-width: 100%; display: block; }
 .light .bg-slate-950,
 .light .bg-slate-900,
 .light .bg-\[hsl\(var\(--base-bg\)\)\] { background-color: hsl(var(--background)) !important; }
+
+.busiverse-theme-mode-select {
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
+  color: hsl(var(--foreground));
+}
+.busiverse-theme-mode-label {
+  font-size: .75rem;
+  font-weight: 600;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: hsl(var(--muted-foreground));
+}
+.busiverse-theme-mode-options {
+  display: inline-flex;
+  align-items: center;
+  gap: .25rem;
+  border-radius: 9999px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card) / .72);
+  padding: .25rem;
+  backdrop-filter: blur(16px);
+}
+.busiverse-theme-mode-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .375rem;
+  min-height: 2rem;
+  border-radius: 9999px;
+  border: 0;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  padding: .375rem .625rem;
+  font: inherit;
+  font-size: .8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color var(--motion-default) var(--ease-standard), background var(--motion-default) var(--ease-standard), box-shadow var(--motion-default) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
+}
+.busiverse-theme-mode-button:hover {
+  color: hsl(var(--foreground));
+  background: hsl(var(--muted) / .70);
+}
+.busiverse-theme-mode-button:active {
+  transform: scale(.98);
+}
+.busiverse-theme-mode-button:focus-visible {
+  outline: 2px solid var(--color-brand-blue);
+  outline-offset: 2px;
+}
+.busiverse-theme-mode-button.is-active {
+  color: hsl(var(--primary-foreground));
+  background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%);
+  box-shadow: 0 12px 32px rgb(37 99 235 / .20);
+}

package/dist/theme/BusiverseThemeProvider.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export declare const BUSIVERSE_THEME_STORAGE_KEY = "busiverse-theme";
+export type BusiverseThemeMode = "light" | "dark" | "system";
+export interface BusiverseThemeProviderProps {
+    children: React.ReactNode;
+    defaultTheme?: BusiverseThemeMode;
+    storageKey?: string;
+    enableSystem?: boolean;
+    disableTransitionOnChange?: boolean;
+}
+export declare function BusiverseThemeProvider({ children, defaultTheme, storageKey, enableSystem, disableTransitionOnChange, }: BusiverseThemeProviderProps): React.JSX.Element;
+//# sourceMappingURL=BusiverseThemeProvider.d.ts.map

package/dist/theme/BusiverseThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BusiverseThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/BusiverseThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,2BAA2B,oBAAoB,CAAC;AAC7D,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE7D,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAED,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,YAAuB,EACvB,UAAwC,EACxC,YAAmB,EACnB,yBAAgC,GACjC,EAAE,2BAA2B,qBAY7B"}

package/dist/theme/ThemeModeSelect.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export type BusiverseThemeMode = "light" | "dark" | "system";
+export interface ThemeModeSelectProps {
+    className?: string;
+    buttonClassName?: string;
+    label?: string;
+    compact?: boolean;
+}
+export declare function ThemeModeSelect({ className, buttonClassName, label, compact }: ThemeModeSelectProps): React.JSX.Element;
+//# sourceMappingURL=ThemeModeSelect.d.ts.map

package/dist/theme/ThemeModeSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeModeSelect.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeModeSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE7D,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAqCD,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,KAAe,EAAE,OAAe,EAAE,EAAE,oBAAoB,qBA4BrH"}

package/dist/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./BusiverseThemeProvider";
+export { ThemeModeSelect } from "./ThemeModeSelect";
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/theme-public.d.ts

@@ -0,0 +1,2 @@
+export * from "./theme";
+//# sourceMappingURL=theme-public.d.ts.map

package/dist/theme-public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-public.d.ts","sourceRoot":"","sources":["../src/theme-public.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/theme-public.js

@@ -0,0 +1,11 @@
+import {
+  BUSIVERSE_THEME_STORAGE_KEY,
+  BusiverseThemeProvider,
+  ThemeModeSelect
+} from "./chunk-UWSNRCQW.js";
+import "./chunk-PYZVP4NI.js";
+export {
+  BUSIVERSE_THEME_STORAGE_KEY,
+  BusiverseThemeProvider,
+  ThemeModeSelect
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@busiverse/ui",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "author": "Joel Julius Okoromi <okmarq@gmail.com> (https://busiversehq.com)",
   "description": "BUSIVERSE shared React UI, design tokens, pricing, i18n, auth helpers, and product shell. Network-neutral core; Gateway transport is app-injected.",
   "type": "module",
@@ -56,11 +56,16 @@
       "types": "./dist/assets-public.d.ts",
       "import": "./dist/assets-public.js",
       "default": "./dist/assets-public.js"
+    },
+    "./theme": {
+      "types": "./dist/theme-public.d.ts",
+      "import": "./dist/theme-public.js",
+      "default": "./dist/theme-public.js"
     }
   },
   "scripts": {
     "clean": "node scripts/clean.mjs",
-    "build": "npm run clean && tsup src/index.ts src/tailwind-public.ts src/brand.ts src/i18n-public.ts src/billing.ts src/social.ts src/marketing.ts src/assets-public.ts --format esm --target es2022 && tsc -p tsconfig.build.json && node scripts/copy-static.mjs",
+    "build": "npm run clean && tsup src/index.ts src/tailwind-public.ts src/brand.ts src/i18n-public.ts src/billing.ts src/social.ts src/marketing.ts src/assets-public.ts src/theme-public.ts --format esm --target es2022 && tsc -p tsconfig.build.json && node scripts/copy-static.mjs",
     "typecheck": "tsc --noEmit",
     "pack:local": "npm pack",
     "prepublishOnly": "npm run typecheck && npm run build && npm pack --dry-run"
@@ -68,7 +73,8 @@
   "peerDependencies": {
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "tailwindcss": "^4.3.1"
+    "tailwindcss": "^4.3.1",
+    "next-themes": "^0.4.6"
   },
   "devDependencies": {
     "@types/react": "19.2.17",
@@ -77,7 +83,8 @@
     "react-dom": "19.2.7",
     "tailwindcss": "4.3.1",
     "tsup": "8.5.1",
-    "typescript": "6.0.3"
+    "typescript": "6.0.3",
+    "next-themes": "0.4.6"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",