mavi-dashboard 0.0.1

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "mavi-dashboard",
+  "version": "0.0.1",
+  "description": "React dashboard layout with sidebar, header, and theme shell",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "dashboard",
+    "sidebar",
+    "layout"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./src/dashboard/index.ts",
+      "import": "./src/dashboard/index.ts",
+      "default": "./src/dashboard/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./src/dashboard/index.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@workspace/ui": "*",
+    "lucide-react": "^1.8.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3"
+  }
+}

package/src/dashboard/app-sidebar.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import * as React from "react"
+import "@workspace/ui/globals.css"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+} from "@workspace/ui/components/sidebar"
+import { NavBrand } from "./nav-brand"
+import { NavDefault } from "./nav-default"
+import { NavMenuGroup } from "./nav-menu-group"
+import type { DashboardMenuConfig, MenuGroup } from "./menu-types"
+
+function SidebarMenuSections({
+  menu,
+  activePathname,
+}: {
+  menu: DashboardMenuConfig
+  activePathname?: string
+}) {
+  return (
+    <>
+      {menu.sections.flatMap((section, sectionIndex) =>
+        section.groups.map((group, groupIndex) => (
+          <NavMenuGroup
+            key={`${sectionIndex}-${groupIndex}-${group.label}`}
+            group={group}
+            activePathname={activePathname}
+          />
+        ))
+      )}
+    </>
+  )
+}
+
+export function AppSidebar({
+  brand,
+  menu,
+  footerMenuItems,
+  activePathname,
+  ...props
+}: React.ComponentProps<typeof Sidebar> & {
+  brand: { name: string; logo: React.ReactNode; plan: string }
+  menu: DashboardMenuConfig
+  footerMenuItems: MenuGroup[]
+  activePathname?: string
+}) {
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <NavBrand brand={brand} />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarMenuSections menu={menu} activePathname={activePathname} />
+      </SidebarContent>
+      <SidebarFooter>
+        {footerMenuItems.length > 0 && (
+          <NavDefault
+            navMenuItems={footerMenuItems}
+            activePathname={activePathname}
+          />
+        )}
+      </SidebarFooter>
+      <div className="flex justify-start rounded-lg bg-accent group-data-[collapsible=icon]:hidden">
+        <p className="ml-4 p-1 text-[10px] text-primary">
+          Copyright © 2026 Mavi.
+        </p>
+      </div>
+      <SidebarRail />
+    </Sidebar>
+  )
+}

package/src/dashboard/breadcrumb-trail.ts

@@ -0,0 +1,41 @@
+export type BreadcrumbSegment = { label: string; href?: string }
+
+function formatSegmentLabel(segment: string): string {
+  if (/^\d+$/.test(segment)) return segment
+  return segment
+    .split("-")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join(" ")
+}
+
+export function getBreadcrumbTrail(
+  pathname: string | undefined
+): BreadcrumbSegment[] {
+  if (pathname == null || pathname === "") {
+    return [{ label: "Dashboard" }]
+  }
+
+  const p =
+    pathname === "/" ? "/" : pathname.replace(/\/+$/, "") || "/"
+
+  if (p === "/") {
+    return [{ label: "Dashboard" }]
+  }
+
+  const parts = p.split("/").filter(Boolean)
+
+  if (parts[0] === "project" && parts.length >= 2) {
+    return [{ label: "Project" }, { label: parts[parts.length - 1] }]
+  }
+
+  if (parts.length === 1) {
+    return [{ label: formatSegmentLabel(parts[0]) }]
+  }
+
+  return parts.map((seg, idx) => ({
+    label: formatSegmentLabel(seg),
+    ...(idx < parts.length - 1
+      ? { href: `/${parts.slice(0, idx + 1).join("/")}` }
+      : {}),
+  }))
+}

package/src/dashboard/button-theme.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+import { MoonIcon, SunIcon } from "lucide-react"
+import { useEffect, useState } from "react"
+import { Button } from "@workspace/ui/components/button"
+import { useTheme } from "./theme-provider"
+
+const ThemeToggleButton = () => {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark")
+  }
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // Prevent SSR flicker and hydration mismatch
+  if (!mounted) {
+    return <Button variant="ghost" className="rounded-full" size="icon" />
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      className="rounded-full"
+      onClick={toggleTheme}
+      size="icon"
+    >
+      {theme === "dark" ? <SunIcon /> : <MoonIcon />}
+    </Button>
+  )
+}
+
+export default ThemeToggleButton

