@motor-hero/ui-kit 0.18.0 → 0.20.0

package/dist/index.js

@@ -1,5 +1,32 @@
 // src/components/theme-provider.tsx
 import { createContext, useContext, useEffect, useState } from "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
 import { jsx } from "react/jsx-runtime";
 var initialState = {
   theme: "system",
@@ -10,6 +37,7 @@ function ThemeProvider({
   children,
   defaultTheme = "system",
   storageKey = "ui-theme",
+  companyTheme,
   ...props
 }) {
   const [theme, setTheme] = useState(
@@ -17,14 +45,20 @@ function ThemeProvider({
   );
   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) => {
@@ -42,6 +76,42 @@ function useTheme() {
   return context;
 }
 
+// src/hooks/use-company-subdomain.ts
+import { useState as useState2 } from "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] = useState2(() => {
+    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
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { Moon, Sun, Monitor } from "lucide-react";
@@ -860,7 +930,7 @@ function Toaster(props) {
 
 // src/components/app-shell.tsx
 import { ChevronLeft, ChevronRight, Menu } from "lucide-react";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 
 // src/components/sidebar-nav.tsx
 import { Fragment as Fragment3 } from "react";
@@ -909,7 +979,7 @@ function SidebarNav({
 // src/components/user-menu.tsx
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
 import { LogOut, User } from "lucide-react";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { Drawer as DrawerPrimitive2 } from "vaul";
 import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
 function initials(user) {
@@ -930,7 +1000,7 @@ function UserMenu({
   align = "end"
 }) {
   const isDesktop = useIsDesktop();
-  const [open, setOpen] = useState5(false);
+  const [open, setOpen] = useState6(false);
   const label = initials(user);
   const trigger = /* @__PURE__ */ jsx24(
     "button",
@@ -1095,8 +1165,8 @@ function AppShell({
   defaultCollapsed = false,
   children
 }) {
-  const [collapsed, setCollapsed] = useState6(defaultCollapsed);
-  const [mobileOpen, setMobileOpen] = useState6(false);
+  const [collapsed, setCollapsed] = useState7(defaultCollapsed);
+  const [mobileOpen, setMobileOpen] = useState7(false);
   const nav = (isCollapsed, onNavigate) => /* @__PURE__ */ jsx25(
     SidebarNav,
     {
@@ -1185,7 +1255,7 @@ function AppShell({
 // src/components/row-actions-menu.tsx
 import * as DropdownMenu3 from "@radix-ui/react-dropdown-menu";
 import { MoreVertical } from "lucide-react";
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { Drawer as DrawerPrimitive3 } from "vaul";
 import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs22 } from "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";
@@ -1199,7 +1269,7 @@ function RowActionsMenu({
   renderLink = defaultRenderLink
 }) {
   const isDesktop = useIsDesktop();
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState8(false);
   if (actions.length === 0) return null;
   const trigger = /* @__PURE__ */ jsx26(
     "button",
@@ -1316,9 +1386,9 @@ function extractApiError(err, fallbackMessage = "Ocorreu um erro inesperado.") {
 }
 
 // src/hooks/use-disclosure.ts
-import { useCallback, useState as useState8 } from "react";
+import { useCallback, useState as useState9 } from "react";
 function useDisclosure(initial = false) {
-  const [open, setOpen] = useState8(initial);
+  const [open, setOpen] = useState9(initial);
   const onOpen = useCallback(() => setOpen(true), []);
   const onClose = useCallback(() => setOpen(false), []);
   const onToggle = useCallback(() => setOpen((v) => !v), []);
@@ -1377,10 +1447,13 @@ export {
   ThemeProvider,
   Toaster,
   UserMenu,
+  applyCompanyTheme,
   cn,
   defaultRenderLink,
   extractApiError,
+  getSubdomain,
   toast,
+  useCompanySubdomain,
   useCustomToast,
   useDisclosure,
   useIsDesktop,