@motor-hero/ui-kit 0.18.0 → 0.19.0

package/README.md

@@ -43,6 +43,47 @@ function App() {
 }
 ```
 
+## Temas e Multi-tenant
+
+Por padrão o kit usa o tema **zinc** (claro/escuro), alternado pelo `ThemeProvider`.
+Para servir várias marcas (tenants) no mesmo app, passe a prop opcional `tenantTheme`.
+**Sem ela, nada muda** — apps existentes seguem com o tema padrão.
+
+Pense em dois eixos independentes: a **marca** (qual tenant) e o **modo** (claro/escuro).
+Só o grupo de cores da **marca** é por tenant; neutros (`background`, `card`, `border`…) e
+status (`destructive`, `success`) são compartilhados e respondem só ao modo.
+
+```tsx
+import { ThemeProvider } from "@motor-hero/ui-kit"
+import type { TenantTheme } from "@motor-hero/ui-kit"
+
+const tenantTheme: TenantTheme = {
+  light: {
+    primary: "hsl(145 63% 32%)",
+    primaryForeground: "hsl(0 0% 100%)",
+    secondary: "hsl(0 0% 96%)",
+    secondaryForeground: "hsl(0 0% 12%)",
+    accent: "hsl(45 95% 55%)",
+    accentForeground: "hsl(0 0% 8%)",
+  },
+  dark: { primary: "hsl(145 50% 55%)" }, // opcional e parcial: só o que muda no escuro
+}
+
+<ThemeProvider defaultTheme="dark" tenantTheme={tenantTheme}>
+  <App />
+</ThemeProvider>
+```
+
+**Regras:**
+
+- Mínimo por tenant: `primary` + `primaryForeground` (2 cores). A marca completa tem três cores — `primary`, `secondary` e `accent` — cada uma com seu foreground.
+- `dark` é opcional e parcial — informe apenas os tokens que mudam; o resto herda do `light`.
+- Valores são qualquer cor CSS válida (`hsl(...)`, `#hex`, `oklch(...)`); prefira `hsl(...)`.
+- Os `*Foreground` são responsabilidade sua — garanta contraste AA, o kit não deriva.
+- As cores entram como estilo inline no `<html>`, vencendo o `.dark` e qualquer `@theme` do app (sem conflito de cascata). Memoize o objeto `tenantTheme`.
+
+Guia completo em [ui.motorhero.com.br](https://ui.motorhero.com.br) → **Temas Multi-tenant**.
+
 ## Desenvolvimento
 
 ```bash

package/dist/components/theme-provider.d.ts

@@ -1,14 +1,16 @@
+import { type TenantTheme } from "../lib/tenant-theme";
 type Theme = "dark" | "light" | "system";
 type ThemeProviderProps = {
     children: React.ReactNode;
     defaultTheme?: Theme;
     storageKey?: string;
+    tenantTheme?: TenantTheme;
 };
 type ThemeProviderState = {
     theme: Theme;
     setTheme: (theme: Theme) => void;
 };
-export declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): import("react").JSX.Element;
+export declare function ThemeProvider({ children, defaultTheme, storageKey, tenantTheme, ...props }: ThemeProviderProps): import("react").JSX.Element;
 export declare function useTheme(): ThemeProviderState;
 export type { Theme, ThemeProviderProps, ThemeProviderState };
 //# sourceMappingURL=theme-provider.d.ts.map

package/dist/components/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/components/theme-provider.tsx"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAExC,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC,CAAA;AASD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAuB,EACvB,UAAuB,EACvB,GAAG,KAAK,EACT,EAAE,kBAAkB,+BA+BpB;AAED,wBAAgB,QAAQ,uBAMvB;AAED,YAAY,EAAE,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/components/theme-provider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAExE,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAExC,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC,CAAA;AASD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAuB,EACvB,UAAuB,EACvB,WAAW,EACX,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAsCpB;AAED,wBAAgB,QAAQ,uBAMvB;AAED,YAAY,EAAE,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/index.cjs

@@ -56,6 +56,7 @@ __export(index_exports, {
   ThemeProvider: () => ThemeProvider,
   Toaster: () => Toaster,
   UserMenu: () => UserMenu,
+  applyTenantTheme: () => applyTenantTheme,
   cn: () => cn,
   defaultRenderLink: () => defaultRenderLink,
   extractApiError: () => extractApiError,
@@ -69,6 +70,27 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/theme-provider.tsx
 var import_react = require("react");
+
+// src/lib/tenant-theme.ts
+var VAR_MAP = {
+  primary: "--color-primary",
+  primaryForeground: "--color-primary-foreground",
+  secondary: "--color-secondary",
+  secondaryForeground: "--color-secondary-foreground",
+  accent: "--color-accent",
+  accentForeground: "--color-accent-foreground",
+  ring: "--color-ring"
+};
+function applyTenantTheme(root, tenantTheme, mode) {
+  const tokens = tenantTheme ? mode === "dark" ? { ...tenantTheme.light, ...tenantTheme.dark } : tenantTheme.light : {};
+  for (const key of Object.keys(VAR_MAP)) {
+    const value = tokens[key];
+    if (value) root.style.setProperty(VAR_MAP[key], value);
+    else root.style.removeProperty(VAR_MAP[key]);
+  }
+}
+
+// src/components/theme-provider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var initialState = {
   theme: "system",
@@ -79,6 +101,7 @@ function ThemeProvider({
   children,
   defaultTheme = "system",
   storageKey = "ui-theme",
+  tenantTheme,
   ...props
 }) {
   const [theme, setTheme] = (0, import_react.useState)(
@@ -86,14 +109,20 @@ function ThemeProvider({
   );
   (0, import_react.useEffect)(() => {
     const root = window.document.documentElement;
-    root.classList.remove("light", "dark");
+    const applyResolved = (resolved) => {
+      root.classList.remove("light", "dark");
+      root.classList.add(resolved);
+      applyTenantTheme(root, tenantTheme, resolved);
+    };
     if (theme === "system") {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-      root.classList.add(systemTheme);
-      return;
+      const mql = window.matchMedia("(prefers-color-scheme: dark)");
+      applyResolved(mql.matches ? "dark" : "light");
+      const onChange = (e) => applyResolved(e.matches ? "dark" : "light");
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
     }
-    root.classList.add(theme);
-  }, [theme]);
+    applyResolved(theme);
+  }, [theme, tenantTheme]);
   const value = {
     theme,
     setTheme: (theme2) => {
@@ -1447,6 +1476,7 @@ function useCustomToast() {
   ThemeProvider,
   Toaster,
   UserMenu,
+  applyTenantTheme,
   cn,
   defaultRenderLink,
   extractApiError,