@yuva-devlab/ui 1.0.0 → 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);
@@ -428,7 +457,7 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -714,7 +743,10 @@ var BreadcrumbLink = React8.forwardRef(({ asChild, className, ...props }, ref) =
     Comp,
     {
       ref,
-      className: cn("transition-colors hover:text-foreground", className),
+      className: cn(
+        "cursor-pointer transition-colors hover:text-foreground",
+        className
+      ),
       ...props
     }
   );
@@ -1430,7 +1462,7 @@ var Checkbox = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   {
     ref,
     className: cn(
-      "grid place-content-center peer shrink-0 rounded-sm border border-primary shadow cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground size-4",
+      "grid place-content-center peer shrink-0 rounded-sm border border-primary shadow cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground size-4",
       className
     ),
     ...props,
@@ -1490,7 +1522,7 @@ var DialogContent = React14.forwardRef(({ className, children, ...props }, ref)
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background cursor-pointer transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background cursor-pointer transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.X, { className: "size-4" }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sr-only", children: "Close" })
         ] })
@@ -1891,7 +1923,7 @@ var DropdownMenuSubTrigger = React18.forwardRef(({ className, inset, children, .
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     ),
@@ -1934,7 +1966,7 @@ var DropdownMenuItem = React18.forwardRef(({ className, inset, ...props }, ref)
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       inset && "pl-8",
       className
     ),
@@ -1947,7 +1979,7 @@ var DropdownMenuCheckboxItem = React18.forwardRef(({ className, children, ...pro
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     ),
     ...props,
@@ -1963,7 +1995,7 @@ var DropdownMenuRadioItem = React18.forwardRef(({ className, children, ...props
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     ),
     ...props,
@@ -2209,7 +2241,7 @@ var Input = React23.forwardRef(
       {
         type,
         className: cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         ),
         ref,
@@ -2757,7 +2789,7 @@ var SelectTrigger = React31.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background cursor-pointer data-placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background cursor-pointer data-placeholder:text-muted-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:opacity-50 [&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -2800,7 +2832,7 @@ var SelectContent = React31.forwardRef(({ className, children, position = "poppe
     ref,
     className: cn(
       "relative z-50 max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1",
       className
     ),
     position,
@@ -2836,7 +2868,7 @@ var SelectItem = React31.forwardRef(({ className, children, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     ),
     ...props,
@@ -3771,7 +3803,7 @@ var TabsTrigger = React39.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
       className
     ),
     ...props
@@ -3783,7 +3815,7 @@ var TabsContent = React39.forwardRef(({ className, ...props }, ref) => /* @__PUR
   {
     ref,
     className: cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
       className
     ),
     ...props
@@ -3799,7 +3831,7 @@ var Textarea = React40.forwardRef(({ className, ...props }, ref) => {
     "textarea",
     {
       className: cn(
-        "flex min-h-15 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex min-h-15 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       ),
       ref,
@@ -4320,6 +4352,7 @@ function LoadingState({
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  ConfigProvider,
   ConfirmDialog,
   ContextMenu,
   ContextMenuCheckboxItem,
@@ -4510,6 +4543,7 @@ function LoadingState({
   navigationMenuTriggerStyle,
   toast,
   toggleVariants,
+  useConfig,
   useFormField,
   useIsMobile,
   useSidebar,