@busiverse/ui 0.2.11 → 0.2.12

package/README.md

@@ -277,3 +277,14 @@ 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.

package/dist/chunk-BJYKR462.js

@@ -0,0 +1,63 @@
+import {
+  cn
+} from "./chunk-PYZVP4NI.js";
+
+// src/theme/ThemeModeSelect.tsx
+import { useTheme } from "next-themes";
+import { jsx, 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__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+      /* @__PURE__ */ jsx("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__ */ jsx("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__ */ jsx("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__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "12", rx: "2" }),
+      /* @__PURE__ */ jsx("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__ */ jsx("span", { className: "busiverse-theme-mode-label", children: label }),
+    /* @__PURE__ */ jsx("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__ */ jsx("span", { children: mode.label }),
+            compact && /* @__PURE__ */ jsx("span", { className: "busiverse-sr-only", children: mode.label })
+          ]
+        },
+        mode.value
+      );
+    }) })
+  ] });
+}
+
+export {
+  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,6 @@
+import {
+  ThemeModeSelect
+} from "./chunk-BJYKR462.js";
 import {
   Badge,
   Card,
@@ -383,6 +386,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/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,2 @@
+export * 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,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,7 @@
+import {
+  ThemeModeSelect
+} from "./chunk-BJYKR462.js";
+import "./chunk-PYZVP4NI.js";
+export {
+  ThemeModeSelect
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@busiverse/ui",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "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/",