package/src/dashboard/dashboard-layout.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import {
+  SidebarInset,
+  SidebarProvider,
+} from "@workspace/ui/components/sidebar"
+import { TooltipProvider } from "@workspace/ui/components/tooltip"
+import { AppSidebar } from "./app-sidebar"
+import type { DashboardSideConfig } from "./menu-types"
+import { NavHeader } from "./nav-header"
+import { ThemeProvider } from "./theme-provider"
+
+export type {
+  DashboardMenuConfig,
+  DashboardSideConfig,
+  MenuGroup,
+  NavGroup,
+  NavItem,
+  NavItemCollaps,
+  NavItemDefault,
+  NavSection,
+} from "./menu-types"
+
+export function DashboardLayout({
+  children,
+  user,
+  side,
+  activePathname,
+}: {
+  children: React.ReactNode
+  user: { name: string; email: string; avatar: string }
+  side: DashboardSideConfig
+  activePathname?: string
+}) {
+  return (
+    <TooltipProvider>
+      <ThemeProvider>
+        <SidebarProvider>
+          <AppSidebar
+            brand={side.brand}
+            menu={side.menu}
+            footerMenuItems={side.footerMenuItems}
+            activePathname={activePathname}
+          />
+          <SidebarInset>
+            <NavHeader user={user} activePathname={activePathname} />
+            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+              {children}
+            </div>
+          </SidebarInset>
+        </SidebarProvider>
+      </ThemeProvider>
+    </TooltipProvider>
+  )
+}

package/src/dashboard/index.ts

@@ -0,0 +1,12 @@
+export * from "./breadcrumb-trail"
+export { default as ThemeToggleButton } from "./button-theme"
+export { DashboardLayout } from "./dashboard-layout"
+export * from "./menu-types"
+export * from "./nav-active"
+export { AppSidebar } from "./app-sidebar"
+export { NavBrand } from "./nav-brand"
+export { NavDefault } from "./nav-default"
+export { BreadcrumbHeader, NavHeader } from "./nav-header"
+export { NavMenuGroup } from "./nav-menu-group"
+export { NavUser } from "./nav-user"
+export { ThemeProvider, useTheme } from "./theme-provider"

package/src/dashboard/menu-types.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react"
+
+export type NavItemDefault = {
+  variant: "default"
+  title: string
+  url: string
+  icon: ReactNode
+}
+
+export type NavItemCollaps = {
+  variant: "collaps"
+  title: string
+  icon: ReactNode
+  items: { title: string; url: string }[]
+}
+
+export type NavItem = NavItemDefault | NavItemCollaps
+
+export type NavGroup = {
+  label: string
+  items: NavItem[]
+}
+
+export type NavSection = {
+  groups: NavGroup[]
+}
+
+export type DashboardMenuConfig = {
+  sections: NavSection[]
+}
+
+export type MenuGroup = {
+  label: string
+  items: {
+    title: string
+    url: string
+    icon: ReactNode
+  }[]
+}
+
+export type DashboardSideConfig = {
+  brand: { name: string; logo: ReactNode; plan: string }
+  menu: DashboardMenuConfig
+  footerMenuItems: MenuGroup[]
+}

package/src/dashboard/nav-active.ts

@@ -0,0 +1,16 @@
+export function isSidebarNavActive(
+  pathname: string | undefined,
+  href: string
+): boolean {
+  if (pathname == null || pathname === "") return false
+  if (!href || href === "#" || href.startsWith("#")) return false
+  if (/^[a-z][a-z0-9+.-]*:/i.test(href)) return false
+
+  return normalizePath(pathname) === normalizePath(href)
+}
+
+function normalizePath(path: string): string {
+  if (path === "/" || path === "") return "/"
+  const trimmed = path.replace(/\/+$/, "")
+  return trimmed === "" ? "/" : trimmed
+}

