@motor-hero/ui-kit 0.18.0 → 0.20.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 CompanyTheme } from "../lib/company-theme";
 type Theme = "dark" | "light" | "system";
 type ThemeProviderProps = {
     children: React.ReactNode;
     defaultTheme?: Theme;
     storageKey?: string;
+    companyTheme?: CompanyTheme;
 };
 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, companyTheme, ...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,EAAqB,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAE3E,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,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,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,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAsCpB;AAED,wBAAgB,QAAQ,uBAMvB;AAED,YAAY,EAAE,KAAK,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/hooks/use-company-subdomain.d.ts

@@ -0,0 +1,10 @@
+export type UseCompanySubdomainOptions = {
+    enableOverride?: boolean;
+    overrideStorageKey?: string;
+};
+export type UseCompanySubdomainResult = {
+    subdomain: string | undefined;
+};
+export declare function getSubdomain(hostname: string): string | undefined;
+export declare function useCompanySubdomain(opts?: UseCompanySubdomainOptions): UseCompanySubdomainResult;
+//# sourceMappingURL=use-company-subdomain.d.ts.map

package/dist/hooks/use-company-subdomain.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-company-subdomain.d.ts","sourceRoot":"","sources":["../../src/hooks/use-company-subdomain.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,0BAA0B,GAAG;IACvC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B,CAAA;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAMjE;AAiBD,wBAAgB,mBAAmB,CACjC,IAAI,GAAE,0BAA+B,GACpC,yBAAyB,CAc3B"}

package/dist/index.cjs

