@yuva-devlab/ui 1.0.1 → 1.1.0

package/README.md

@@ -139,22 +139,42 @@ import { Container, Stack, Flex, Box } from "@yuva-devlab/ui";
 </Container>;
 ```
 
-## Styling
+## Styling & Brand Theming
 
-This library uses Vanilla Extract for type-safe, zero-runtime CSS. All styles
-are compiled at build time.
+### 1. Global Styles Setup
 
-### Importing Styles
+Import the UI stylesheet in your root layout:
 
 ```tsx
-// Import global styles once in your app entry point
 import "@yuva-devlab/ui/styles.css";
 ```
 
-### Theming
+Or import specific brand themes directly:
 
-The library includes a natural theme by default. Custom theming support coming
-soon.
+```css
+@import "@yuva-devlab/ui/styles.css";
+@import "@yuva-devlab/ui/themes/finai.css";
+```
+
+### 2. Brand & Theme Provider (`ConfigProvider`)
+
+Wrap your application with `ConfigProvider` (or `ThemeProvider`) and pass your `brand`:
+
+```tsx
+import { ConfigProvider } from "@yuva-devlab/ui";
+
+export function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ConfigProvider brand="finai" defaultTheme="system">
+      {children}
+    </ConfigProvider>
+  );
+}
+```
+
+The provider sets the appropriate `data-brand` and `data-theme` attributes on `<html>`, instantly activating the scoped design tokens for that brand without loading or exposing styles of other brands!
+
+---
 
 ## Development
 
@@ -169,18 +189,13 @@ pnpm --filter @yuva-devlab/ui build
 pnpm --filter @yuva-devlab/ui test
 
 # Type check
-pnpm --filter @yuva-devlab/ui type-check
+pnpm --filter @yuva-devlab/ui typecheck
 ```
 
 ## Documentation
 
 - **Storybook**: Run `pnpm dev:docs` to view interactive component documentation
 - **Playground**: Run `pnpm dev:playground` to test components in a live
-  environment
-
-## Related Packages
-
-- [@yuva-devlab/tokens](../tokens) - Tailwind CSS 4 preset and design token theme bridge
 
 ## License
 

package/dist/index.cjs

@@ -94,6 +94,7 @@ __export(index_exports, {
   CommandList: () => CommandList,
   CommandSeparator: () => CommandSeparator,
   CommandShortcut: () => CommandShortcut,
+  ConfigProvider: () => ConfigProvider,
   ConfirmDialog: () => ConfirmDialog,
   ContextMenu: () => ContextMenu,
   ContextMenuCheckboxItem: () => ContextMenuCheckboxItem,
@@ -284,6 +285,7 @@ __export(index_exports, {
   navigationMenuTriggerStyle: () => navigationMenuTriggerStyle,
   toast: () => import_sonner.toast,
   toggleVariants: () => toggleVariants,
+  useConfig: () => useConfig,
   useFormField: () => useFormField,
   useIsMobile: () => useIsMobile,
   useSidebar: () => useSidebar,
@@ -303,15 +305,20 @@ var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var initialState = {
   theme: "system",
+  brand: "finai",
   setTheme: () => null,
+  setBrand: () => null,
   resolvedTheme: "dark"
 };
 var ThemeProviderContext = (0, import_react.createContext)(initialState);
 function ThemeProvider({
   children,
+  brand: initialBrand = "finai",
   defaultTheme = "system",
   storageKey = "yd-theme",
+  brandStorageKey = "yd-brand",
   attribute = "data-theme",
+  brandAttribute = "data-brand",
   enableSystem = true,
   ...props
 }) {
@@ -322,6 +329,13 @@ function ThemeProvider({
     }
     return defaultTheme;
   });
+  const [brand, setBrandState] = (0, import_react.useState)(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(brandStorageKey);
+      if (stored) return stored;
+    }
+    return initialBrand;
+  });
   const [resolvedTheme, setResolvedTheme] = (0, import_react.useState)("dark");
   (0, import_react.useEffect)(() => {
     const root = window.document.documentElement;
@@ -331,20 +345,33 @@ function ThemeProvider({
       const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
       activeTheme = systemTheme;
     }
-    const isDark = activeTheme.includes("dark") || activeTheme === "orchestrai";
+    const isDark = activeTheme.includes("dark") || activeTheme === "orchestrai" || brand === "orchestrai" && activeTheme !== "light";
     const resolved = isDark ? "dark" : "light";
     setResolvedTheme(resolved);
     root.classList.add(resolved);
+    if (brandAttribute && brand) {
+      root.setAttribute(brandAttribute, brand);
+    }
     if (attribute) {
-      root.setAttribute(attribute, theme);
+      const combinedTheme = theme === "system" ? `${brand}-${resolved}` : theme.startsWith(brand) ? theme : `${brand}-${theme}`;
+      root.setAttribute(attribute, combinedTheme);
     }
-  }, [theme, enableSystem, attribute]);
+  }, [theme, brand, enableSystem, attribute, brandAttribute]);
   const value = {
     theme,
+    brand,
     setTheme: (newTheme) => {
-      localStorage.setItem(storageKey, newTheme);
+      if (typeof window !== "undefined") {
+        localStorage.setItem(storageKey, newTheme);
+      }
       setThemeState(newTheme);
     },
+    setBrand: (newBrand) => {
+      if (typeof window !== "undefined") {
+        localStorage.setItem(brandStorageKey, newBrand);
+      }
+      setBrandState(newBrand);
+    },
     resolvedTheme
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeProviderContext.Provider, { ...props, value, children });
@@ -356,6 +383,8 @@ var useTheme = () => {
   }
   return context;
 };
+var ConfigProvider = ThemeProvider;
+var useConfig = useTheme;
 
 // src/hooks/use-mobile.ts
 var React2 = __toESM(require("react"), 1);
@@ -4323,6 +4352,7 @@ function LoadingState({
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  ConfigProvider,
   ConfirmDialog,
   ContextMenu,
   ContextMenuCheckboxItem,
@@ -4513,6 +4543,7 @@ function LoadingState({
   navigationMenuTriggerStyle,
   toast,
   toggleVariants,
+  useConfig,
   useFormField,
   useIsMobile,
   useSidebar,