@k3-universe/react-kit 0.0.1

package/src/kit/layouts/admin/components/AdminLayout.tsx

@@ -0,0 +1,251 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+} from '../../../../shadcn/ui/sidebar';
+import { Separator } from '../../../../shadcn/ui/separator';
+import {
+  Package,
+  LogOut,
+  ChevronRight,
+  ChevronDown,
+  Circle,
+} from 'lucide-react';
+
+import { Outlet, useLocation, Link } from '@tanstack/react-router';
+import { Fragment, useState, useCallback } from 'react';
+import ThemeToggle from './ThemeToggle';
+import { useAdminSidebarMenu } from '../hooks/menu';
+import type { AdminMenuItem } from '../types';
+import { AdminMenuProvider } from '../providers/AdminMenuProvider';
+
+type AdminLayoutProps = {
+  children?: React.ReactNode;
+  defaultItemIcon?: React.ComponentType<{ className?: string }>;
+  // When false, the sidebar cannot be collapsed and the trigger will be hidden
+  sidebarCollapsible?: boolean;
+  // Sidebar header customization
+  sidebarHeader?: React.ReactNode;
+  sidebarHeaderTitle?: React.ReactNode;
+  sidebarHeaderIcon?: React.ComponentType<{ className?: string }>;
+  // Header bar customization
+  headerAfterTrigger?: React.ReactNode; // renders right after the collapsible icon trigger
+  headerAfterTheme?: React.ReactNode; // renders right after the ThemeToggle on the right
+};
+
+function AdminLayoutContent({
+  children,
+  defaultItemIcon,
+  sidebarCollapsible = false,
+  sidebarHeader,
+  sidebarHeaderTitle,
+  sidebarHeaderIcon,
+  headerAfterTrigger,
+  headerAfterTheme,
+}: AdminLayoutProps) {
+  const { groups: sidebarGroups } = useAdminSidebarMenu();
+  const location = useLocation();
+  const [openMap, setOpenMap] = useState<Record<string, boolean>>({});
+  const FallbackIcon = defaultItemIcon ?? Circle;
+  const SidebarHeaderIcon = sidebarHeaderIcon ?? Package;
+  const sidebarTitle = sidebarHeaderTitle ?? 'Application';
+
+  // Function to check if menu item is active
+  const isMenuItemActive = (itemUrl: string | undefined) => {
+    if (!itemUrl) return false;
+    return location.pathname === itemUrl || location.pathname.startsWith(itemUrl + '/');
+  };
+
+  const setOpen = useCallback((id: string, val?: boolean) => {
+    setOpenMap((prev) => ({ ...prev, [id]: val ?? !prev[id] }));
+  }, []);
+
+  const hasActiveDescendant = (item: AdminMenuItem): boolean => {
+    if (!item.children || item.children.length === 0) return false;
+    return item.children.some((c) => isMenuItemActive(c.url) || hasActiveDescendant(c));
+  };
+
+  const renderItem = (item: AdminMenuItem, level = 0) => {
+    const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+    const isActive = isMenuItemActive(item.url);
+    const isOpen = openMap[item.id] ?? (hasChildren && hasActiveDescendant(item));
+
+    const indentClassMap = ['','pl-6','pl-10','pl-14'] as const;
+    const indent = indentClassMap[Math.min(level, 3)];
+
+    const content = (
+      <SidebarMenuItem key={item.id} className={`mb-1 ${level > 0 ? 'ml-1' : ''}`}>
+        <SidebarMenuButton
+          asChild={!!item.url && !hasChildren}
+          isActive={isActive}
+          tooltip={item.title}
+          onClick={() => {
+            if (hasChildren) setOpen(item.id);
+          }}
+          disabled={item.disabled}
+          className={`group relative overflow-hidden rounded-lg transition-all duration-200 hover:bg-sidebar-accent/70 data-[active=true]:bg-primary data-[active=true]:text-primary-foreground ${indent}`}
+        >
+          {item.url && !hasChildren ? (
+            <Link to={item.url} className="flex items-center gap-3 px-3">
+              {item.icon && (
+                <item.icon
+                  className={`h-4 w-4 transition-colors ${isActive ? 'text-primary-foreground' : 'text-sidebar-foreground group-hover:text-sidebar-accent-foreground'}`}
+                />
+              )}
+              <span className={`font-medium transition-colors ${isActive ? 'text-primary-foreground' : 'text-sidebar-foreground group-hover:text-sidebar-accent-foreground'}`}>{item.title}</span>
+              {item.badge && (
+                <span className="ml-auto text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">
+                  {item.badge}
+                </span>
+              )}
+            </Link>
+          ) : (
+            <div className="flex items-center gap-3 px-3 py-2.5 w-full">
+              {hasChildren && (
+                isOpen ? (
+                  <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                ) : (
+                  <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                )
+              )}
+              {item.icon ? (
+                <item.icon className="h-4 w-4 text-sidebar-foreground group-hover:text-sidebar-accent-foreground" />
+              ) : (
+                <FallbackIcon className="h-3.5 w-3.5 text-muted-foreground" />
+              )}
+              {item.url ? (
+                <Link to={item.url} className="flex-1 text-left">
+                  <span className="font-medium text-sidebar-foreground group-hover:text-sidebar-accent-foreground">{item.title}</span>
+                </Link>
+              ) : (
+                <span className="font-medium text-sidebar-foreground group-hover:text-sidebar-accent-foreground flex-1">{item.title}</span>
+              )}
+              {item.badge && (
+                <span className="ml-auto text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">
+                  {item.badge}
+                </span>
+              )}
+            </div>
+          )}
+        </SidebarMenuButton>
+        {hasChildren && isOpen && (
+          <div className="mt-1 flex flex-col">
+            {(item.children ?? []).map((child: AdminMenuItem) => renderItem(child, Math.min(level + 1, 3)))}
+          </div>
+        )}
+      </SidebarMenuItem>
+    );
+
+    return content;
+  };
+
+  return (
+      <div className="flex min-h-dvh w-full">
+      <Sidebar className="bg-sidebar border-r border-sidebar-border" collapsible={sidebarCollapsible ? "icon" : "none"}>
+        <SidebarHeader className="bg-sidebar border-b border-sidebar-border">
+          {sidebarHeader ? (
+            sidebarHeader
+          ) : (
+            <div className="sidebar-header-content flex items-center justify-center px-4 py-3">
+              <div className="flex items-center gap-2">
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                  <SidebarHeaderIcon className="h-4 w-4" />
+                </div>
+                <span className="font-semibold text-sidebar-foreground">{sidebarTitle}</span>
+              </div>
+            </div>
+          )}
+        </SidebarHeader>
+        <SidebarContent className="bg-sidebar px-2 py-4">
+          {sidebarGroups.map((group, idx) => (
+            <Fragment key={group.id}>
+              <SidebarGroup>
+                <SidebarGroupLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-3 mb-2 group-data-[collapsible=icon]:hidden">{group.label}</SidebarGroupLabel>
+                <SidebarGroupContent>
+                  <SidebarMenu className="group-data-[collapsible=icon]:items-center">
+                    {group.items.map((item) => renderItem(item, 0))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+              {idx < sidebarGroups.length - 1 && (
+                <Separator orientation="horizontal" className="bg-sidebar-border group-data-[collapsible=icon]:hidden" />
+              )}
+            </Fragment>
+          ))}
+        </SidebarContent>
+        <SidebarFooter className="bg-sidebar border-t border-sidebar-border px-2 py-3">
+          <SidebarMenu>
+            <SidebarMenuItem className="group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:justify-center">
+              <SidebarMenuButton
+                tooltip="Logout"
+                className="group relative overflow-hidden rounded-lg mx-1 transition-all duration-200 hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:flex group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!px-0 group-data-[collapsible=icon]:!gap-0"
+              >
+                <div className="flex items-center gap-3 px-3 py-2.5 group-data-[collapsible=icon]:w-full group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:!justify-center group-data-[collapsible=icon]:!gap-0 group-data-[collapsible=icon]:!px-0">
+                  <LogOut className="h-4 w-4 text-sidebar-foreground group-hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:mr-0" />
+                  <span className="font-medium text-sidebar-foreground group-hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden">Logout</span>
+                </div>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarFooter>
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center justify-between gap-4 border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-6">
+          <div className="flex items-center gap-4">
+            {sidebarCollapsible && (
+              <SidebarTrigger className="h-8 w-8 text-foreground hover:bg-accent hover:text-accent-foreground rounded-md" />
+            )}
+            {headerAfterTrigger}
+          </div>
+          <div className="flex items-center gap-3">
+            <ThemeToggle />
+            {headerAfterTheme}
+          </div>
+        </header>
+        <main className="flex flex-1 flex-col gap-4 p-4">
+          {children}
+          <Outlet />
+        </main>
+      </SidebarInset>
+      </div>
+  );
+}
+
+export default function AdminLayout({
+  children,
+  defaultItemIcon,
+  sidebarCollapsible,
+  sidebarHeader,
+  sidebarHeaderTitle,
+  sidebarHeaderIcon,
+  headerAfterTrigger,
+  headerAfterTheme,
+}: AdminLayoutProps) {
+  return (
+    <AdminMenuProvider>
+      <SidebarProvider>
+        <AdminLayoutContent
+          defaultItemIcon={defaultItemIcon}
+          sidebarCollapsible={sidebarCollapsible}
+          sidebarHeader={sidebarHeader}
+          sidebarHeaderTitle={sidebarHeaderTitle}
+          sidebarHeaderIcon={sidebarHeaderIcon}
+          headerAfterTrigger={headerAfterTrigger}
+          headerAfterTheme={headerAfterTheme}
+        >
+          {children}
+        </AdminLayoutContent>
+      </SidebarProvider>
+    </AdminMenuProvider>
+  );
+}

package/src/kit/layouts/admin/components/ThemeToggle.tsx

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { Sun, Moon, Laptop } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../../../shadcn/ui/dropdown-menu';
+import { Button } from '../../../../shadcn/ui/button';
+import { useTheme } from '../../../providers/ThemeProvider';
+
+export type ThemeToggleProps = {
+  className?: string;
+};
+
+export default function ThemeToggle({ className }: ThemeToggleProps) {
+  const { theme, setTheme } = useTheme();
+
+  const icon = useMemo(() => {
+    if (theme === 'light') return <Sun className="h-4 w-4" />;
+    if (theme === 'dark') return <Moon className="h-4 w-4" />;
+    return <Laptop className="h-4 w-4" />;
+  }, [theme]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={className}
+          aria-label="Toggle theme"
+        >
+          {icon}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" sideOffset={8} className="w-40">
+        <DropdownMenuLabel>Theme</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          <Sun className="mr-2 h-4 w-4" />
+          {' '}
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          <Moon className="mr-2 h-4 w-4" />
+          {' '}
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          <Laptop className="mr-2 h-4 w-4" />
+          {' '}
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/kit/layouts/admin/hooks/menu.ts

@@ -0,0 +1,26 @@
+import React, { createContext, useContext } from 'react';
+import { AdminMenuContextValue, AdminMenuGroup } from '../types';
+
+export const AdminMenuContext = createContext<AdminMenuContextValue | null>(null);
+
+export function useAdminSidebarMenu() {
+  const ctx = useContext(AdminMenuContext);
+  if (!ctx) {
+    // Provide a non-throwing fallback to allow usage without explicit provider
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => {};
+    return {
+      groups: [] as AdminMenuGroup[],
+      setGroups: noop as unknown as React.Dispatch<React.SetStateAction<AdminMenuGroup[]>>,
+      registerGroup: noop as AdminMenuContextValue['registerGroup'],
+      registerItem: noop as AdminMenuContextValue['registerItem'],
+      clear: noop,
+    } satisfies AdminMenuContextValue;
+  }
+  return ctx;
+}
+
+export function useAdminSidebarMenuRegistration() {
+  const { registerGroup, registerItem, clear } = useAdminSidebarMenu();
+  return { registerGroup, registerItem, clear };
+}

package/src/kit/layouts/admin/providers/AdminMenuProvider.tsx

@@ -0,0 +1,58 @@
+import { useState, useCallback, useMemo } from "react";
+import { AdminMenuGroup, AdminMenuContextValue } from "../types";
+import { AdminMenuContext } from "../hooks/menu";
+
+export type AdminMenuProviderProps = {
+  initialGroups?: AdminMenuGroup[];
+  children: React.ReactNode;
+};
+
+export function AdminMenuProvider({ initialGroups = [], children }: AdminMenuProviderProps) {
+  const [groups, setGroups] = useState<AdminMenuGroup[]>(initialGroups);
+
+  const registerGroup = useCallback<AdminMenuContextValue['registerGroup']>((group) => {
+    setGroups((prev) => {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.log('[AdminMenuProvider] registerGroup', group);
+      }
+      const exists = prev.some((g) => g.id === group.id);
+      if (exists) return prev;
+      return [...prev, { id: group.id, label: group.label, items: group.items ?? [] }];
+    });
+  }, []);
+
+  const registerItem = useCallback<AdminMenuContextValue['registerItem']>((groupId, item) => {
+    setGroups((prev) => {
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.log('[AdminMenuProvider] registerItem', groupId, item);
+      }
+      // if group exists, append or replace item by id
+      const idx = prev.findIndex((g) => g.id === groupId);
+      if (idx >= 0) {
+        const group = prev[idx];
+        const items = [...group.items];
+        const existingIdx = items.findIndex((it) => it.id === item.id);
+        if (existingIdx >= 0) items[existingIdx] = item; else items.push(item);
+        const next = [...prev];
+        next[idx] = { ...group, items };
+        return next;
+      }
+      // create group if missing
+      return [...prev, { id: groupId, label: groupId, items: [item] }];
+    });
+  }, []);
+
+  const clear = useCallback(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.log('[AdminMenuProvider] clear');
+    }
+    setGroups([]);
+  }, []);
+
+  const value = useMemo<AdminMenuContextValue>(() => ({ groups, setGroups, registerGroup, registerItem, clear }), [groups, registerGroup, registerItem, clear]);
+
+  return <AdminMenuContext.Provider value={value}>{children}</AdminMenuContext.Provider>;
+}