@@ -56,10 +56,13 @@ __export(index_exports, {
   ThemeProvider: () => ThemeProvider,
   Toaster: () => Toaster,
   UserMenu: () => UserMenu,
+  applyCompanyTheme: () => applyCompanyTheme,
   cn: () => cn,
   defaultRenderLink: () => defaultRenderLink,
   extractApiError: () => extractApiError,
+  getSubdomain: () => getSubdomain,
   toast: () => import_sonner2.toast,
+  useCompanySubdomain: () => useCompanySubdomain,
   useCustomToast: () => useCustomToast,
   useDisclosure: () => useDisclosure,
   useIsDesktop: () => useIsDesktop,
@@ -69,6 +72,33 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/theme-provider.tsx
 var import_react = require("react");
+
+// src/lib/company-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 definedTokens(tokens) {
+  if (!tokens) return {};
+  return Object.fromEntries(
+    Object.entries(tokens).filter(([, value]) => value != null)
+  );
+}
+function applyCompanyTheme(root, companyTheme, mode) {
+  const tokens = companyTheme ? mode === "dark" ? { ...companyTheme.light, ...definedTokens(companyTheme.dark) } : companyTheme.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 +109,7 @@ function ThemeProvider({
   children,
   defaultTheme = "system",
   storageKey = "ui-theme",
+  companyTheme,
   ...props
 }) {
   const [theme, setTheme] = (0, import_react.useState)(
@@ -86,14 +117,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);
+      applyCompanyTheme(root, companyTheme, 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, companyTheme]);
   const value = {
     theme,
     setTheme: (theme2) => {
@@ -111,6 +148,42 @@ function useTheme() {
   return context;
 }
 
+// src/hooks/use-company-subdomain.ts
+var import_react2 = require("react");
+function getSubdomain(hostname) {
+  const labels = hostname.split(".");
+  if (labels.length < 2) return void 0;
+  const first = labels[0];
+  if (!first || first === "www" || first === "localhost") return void 0;
+  return first;
+}
+function resolveOverride(storageKey) {
+  if (typeof window === "undefined") return void 0;
+  const params = new URLSearchParams(window.location.search);
+  if (params.has("company")) {
+    const value = params.get("company");
+    if (value) {
+      window.localStorage.setItem(storageKey, value);
+      return value;
+    }
+    window.localStorage.removeItem(storageKey);
+    return void 0;
+  }
+  return window.localStorage.getItem(storageKey) ?? void 0;
+}
+function useCompanySubdomain(opts = {}) {
+  const { enableOverride = false, overrideStorageKey = "company-subdomain" } = opts;
+  const [subdomain] = (0, import_react2.useState)(() => {
+    if (enableOverride) {
+      const override = resolveOverride(overrideStorageKey);
+      if (override) return override;
+    }
+    if (typeof window === "undefined") return void 0;
+    return getSubdomain(window.location.hostname);
+  });
+  return { subdomain };
+}
+
 // src/components/mode-toggle.tsx
 var DropdownMenu = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
 var import_lucide_react = require("lucide-react");
@@ -340,11 +413,11 @@ function ProgressBar({
 }
 
 // src/components/form-field.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function FormField({ label, htmlFor, error, required, children, className }) {
-  const errorId = (0, import_react2.useId)();
-  const field = error && (0, import_react2.isValidElement)(children) ? (0, import_react2.cloneElement)(children, {
+  const errorId = (0, import_react3.useId)();
+  const field = error && (0, import_react3.isValidElement)(children) ? (0, import_react3.cloneElement)(children, {
     "aria-invalid": true,
     "aria-describedby": [
       children.props["aria-describedby"],
@@ -815,7 +888,7 @@ function DataTableWrapper({
 }
 
 // src/components/mobile-card-list.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var SCROLL_THRESHOLD = 8;
 function MobileCardList({
@@ -826,8 +899,8 @@ function MobileCardList({
   loadingCount = 5,
   className
 }) {
-  const start = (0, import_react3.useRef)(null);
-  const scrolled = (0, import_react3.useRef)(false);
+  const start = (0, import_react4.useRef)(null);
+  const scrolled = (0, import_react4.useRef)(false);
   const onTouchStart = (e) => {
     const t = e.touches[0];
     start.current = { x: t.clientX, y: t.clientY };
@@ -929,10 +1002,10 @@ function Toaster(props) {
 
 // src/components/app-shell.tsx
 var import_lucide_react6 = require("lucide-react");
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/sidebar-nav.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/components/types.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -971,14 +1044,14 @@ function SidebarNav({
         !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate", children: item.label })
       ] })
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react4.Fragment, { children: link }, item.href);
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react5.Fragment, { children: link }, item.href);
   }) });
 }
 
 // src/components/user-menu.tsx
 var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
 var import_lucide_react5 = require("lucide-react");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_vaul2 = require("vaul");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function initials(user) {
@@ -999,7 +1072,7 @@ function UserMenu({
   align = "end"
 }) {
   const isDesktop = useIsDesktop();
-  const [open, setOpen] = (0, import_react5.useState)(false);
+  const [open, setOpen] = (0, import_react6.useState)(false);
   const label = initials(user);
   const trigger = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "button",
@@ -1164,8 +1237,8 @@ function AppShell({
   defaultCollapsed = false,
   children
 }) {
-  const [collapsed, setCollapsed] = (0, import_react6.useState)(defaultCollapsed);
-  const [mobileOpen, setMobileOpen] = (0, import_react6.useState)(false);
+  const [collapsed, setCollapsed] = (0, import_react7.useState)(defaultCollapsed);
+  const [mobileOpen, setMobileOpen] = (0, import_react7.useState)(false);
   const nav = (isCollapsed, onNavigate) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     SidebarNav,
     {
@@ -1254,7 +1327,7 @@ function AppShell({
 // src/components/row-actions-menu.tsx
 var DropdownMenu3 = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
 var import_lucide_react7 = require("lucide-react");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_vaul3 = require("vaul");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var triggerClass = "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
@@ -1268,7 +1341,7 @@ function RowActionsMenu({
   renderLink = defaultRenderLink
 }) {
   const isDesktop = useIsDesktop();
-  const [open, setOpen] = (0, import_react7.useState)(false);
+  const [open, setOpen] = (0, import_react8.useState)(false);
   if (actions.length === 0) return null;
   const trigger = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "button",
@@ -1385,20 +1458,20 @@ function extractApiError(err, fallbackMessage = "Ocorreu um erro inesperado.") {
 }
 
 // src/hooks/use-disclosure.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useDisclosure(initial = false) {
-  const [open, setOpen] = (0, import_react8.useState)(initial);
-  const onOpen = (0, import_react8.useCallback)(() => setOpen(true), []);
-  const onClose = (0, import_react8.useCallback)(() => setOpen(false), []);
-  const onToggle = (0, import_react8.useCallback)(() => setOpen((v) => !v), []);
+  const [open, setOpen] = (0, import_react9.useState)(initial);
+  const onOpen = (0, import_react9.useCallback)(() => setOpen(true), []);
+  const onClose = (0, import_react9.useCallback)(() => setOpen(false), []);
+  const onToggle = (0, import_react9.useCallback)(() => setOpen((v) => !v), []);
   return { open, onOpen, onClose, onToggle, setOpen };
 }
 
 // src/hooks/use-toast.ts
 var import_sonner2 = require("sonner");
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useCustomToast() {
-  const showToast = (0, import_react9.useCallback)(
+  const showToast = (0, import_react10.useCallback)(
     (title, description, status = "success") => {
       switch (status) {
         case "success":
@@ -1447,10 +1520,13 @@ function useCustomToast() {
   ThemeProvider,
   Toaster,
   UserMenu,
+  applyCompanyTheme,
   cn,
   defaultRenderLink,
   extractApiError,
+  getSubdomain,
   toast,
+  useCompanySubdomain,
   useCustomToast,
   useDisclosure,
   useIsDesktop,