package/src/dashboard/nav-brand.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@workspace/ui/components/sidebar"
+
+export function NavBrand({
+  brand,
+}: {
+  brand: {
+    logo: React.ReactNode
+    name: string
+    plan: string
+  }
+}) {
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          size="lg"
+          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+        >
+          <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+            {brand.logo}
+          </div>
+          <div className="grid flex-1 text-left text-sm leading-tight">
+            <span className="truncate font-medium">{brand.name}</span>
+            <span className="truncate text-xs">{brand.plan}</span>
+          </div>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/src/dashboard/nav-default.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@workspace/ui/components/sidebar"
+import { isSidebarNavActive } from "./nav-active"
+
+export function NavDefault({
+  navMenuItems,
+  activePathname,
+}: {
+  activePathname?: string
+  navMenuItems: Array<{
+    label: string
+    items: {
+      title: string
+      url: string
+      icon: React.ReactNode
+    }[]
+  }>
+}) {
+  return (
+    <>
+      {navMenuItems.map((group, index) => (
+        <SidebarGroup key={`${group.label}-${index}`} className="">
+          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+          <SidebarMenu>
+            {group.items.map((item, itemIndex) => (
+              <SidebarMenuItem key={`${item.title}-${itemIndex}`}>
+                <SidebarMenuButton
+                  asChild
+                  tooltip={item.title}
+                  isActive={isSidebarNavActive(activePathname, item.url)}
+                >
+                  <a href={item.url}>
+                    {item.icon}
+                    <span>{item.title}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+      ))}
+    </>
+  )
+}

package/src/dashboard/nav-header.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@workspace/ui/components/breadcrumb"
+import { Separator } from "@workspace/ui/components/separator"
+import { SidebarTrigger } from "@workspace/ui/components/sidebar"
+import { getBreadcrumbTrail } from "./breadcrumb-trail"
+import { NavUser } from "./nav-user"
+import ThemeToggleButton from "./button-theme"
+
+export function NavHeader({
+  user,
+  activePathname,
+}: {
+  user: { name: string; email: string; avatar: string }
+  activePathname?: string
+}) {
+  return (
+    <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
+      <div className="flex min-w-0 flex-1 items-center gap-1.5">
+        <SidebarTrigger className="-ml-1 shrink-0" />
+        <Separator
+          orientation="vertical"
+          className="mx-2 shrink-0 data-[orientation=vertical]:h-10"
+        />
+        <BreadcrumbHeader pathname={activePathname} />
+      </div>
+      <div className="ml-auto flex items-center space-x-4">
+        <ThemeToggleButton />
+        <NavUser user={user} />
+      </div>
+    </header>
+  )
+}
+
+export function BreadcrumbHeader({ pathname }: { pathname?: string }) {
+  const trail = getBreadcrumbTrail(pathname)
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {trail.map((seg, i) => (
+          <React.Fragment key={`${seg.label}-${i}`}>
+            {i > 0 ? <BreadcrumbSeparator /> : null}
+            <BreadcrumbItem>
+              {i === trail.length - 1 ? (
+                <BreadcrumbPage>{seg.label}</BreadcrumbPage>
+              ) : seg.href ? (
+                <BreadcrumbLink href={seg.href}>{seg.label}</BreadcrumbLink>
+              ) : (
+                <span className="text-muted-foreground">{seg.label}</span>
+              )}
+            </BreadcrumbItem>
+          </React.Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}

package/src/dashboard/nav-menu-group.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@workspace/ui/components/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@workspace/ui/components/sidebar"
+import type { NavGroup } from "./menu-types"
+import { isSidebarNavActive } from "./nav-active"
+import { ChevronRightIcon } from "lucide-react"
+
+function CollapsibleNavItem({
+  item,
+  activePathname,
+}: {
+  item: Extract<NavGroup["items"][number], { variant: "collaps" }>
+  activePathname?: string
+}) {
+  const childActive =
+    activePathname != null &&
+    item.items.some((sub) => isSidebarNavActive(activePathname, sub.url))
+
+  const [open, setOpen] = React.useState(childActive)
+  React.useEffect(() => {
+    setOpen(childActive)
+  }, [childActive])
+
+  return (
+    <Collapsible
+      asChild
+      className="group/collapsible"
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton
+            tooltip={item.title}
+            // isActive={childActive}
+          >
+            {item.icon}
+            <span>{item.title}</span>
+            <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <SidebarMenuSub>
+            {item.items.map((sub, subIndex) => (
+              <SidebarMenuSubItem key={`${sub.title}-${subIndex}`}>
+                <SidebarMenuSubButton
+                  asChild
+                  isActive={isSidebarNavActive(activePathname, sub.url)}
+                >
+                  <a href={sub.url}>
+                    <span>{sub.title}</span>
+                  </a>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  )
+}
+
+export function NavMenuGroup({
+  group,
+  activePathname,
+}: {
+  group: NavGroup
+  activePathname?: string
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+      <SidebarMenu>
+        {group.items.map((item, itemIndex) => {
+          const rowKey = `${group.label}-${item.title}-${itemIndex}`
+          if (item.variant === "default") {
+            return (
+              <SidebarMenuItem key={rowKey}>
+                <SidebarMenuButton
+                  asChild
+                  tooltip={item.title}
+                  isActive={isSidebarNavActive(activePathname, item.url)}
+                >
+                  <a href={item.url}>
+                    {item.icon}
+                    <span>{item.title}</span>
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            )
+          }
+          return (
+            <CollapsibleNavItem
+              key={rowKey}
+              item={item}
+              activePathname={activePathname}
+            />
+          )
+        })}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}

package/src/dashboard/nav-user.tsx

@@ -0,0 +1,40 @@
+import * as React from "react"
+import { LogOut, Settings, User } from "lucide-react"
+import { Avatar, AvatarImage } from "@workspace/ui/components/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@workspace/ui/components/dropdown-menu"
+
+export function NavUser({
+  user,
+}: {
+  user: { name: string; email: string; avatar: string }
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="rounded-full focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-hidden">
+        <Avatar>
+          <AvatarImage src={user.avatar} />
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>{user.name}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <User className="h-4 w-4" /> Profile
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <Settings className="h-4 w-4" /> Settings
+        </DropdownMenuItem>
+        <DropdownMenuItem variant="destructive">
+          <LogOut className="h-4 w-4" /> Logout
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/dashboard/theme-provider.tsx

@@ -0,0 +1,230 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as React from "react"
+
+type Theme = "dark" | "light" | "system"
+type ResolvedTheme = "dark" | "light"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+  disableTransitionOnChange?: boolean
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)"
+const THEME_VALUES: Theme[] = ["dark", "light", "system"]
+
+const ThemeProviderContext = React.createContext<
+  ThemeProviderState | undefined
+>(undefined)
+
+function isTheme(value: string | null): value is Theme {
+  if (value === null) {
+    return false
+  }
+
+  return THEME_VALUES.includes(value as Theme)
+}
+
+function getSystemTheme(): ResolvedTheme {
+  if (window.matchMedia(COLOR_SCHEME_QUERY).matches) {
+    return "dark"
+  }
+
+  return "light"
+}
+
+function disableTransitionsTemporarily() {
+  const style = document.createElement("style")
+  style.appendChild(
+    document.createTextNode(
+      "*,*::before,*::after{-webkit-transition:none!important;transition:none!important}"
+    )
+  )
+  document.head.appendChild(style)
+
+  return () => {
+    window.getComputedStyle(document.body)
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        style.remove()
+      })
+    })
+  }
+}
+
+function isEditableTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  if (target.isContentEditable) {
+    return true
+  }
+
+  const editableParent = target.closest(
+    "input, textarea, select, [contenteditable='true']"
+  )
+  if (editableParent) {
+    return true
+  }
+
+  return false
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "theme",
+  disableTransitionOnChange = true,
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = React.useState<Theme>(() => {
+    const storedTheme = localStorage.getItem(storageKey)
+    if (isTheme(storedTheme)) {
+      return storedTheme
+    }
+
+    return defaultTheme
+  })
+
+  const setTheme = React.useCallback(
+    (nextTheme: Theme) => {
+      localStorage.setItem(storageKey, nextTheme)
+      setThemeState(nextTheme)
+    },
+    [storageKey]
+  )
+
+  const applyTheme = React.useCallback(
+    (nextTheme: Theme) => {
+      const root = document.documentElement
+      const resolvedTheme =
+        nextTheme === "system" ? getSystemTheme() : nextTheme
+      const restoreTransitions = disableTransitionOnChange
+        ? disableTransitionsTemporarily()
+        : null
+
+      root.classList.remove("light", "dark")
+      root.classList.add(resolvedTheme)
+
+      if (restoreTransitions) {
+        restoreTransitions()
+      }
+    },
+    [disableTransitionOnChange]
+  )
+
+  React.useEffect(() => {
+    applyTheme(theme)
+
+    if (theme !== "system") {
+      return undefined
+    }
+
+    const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY)
+    const handleChange = () => {
+      applyTheme("system")
+    }
+
+    mediaQuery.addEventListener("change", handleChange)
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange)
+    }
+  }, [theme, applyTheme])
+
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.repeat) {
+        return
+      }
+
+      if (event.metaKey || event.ctrlKey || event.altKey) {
+        return
+      }
+
+      if (isEditableTarget(event.target)) {
+        return
+      }
+
+      if (event.key.toLowerCase() !== "d") {
+        return
+      }
+
+      setThemeState((currentTheme) => {
+        const nextTheme =
+          currentTheme === "dark"
+            ? "light"
+            : currentTheme === "light"
+              ? "dark"
+              : getSystemTheme() === "dark"
+                ? "light"
+                : "dark"
+
+        localStorage.setItem(storageKey, nextTheme)
+        return nextTheme
+      })
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [storageKey])
+
+  React.useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.storageArea !== localStorage) {
+        return
+      }
+
+      if (event.key !== storageKey) {
+        return
+      }
+
+      if (isTheme(event.newValue)) {
+        setThemeState(event.newValue)
+        return
+      }
+
+      setThemeState(defaultTheme)
+    }
+
+    window.addEventListener("storage", handleStorageChange)
+
+    return () => {
+      window.removeEventListener("storage", handleStorageChange)
+    }
+  }, [defaultTheme, storageKey])
+
+  const value = React.useMemo(
+    () => ({
+      theme,
+      setTheme,
+    }),
+    [theme, setTheme]
+  )
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = React.useContext(ThemeProviderContext)
+
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider")
+  }
+
+  return context
+}