package/src/kit/layouts/admin/types/index.ts

@@ -0,0 +1,26 @@
+export type AdminMenuItem = {
+  id: string;
+  title: string;
+  url?: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  badge?: string | number;
+  onClick?: () => void;
+  disabled?: boolean;
+  children?: AdminMenuItem[];
+};
+
+export type AdminMenuGroup = {
+  id: string;
+  label: string;
+  items: AdminMenuItem[];
+};
+
+export type AdminMenuContextValue = {
+  groups: AdminMenuGroup[];
+  setGroups: React.Dispatch<React.SetStateAction<AdminMenuGroup[]>>;
+  registerGroup: (
+    group: Omit<AdminMenuGroup, 'items'> & { items?: AdminMenuItem[] }
+  ) => void;
+  registerItem: (groupId: string, item: AdminMenuItem) => void;
+  clear: () => void;
+};

package/src/kit/providers/ThemeProvider.tsx

@@ -0,0 +1,90 @@
+import { createContext, use, useEffect, useState } from 'react';
+
+type Theme = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'vite-ui-theme',
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  );
+
+  // On first mount, if there is no saved preference or it's 'system' and
+  // the app provides a concrete default (e.g., 'light'), apply it.
+  useEffect(() => {
+    const stored = localStorage.getItem(storageKey) as Theme | null;
+    if ((!stored || stored === 'system') && defaultTheme !== 'system') {
+      localStorage.setItem(storageKey, defaultTheme);
+      setTheme(defaultTheme);
+    }
+  }, []);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    const body = window.document.body;
+    const app = window.document.getElementById('app');
+    root.classList.remove('light', 'dark');
+    body.classList.remove('light', 'dark');
+    app?.classList.remove('light', 'dark');
+
+    const resolved = (() => {
+      if (theme === 'system') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light';
+      }
+      return theme;
+    })();
+
+    root.classList.add(resolved);
+    body.classList.add(resolved);
+    app?.classList.add(resolved);
+    root.style.colorScheme = resolved;
+    // Important for Tailwind v4 @theme dark support
+    root.setAttribute('data-theme', resolved);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext {...props} value={value}>
+      {children}
+    </ThemeProviderContext>
+  );
+}
+
+export const useTheme = () => {
+  const context = use(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error('useTheme must be used within a ThemeProvider');
+
+  return context;
+};

package/src/kit/themes/clean-slate.css

@@ -0,0 +1,147 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+:root {
+  --background: oklch(0.98 0 0);
+  --foreground: oklch(0.28 0.04 260.33);
+  --card: oklch(1.00 0 0);
+  --card-foreground: oklch(0.28 0.04 260.33);
+  --popover: oklch(1.00 0 0);
+  --popover-foreground: oklch(0.28 0.04 260.33);
+  --primary: oklch(0.59 0.20 277.06);
+  --primary-foreground: oklch(1.00 0 0);
+  --secondary: oklch(0.93 0.01 261.82);
+  --secondary-foreground: oklch(0.37 0.03 259.73);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.55 0.02 264.41);
+  --accent: oklch(0.93 0.03 273.66);
+  --accent-foreground: oklch(0.37 0.03 259.73);
+  --destructive: oklch(0.64 0.21 25.39);
+  --border: oklch(0.87 0.01 261.81);
+  --input: oklch(0.87 0.01 261.81);
+  --ring: oklch(0.59 0.20 277.06);
+  --chart-1: oklch(0.59 0.20 277.06);
+  --chart-2: oklch(0.51 0.23 276.97);
+  --chart-3: oklch(0.46 0.21 277.06);
+  --chart-4: oklch(0.40 0.18 277.16);
+  --chart-5: oklch(0.36 0.14 278.65);
+  --sidebar: oklch(0.97 0 0);
+  --sidebar-foreground: oklch(0.28 0.04 260.33);
+  --sidebar-primary: oklch(0.59 0.20 277.06);
+  --sidebar-primary-foreground: oklch(1.00 0 0);
+  --sidebar-accent: oklch(0.93 0.03 273.66);
+  --sidebar-accent-foreground: oklch(0.37 0.03 259.73);
+  --sidebar-border: oklch(0.87 0.01 261.81);
+  --sidebar-ring: oklch(0.59 0.20 277.06);
+
+  --font-sans: Inter, sans-serif;
+  --font-serif: Merriweather, serif;
+  --font-mono: JetBrains Mono, monospace;
+
+  --radius: 0.5rem;
+  
+  --shadow-2xs: 0px 4px 8px -1px oklch(0.00 0 0 / 0.05);
+  --shadow-xs: 0px 4px 8px -1px oklch(0.00 0 0 / 0.05);
+  --shadow-sm: 0px 4px 8px -1px oklch(0.00 0 0 / 0.10), 0px 1px 2px -2px oklch(0.00 0 0 / 0.10);
+  --shadow: 0px 4px 8px -1px oklch(0.00 0 0 / 0.10), 0px 1px 2px -2px oklch(0.00 0 0 / 0.10);
+  --shadow-md: 0px 4px 8px -1px oklch(0.00 0 0 / 0.10), 0px 2px 4px -2px oklch(0.00 0 0 / 0.10);
+  --shadow-lg: 0px 4px 8px -1px oklch(0.00 0 0 / 0.10), 0px 4px 6px -2px oklch(0.00 0 0 / 0.10);
+  --shadow-xl: 0px 4px 8px -1px oklch(0.00 0 0 / 0.10), 0px 8px 10px -2px oklch(0.00 0 0 / 0.10);
+  --shadow-2xl: 0px 4px 8px -1px oklch(0.00 0 0 / 0.25);
+  
+}
+
+.dark {
+  --background: oklch(0.21 0.04 264.04);
+  --foreground: oklch(0.93 0.01 256.71);
+  --card: oklch(0.28 0.04 260.33);
+  --card-foreground: oklch(0.93 0.01 256.71);
+  --popover: oklch(0.28 0.04 260.33);
+  --popover-foreground: oklch(0.93 0.01 256.71);
+  --primary: oklch(0.68 0.16 276.93);
+  --primary-foreground: oklch(0.21 0.04 264.04);
+  --secondary: oklch(0.34 0.03 261.83);
+  --secondary-foreground: oklch(0.87 0.01 261.81);
+  --muted: oklch(0.28 0.04 260.33);
+  --muted-foreground: oklch(0.71 0.02 261.33);
+  --accent: oklch(0.37 0.03 259.73);
+  --accent-foreground: oklch(0.87 0.01 261.81);
+  --destructive: oklch(0.64 0.21 25.39);
+  --border: oklch(0.45 0.03 257.68);
+  --input: oklch(0.45 0.03 257.68);
+  --ring: oklch(0.68 0.16 276.93);
+  --chart-1: oklch(0.68 0.16 276.93);
+  --chart-2: oklch(0.59 0.20 277.06);
+  --chart-3: oklch(0.51 0.23 276.97);
+  --chart-4: oklch(0.46 0.21 277.06);
+  --chart-5: oklch(0.40 0.18 277.16);
+  --sidebar: oklch(0.28 0.04 260.33);
+  --sidebar-foreground: oklch(0.93 0.01 256.71);
+  --sidebar-primary: oklch(0.68 0.16 276.93);
+  --sidebar-primary-foreground: oklch(0.21 0.04 264.04);
+  --sidebar-accent: oklch(0.37 0.03 259.73);
+  --sidebar-accent-foreground: oklch(0.87 0.01 261.81);
+  --sidebar-border: oklch(0.45 0.03 257.68);
+  --sidebar-ring: oklch(0.68 0.16 276.93);
+  
+  --shadow-2xs: 0 1px 3px 0px oklch(0.00 0 0 / 0.05);
+  --shadow-xs: 0 1px 3px 0px oklch(0.00 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 1px 2px -1px oklch(0.00 0 0 / 0.10);
+  --shadow: 0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 1px 2px -1px oklch(0.00 0 0 / 0.10);
+  --shadow-md: 0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 2px 4px -1px oklch(0.00 0 0 / 0.10);
+  --shadow-lg: 0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 4px 6px -1px oklch(0.00 0 0 / 0.10);
+  --shadow-xl: 0 1px 3px 0px oklch(0.00 0 0 / 0.10), 0 8px 10px -1px oklch(0.00 0 0 / 0.10);
+  --shadow-2xl: 0 1px 3px 0px oklch(0.00 0 0 / 0.25);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+}