@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/components/catalyst-ui/overlays/dual-sidebar.tsx

@@ -0,0 +1,4142 @@
+import React, { createContext, useCallback, useContext, useEffect, useState, forwardRef } from "react";
+import { type VariantProps, cva } from "class-variance-authority";
+import { useIsMobile } from "~/modules/hooks/use-mobile";
+import { cn, Loader } from "~/components/catalyst-ui";
+import { Button, Drawer, TooltipProvider, Tooltip, TooltipContent, TooltipTrigger, Input, Skeleton, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger, LoaderX, } from "~/components/catalyst-ui";
+import { useNavigation, NavLink, useLocation } from "@remix-run/react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { Slot } from "@radix-ui/react-slot";
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { Bell, Bot, Globe, Home, Keyboard, Link, Lock, Menu, MessageCircle, Paintbrush, Settings, Video, } from "lucide-react";
+import { Circle, Check, ChevronRight } from "@catalystsoftware/icons";
+import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, } from "~/components/catalyst-ui";
+import { motion } from "motion/react";
+
+/**
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ DualSidebar System ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ★ ━━━━ ☆ ━━━━  ━━━━ ☆ ━━━━ ★
+* type SidebarVariant = 'sidebar' | 'inset' | 'floating' | 'frosted' | 'card' | 'glass' | 'compact-card' | 'bordered' | 'minimal' | 'elevated'
+* type SidebarSide = 'left' | 'right'
+* type SidebarCollapsible = 'offcanvas' | 'icon' | 'none'
+* type DSTheme = 'neutral' | 'red' | 'orange' | 'green' | 'blue' | 'violet' | 'default'
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Basic Setup ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // App.tsx or root component
+* <DSProvider>
+*   <DSLeft variant="sidebar">
+*     <DSHeader>Left Sidebar</DSHeader>
+*     <DSContent>
+*       <DSMenu>
+*         <DSMenuLink to="/dashboard" icon={<Home />}>Dashboard</DSMenuLink>
+*         <DSMenuLink to="/profile" icon={<User />}>Profile</DSMenuLink>
+*       </DSMenu>
+*     </DSContent>
+*   </DSLeft>
+*   
+*   <DSRight variant="floating">
+*     <DSHeader>Right Sidebar</DSHeader>
+*     <DSContent>Right content</DSContent>
+*   </DSRight>
+*   
+*   <DSInset>
+*     <main>Main content here</main>
+*   </DSInset>
+* </DSProvider>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ With Icon Sidebars ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DSProvider>
+*   <DSLeftIcon iconWidth="48px">
+*     <DSContent>
+*       <DSMenu>
+*         <DSMenuButton tooltip="Dashboard"><Home /></DSMenuButton>
+*         <DSMenuButton tooltip="Profile"><User /></DSMenuButton>
+*       </DSMenu>
+*     </DSContent>
+*   </DSLeftIcon>
+*   
+*   <DSLeft variant="sidebar">
+*     <DSHeader>Full Sidebar</DSHeader>
+*     <DSContent>Expanded content</DSContent>
+*   </DSLeft>
+*   
+*   <DSInset>
+*     Main content area
+*   </DSInset>
+* </DSProvider>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Variant Examples ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // Inset variant
+* <DSLeft variant="inset">
+*   <DSHeader>Inset Sidebar</DSHeader>
+*   <DSContent>Rounded sidebar with padding</DSContent>
+* </DSLeft>
+* 
+* // Floating variant
+* <DSRight variant="floating">
+*   <DSHeader>Floating Sidebar</DSHeader>
+*   <DSContent>Rounded with shadow</DSContent>
+* </DSRight>
+* 
+* // Frosted glass variant
+* <DSLeft variant="frosted">
+*   <DSHeader>Glass Sidebar</DSHeader>
+*   <DSContent>Backdrop blur effect</DSContent>
+* </DSLeft>
+* 
+* // Card variant
+* <DSRight variant="card">
+*   <DSHeader>Card Sidebar</DSHeader>
+*   <DSContent>Card-like appearance</DSContent>
+* </DSRight>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Menu Components ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DSMenu>
+*   // Regular menu button
+*   <DSMenuButton variant="default" icon={<Home />}>
+*     Dashboard
+*   </DSMenuButton>
+*   
+*   // Active menu button
+*   <DSMenuButton isActive variant="solid" icon={<Settings />}>
+*     Settings
+*   </DSMenuButton>
+*   
+*   // With badge
+*   <DSMenuButton icon={<Bell />}>
+*     Notifications
+*     <DSMenuBadge variant="primary">5</DSMenuBadge>
+*   </DSMenuButton>
+*   
+*   // Navigation link with loading state
+*   <DSMenuLink to="/dashboard" icon={<Home />}>
+*     Dashboard
+*   </DSMenuLink>
+*   
+*   // External link
+*   <DSMenuAnchor to="https://example.com" icon={<ExternalLink />}>
+*     External
+*   </DSMenuAnchor>
+*   
+*   // With submenu
+*   <DSMenuItem>
+*     <DSMenuButton icon={<Folder />}>Documents</DSMenuButton>
+*     <DSMenuSub>
+*       <DSMenuSubButton>Resume.pdf</DSMenuSubButton>
+*       <DSMenuSubButton>Projects.zip</DSMenuSubButton>
+*     </DSMenuSub>
+*   </DSMenuItem>
+* </DSMenu>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Group Components ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DSGroup variant="card">
+*   <DSGroupLabel variant="prominent">Account</DSGroupLabel>
+*   <DSGroupContent>
+*     <DSMenuLink to="/profile" icon={<User />}>Profile</DSMenuLink>
+*     <DSMenuLink to="/settings" icon={<Settings />}>Settings</DSMenuLink>
+*   </DSGroupContent>
+* </DSGroup>
+* 
+* <DSGroup variant="separated">
+*   <DSGroupLabel>Navigation</DSGroupLabel>
+*   <DSGroupContent>
+*     <DSMenuLink to="/dashboard" icon={<Home />}>Dashboard</DSMenuLink>
+*     <DSMenuLink to="/analytics" icon={<Chart />}>Analytics</DSMenuLink>
+*   </DSGroupContent>
+* </DSGroup>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Theme System ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // Using the theme selector
+* <DSThemeSelector size={28}>
+*   <Paintbrush className="size-4" />
+* </DSThemeSelector>
+* 
+* // Programmatic theme control
+* const { theme, setTheme } = useDSTheme()
+* 
+* // Changing theme
+* <button onClick={() => setTheme('blue')}>
+*   Switch to Blue Theme
+* </button>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Drawer Components ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // Top drawer
+* <DSD drawerHeight="300px" variant="card">
+*   <DSTrigger>Open Drawer</DSTrigger>
+*   <DSDContent>
+*     <DSDHeader>
+*       <DSDTitle>Notifications</DSDTitle>
+*       <DSDDescription>You have 5 new notifications</DSDDescription>
+*     </DSDHeader>
+*     <div className="p-4">Drawer content</div>
+*     <DSDFooter>
+*       <Button>Close</Button>
+*     </DSDFooter>
+*   </DSDContent>
+* </DSD>
+* 
+* // Side drawer variants
+* <DSD direction="right" variant="glass">
+*   <DSTrigger>Open Side Drawer</DSTrigger>
+*   <DSDContent>
+*     <DSDHeader>Side Panel</DSDHeader>
+*     <div className="p-4">Side content</div>
+*   </DSDContent>
+* </DSD>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Dropdown Menu ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DSDM>
+*   <DSDMTrigger asChild>
+*     <Button variant="ghost">Open Menu</Button>
+*   </DSDMTrigger>
+*   <DSDMContent>
+*     <DSDMGroup>
+*       <DSDMItem>
+*         <User className="mr-2" /> Profile
+*       </DSDMItem>
+*       <DSDMItem>
+*         <Settings className="mr-2" /> Settings
+*       </DSDMItem>
+*     </DSDMGroup>
+*     <DSDMSeparator />
+*     <DSDMItem variant="destructive">
+*       <LogOut className="mr-2" /> Logout
+*     </DSDMItem>
+*   </DSDMContent>
+* </DSDM>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Collapsible Sections ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DSC>
+*   <DSCTrigger asChild>
+*     <DSMenuButton icon={<ChevronRight />}>Settings</DSMenuButton>
+*   </DSCTrigger>
+*   <DSCContent>
+*     <DSMenuSub>
+*       <DSMenuSubButton>Appearance</DSMenuSubButton>
+*       <DSMenuSubButton>Notifications</DSMenuSubButton>
+*       <DSMenuSubButton>Privacy</DSMenuSubButton>
+*     </DSMenuSub>
+*   </DSCContent>
+* </DSC>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Props Reference ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* - DSProvider Props:
+* - `defaultOpenLeft`: boolean - Default left sidebar open state
+* - `defaultOpenRight`: boolean - Default right sidebar open state
+* - `defaultWidth`: string - Default sidebar width (default: "275px")
+* 
+* - DSLeft/DSRight Props:
+* - `variant`: SidebarVariant - Visual style of sidebar
+* - `collapsible`: SidebarCollapsible - Collapse behavior
+* - `loadingUI`: boolean - Show loading skeleton (default: true)
+* 
+* - DSLeftIcon/DSRightIcon Props:
+* - `iconWidth`: string - Width of icon sidebar (default: "48px")
+* - `variant`: SidebarVariant - Visual style
+* 
+* - DSInset Props:
+* - `variant`: 'default' | 'inset' | 'card' | 'bordered' - Main content area style
+* 
+* - DSMenuButton Props:
+* - `variant`: 'default' | 'ghost' | 'outline' | 'soft' | 'solid' | 'minimal' | 'bordered' | 'pill'
+* - `size`: 'default' | 'sm' | 'lg' | 'icon'
+* - `isActive`: boolean - Active state styling
+* - `tooltip`: string | TooltipContentProps - Tooltip content
+* - `icon`: ReactNode - Icon element
+* 
+* - DSMenuLink/DSMenuAnchor Props:
+* - `to`: string - Navigation path or URL
+* - `variant`: Menu button variant
+* - `size`: Menu button size
+* - `icon`: ReactNode - Icon element
+* - `tooltip`: string - Tooltip text
+* - `newTab`: boolean - Open in new tab (DSMenuAnchor only)
+* 
+* - DSGroup Props:
+* - `variant`: 'default' | 'separated' | 'card' | 'bordered' | 'subtle'
+* 
+* - DSGroupLabel Props:
+* - `variant`: 'default' | 'prominent' | 'subtle' | 'separated'
+* - `asChild`: boolean - Merge with child element
+* 
+* - DSD (Drawer) Props:
+* - `drawerHeight`: string - Height when open
+* - `variant`: 'default' | 'card' | 'glass' | 'elevated' | 'bordered' | 'macos'
+* - `direction`: 'top' | 'bottom' | 'right' | 'left'
+* - `size`: 'default' | 'sm' | 'md' | 'lg' | 'full'
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Hooks & Context ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```typescript
+* // Use sidebar state and controls
+* const {
+*   leftState,        // 'expanded' | 'collapsed'
+*   rightState,       // 'expanded' | 'collapsed'
+*   toggleLeft,       // () => void
+*   toggleRight,      // () => void
+*   openLeft,         // boolean
+*   openRight,        // boolean
+*   setOpenLeft,      // (open: boolean) => void
+*   setOpenRight,     // (open: boolean) => void
+*   isMobile,         // boolean
+*   sidebarWidth,     // number
+*   leftVariant,      // SidebarVariant
+*   rightVariant,     // SidebarVariant
+*   setLeftVariant,   // (variant: SidebarVariant) => void
+*   setRightVariant,  // (variant: SidebarVariant) => void
+* } = useDS()
+* 
+* // Use theme controls
+* const {
+*   theme,            // DSTheme
+*   setTheme,         // (theme: DSTheme) => void
+*   themeVars,        // Record<string, string>
+* } = useDSTheme()
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Keyboard Shortcuts ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* - **Cmd/Ctrl + B**: Toggle left sidebar
+* - **Cmd/Ctrl + G**: Toggle right sidebar
+* - **Mobile**: Swipe gestures supported
+* - **Accessibility**: Full keyboard navigation and ARIA labels
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Responsive Behavior ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* - **Desktop**: Sidebars can be expanded/collapsed with icon mode
+* - **Tablet**: Adaptive layouts with optimized spacing
+* - **Mobile**: Sidebars become offcanvas drawers with swipe support
+* - **Auto-adjust**: Content area automatically resizes based on sidebar states
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Theming System ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```typescript
+* // Available themes
+* const themes = [
+*   'neutral',  // Default neutral colors
+*   'red',      // Red accent theme
+*   'orange',   // Orange accent theme  
+*   'green',    // Green accent theme
+*   'blue',     // Blue accent theme (default)
+*   'violet',   // Purple accent theme
+*   'default'   // System default
+* ]
+* 
+* // Theme persistence
+* // - Automatically saved to localStorage
+* // - Survives page refreshes
+* // - CSS custom properties updated in real-time
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Loading States ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* // Show loading skeleton during navigation
+* <DSLeft loadingUI={true}>
+*   <DSContent>
+*     <DSMenuSkeleton showIcon />
+*     <DSMenuSkeleton showIcon />
+*     <DSMenuSkeleton />
+*   </DSContent>
+* </DSLeft>
+* 
+* // Or use the standalone loader
+* <DSLoading variant="card" size="md" />
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Example: Complete Layout ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DSProvider defaultOpenLeft={true} defaultWidth="280px">
+*   <DSLeftIcon>
+*     <DSContent>
+*       <DSMenu>
+*         <DSMenuButton tooltip="Dashboard"><Home /></DSMenuButton>
+*         <DSMenuButton tooltip="Messages"><MessageCircle /></DSMenuButton>
+*         <DSMenuButton tooltip="Settings"><Settings /></DSMenuButton>
+*       </DSMenu>
+*     </DSContent>
+*   </DSLeftIcon>
+*   
+*   <DSLeft variant="frosted" collapsible="offcanvas">
+*     <DSHeader>
+*       <div className="flex items-center gap-3">
+*         <Avatar>
+*           <AvatarImage src="/avatar.jpg" />
+*           <AvatarFallback>JD</AvatarFallback>
+*         </Avatar>
+*         <div>
+*           <h3 className="font-semibold">John Doe</h3>
+*           <p className="text-sm text-muted-foreground">Admin</p>
+*         </div>
+*       </div>
+*     </DSHeader>
+*     
+*     <DSContent>
+*       <DSGroup variant="card">
+*         <DSGroupLabel>Navigation</DSGroupLabel>
+*         <DSMenu>
+*           <DSMenuLink to="/dashboard" icon={<Home />}>Dashboard</DSMenuLink>
+*           <DSMenuLink to="/analytics" icon={<ChartBar />}>Analytics</DSMenuLink>
+*           <DSMenuLink to="/users" icon={<Users />}>Users</DSMenuLink>
+*         </DSMenu>
+*       </DSGroup>
+*       
+*       <DSGroup variant="separated">
+*         <DSGroupLabel>Settings</DSGroupLabel>
+*         <DSMenu>
+*           <DSMenuLink to="/settings" icon={<Settings />}>General</DSMenuLink>
+*           <DSMenuLink to="/notifications" icon={<Bell />}>
+*             Notifications
+*             <DSMenuBadge variant="primary">3</DSMenuBadge>
+*           </DSMenuLink>
+*         </DSMenu>
+*       </DSGroup>
+*     </DSContent>
+*     
+*     <DSFooter>
+*       <div className="flex items-center justify-between">
+*         <DSThemeSelector size={24}>
+*           <Paintbrush className="size-3" />
+*         </DSThemeSelector>
+*         <Button variant="ghost" size="icon">
+*           <LogOut className="size-4" />
+*         </Button>
+*       </div>
+*     </DSFooter>
+*   </DSLeft>
+*   
+*   <DSRight variant="floating">
+*     <DSHeader>
+*       <h3 className="font-semibold">Quick Actions</h3>
+*     </DSHeader>
+*     <DSContent>
+*       <div className="p-4">Right panel content</div>
+*     </DSContent>
+*   </DSRight>
+*   
+*   <DSInset variant="inset">
+*     <div className="p-6">
+*       <h1 className="text-3xl font-bold">Dashboard</h1>
+*       <p className="mt-2 text-muted-foreground">Welcome to your workspace</p>
+*     </div>
+*   </DSInset>
+*   
+*   <DSD drawerHeight="400px" variant="macos">
+*     <DSDContent>
+*       <DSDHeader>
+*         <DSDTitle>Notifications</DSDTitle>
+*       </DSDHeader>
+*       <div className="p-4">Notification list</div>
+*     </DSDContent>
+*   </DSD>
+* </DSProvider>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Advanced Features ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* 1. **Dual Sidebar Support**: Independent left and right sidebars
+* 2. **Icon Mode**: Persistent icon-only sidebars
+* 3. **Multiple Variants**: 10+ visual styles for sidebars
+* 4. **Theme System**: 7 built-in color themes with persistence
+* 5. **Responsive Design**: Mobile-optimized offcanvas drawers
+* 6. **Loading States**: Built-in skeleton loaders
+* 7. **Keyboard Navigation**: Full accessibility support
+* 8. **Drawer System**: Slide-in panels from any direction
+* 9. **Dropdown Menus**: Rich context menus
+* 10. **Collapsible Sections**: Expandable/collapsible content areas
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Performance Notes ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* - **Lazy Loading**: Components load only when needed
+* - **CSS Variables**: Efficient theming with CSS custom properties
+* - **Memoization**: Heavy use of React.memo and useMemo
+* - **Bundle Splitting**: Code-split for better performance
+* - **Optimized Renders**: Minimal re-renders with context optimization
+* 
+*/
+
+
+const DS_COOKIE_NAME = "ds_state";
+const DS_COOKIE_NAME_RIGHT = "ds_state_right";
+const DS_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const DS_WIDTH = "275px";
+const DS_WIDTH_MOBILE = "288px";
+const DS_WIDTH_ICON = "48px";
+const DS_KEYBOARD_SHORTCUT_LEFT = "b";
+const DS_KEYBOARD_SHORTCUT_RIGHT = "g";
+
+const THEME_VERSION = "v3";
+const THEME_OPTIONS = ["neutral", "red", "orange", "green", "blue", "violet", "default"] as const;
+const LOCAL_DS_STORAGE_KEY = "ds-theme-v3";
+
+type DSTheme = (typeof THEME_OPTIONS)[number];
+
+type SidebarVariant = "sidebar" | "inset" | "floating" | "frosted" | "floating-card" | "glass" | "compact-card" | "minimal" | "bordered" | "elevated";
+type SidebarSide = 'left' | 'right'
+type SidebarCollapsible = 'offcanvas' | 'icon' | 'none'
+const dsVariants = cva('', {
+	variants: {
+		variant: {
+			sidebar: 'fixed inset-y-0 z-20 bg-sidebar flex flex-col transition-transform duration-300 h-full',
+			inset: 'fixed inset-y-0 z-20 bg-sidebar rounded-[15px] p-[15px] flex flex-col transition-transform duration-300 shadow-2xl h-full',
+			floating: 'fixed inset-y-0 z-20 bg-sidebar rounded-[15px] flex flex-col transition-transform duration-300 shadow-2xl h-full',
+			frosted: 'fixed inset-y-0 z-20 backdrop-blur-2xl bg-background/80 border border-white/10 shadow-xl flex flex-col transition-transform duration-300 h-full',
+			card: 'fixed z-20 bg-sidebar rounded-xl shadow-2xl flex flex-col transition-all duration-300 my-[5vh] max-h-[90vh] overflow-auto h-full',
+			glass: 'fixed inset-y-0 z-20 backdrop-blur-xl bg-white/10 border border-white/20 shadow-lg flex flex-col transition-transform duration-300 h-full',
+			'compact-card': 'fixed z-20 bg-sidebar rounded-lg shadow-lg flex flex-col transition-all duration-300 my-2 max-h-[95vh] overflow-auto',
+			bordered: 'fixed inset-y-0 z-20 bg-sidebar border-2 border-primary/20 rounded-lg shadow-sm flex flex-col transition-transform duration-300 h-full',
+			minimal: 'fixed inset-y-0 z-20 bg-sidebar flex flex-col transition-transform duration-300 h-full',
+			elevated: 'fixed inset-y-0 z-20 bg-sidebar shadow-2xl rounded-2xl border border-border/50 flex flex-col transition-transform duration-300 h-full',
+		},
+	},
+	defaultVariants: {
+		variant: 'sidebar',
+	},
+})
+const iconDSVariants = cva('fixed inset-y-0 z-20 hidden h-svh flex-col md:flex', {
+	variants: {
+		variant: {
+			sidebar: 'bg-background',
+			inset: 'bg-sidebar',
+			floating: 'bg-sidebar m-2 rounded-lg max-h-[calc(100vh-16px)]',
+			frosted: 'backdrop-blur-xl bg-background/70',
+			card: 'bg-sidebar rounded-lg my-[5vh] max-h-[90vh]',
+			glass: 'backdrop-blur-lg bg-white/5',
+			'compact-card': 'bg-sidebar rounded-md my-2 max-h-[95vh]',
+			bordered: 'bg-sidebar border-2 border-primary/10',
+			minimal: 'bg-background',
+			elevated: 'bg-sidebar shadow-xl rounded-lg border border-border/30',
+		},
+		side: {
+			left: 'left-0 border-r border-border',
+			right: 'right-0 border-l border-border',
+		},
+	},
+	defaultVariants: {
+		variant: 'sidebar',
+		side: 'left',
+	},
+});
+const DSMenuButtonVariants = cva(
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none  transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 group-has-[[data-dual-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", // ring-sidebar-ring
+	{
+		variants: {
+			variant: {
+				default: [
+					"data-[active=true]:text-sidebar-accent-foreground",
+					"text-sidebar-muted-foreground hover:text-sidebar-foreground border-l-2 border-transparent duration-300 hover:border-primary" // hover:text-primary 
+				],
+				ghost: "hover:bg-sidebar-accent/50 hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent/70",
+				outline: "bg-transparent border border-sidebar-border hover:bg-sidebar-accent hover:border-sidebar-accent data-[active=true]:bg-sidebar-accent data-[active=true]:border-sidebar-accent data-[active=true]:text-foreground",
+				soft: "hover:bg-sidebar-accent/30 hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent/50",
+				solid: "bg-sidebar-accent/10 hover:bg-sidebar-accent data-[active=true]:bg-primary data-[active=true]:text-primary-foreground",
+				minimal: "hover:text-primary data-[active=true]:text-primary data-[active=true]:font-semibold",
+				bordered: "border-l-2 border-transparent hover:border-sidebar-accent hover:bg-sidebar-accent/20 data-[active=true]:border-primary data-[active=true]:bg-sidebar-accent",
+				pill: "rounded-full hover:bg-sidebar-accent data-[active=true]:bg-primary data-[active=true]:text-primary-foreground",
+			},
+			size: {
+				default: "h-9 text-sm px-3",
+				sm: "h-7 text-xs px-2",
+				lg: "h-11 text-base px-4 group-data-[collapsible=icon]:!p-0",
+				icon: "h-9 w-9 p-0 justify-center",
+			},
+			isActive: {
+				true: "font-medium text-sidebar-foreground border-primary",
+				false: "",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+			isActive: false,
+		},
+	}
+);
+const groupVariants = cva("relative flex w-full min-w-0 flex-col p-2", {
+	variants: {
+		variant: {
+			default: "",
+			separated: "border-t border-sidebar-border pt-4 mt-2",
+			card: "bg-sidebar-accent/5 rounded-lg p-3 m-1",
+			bordered: "border border-sidebar-border rounded-md p-3 m-1",
+			subtle: "bg-sidebar-accent/3 p-3",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+const groupLabelVariants = cva(
+	"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "",
+				prominent: "font-semibold text-sidebar-foreground uppercase tracking-wider",
+				subtle: "text-xs text-muted-foreground",
+				separated: "border-b border-sidebar-border pb-2 mb-2",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+);
+const menuItemVariants = cva("group/menu-item relative", {
+	variants: {
+		variant: {
+			default: "",
+			spaced: "my-0.5",
+			compact: "my-0",
+			comfortable: "my-1",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+const drawerVariants = cva(["group/drawer-content fixed z-50 flex flex-col",],
+	{
+		variants: {
+			variant: {
+				default: "",
+				card: [
+					"bg-card rounded-t-xl shadow-xl",
+					"data-[vaul-drawer-direction=bottom]:mb-5",
+					"data-[vaul-drawer-direction=top]:mt-5",
+					"data-[vaul-drawer-direction=left]:ml-5",
+					"data-[vaul-drawer-direction=right]:mr-5",
+				],
+				glass: [
+					"backdrop-blur-xl bg-background/80 border-t border-white/10 max-w-sm ",
+					"data-[vaul-drawer-direction=bottom]:mb-5",
+					"data-[vaul-drawer-direction=top]:mt-5",
+					"data-[vaul-drawer-direction=left]:ml-5",
+					"data-[vaul-drawer-direction=right]:mr-5",
+				],
+				elevated: [
+					"bg-background shadow-2xl max-w-sm ",
+					"data-[vaul-drawer-direction=bottom]:mb-5",
+					"data-[vaul-drawer-direction=top]:mt-5",
+					"data-[vaul-drawer-direction=left]:ml-5",
+					"data-[vaul-drawer-direction=right]:mr-5",
+				],
+				bordered: [
+					"bg-background border-t-2 border-primary/20 max-w-sm ",
+					"data-[vaul-drawer-direction=bottom]:mb-5",
+					"data-[vaul-drawer-direction=top]:mt-5",
+					"data-[vaul-drawer-direction=left]:ml-5",
+					"data-[vaul-drawer-direction=right]:mr-5",
+				],
+				macos: [
+					"backdrop-blur-xl bg-card/70 shadow-2xl border border-border/50 w-full max-w-sm rounded-3xl mx-auto ",
+					"data-[vaul-drawer-direction=bottom]:mb-5",
+					"data-[vaul-drawer-direction=top]:mt-5",
+					"data-[vaul-drawer-direction=left]:ml-5",
+					"data-[vaul-drawer-direction=right]:mr-5",
+				],
+			},
+			direction: {
+				top: "border-b rounded-b-lg max-h-[80vh] mb-24 top-0 inset-x-0 left-1/2 -translate-x-1/2",
+				bottom: "border-t rounded-t-lg max-h-[80vh] mt-24 bottom-0 inset-x-0 left-1/2 -translate-x-1/2",
+				right: "sm:max-w-sm border-l w-3/4 right-0 inset-y-0 top-1/2 -translate-y-1/2",
+				left: "inset-y-0 left-0 w-3/4 border-r sm:max-w-sm top-1/2 -translate-y-1/2",
+			},
+			size: {
+				default: "h-auto",
+				sm: "h-[50vh]",
+				md: "h-[70vh]",
+				lg: "h-[90vh]",
+				full: "h-screen",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	}
+);
+const loadingVariants = cva(
+	"flex flex-col items-center justify-center text-center p-8 min-h-[400px] h-screen bg-gradient-to-b from-background to-muted/20",
+	{
+		variants: {
+			variant: {
+				default: "",
+				minimal: "bg-transparent from-transparent to-transparent",
+				card: "bg-card rounded-lg shadow-lg max-h-[600px]",
+				centered: "h-auto min-h-[300px]",
+			},
+			size: {
+				default: "w-[256px]",
+				sm: "w-[200px]",
+				md: "w-[280px]",
+				lg: "w-[320px]",
+				full: "w-full",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	}
+);
+const insetVariants = cva(
+	"relative flex flex-1 flex-col mx-auto bg-background min-w-0 flex-grow transition-[margin] duration-300",
+	{
+		variants: {
+			variant: {
+				default: "bg-background w-full h-full",
+				inset: ``, // bg-background rounded-[8px]  p-[8px] m-[8px] mt-[16px]! overflow-hidden h-[calc(100vh-16px)] w-full max-w-[calc(100vw-${DS_WIDTH}-32px)]
+				card: "bg-card rounded-xl shadow-lg m-4 h-[calc(100vh-32px)]",
+				bordered: "bg-background border-2 border-border rounded-lg m-2 h-[calc(100vh-16px)]",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+);
+const menuBadgeVariants = cva(
+	"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+	"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+	"peer-data-[size=sm]/menu-button:top-1",
+	"peer-data-[size=default]/menu-button:top-1.5",
+	"peer-data-[size=lg]/menu-button:top-2.5",
+	"group-data-[collapsible=icon]:hidden",
+	{
+		variants: {
+			variant: {
+				default: "bg-sidebar-accent text-sidebar-accent-foreground",
+				primary: "bg-primary text-primary-foreground",
+				secondary: "bg-secondary text-secondary-foreground",
+				success: "bg-green-500/10 text-green-600 dark:text-green-400",
+				warning: "bg-yellow-500/10 text-yellow-600 dark:text-yellow-400",
+				danger: "bg-red-500/10 text-red-600 dark:text-red-400",
+				outline: "border border-sidebar-border bg-transparent",
+				ghost: "bg-sidebar-accent/30 text-sidebar-accent-foreground",
+				dot: "min-w-2 w-2 h-2 rounded-full p-0 bg-primary",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	}
+);
+const menuSubButtonVariants = cva(
+	"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+	"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+	"group-data-[collapsible=icon]:hidden",
+	{
+		variants: {
+			variant: {
+				default: "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				ghost: "hover:bg-sidebar-accent/30 data-[active=true]:bg-sidebar-accent/50",
+				minimal: "hover:text-primary data-[active=true]:text-primary data-[active=true]:font-medium",
+				indent: "pl-6 hover:bg-sidebar-accent/30 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-9 text-sm",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	}
+);
+const separatorVariants = cva("mx-2 w-auto bg-sidebar-border", {
+	variants: {
+		variant: {
+			default: "h-px",
+			thick: "h-0.5",
+			dashed: "h-px border-t border-dashed border-sidebar-border bg-transparent",
+			gradient: "h-px bg-gradient-to-r from-transparent via-sidebar-border to-transparent",
+		},
+		spacing: {
+			default: "my-2",
+			sm: "my-1",
+			lg: "my-4",
+			none: "my-0",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		spacing: "default",
+	},
+});
+const headerVariants = cva("flex flex-col gap-2 p-2 group-data-[variant=floating]:bg-sidebar group-data-[variant=floating]:text-sidebar-foreground group-data-[variant=sidebar]:bg-sidebar group-data-[variant=sidebar]:text-sidebar-foreground", {
+	variants: {
+		variant: {
+			default: "",
+			bordered: "border-b border-sidebar-border",
+			elevated: "shadow-sm",
+			compact: "p-1 gap-1",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+const footerVariants = cva("flex flex-col gap-2 p-2 group-data-[variant=floating]:bg-sidebar group-data-[variant=floating]:text-sidebar-foreground group-data-[variant=sidebar]:bg-sidebar group-data-[variant=sidebar]:text-sidebar-foreground", {
+	variants: {
+		variant: {
+			default: "",
+			bordered: "border-t border-sidebar-border",
+			elevated: "shadow-sm",
+			compact: "p-1 gap-1",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+const headerStyles = {
+	container: "flex flex-col gap-3 p-4 pb-2",
+	topBar: "flex justify-between max-md:hidden",
+	logo: "inline-flex items-center gap-2.5 font-medium",
+	logoIcon: "size-6.5 dark:invert",
+	logoText: "ms-2.5 text-lg font-semibold",
+	collapseButton: "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&_svg]:size-4.5 mt-px mb-auto text-fd-muted-foreground",
+};
+// Search/Menu Button
+const searchButtonStyles = {
+	base: "flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground lg:hidden",
+	icon: "size-9 md:size-5",
+	title: "text-sm font-medium",
+	subtitle: "text-[13px] text-fd-muted-foreground empty:hidden md:hidden",
+	chevron: "ms-auto size-4 text-fd-muted-foreground",
+};
+const navItemStyles = {
+	// Section Headers
+	sectionHeader: "inline-flex items-center gap-2 mb-1.5 px-2 empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0",
+
+	// Regular Links
+	link: "relative flex flex-row items-center gap-2 rounded-xl p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none",
+
+	// Active Link
+	activeLink: "relative flex flex-row items-center gap-2 rounded-xl p-2 text-start [overflow-wrap:anywhere] [&_svg]:size-4 [&_svg]:shrink-0 bg-fd-primary/10 text-fd-primary",
+
+	// Collapsible Button
+	collapsibleButton: "relative flex flex-row items-center gap-2 rounded-xl p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none w-full",
+
+	// Nested Items (with indent)
+	nestedLink: "relative flex flex-row items-center gap-2 rounded-xl p-2 text-start text-fd-muted-foreground [overflow-wrap:anywhere] [&_svg]:size-4 [&_svg]:shrink-0 transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none",
+
+	// Vertical line for nested items
+	verticalLine: "absolute w-px inset-y-1 bg-fd-border start-2.5",
+	activeVerticalLine: "absolute w-px inset-y-3 z-2 start-2.5 md:inset-y-2",
+	activeVerticalLineColor: "absolute w-px inset-y-3 z-2 start-2.5 md:inset-y-2 bg-fd-primary",
+};
+const footerStyles = {
+	container: "border-t px-4 py-3 flex flex-row items-center justify-end data-[empty=true]:hidden",
+	socialLink: "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&_svg]:size-4.5 text-fd-muted-foreground",
+};
+type DSContextProps = {
+	leftState: "expanded" | "collapsed";
+	rightState: "expanded" | "collapsed";
+	openLeft: boolean;
+	openRight: boolean;
+	setOpenLeft: (open: boolean) => void;
+	setOpenRight: (open: boolean) => void;
+	openMobile: boolean;
+	openMobileRight: boolean;
+	setOpenMobile: (open: boolean) => void;
+	setOpenMobileRight: (open: boolean) => void;
+	isMobile: boolean;
+	sidebarWidth: number;
+	toggleLeft: () => void;
+	toggleRight: () => void;
+
+	leftVariant: SidebarVariant;
+	rightVariant: SidebarVariant;
+	setLeftVariant: (variant: SidebarVariant) => void;
+	setRightVariant: (variant: SidebarVariant) => void;
+
+	isIconLeftActive: boolean;
+	setIsIconLeftActive: (open: boolean) => void;
+	iconLeftWidth: number;
+	setIconLeftWidth: (width: number) => void;
+
+	isIconRightActive: boolean;
+	setIsIconRightActive: (open: boolean) => void;
+	iconRightWidth: number;
+	setIconRightWidth: (width: number) => void;
+
+	topHeight: string;
+	setTopHeight: (height: string) => void;
+
+	bottomHeight: string;
+	setBottomHeight: (height: string) => void;
+};
+
+interface DSThemeContextProps {
+	theme: DSTheme;
+	setTheme: (theme: DSTheme) => void;
+	themeVars: Record<string, string>;
+}
+
+const DSContext = createContext<DSContextProps | null>(null);
+const DSThemeContext = createContext<DSThemeContextProps | undefined>(undefined);
+
+function useDS() {
+	const context = useContext(DSContext);
+	if (!context) throw new Error("useDS must be used within DSProvider");
+	return context;
+}
+
+function useDSTheme() {
+	const ctx = useContext(DSThemeContext);
+	if (!ctx) throw new Error("useDSTheme must be used within DSProvider");
+	return ctx;
+}
+
+const DSThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+	const storageKey = LOCAL_DS_STORAGE_KEY;
+	const Context = DSThemeContext;
+
+	const [theme, setTheme] = React.useState<DSTheme>(() => {
+		if (typeof window !== "undefined") {
+			const storedTheme = localStorage.getItem(storageKey);
+			if (storedTheme && THEME_OPTIONS.includes(storedTheme as DSTheme)) {
+				return storedTheme as DSTheme;
+			}
+		}
+		return "default";
+	});
+
+	const themeVars = React.useMemo(() => {
+		if (theme === "default") return {};
+		return (colorThemes as any)[theme]?.[THEME_VERSION]?.dark || {};
+	}, [theme]);
+
+	React.useEffect(() => {
+		if (typeof window !== "undefined") {
+			localStorage.setItem(storageKey, theme);
+		}
+	}, [theme, storageKey]);
+
+	React.useEffect(() => {
+		if (typeof document === "undefined") return;
+		const root = document.documentElement;
+		const prefix = "--dual";
+
+		if (Object.keys(themeVars).length > 0) {
+			Object.entries(themeVars).forEach(([key, value]) => {
+				const newKey = key.replace("--sidebar", prefix);
+				root.style.setProperty(newKey, String(value));
+			});
+		}
+
+		return () => {
+			Object.keys(themeVars).forEach((key) => {
+				const newKey = key.replace("--sidebar", prefix);
+				root.style.removeProperty(newKey);
+			});
+		};
+	}, [themeVars]);
+
+	return <Context.Provider value={{ theme, setTheme, themeVars }}>{children}</Context.Provider>;
+};
+
+function DSThemeSelector({ size = 28, className, children }: { size?: number; className?: string; children: React.ReactNode; }) {
+	const { theme, setTheme } = useDSTheme();
+	const [open, setOpen] = React.useState(false);
+	const [flyingTheme, setFlyingTheme] = React.useState<DSTheme | null>(null);
+	const [showOverlay, setShowOverlay] = React.useState(false);
+	const [flyingButtonPos, setFlyingButtonPos] = React.useState<{ left: number; top: number } | null>(null);
+	const [mainButtonOriginalPos, setMainButtonOriginalPos] = React.useState<{ left: number; top: number } | null>(null);
+	const mainButtonRef = React.useRef<HTMLButtonElement>(null);
+
+	const radius = size * 1.6;
+	const themeList = THEME_OPTIONS;
+	const mainButtonCenterOffset = size * 1.5;
+	const mainButtonSize = size;
+
+	function getThemeColor(t: string) {
+		const themeObj = colorThemes[t as DSTheme]?.[THEME_VERSION]?.dark;
+		const primaryColor = themeObj?.["--primary"];
+		if (primaryColor) {
+			if (primaryColor.startsWith("oklch")) {
+				return primaryColor;
+			} else {
+				return `hsl(${primaryColor})`;
+			}
+		}
+		return "#888";
+	}
+
+	const handleMainButtonClick = () => {
+		if (flyingTheme) return;
+		if (!open && mainButtonRef.current) {
+			const rect = mainButtonRef.current.getBoundingClientRect();
+			setMainButtonOriginalPos({
+				left: rect.left + rect.width / 2,
+				top: rect.top + rect.height / 2,
+			});
+		}
+		setOpen((v) => !v);
+		setShowOverlay(!open);
+	};
+
+	const handleThemeSelect = (t: DSTheme, event: React.MouseEvent<HTMLButtonElement>) => {
+		const button = event.currentTarget;
+		const rect = button.getBoundingClientRect();
+
+		setFlyingButtonPos({
+			left: rect.left + rect.width / 2,
+			top: rect.top + rect.height / 2,
+		});
+
+		setFlyingTheme(t);
+		setShowOverlay(true);
+		setOpen(false);
+
+		setTimeout(() => {
+			setTheme(t);
+		}, 300);
+
+		setTimeout(() => {
+			setShowOverlay(false);
+			setFlyingTheme(null);
+			setFlyingButtonPos(null);
+			setMainButtonOriginalPos(null);
+		}, 600);
+	};
+
+	let mainButtonStyle: React.CSSProperties = {
+		zIndex: 70,
+	};
+
+	if (open || mainButtonOriginalPos) {
+		const targetLeft = open ? window.innerWidth / 2 : mainButtonOriginalPos?.left || window.innerWidth / 2;
+		const targetTop = open ? window.innerHeight / 2 : mainButtonOriginalPos?.top || window.innerHeight / 2;
+
+		mainButtonStyle = {
+			...mainButtonStyle,
+			position: "fixed",
+			left: `${targetLeft}px`,
+			top: `${targetTop}px`,
+			transform: "translate(-50%, -50%)",
+		};
+	} else {
+		mainButtonStyle = {
+			...mainButtonStyle,
+			position: "absolute",
+			left: mainButtonCenterOffset - mainButtonSize / 2,
+			top: mainButtonCenterOffset - mainButtonSize / 2,
+		};
+	}
+
+	return (
+		<>
+			{showOverlay && <div
+				className="fixed inset-0 bg-black/60 transition-opacity duration-500 theme-overlay"
+			//	style={{ zIndex: Z_INDEX.OVERLAY, position: 'fixed', }}
+			/>}
+
+			<div
+				className={cn("flex items-center justify-center transition-all duration-1000 theme-container", className)}
+				style={{
+					width: size * 3,
+					height: size * 3,
+					// zIndex: Z_INDEX.CONTAINER,
+					position: open ? 'static' : 'relative',
+					isolation: 'isolate',
+				}}
+			>
+				<button
+					ref={mainButtonRef}
+					onClick={handleMainButtonClick}
+					className={cn(
+						"flex items-center justify-center rounded-full bg-background shadow-lg transition-all duration-500 theme-main-button",
+						`h-[${mainButtonSize}px] w-[${mainButtonSize}px]`,
+						open ? "bg-sidebar-accent text-sidebar-accent-foreground" : "",
+						open || mainButtonOriginalPos ? "!fixed" : ""
+					)}
+					style={{
+						...mainButtonStyle,
+						//	zIndex: Z_INDEX.MAIN_BUTTON,
+					}}
+				>
+					{children}
+				</button>
+
+				{themeList.map((t, i) => {
+					const angle = (360 / themeList.length) * i - 90;
+					const rad = (angle * Math.PI) / 180;
+					const radialX = Math.cos(rad) * radius;
+					const radialY = Math.sin(rad) * radius;
+
+					let currentX = 0;
+					let currentY = 0;
+					let currentScale = 0;
+					let currentOpacity = 0;
+					let currentZIndex = 10;
+					let currentDelay = open ? `${i * 90}ms` : "0ms";
+					let isFixed = false;
+					let fixedLeft = 0;
+					let fixedTop = 0;
+
+					if (flyingTheme === t) {
+						isFixed = true;
+						currentScale = 1.2;
+						currentOpacity = 1;
+						currentZIndex = 10000;
+						currentDelay = "0ms";
+						fixedLeft = window.innerWidth / 2;
+						fixedTop = window.innerHeight / 2;
+					} else if (open) {
+						isFixed = true;
+						fixedLeft = window.innerWidth / 2 + radialX;
+						fixedTop = window.innerHeight / 2 + radialY;
+						currentScale = 1;
+						currentOpacity = 1;
+						currentZIndex = 10;
+					} else if (!open && flyingTheme === null) {
+						currentX = 0;
+						currentY = 0;
+						currentScale = 0;
+						currentOpacity = 0;
+						currentZIndex = 10;
+					}
+
+					const buttonSize = size * 1;
+					const buttonOffset = buttonSize / 2;
+
+					return (
+						<button
+							key={t}
+							style={{
+								width: buttonSize,
+								height: buttonSize,
+								...(isFixed
+									? {
+										left: `${fixedLeft}px`,
+										top: `${fixedTop}px`,
+										transform: `translate(-50%, -50%) scale(${currentScale})`,
+									}
+									: {
+										left: mainButtonCenterOffset + currentX - buttonOffset,
+										top: mainButtonCenterOffset + currentY - buttonOffset,
+										transform: `scale(${currentScale})`,
+									}),
+								// zIndex: flyingTheme === t ? Z_INDEX.FLYING_THEME : Z_INDEX.MAIN_BUTTON,
+								opacity: currentOpacity,
+								transitionDelay: currentDelay,
+								transitionTimingFunction: flyingTheme === t ? "cubic-bezier(0.8, -0.5, 0.2, 1.5)" : "ease-out"
+							}}
+							className={cn(
+								`rounded-full border bg-background shadow transition-all duration-500 flex items-center justify-center`,
+								theme === t ? "ring-2 ring-primary border-primary" : "border-muted hover:ring-2 hover:ring-primary",
+								flyingTheme === t ? "ring-4 ring-primary !fixed" : open ? "!fixed" : "absolute",
+								flyingTheme === t ? "theme-flying-theme" : "theme-buttons",
+							)}
+							aria-label={`Switch to ${t} theme`}
+							onClick={(e) => handleThemeSelect(t as DSTheme, e)}
+							disabled={!!flyingTheme}
+						>
+							<Circle style={{ color: getThemeColor(t), fill: getThemeColor(t) }} size={size * 0.3} />
+						</button>
+					);
+				})}
+			</div>
+		</>
+	);
+}
+
+const DSProvider = forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		defaultOpenLeft?: boolean;
+		defaultOpenRight?: boolean;
+		defaultWidth?: string;
+	}
+>(({ defaultOpenLeft = false, defaultOpenRight = false, defaultWidth = DS_WIDTH, className, style, children, ...props }, ref) => {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = useState(false);
+	const [openMobileRight, setOpenMobileRight] = useState(false);
+
+	const [openLeft, setOpenLeft] = useState(defaultOpenLeft);
+	const [openRight, setOpenRight] = useState(defaultOpenRight);
+
+	const [leftVariant, setLeftVariant] = useState("sidebar");
+	const [rightVariant, setRightVariant] = useState("sidebar");
+
+	const [isIconLeftActive, setIsIconLeftActive] = useState(false);
+	const [iconLeftWidth, setIconLeftWidth] = useState("0px");
+
+	const [isIconRightActive, setIsIconRightActive] = useState(false);
+	const [iconRightWidth, setIconRightWidth] = useState("0px");
+
+	const [topHeight, setTopHeight] = useState("0px");
+	const [bottomHeight, setBottomHeight] = useState("0px");
+
+	const [dsdVariant, setDsdVariant] = useState("default");
+	const [dsdDirection, setDsdDirection] = useState("bottom");
+	const [dsdSize, setDsdSize] = useState("md");
+
+	const sidebarWidth = defaultWidth;
+	const cookieName = DS_COOKIE_NAME;
+	const cookieNameRight = DS_COOKIE_NAME_RIGHT;
+
+	const openL = openLeft;
+	const openR = openRight;
+
+	const toggleLeft = useCallback(() => {
+		isMobile ? setOpenMobile((p) => !p) : setOpenLeft((p) => !p);
+		document.cookie = `${cookieName}=${openL}; path=/; max-age=${DS_COOKIE_MAX_AGE}`;
+	}, [isMobile]);
+
+	const toggleRight = useCallback(() => {
+		isMobile ? setOpenMobileRight((p) => !p) : setOpenRight((p) => !p);
+		document.cookie = `${cookieNameRight}=${openR}; path=/; max-age=${DS_COOKIE_MAX_AGE}`;
+	}, [isMobile]);
+
+	useEffect(() => {
+		const shortcutLeft = DS_KEYBOARD_SHORTCUT_LEFT;
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === shortcutLeft && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				//  toggleLeft(prev => !prev);
+				toggleLeft();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleLeft]);
+
+	useEffect(() => {
+		const shortcutRight = DS_KEYBOARD_SHORTCUT_RIGHT;
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === shortcutRight && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				//  toggleRight(prev => !prev);
+				toggleRight();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleRight]);
+
+	const leftState = openL ? "expanded" : "collapsed";
+	const rightState = openR ? "expanded" : "collapsed";
+
+	const contextValue = React.useMemo<DSContextProps>(
+		() => ({
+			leftState,
+			rightState,
+
+			openLeft,
+			setOpenLeft,
+
+			openRight,
+			setOpenRight,
+
+			toggleLeft,
+			toggleRight,
+
+			isMobile,
+
+			openMobile,
+			setOpenMobile,
+			openMobileRight,
+			setOpenMobileRight,
+
+			sidebarWidth,
+
+			leftVariant,
+			setLeftVariant,
+			rightVariant,
+			setRightVariant,
+
+			isIconLeftActive,
+			setIsIconLeftActive,
+			iconLeftWidth,
+			setIconLeftWidth,
+
+			isIconRightActive,
+			setIsIconRightActive,
+			iconRightWidth,
+			setIconRightWidth,
+
+			topHeight,
+			setTopHeight,
+			bottomHeight,
+			setBottomHeight,
+
+			dsdVariant,
+			setDsdVariant,
+			dsdDirection,
+			setDsdDirection,
+			dsdSize,
+			setDsdSize
+		}),
+		[isMobile, openLeft, leftVariant, openRight, rightVariant, isIconLeftActive, iconLeftWidth, isIconRightActive, iconRightWidth, topHeight, bottomHeight, sidebarWidth]
+	);
+
+	const Context = DSContext;
+
+	return (
+		<DSThemeProvider>
+			<Context.Provider value={contextValue}>
+				<TooltipProvider delayDuration={0}>
+					<div
+						style={
+							{
+								"--dual-sidebar-width": sidebarWidth,
+								"--dual-sidebar-width-icon": DS_WIDTH_ICON,
+								...style,
+							} as React.CSSProperties
+						}
+						className={cn(
+							"group/dual-sidebar-wrapper flex min-h-svh w-full",
+							leftVariant === 'inset' || rightVariant === 'inset' ? "bg-sidebar" : null,
+							"w-[100vw] h-[100vh] overflow-hidden",
+							//"bg-[#111827] ",
+							className
+						)}
+						ref={ref}
+						{...props}
+					>
+						{children}
+					</div>
+				</TooltipProvider>
+			</Context.Provider>
+		</DSThemeProvider>
+	);
+});
+DSProvider.displayName = "DSProvider";
+
+const DSInset = forwardRef<HTMLDivElement, React.ComponentProps<"main">>(({ children, variant = "default", className, ...props }, ref) => {
+	const { openLeft, openRight, sidebarWidth, leftVariant, rightVariant, isIconLeftActive, iconLeftWidth, isIconRightActive, iconRightWidth, topHeight, bottomHeight } = useDS();
+	let paddingTop = topHeight;
+	let paddingBottom = bottomHeight;
+	let marginLeft = "0px";
+	let marginRight = "0px";
+	let leftWidth = sidebarWidth;
+	let rightWidth = sidebarWidth;
+	const closedGap = "0px";
+	const paddingLeft = '8px'
+	const paddingRight = '8px'
+
+	if (isIconLeftActive) {
+		leftWidth = `calc(${iconLeftWidth} + ${sidebarWidth})`;
+	}
+	if (isIconRightActive) {
+		rightWidth = `calc(${iconRightWidth} + ${sidebarWidth})`;
+	}
+
+	if (isIconLeftActive) {
+		marginLeft = iconLeftWidth;
+	} else {
+		marginLeft = closedGap;
+	}
+
+	if (isIconRightActive) {
+		marginRight = iconRightWidth;
+	} else {
+		marginRight = closedGap;
+	}
+
+	if (openLeft && (leftVariant === "sidebar" || leftVariant === "inset")) {
+		marginLeft = leftWidth;
+	}
+
+	if (openRight && (rightVariant === "sidebar" || rightVariant === "inset")) {
+		marginRight = `calc(${rightWidth} + 17px)`;
+	}
+
+	let maxWidth = "none"; // Default value
+	if (isIconLeftActive) marginLeft = `calc(${marginLeft} + 12px)`;
+	if (isIconLeftActive && isIconRightActive && (leftVariant === "inset" || rightVariant === "inset")) {
+		maxWidth = `calc(100vw - ${iconLeftWidth} - ${iconRightWidth} - 28px)`;
+	}
+
+	const insetClass = "bg-background rounded-[15px] mt-[7px] overflow-hidden h-[calc(100vh-20px)] w-[calc(100vw-130px)] relative flex flex-1 flex-col overflow-hidden";
+	const defaultVisualClasses = "bg-background w-full h-full";
+	const floatingClass = "";
+	const sidebarClass = "";
+	return (
+		<main
+			ref={ref}
+			className={cn(
+				insetVariants({ variant }),
+				className
+			)}
+			style={{
+				marginLeft,
+				marginRight,
+				paddingTop,
+				paddingBottom,
+				maxWidth,
+				paddingLeft,
+				paddingRight,
+			}}
+			{...props}
+		>
+			{children}
+		</main>
+	);
+});
+DSInset.displayName = "DSInset";
+
+const DSLeft1 = forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		variant?: SidebarVariant;
+		collapsible?: SidebarCollapsible;
+		loadingUI?: boolean;
+	}
+>(({ variant = "sidebar", collapsible = "offcanvas", className, children, loadingUI = true, ...props }, ref) => {
+	const { isMobile, leftState, openMobile, setOpenMobile, openLeft, sidebarWidth, setLeftVariant, isIconLeftActive, setIsIconLeftActive, iconLeftWidth, setIconLeftWidth } = useDS();
+
+	const navigation = useNavigation();
+	const [hasInitialLoaded, setHasInitialLoaded] = useState(false);
+
+	useEffect(() => {
+		setLeftVariant(variant);
+	}, [variant, setLeftVariant]);
+
+	useEffect(() => {
+		if (navigation.state === "idle" && !hasInitialLoaded) {
+			setHasInitialLoaded(true);
+		}
+	}, [navigation.state, hasInitialLoaded]);
+
+	const showLoading = loadingUI && navigation.state === "loading" && !hasInitialLoaded;
+
+	if (collapsible === "none") {
+		return (
+			<div className={cn("flex h-full w-[--dual-sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)} ref={ref} {...props}>
+				{showLoading ? <DSLoading /> : children}
+			</div>
+		);
+	}
+	if (isMobile) {
+		return (
+			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+				<SheetContent data-dual-sidebar="sidebar" data-mobile="true" className="w-[--dual-sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden" style={{ "--dual-sidebar-width": DS_WIDTH_MOBILE } as React.CSSProperties} side="left">
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{showLoading ? <DSLoading /> : children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+
+	// const baseClasses = `fixed inset-y-0 left-1 z-20 w-72 bg-sidebar rounded-[15px] flex flex-col transitio
+	// n-transform duration-300 shadow-2xl`;
+	const closedOffset = "8px";
+	const iconOffset = isIconLeftActive ? iconLeftWidth : "0px";
+	const transformClass = openLeft ? "translate-x-0" : "translate-x-[calc(-100%-4px)]";
+	return (
+		<div
+			className={cn(
+				dsVariants({ variant, side: "left" }),
+				transformClass,
+				!isIconLeftActive && "left-0",
+				className
+			)}
+			style={{
+				width: sidebarWidth,
+				"--dual-sidebar-width-icon": DS_WIDTH_ICON,
+				left: isIconLeftActive ? iconOffset : undefined,
+				transform: openLeft ? "translateX(0)" : `translateX(calc(-100% - ${closedOffset}))`,
+			}}
+			{...props}
+		>
+			{showLoading ? <DSLoading /> : children}
+		</div>
+	);
+});
+const DSLeft = forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		variant?: SidebarVariant;
+		collapsible?: SidebarCollapsible;
+		loadingUI?: boolean;
+	}
+>(({ variant = "sidebar", collapsible = "offcanvas", className, children, loadingUI = true, ...props }, ref) => {
+	const { isMobile, leftState, openMobile, setOpenMobile, openLeft, sidebarWidth, setLeftVariant, isIconLeftActive, setIsIconLeftActive, iconLeftWidth, setIconLeftWidth } = useDS();
+
+	const navigation = useNavigation();
+	const [hasInitialLoaded, setHasInitialLoaded] = useState(false);
+
+	useEffect(() => {
+		setLeftVariant(variant);
+	}, [variant, setLeftVariant]);
+
+	useEffect(() => {
+		if (navigation.state === "idle" && !hasInitialLoaded) {
+			setHasInitialLoaded(true);
+		}
+	}, [navigation.state, hasInitialLoaded]);
+
+	const showLoading = loadingUI && navigation.state === "loading" && !hasInitialLoaded;
+
+	if (collapsible === "none") {
+		return (
+			<div className={cn("flex h-full w-[--dual-sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)} ref={ref} {...props}>
+				{showLoading ? <DSLoading /> : children}
+			</div>
+		);
+	}
+	if (isMobile) {
+		return (
+			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+				<SheetContent data-dual-sidebar="sidebar" data-mobile="true" className="w-[--dual-sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden" style={{ "--dual-sidebar-width": DS_WIDTH_MOBILE } as React.CSSProperties} side="left">
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{showLoading ? <DSLoading /> : children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+
+	const closedOffset = "8px";
+	const iconOffset = isIconLeftActive ? iconLeftWidth : "0px";
+	const transformClass = openLeft ? "translate-x-0" : "translate-x-[calc(-100%-4px)]";
+	const isInsetOrFloating = variant === "floating" || variant === "inset";
+
+	return (
+		<div
+			className={cn(
+				dsVariants({ variant, side: "left" }),
+				transformClass,
+				!isIconLeftActive && "left-0",
+				isInsetOrFloating && "p-2",
+				className
+			)}
+			{...props}
+		>
+			<div
+				data-slot="sidebar-gap"
+				className={cn()}
+				style={{
+					width: isInsetOrFloating && !openLeft
+						? `calc(${DS_WIDTH_ICON} + 1rem)`
+						: sidebarWidth,
+					"--dual-sidebar-width-icon": DS_WIDTH_ICON,
+					left: isIconLeftActive ? iconOffset : undefined,
+					transform: openLeft
+						? "translateX(0)"
+						: `translateX(calc(-${sidebarWidth} - ${closedOffset}))`,
+				}}
+			/>
+			<div className={cn(
+				"flex h-full w-full flex-col bg-sidebar",
+				isInsetOrFloating && "rounded-lg border border-sidebar-border shadow-sm"
+			)}>
+				{showLoading ? <DSLoading /> : children}
+			</div>
+		</div>
+	);
+});
+DSLeft.displayName = "DSLeft";
+
+const DSLeftIcon = forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		// We assume the desired width is DS_WIDTH_ICON or similar constant
+		iconWidth?: string;
+		variant?: SidebarVariant;
+
+	}
+>(({ iconWidth = DS_WIDTH_ICON, variant = "sidebar", className, children, ...props }, ref) => {
+	// 1. Communicate its existence and width to the context (NEW STATE)
+	const { setIsIconLeftActive, setIconLeftWidth, leftVariant } = useDS(); // Assumes new context setters
+
+	// Set context state on mount/unmount
+	useEffect(() => {
+		setIsIconLeftActive(true);
+		setIconLeftWidth(iconWidth);
+		return () => {
+			setIsIconLeftActive(false);
+			setIconLeftWidth("0px");
+		};
+	}, [iconWidth, setIsIconLeftActive, setIconLeftWidth]);
+
+	return (
+		<div
+			ref={ref}
+			/**	className={cn(
+					leftVariant === "inset" ? "bg-sidebar" : "bg-background",
+					"fixed inset-y-0 left-0 z-20 hidden h-svh flex-col md:flex",
+					// Transition/width applied via style
+					className
+				)} */
+			className={cn(
+				iconDSVariants({ variant: leftVariant, side: "left" }),
+				className
+			)}
+			style={
+				{
+					// Set the width for this specific component
+					"--dual-sidebar-icon-width-fixed": iconWidth,
+					width: iconWidth, // Apply width directly
+				} as React.CSSProperties
+			}
+			data-side="left-icon"
+			{...props}
+		>
+			<div
+				className="flex h-full w-full flex-col bg-sidebar border-r border-border" // Add a right border
+			>
+				{children}
+			</div>
+		</div>
+	);
+});
+DSLeftIcon.displayName = "DSLeftIcon";
+
+const DSRight1 = forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		variant?: SidebarVariant;
+		collapsible?: SidebarCollapsible;
+		loadingUI?: boolean;
+	}
+>(({ variant = "sidebar", collapsible = "offcanvas", className, children, loadingUI = true, ...props }, ref) => {
+	const { isMobile, rightState, openMobileRight, setOpenMobileRight, openRight, sidebarWidth, setRightVariant, isIconRightActive, setIsIconRightActive, iconRightWidth, setIconRightWidth } = useDS();
+	const navigation = useNavigation();
+	const [hasInitialLoaded, setHasInitialLoaded] = useState(false);
+
+	useEffect(() => {
+		setRightVariant(variant);
+	}, [variant, setRightVariant]);
+
+	React.useEffect(() => {
+		if (navigation.state === "idle" && !hasInitialLoaded) {
+			setHasInitialLoaded(true);
+		}
+	}, [navigation.state, hasInitialLoaded]);
+
+	// Show loading only during initial load if loadingUI is enabled
+	const showLoading = loadingUI && navigation.state === "loading" && !hasInitialLoaded;
+
+	if (collapsible === "none") {
+		return (
+			<div className={cn("flex h-full w-[--dual-sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)} ref={ref} {...props}>
+				{showLoading ? <DSLoading /> : children}
+			</div>
+		);
+	}
+
+	if (isMobile) {
+		return (
+			<Sheet open={openMobileRight} onOpenChange={setOpenMobileRight} {...props}>
+				<SheetContent
+					data-dual-sidebar="sidebar"
+					data-mobile="true"
+					className="w-[--dual-sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+					style={{ "--dual-sidebar-width": DS_WIDTH_MOBILE } as React.CSSProperties}
+					side="right"
+				>
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{showLoading ? <DSLoading /> : children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+	const closedOffset = "8px";
+	const iconOffset = isIconRightActive ? iconRightWidth : "0px";
+	const baseClasses = `fixed inset-y-0 right-1 z-20 w-72 bg-sidebar rounded-[15px] flex flex-col transition-transform duration-300 shadow-2xl`;
+	const transformClass = openRight ? "translate-x-0" : "translte-x-[calc(100%+4px)]"; // Hide completely + offset for parent margin/bordera
+
+	return (
+		<div
+			//className={cn(baseClasses, transformClass, !isIconRightActive && "right-0", className)}
+			className={cn(
+				dsVariants({ variant, side: "right" }),
+				transformClass,
+				!isIconRightActive && "right-0",
+				className
+			)}
+			style={{
+				width: sidebarWidth,
+				"--dual-sidebar-width-icon": DS_WIDTH_ICON,
+				right: isIconRightActive ? iconOffset : undefined,
+				transform: openRight ? "translateX(0)" : `translateX(calc(100% + ${closedOffset}))`,
+			}}
+			{...props}
+		>
+			{showLoading ? <DSLoading /> : children}
+		</div>
+	);
+});
+const DSRight = forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		variant?: SidebarVariant;
+		collapsible?: SidebarCollapsible;
+		loadingUI?: boolean;
+	}
+>(({ variant = "sidebar", collapsible = "offcanvas", className, children, loadingUI = true, ...props }, ref) => {
+	const { isMobile, rightState, openMobileRight, setOpenMobileRight, openRight, sidebarWidth, setRightVariant, isIconRightActive, setIsIconRightActive, iconRightWidth, setIconRightWidth } = useDS();
+	const navigation = useNavigation();
+	const [hasInitialLoaded, setHasInitialLoaded] = useState(false);
+
+	useEffect(() => {
+		setRightVariant(variant);
+	}, [variant, setRightVariant]);
+
+	React.useEffect(() => {
+		if (navigation.state === "idle" && !hasInitialLoaded) {
+			setHasInitialLoaded(true);
+		}
+	}, [navigation.state, hasInitialLoaded]);
+
+	const showLoading = loadingUI && navigation.state === "loading" && !hasInitialLoaded;
+
+	if (collapsible === "none") {
+		return (
+			<div className={cn("flex h-full w-[--dual-sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)} ref={ref} {...props}>
+				{showLoading ? <DSLoading /> : children}
+			</div>
+		);
+	}
+
+	if (isMobile) {
+		return (
+			<Sheet open={openMobileRight} onOpenChange={setOpenMobileRight} {...props}>
+				<SheetContent
+					data-dual-sidebar="sidebar"
+					data-mobile="true"
+					className="w-[--dual-sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+					style={{ "--dual-sidebar-width": DS_WIDTH_MOBILE } as React.CSSProperties}
+					side="right"
+				>
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{showLoading ? <DSLoading /> : children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+
+	const closedOffset = "8px";
+	const iconOffset = isIconRightActive ? iconRightWidth : "0px";
+	const transformClass = openRight ? "translate-x-0" : "translate-x-[calc(100%+4px)]";
+	const isInsetOrFloating = variant === "floating" || variant === "inset";
+
+	return (
+		<div
+			className={cn(
+				dsVariants({ variant, side: "right" }),
+				transformClass,
+				!isIconRightActive && "right-0",
+				isInsetOrFloating && "p-2",
+				className
+			)}
+			style={{
+				width: isInsetOrFloating && !openRight
+					? `calc(${DS_WIDTH_ICON} + 1rem)` // 1rem = spacing(4) = 16px
+					: sidebarWidth,
+				"--dual-sidebar-width-icon": DS_WIDTH_ICON,
+				right: isIconRightActive ? iconOffset : undefined,
+				transform: openRight ? "translateX(0)" : `translateX(calc(100% + ${closedOffset}))`,
+			}}
+			{...props}
+		>
+			<div className={cn(
+				"flex h-full w-full flex-col bg-sidebar",
+				isInsetOrFloating && "rounded-lg border border-sidebar-border shadow-sm"
+			)}>
+				{showLoading ? <DSLoading /> : children}
+			</div>
+		</div>
+	);
+});
+DSRight.displayName = "DSRight";
+
+const DSRightIcon = forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		// We assume the desired width is DS_WIDTH_ICON or similar constant
+		iconWidth?: string;
+		variant?: SidebarVariant;
+	}
+>(({ iconWidth = DS_WIDTH_ICON, variant = "sidebar", className, children, ...props }, ref) => {
+	// 1. Communicate its existence and width to the context (NEW STATE)
+	const { setIsIconRightActive, setIconRightWidth, rightVariant } = useDS(); // Assumes new context setters
+
+	// Set context state on mount/unmount
+	useEffect(() => {
+		setIsIconRightActive(true);
+		setIconRightWidth(iconWidth);
+		return () => {
+			setIsIconRightActive(false);
+			setIconRightWidth("0px");
+		};
+	}, [iconWidth, setIsIconRightActive, setIconRightWidth]);
+
+	return (
+		<div
+			ref={ref}
+			/**className={cn(
+				//  rightVariant === 'inset' ? 'bg-sidebar' : 'bg-background',
+				"fixed inset-y-0 right-0 z-20 hidden h-svh flex-col md:flex",
+				// Transition/width applied via style
+				className
+			)} */
+			className={cn(
+				iconDSVariants({ variant: rightVariant, side: "right" }),
+				className
+			)}
+			style={
+				{
+					// Set the width for this specific component
+					"--dual-sidebar-icon-width-fixed": iconWidth,
+					width: iconWidth, // Apply width directly
+				} as React.CSSProperties
+			}
+			data-side="right-icon"
+			{...props}
+		>
+			<div
+				className="flex h-full w-full flex-col bg-sidebar border-l border-border" // Add a right border
+			>
+				{children}
+			</div>
+		</div>
+	);
+});
+DSRightIcon.displayName = "DSRightIcon";
+
+
+
+function DSBurger({ opened, size = "md", color = "currentColor", onClick }: any) {
+	const [internalOpened, setInternalOpened] = React.useState(false);
+	const isOpened = opened !== undefined ? opened : internalOpened;
+
+	const sizeClasses = {
+		sm: "w-4 h-4",
+		md: "w-6 h-6",
+		lg: "w-8 h-8",
+		xl: "w-10 h-10",
+	};
+
+	const lineHeight = {
+		sm: "2px",
+		md: "2px",
+		lg: "3px",
+		xl: "3px",
+	};
+
+	const handleClick = () => {
+		if (opened === undefined) {
+			setInternalOpened(!internalOpened);
+		}
+		onClick?.();
+	};
+
+	return (
+		<button 
+			className={cn("relative cursor-pointer bg-transparent border-none p-0", sizeClasses[size])} 
+			style={{ color }} 
+			onClick={handleClick} 
+			aria-label={isOpened ? "Close menu" : "Open menu"}
+		>
+			<motion.span
+				className="absolute left-0 block rounded-full bg-current"
+				style={{
+					width: "100%",
+					height: lineHeight[size],
+					top: "50%",
+					left: 0,
+				}}
+				animate={{
+					rotate: isOpened ? 45 : 0,
+					y: isOpened ? "-50%" : "calc(-50% - 6px)",
+				}}
+				transition={{ duration: 0.3 }}
+			/>
+			<motion.span
+				className="absolute left-0 top-1/2 block rounded-full bg-current"
+				style={{
+					width: "100%",
+					height: lineHeight[size],
+					y: "-50%",
+				}}
+				animate={{
+					opacity: isOpened ? 0 : 1,
+				}}
+				transition={{ duration: 0.3 }}
+			/>
+			<motion.span
+				className="absolute left-0 block rounded-full bg-current"
+				style={{
+					width: "100%",
+					height: lineHeight[size],
+					top: "50%",
+					left: 0,
+				}}
+				animate={{
+					rotate: isOpened ? -45 : 0,
+					y: isOpened ? "-50%" : "calc(-50% + 6px)",
+				}}
+				transition={{ duration: 0.3 }}
+			/>
+		</button>
+	);
+}
+
+const DSTrigger = forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button> & { side?: "left" | "right" }>(({ side = "left", className, onClick, ...props }, ref) => {
+	const { toggleLeft, toggleRight, openLeft, openRight } = useDS();
+	const open = side === "left" ? openLeft : openRight;
+	const handleClick = () => {
+		if (side === "left") {
+			toggleLeft();
+		} else {
+			toggleRight();
+		}
+	};
+	return (
+		<Button
+			ref={ref}
+			data-dual-sidebar="trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("h-7 w-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				handleClick();
+			}}
+			{...props}
+		>
+			<DSBurger opened={open} />
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+});
+DSTrigger.displayName = "DSTrigger";
+
+const DSLeftRail = forwardRef<HTMLButtonElement, React.ComponentProps<"button"> & { side?: SidebarSide }>(({ side = "left", className, ...props }, ref) => {
+	const { toggleLeft } = useDS();
+
+	return (
+		<button
+			ref={ref}
+			data-dual-sidebar="rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			//	onClick={toggleLeft}
+			onMouseEnter={toggleLeft}
+			title="Toggle Sidebar"
+			className={cn(
+				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border -right-4 ",
+				"cursor-w-resize",
+				"group-data-[state=collapsed]:cursor-e-resize",
+				"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+				"group-data-[collapsible=offcanvas]:-right-2",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSLeftRail.displayName = "DSLeftRail";
+
+const DSRightRail = forwardRef<HTMLButtonElement, React.ComponentProps<"button"> & { side?: "left" | "right" }>(({ side = "right", className, ...props }, ref) => {
+	const { toggleRight } = useDS();
+
+	return (
+		<button
+			ref={ref}
+			data-dual-sidebar="rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onMouseEnter={toggleRight}
+			title="Toggle Sidebar"
+			className={cn(
+				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border left-0 sm:flex",
+				"cursor-e-resize",
+				"group-data-[state=collapsed]:cursor-w-resize",
+				"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+				"group-data-[data-collapsible=offcanvas]:-left-2",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSRightRail.displayName = "DSRightRail";
+
+const DSHeader = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+	const { variant } = useDS();
+	return (
+		<div ref={ref} data-dual-sidebar="header" className={cn(headerVariants({ variant }), className)} {...props} />
+	);
+});
+DSHeader.displayName = "DSHeader";
+
+const DSFooter = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+	const { variant } = useDS();
+	return (
+		<div ref={ref} data-dual-sidebar="footer" className={cn(footerVariants({ variant }), className)} {...props} />
+	);
+});
+DSFooter.displayName = "DSFooter";
+
+const DSSeparator = forwardRef<React.ElementRef<typeof Separator>, React.ComponentProps<typeof Separator>>(({ className, ...props }, ref) => {
+	const { variant } = useDS();
+	return <Separator ref={ref} data-dual-sidebar="separator" className={cn(separatorVariants({ variant, spacing }), className)} {...props} />;
+});
+DSSeparator.displayName = "DSSeparator";
+
+const DSContent = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			data-dual-sidebar="content"
+			className={cn(
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden group-data-[collapsible=icon]:overflow-hidden",
+				"group-data-[variant=floating]:bg-sidebar group-data-[variant=floating]:text-sidebar-foreground",
+				"group-data-[variant=sidebar]:bg-sidebar group-data-[variant=sidebar]:text-sidebar-foreground",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSContent.displayName = "DSContent";
+
+const DSInput = forwardRef<React.ElementRef<typeof Input>, React.ComponentProps<typeof Input>>(({ className, ...props }, ref) => {
+	return <Input ref={ref} data-dual-sidebar="input" className={cn("h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring", className)} {...props} />;
+});
+DSInput.displayName = "DSInput";
+
+const DSGroup = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+	const { variant } = useDS();
+	return <div ref={ref} data-dual-sidebar="group" className={cn(groupVariants({ variant }), className)} {...props} />;
+});
+DSGroup.displayName = "DSGroup";
+
+const DSGroupLabel = forwardRef<HTMLDivElement, React.ComponentProps<"div"> & { asChild?: boolean }>(({ className, asChild = false, ...props }, ref) => {
+	const { variant } = useDS();
+	const Comp = asChild ? Slot : "div";
+	return (
+		<Comp ref={ref} data-dual-sidebar="group-label" className={cn(groupLabelVariants({ variant }), "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className)} {...props} />
+	);
+});
+DSGroupLabel.displayName = "DSGroupLabel";
+
+const DSGroupAction = forwardRef<HTMLButtonElement, React.ComponentProps<"button"> & { asChild?: boolean }>(({ className, asChild = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			ref={ref}
+			data-dual-sidebar="group-action"
+			className={cn(
+				"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"after:absolute after:-inset-2 after:md:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSGroupAction.displayName = "DSGroupAction";
+
+const DSGroupContent = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => <div ref={ref} data-dual-sidebar="group-content" className={cn("w-full text-sm", className)} {...props} />);
+DSGroupContent.displayName = "DSGroupContent";
+
+const DSMenu = forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(({ className, ...props }, ref) => <ul ref={ref} data-dual-sidebar="menu" className={cn("flex w-full min-w-0 flex-col gap-1", className)} {...props} />);
+DSMenu.displayName = "DSMenu";
+
+const DSMenuItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentProps<"li">
+>(({ className, ...props }, ref) => {
+	const { variant } = useDS();
+	return (
+		<li
+			ref={ref}
+			data-dual-sidebar="menu-item"
+			className={cn(menuItemVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+});
+
+DSMenuItem.displayName = "DSMenuItem";
+
+const DSMenuButton = forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> & {
+		asChild?: boolean;
+		isActive?: boolean;
+		tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+		side: "left" | "right";
+	} & VariantProps<typeof DSMenuButtonVariants>
+>(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, side, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+	const { isMobile, leftState, rightState } = useDS();
+
+	const button = <Comp ref={ref} data-dual-sidebar="menu-button" data-size={size} data-active={isActive} className={cn(DSMenuButtonVariants({ variant, size }), className)} {...props} />;
+
+	if (!tooltip) {
+		return button;
+	}
+
+	if (typeof tooltip === "string") {
+		tooltip = {
+			children: tooltip,
+		};
+	}
+
+	return (
+		<DSMenuItem>
+			<Tooltip>
+				<TooltipTrigger asChild>{button}</TooltipTrigger>
+				<TooltipContent side={side === "left" ? "right" : "left"} align="center" hidden={(leftState || rightState) !== "collapsed" || isMobile} {...tooltip} />
+			</Tooltip>
+		</DSMenuItem>
+	);
+});
+DSMenuButton.displayName = "DSMenuButton";
+
+const DSMenuAction = forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> & {
+		asChild?: boolean;
+		showOnHover?: boolean;
+	}
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			ref={ref}
+			data-dual-sidebar="menu-action"
+			className={cn(
+				"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+				"after:absolute after:-inset-2 after:md:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSMenuAction.displayName = "DSMenuAction";
+
+const DSMenuBadge = forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => (<div ref={ref} data-dual-sidebar="menu-badge" className={cn(menuBadgeVariants({ variant }), className)} {...props} />));
+DSMenuBadge.displayName = "DSMenuBadge";
+
+const DSMenuSkeleton = forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		showIcon?: boolean;
+	}
+>(({ className, showIcon = false, ...props }, ref) => {
+	const width = React.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+
+	return (
+		<div ref={ref} data-dual-sidebar="menu-skeleton" className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)} {...props}>
+			{showIcon && <Skeleton className="size-4 rounded-md" data-dual-sidebar="menu-skeleton-icon" />}
+			<Skeleton
+				className="h-4 max-w-[--skeleton-width] flex-1"
+				data-dual-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width,
+					} as React.CSSProperties
+				}
+			/>
+		</div>
+	);
+});
+DSMenuSkeleton.displayName = "DSMenuSkeleton";
+
+interface DSMenuAnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+	icon?: React.ReactNode;
+	tooltip?: string;
+	to: string;
+	newTab?: boolean;
+	variant?: "default" | "ghost" | "outline" | "soft" | "solid" | "minimal" | "bordered" | "pill";
+	size?: "default" | "sm" | "lg" | "icon";
+}
+
+interface DSMenuAnchorProps extends React.ComponentProps<"a"> {
+	icon?: React.ReactNode;
+	tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+	variant?: "default" | "ghost" | "outline" | "soft" | "solid" | "minimal" | "bordered" | "pill";
+	size?: "default" | "sm" | "lg" | "icon";
+	newTab?: boolean;
+}
+
+const DSMenuAnchor = forwardRef<HTMLAnchorElement, DSMenuAnchorProps>(({
+	className,
+	icon,
+	tooltip,
+	children,
+	to,
+	newTab = true,
+	variant = "default",
+	size = "default",
+	onClick,
+	...props
+}, ref) => {
+	const navigation = useNavigation();
+	const location = useLocation();
+	const { isMobile, leftState, rightState } = useDS();
+
+	const isActive = location.pathname === to;
+	const isNavigatingToThisLink = navigation.state === "loading" && navigation.location?.href === to;
+
+	const anchorProps = newTab
+		? {
+			target: "_blank",
+			rel: "noopener noreferrer",
+		}
+		: {};
+
+	const anchorContent = (
+		<>
+			{icon &&
+				React.isValidElement(icon) &&
+				React.cloneElement(icon, {
+					className: cn("size-4 shrink-0", icon.props.className),
+				})}
+			<span className="flex-1 truncate">{children}</span>
+
+			{isNavigatingToThisLink && (
+				<div className="ml-auto flex items-center">
+					<div className="animate-spin rounded-full h-5 w-5 border-t-3 border-primary border-solid"></div>
+				</div>
+			)}
+		</>
+	);
+
+	const anchor = (
+		<a
+			ref={ref}
+			href={to}
+			{...anchorProps}
+			onClick={onClick}
+			className={cn(
+				DSMenuButtonVariants({ variant, size, isActive }),
+				isActive && "text-primary bg-muted font-medium",
+				className
+			)}
+			{...props}
+		>
+			{anchorContent}
+		</a>
+	);
+
+	// If tooltip exists, wrap with Tooltip
+	if (tooltip) {
+		const tooltipProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip;
+
+		return (
+			<DSMenuItem>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						{anchor}
+					</TooltipTrigger>
+					<TooltipContent
+						side="right"
+						align="center"
+						hidden={(leftState || rightState) !== "collapsed" || isMobile}
+						{...tooltipProps}
+					/>
+				</Tooltip>
+			</DSMenuItem>
+		);
+	}
+
+	// No tooltip
+	return (
+		<DSMenuItem>
+			{anchor}
+		</DSMenuItem>
+	);
+});
+
+DSMenuAnchor.displayName = "DSMenuAnchor";
+
+interface DSMenuLinkProps extends React.ComponentProps<typeof NavLink> {
+	icon?: React.ReactNode;
+	tooltip?: string;
+	variant?: "default" | "ghost" | "outline" | "soft" | "solid" | "minimal" | "bordered" | "pill";
+	size?: "default" | "sm" | "lg" | "icon";
+}
+
+const DSMenuLink = forwardRef<HTMLAnchorElement, DSMenuLinkProps>(({ className, icon, tooltip, children, to, variant = "default", size = "default", ...props }, ref) => {
+	const navigation = useNavigation();
+	const location = useLocation();
+	const { isMobile, leftState, rightState } = useDS();
+
+	const isNavigatingToThisLink = navigation.state === 'loading' && navigation.location?.pathname === to;
+	const isActive = location.pathname === to;
+
+	const linkContent = (
+		<>
+			{icon &&
+				React.isValidElement(icon) &&
+				React.cloneElement(icon, {
+					className: cn("size-4 shrink-0", icon.props.className),
+				})}
+			<span className="flex-1 truncate">{children}</span>
+
+			{isNavigatingToThisLink && (
+				<div className="ml-auto flex items-center">
+					<div className="animate-spin rounded-full h-5 w-5 border-t-3 border-primary border-solid"></div>
+				</div>
+			)}
+		</>
+	);
+
+	const link = (
+		<NavLink
+			ref={ref}
+			to={to}
+			className={cn(
+				DSMenuButtonVariants({ variant, size, isActive }),
+				isActive && "text-primary bg-muted font-medium",
+				className
+			)}
+			{...props}
+		>
+			{linkContent}
+		</NavLink>
+	);
+
+	// If tooltip exists, wrap with Tooltip
+	if (tooltip) {
+		const tooltipProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip;
+
+		return (
+			<DSMenuItem>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						{link}
+					</TooltipTrigger>
+					<TooltipContent
+						side="right"
+						align="center"
+						hidden={(leftState || rightState) !== "collapsed" || isMobile}
+						{...tooltipProps}
+					/>
+				</Tooltip>
+			</DSMenuItem>
+		);
+	}
+
+	// No tooltip
+	return (
+		<DSMenuItem>
+			{link}
+		</DSMenuItem>
+	);
+});
+DSMenuLink.displayName = "DSMenuLink";
+
+const DSMenuSub = forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(({ className, ...props }, ref) => (<ul ref={ref} data-dual-sidebar="menu-sub" className={cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-border px-2.5 py-0.5", "group-data-[collapsible=icon]:hidden", className)} {...props} />));
+DSMenuSub.displayName = "DSMenuSub";
+
+const DSMenuSubItem = forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ ...props }, ref) => <li ref={ref} {...props} />);
+DSMenuSubItem.displayName = "DSMenuSubItem";
+
+const DSMenuSubButton = forwardRef<
+	HTMLAnchorElement,
+	React.ComponentProps<"a"> & {
+		asChild?: boolean;
+		size?: "sm" | "md";
+		isActive?: boolean;
+	}
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+	const Comp = asChild ? Slot : "a";
+	const { variant } = useDS();
+	return (
+		<Comp ref={ref} data-dual-sidebar="menu-sub-button" data-size={size} data-active={isActive} className={cn(menuSubButtonVariants({ variant, size }), className)} {...props} />
+	);
+});
+DSMenuSubButton.displayName = "DSMenuSubButton";
+
+const DSD = forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<typeof Drawer> & {
+		drawerHeight: string;
+		variant?: "default" | "card" | "glass" | "elevated" | "bordered";
+	}
+>(({ drawerHeight = "80vh", variant = 'default', direction = 'bottom', size = 'md', children, ...props }, ref) => {
+	const { setTopHeight, dsdVariant, setDsdVariant, dsdDirection, setDsdDirection, dsdSize,
+		setDsdSize } = useDS();
+
+	const [isOpen, setIsOpen] = React.useState(false);
+
+	React.useEffect(() => {
+		setDsdVariant(variant)
+		setDsdDirection(direction)
+		setDsdSize(size)
+		setTopHeight(isOpen ? drawerHeight : "0px");
+		return () => setTopHeight("0px");
+	}, [isOpen, drawerHeight, setTopHeight]);
+
+	return (
+		<Drawer ref={ref} placement="top" onOpenChange={setIsOpen} {...props}>
+			{children}
+		</Drawer>
+	);
+});
+DSD.displayName = "DSD";
+function DSDTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+	return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+function DSDPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+	return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+function DSDClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+	return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+function DSDOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+	return (
+		<DrawerPrimitive.Overlay data-slot="drawer-overlay" className={cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className)} {...props} />
+	);
+}
+function DSDContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+	const { setTopHeight, dsdVariant, setDsdVariant, dsdDirection, setDsdDirection, dsdSize, setDsdSize } = useDS();
+	const variant = dsdVariant
+	const direction = dsdDirection
+	const size = dsdSize
+	return (
+		<DSDPortal data-slot="drawer-portal">
+			<DSDOverlay />
+			<DrawerPrimitive.Content data-slot="drawer-content" className={cn(drawerVariants({ direction, size, variant }), className)} 	{...props} 	>
+				<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+				{children}
+			</DrawerPrimitive.Content>
+		</DSDPortal>
+	);
+}
+function DSDHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="drawer-header"
+			className={cn("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left", className)}
+			{...props}
+		/>
+	);
+}
+function DSDFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="drawer-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
+}
+function DSDTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+	return <DrawerPrimitive.Title data-slot="drawer-title" className={cn("text-foreground font-semibold", className)} {...props} />;
+}
+function DSDDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+	return <DrawerPrimitive.Description data-slot="drawer-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
+}
+function DSLoading({
+	variant = "default",
+	size = "default"
+}: {
+	variant?: "default" | "minimal" | "card" | "centered";
+	size?: "default" | "sm" | "md" | "lg" | "full";
+}) {
+	const isMobile = useIsMobile();
+	const width = isMobile ? DS_WIDTH_MOBILE : DS_WIDTH;
+	return (
+		<div className={cn(loadingVariants({ variant, size }), width)}>
+			{/**<div className={cn("flex flex-col items-center justify-center text-center p-8 w-[256px] min-h-[400px] h-screen bg-gradient-to-b from-background to-muted/20", width)}> */}
+			<div className="space-y-3">
+				<h3 className="text-lg font-semibold text-foreground animate-pulse">Loading Sidebar</h3>
+				<p className="text-sm text-muted-foreground/80 animate-pulse delay-150">Please wait while the content loads...</p>
+			</div>
+			<div className="mb-6">
+				<LoaderX variant='3' />
+			</div>
+			{/**	<div className="w-full mt-8 space-y-3">
+				<div className="h-3 bg-muted rounded-full animate-pulse"></div>
+				<div className="h-3 bg-muted rounded-full animate-pulse delay-75 w-3/4"></div>
+				<div className="h-3 bg-muted rounded-full animate-pulse delay-150 w-1/2"></div>
+			</div>
+
+			<div className="flex space-x-1 mt-6">
+				<div className="w-2 h-2 bg-primary/60 rounded-full animate-bounce"></div>
+				<div className="w-2 h-2 bg-primary/60 rounded-full animate-bounce delay-100"></div>
+				<div className="w-2 h-2 bg-primary/60 rounded-full animate-bounce delay-200"></div>
+			</div> */}
+		</div>
+	);
+}
+const colorThemes = {
+	neutral: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.145 0 0)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.145 0 0)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.145 0 0)",
+				"--primary": "oklch(0.205 0 0)",
+				"--primary-foreground": "oklch(0.985 0 0)",
+				"--secondary": "oklch(0.97 0 0)",
+				"--secondary-foreground": "oklch(0.205 0 0)",
+				"--muted": "oklch(0.97 0 0)",
+				"--muted-foreground": "oklch(0.556 0 0)",
+				"--accent": "oklch(0.97 0 0)",
+				"--accent-foreground": "oklch(0.205 0 0)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.922 0 0)",
+				"--input": "oklch(0.922 0 0)",
+				"--ring": "oklch(0.708 0 0)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.145 0 0)",
+				"--sidebar-primary": "oklch(0.205 0 0)",
+				"--sidebar-primary-foreground": "oklch(0.985 0 0)",
+				"--sidebar-accent": "oklch(0.97 0 0)",
+				"--sidebar-accent-foreground": "oklch(0.205 0 0)",
+				"--sidebar-border": "oklch(0.922 0 0)",
+				"--sidebar-ring": "oklch(0.708 0 0)",
+			},
+			dark: {
+				"--background": "oklch(0.145 0 0)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.205 0 0)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.205 0 0)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.922 0 0)",
+				"--primary-foreground": "oklch(0.205 0 0)",
+				"--secondary": "oklch(0.269 0 0)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.269 0 0)",
+				"--muted-foreground": "oklch(0.708 0 0)",
+				"--accent": "oklch(0.269 0 0)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.556 0 0)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.205 0 0)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.488 0.243 264.376)",
+				"--sidebar-primary-foreground": "oklch(0.985 0 0)",
+				"--sidebar-accent": "oklch(0.269 0 0)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.556 0 0)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "0 0% 3.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "0 0% 3.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "0 0% 3.9%",
+				"--primary": "0 0% 9%",
+				"--primary-foreground": "0 0% 98%",
+				"--secondary": "0 0% 96.1%",
+				"--secondary-foreground": "0 0% 9%",
+				"--muted": "0 0% 96.1%",
+				"--muted-foreground": "0 0% 45.1%",
+				"--accent": "0 0% 96.1%",
+				"--accent-foreground": "0 0% 9%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "0 0% 89.8%",
+				"--input": "0 0% 89.8%",
+				"--ring": "0 0% 3.9%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "0 0% 3.9%",
+				"--foreground": "0 0% 98%",
+				"--card": "0 0% 3.9%",
+				"--card-foreground": "0 0% 98%",
+				"--popover": "0 0% 3.9%",
+				"--popover-foreground": "0 0% 98%",
+				"--primary": "0 0% 98%",
+				"--primary-foreground": "0 0% 9%",
+				"--secondary": "0 0% 14.9%",
+				"--secondary-foreground": "0 0% 98%",
+				"--muted": "0 0% 14.9%",
+				"--muted-foreground": "0 0% 63.9%",
+				"--accent": "0 0% 14.9%",
+				"--accent-foreground": "0 0% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "0 0% 14.9%",
+				"--input": "0 0% 14.9%",
+				"--ring": "0 0% 83.1%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+	red: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.637 0.237 25.331)",
+				"--primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.637 0.237 25.331)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.637 0.237 25.331)",
+				"--sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.637 0.237 25.331)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.637 0.237 25.331)",
+				"--primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.637 0.237 25.331)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.637 0.237 25.331)",
+				"--sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.637 0.237 25.331)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "0 0% 3.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "0 0% 3.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "0 0% 3.9%",
+				"--primary": "0 72.2% 50.6%",
+				"--primary-foreground": "0 85.7% 97.3%",
+				"--secondary": "0 0% 96.1%",
+				"--secondary-foreground": "0 0% 9%",
+				"--muted": "0 0% 96.1%",
+				"--muted-foreground": "0 0% 45.1%",
+				"--accent": "0 0% 96.1%",
+				"--accent-foreground": "0 0% 9%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "0 0% 89.8%",
+				"--input": "0 0% 89.8%",
+				"--ring": "0 72.2% 50.6%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "0 0% 3.9%",
+				"--foreground": "0 0% 98%",
+				"--card": "0 0% 3.9%",
+				"--card-foreground": "0 0% 98%",
+				"--popover": "0 0% 3.9%",
+				"--popover-foreground": "0 0% 98%",
+				"--primary": "0 72.2% 50.6%",
+				"--primary-foreground": "0 85.7% 97.3%",
+				"--secondary": "0 0% 14.9%",
+				"--secondary-foreground": "0 0% 98%",
+				"--muted": "0 0% 14.9%",
+				"--muted-foreground": "0 0% 63.9%",
+				"--accent": "0 0% 14.9%",
+				"--accent-foreground": "0 0% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "0 0% 14.9%",
+				"--input": "0 0% 14.9%",
+				"--ring": "0 72.2% 50.6%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+	rose: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.645 0.246 16.439)",
+				"--primary-foreground": "oklch(0.969 0.015 12.422)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.645 0.246 16.439)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.645 0.246 16.439)",
+				"--sidebar-primary-foreground": "oklch(0.969 0.015 12.422)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.645 0.246 16.439)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.645 0.246 16.439)",
+				"--primary-foreground": "oklch(0.969 0.015 12.422)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.645 0.246 16.439)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.645 0.246 16.439)",
+				"--sidebar-primary-foreground": "oklch(0.969 0.015 12.422)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.645 0.246 16.439)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "240 10% 3.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "240 10% 3.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "240 10% 3.9%",
+				"--primary": "346.8 77.2% 49.8%",
+				"--primary-foreground": "355.7 100% 97.3%",
+				"--secondary": "240 4.8% 95.9%",
+				"--secondary-foreground": "240 5.9% 10%",
+				"--muted": "240 4.8% 95.9%",
+				"--muted-foreground": "240 3.8% 46.1%",
+				"--accent": "240 4.8% 95.9%",
+				"--accent-foreground": "240 5.9% 10%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "240 5.9% 90%",
+				"--input": "240 5.9% 90%",
+				"--ring": "346.8 77.2% 49.8%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "20 14.3% 4.1%",
+				"--foreground": "0 0% 95%",
+				"--card": "24 9.8% 10%",
+				"--card-foreground": "0 0% 95%",
+				"--popover": "0 0% 9%",
+				"--popover-foreground": "0 0% 95%",
+				"--primary": "346.8 77.2% 49.8%",
+				"--primary-foreground": "355.7 100% 97.3%",
+				"--secondary": "240 3.7% 15.9%",
+				"--secondary-foreground": "0 0% 98%",
+				"--muted": "0 0% 15%",
+				"--muted-foreground": "240 5% 64.9%",
+				"--accent": "12 6.5% 15.1%",
+				"--accent-foreground": "0 0% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "0 85.7% 97.3%",
+				"--border": "240 3.7% 15.9%",
+				"--input": "240 3.7% 15.9%",
+				"--ring": "346.8 77.2% 49.8%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+	orange: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.705 0.213 47.604)",
+				"--primary-foreground": "oklch(0.98 0.016 73.684)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.705 0.213 47.604)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.705 0.213 47.604)",
+				"--sidebar-primary-foreground": "oklch(0.98 0.016 73.684)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.705 0.213 47.604)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.646 0.222 41.116)",
+				"--primary-foreground": "oklch(0.98 0.016 73.684)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.646 0.222 41.116)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.646 0.222 41.116)",
+				"--sidebar-primary-foreground": "oklch(0.98 0.016 73.684)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.646 0.222 41.116)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "20 14.3% 4.1%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "20 14.3% 4.1%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "20 14.3% 4.1%",
+				"--primary": "24.6 95% 53.1%",
+				"--primary-foreground": "60 9.1% 97.8%",
+				"--secondary": "60 4.8% 95.9%",
+				"--secondary-foreground": "24 9.8% 10%",
+				"--muted": "60 4.8% 95.9%",
+				"--muted-foreground": "25 5.3% 44.7%",
+				"--accent": "60 4.8% 95.9%",
+				"--accent-foreground": "24 9.8% 10%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "60 9.1% 97.8%",
+				"--border": "20 5.9% 90%",
+				"--input": "20 5.9% 90%",
+				"--ring": "24.6 95% 53.1%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "20 14.3% 4.1%",
+				"--foreground": "60 9.1% 97.8%",
+				"--card": "20 14.3% 4.1%",
+				"--card-foreground": "60 9.1% 97.8%",
+				"--popover": "20 14.3% 4.1%",
+				"--popover-foreground": "60 9.1% 97.8%",
+				"--primary": "20.5 90.2% 48.2%",
+				"--primary-foreground": "60 9.1% 97.8%",
+				"--secondary": "12 6.5% 15.1%",
+				"--secondary-foreground": "60 9.1% 97.8%",
+				"--muted": "12 6.5% 15.1%",
+				"--muted-foreground": "24 5.4% 63.9%",
+				"--accent": "12 6.5% 15.1%",
+				"--accent-foreground": "60 9.1% 97.8%",
+				"--destructive": "0 72.2% 50.6%",
+				"--destructive-foreground": "60 9.1% 97.8%",
+				"--border": "12 6.5% 15.1%",
+				"--input": "12 6.5% 15.1%",
+				"--ring": "20.5 90.2% 48.2%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+	green: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.723 0.219 149.579)",
+				"--primary-foreground": "oklch(0.982 0.018 155.826)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.723 0.219 149.579)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.723 0.219 149.579)",
+				"--sidebar-primary-foreground": "oklch(0.982 0.018 155.826)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.723 0.219 149.579)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.696 0.17 162.48)",
+				"--primary-foreground": "oklch(0.393 0.095 152.535)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.527 0.154 150.069)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.696 0.17 162.48)",
+				"--sidebar-primary-foreground": "oklch(0.393 0.095 152.535)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.527 0.154 150.069)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "240 10% 3.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "240 10% 3.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "240 10% 3.9%",
+				"--primary": "142.1 76.2% 36.3%",
+				"--primary-foreground": "355.7 100% 97.3%",
+				"--secondary": "240 4.8% 95.9%",
+				"--secondary-foreground": "240 5.9% 10%",
+				"--muted": "240 4.8% 95.9%",
+				"--muted-foreground": "240 3.8% 46.1%",
+				"--accent": "240 4.8% 95.9%",
+				"--accent-foreground": "240 5.9% 10%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "0 0% 98%",
+				"--border": "240 5.9% 90%",
+				"--input": "240 5.9% 90%",
+				"--ring": "142.1 76.2% 36.3%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "20 14.3% 4.1%",
+				"--foreground": "0 0% 95%",
+				"--card": "24 9.8% 10%",
+				"--card-foreground": "0 0% 95%",
+				"--popover": "0 0% 9%",
+				"--popover-foreground": "0 0% 95%",
+				"--primary": "142.1 70.6% 45.3%",
+				"--primary-foreground": "144.9 80.4% 10%",
+				"--secondary": "240 3.7% 15.9%",
+				"--secondary-foreground": "0 0% 98%",
+				"--muted": "0 0% 15%",
+				"--muted-foreground": "240 5% 64.9%",
+				"--accent": "12 6.5% 15.1%",
+				"--accent-foreground": "0 0% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "0 85.7% 97.3%",
+				"--border": "240 3.7% 15.9%",
+				"--input": "240 3.7% 15.9%",
+				"--ring": "142.4 71.8% 29.2%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+	blue: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.623 0.214 259.815)",
+				"--primary-foreground": "oklch(0.97 0.014 254.604)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.623 0.214 259.815)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.623 0.214 259.815)",
+				"--sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.623 0.214 259.815)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.546 0.245 262.881)",
+				"--primary-foreground": "oklch(0.379 0.146 265.522)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.488 0.243 264.376)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.546 0.245 262.881)",
+				"--sidebar-primary-foreground": "oklch(0.379 0.146 265.522)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.488 0.243 264.376)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "222.2 84% 4.9%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "222.2 84% 4.9%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "222.2 84% 4.9%",
+				"--primary": "221.2 83.2% 53.3%",
+				"--primary-foreground": "210 40% 98%",
+				"--secondary": "210 40% 96.1%",
+				"--secondary-foreground": "222.2 47.4% 11.2%",
+				"--muted": "210 40% 96.1%",
+				"--muted-foreground": "215.4 16.3% 46.9%",
+				"--accent": "210 40% 96.1%",
+				"--accent-foreground": "222.2 47.4% 11.2%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "210 40% 98%",
+				"--border": "214.3 31.8% 91.4%",
+				"--input": "214.3 31.8% 91.4%",
+				"--ring": "221.2 83.2% 53.3%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "221.2 83.2% 53.3%",
+				"--special": "221 39% 11%",
+				"--special-muted-background": "210 40% 96.1%",
+				"--special-border": "214.3 31.8% 91.4%",
+				"--special-foreground": "0 0% 98%",
+				"--special-muted-foreground": "215.4 16.3% 46.9%",
+
+			},
+			dark: {
+				"--background": "222.2 84% 4.9%",
+				"--foreground": "210 40% 98%",
+				"--card": "222.2 84% 4.9%",
+				"--card-foreground": "210 40% 98%",
+				"--popover": "222.2 84% 4.9%",
+				"--popover-foreground": "210 40% 98%",
+				"--primary": "217.2 91.2% 59.8%",
+				"--primary-foreground": "222.2 47.4% 11.2%",
+				"--secondary": "217.2 32.6% 17.5%",
+				"--secondary-foreground": "210 40% 98%",
+				"--muted": "217.2 32.6% 17.5%",
+				"--muted-foreground": "215 20.2% 65.1%",
+				"--accent": "217.2 32.6% 17.5%",
+				"--accent-foreground": "210 40% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "210 40% 98%",
+				"--border": "217.2 32.6% 17.5%",
+				"--input": "217.2 32.6% 17.5%",
+				"--ring": "224.3 76.3% 48%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "221.2 83.2% 53.3%",
+				"--special": "221 39% 11%",
+				"--special-muted-background": "210 40% 96.1%",
+				"--special-border": "214.3 31.8% 91.4%",
+				"--special-foreground": "0 0% 98%",
+				"--special-muted-foreground": "215.4 16.3% 46.9%",
+			},
+		},
+	},
+	yellow: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.795 0.184 86.047)",
+				"--primary-foreground": "oklch(0.421 0.095 57.708)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.795 0.184 86.047)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.795 0.184 86.047)",
+				"--sidebar-primary-foreground": "oklch(0.421 0.095 57.708)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.795 0.184 86.047)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.795 0.184 86.047)",
+				"--primary-foreground": "oklch(0.421 0.095 57.708)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.554 0.135 66.442)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.795 0.184 86.047)",
+				"--sidebar-primary-foreground": "oklch(0.421 0.095 57.708)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.554 0.135 66.442)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "20 14.3% 4.1%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "20 14.3% 4.1%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "20 14.3% 4.1%",
+				"--primary": "47.9 95.8% 53.1%",
+				"--primary-foreground": "26 83.3% 14.1%",
+				"--secondary": "60 4.8% 95.9%",
+				"--secondary-foreground": "24 9.8% 10%",
+				"--muted": "60 4.8% 95.9%",
+				"--muted-foreground": "25 5.3% 44.7%",
+				"--accent": "60 4.8% 95.9%",
+				"--accent-foreground": "24 9.8% 10%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "60 9.1% 97.8%",
+				"--border": "20 5.9% 90%",
+				"--input": "20 5.9% 90%",
+				"--ring": "20 14.3% 4.1%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "20 14.3% 4.1%",
+				"--foreground": "60 9.1% 97.8%",
+				"--card": "20 14.3% 4.1%",
+				"--card-foreground": "60 9.1% 97.8%",
+				"--popover": "20 14.3% 4.1%",
+				"--popover-foreground": "60 9.1% 97.8%",
+				"--primary": "47.9 95.8% 53.1%",
+				"--primary-foreground": "26 83.3% 14.1%",
+				"--secondary": "12 6.5% 15.1%",
+				"--secondary-foreground": "60 9.1% 97.8%",
+				"--muted": "12 6.5% 15.1%",
+				"--muted-foreground": "24 5.4% 63.9%",
+				"--accent": "12 6.5% 15.1%",
+				"--accent-foreground": "60 9.1% 97.8%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "60 9.1% 97.8%",
+				"--border": "12 6.5% 15.1%",
+				"--input": "12 6.5% 15.1%",
+				"--ring": "35.5 91.7% 32.9%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+	violet: {
+		v4: {
+			root: {
+				"--radius": "0.65rem",
+				"--background": "oklch(1 0 0)",
+				"--foreground": "oklch(0.141 0.005 285.823)",
+				"--card": "oklch(1 0 0)",
+				"--card-foreground": "oklch(0.141 0.005 285.823)",
+				"--popover": "oklch(1 0 0)",
+				"--popover-foreground": "oklch(0.141 0.005 285.823)",
+				"--primary": "oklch(0.637 0.237 25.331)",
+				"--primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--secondary": "oklch(0.967 0.001 286.375)",
+				"--secondary-foreground": "oklch(0.21 0.006 285.885)",
+				"--muted": "oklch(0.967 0.001 286.375)",
+				"--muted-foreground": "oklch(0.552 0.016 285.938)",
+				"--accent": "oklch(0.967 0.001 286.375)",
+				"--accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--destructive": "oklch(0.577 0.245 27.325)",
+				"--border": "oklch(0.92 0.004 286.32)",
+				"--input": "oklch(0.92 0.004 286.32)",
+				"--ring": "oklch(0.637 0.237 25.331)",
+				"--chart-1": "oklch(0.646 0.222 41.116)",
+				"--chart-2": "oklch(0.6 0.118 184.704)",
+				"--chart-3": "oklch(0.398 0.07 227.392)",
+				"--chart-4": "oklch(0.828 0.189 84.429)",
+				"--chart-5": "oklch(0.769 0.188 70.08)",
+				"--sidebar": "oklch(0.985 0 0)",
+				"--sidebar-foreground": "oklch(0.141 0.005 285.823)",
+				"--sidebar-primary": "oklch(0.637 0.237 25.331)",
+				"--sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--sidebar-accent": "oklch(0.967 0.001 286.375)",
+				"--sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+				"--sidebar-border": "oklch(0.92 0.004 286.32)",
+				"--sidebar-ring": "oklch(0.637 0.237 25.331)",
+			},
+			dark: {
+				"--background": "oklch(0.141 0.005 285.823)",
+				"--foreground": "oklch(0.985 0 0)",
+				"--card": "oklch(0.21 0.006 285.885)",
+				"--card-foreground": "oklch(0.985 0 0)",
+				"--popover": "oklch(0.21 0.006 285.885)",
+				"--popover-foreground": "oklch(0.985 0 0)",
+				"--primary": "oklch(0.637 0.237 25.331)",
+				"--primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--secondary": "oklch(0.274 0.006 286.033)",
+				"--secondary-foreground": "oklch(0.985 0 0)",
+				"--muted": "oklch(0.274 0.006 286.033)",
+				"--muted-foreground": "oklch(0.705 0.015 286.067)",
+				"--accent": "oklch(0.274 0.006 286.033)",
+				"--accent-foreground": "oklch(0.985 0 0)",
+				"--destructive": "oklch(0.704 0.191 22.216)",
+				"--border": "oklch(1 0 0 / 10%)",
+				"--input": "oklch(1 0 0 / 15%)",
+				"--ring": "oklch(0.637 0.237 25.331)",
+				"--chart-1": "oklch(0.488 0.243 264.376)",
+				"--chart-2": "oklch(0.696 0.17 162.48)",
+				"--chart-3": "oklch(0.769 0.188 70.08)",
+				"--chart-4": "oklch(0.627 0.265 303.9)",
+				"--chart-5": "oklch(0.645 0.246 16.439)",
+				"--sidebar": "oklch(0.21 0.006 285.885)",
+				"--sidebar-foreground": "oklch(0.985 0 0)",
+				"--sidebar-primary": "oklch(0.637 0.237 25.331)",
+				"--sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+				"--sidebar-accent": "oklch(0.274 0.006 286.033)",
+				"--sidebar-accent-foreground": "oklch(0.985 0 0)",
+				"--sidebar-border": "oklch(1 0 0 / 10%)",
+				"--sidebar-ring": "oklch(0.637 0.237 25.331)",
+			},
+		},
+		v3: {
+			root: {
+				"--background": "0 0% 100%",
+				"--foreground": "224 71.4% 4.1%",
+				"--card": "0 0% 100%",
+				"--card-foreground": "224 71.4% 4.1%",
+				"--popover": "0 0% 100%",
+				"--popover-foreground": "224 71.4% 4.1%",
+				"--primary": "262.1 83.3% 57.8%",
+				"--primary-foreground": "210 20% 98%",
+				"--secondary": "220 14.3% 95.9%",
+				"--secondary-foreground": "220.9 39.3% 11%",
+				"--muted": "220 14.3% 95.9%",
+				"--muted-foreground": "220 8.9% 46.1%",
+				"--accent": "220 14.3% 95.9%",
+				"--accent-foreground": "220.9 39.3% 11%",
+				"--destructive": "0 84.2% 60.2%",
+				"--destructive-foreground": "210 20% 98%",
+				"--border": "220 13% 91%",
+				"--input": "220 13% 91%",
+				"--ring": "262.1 83.3% 57.8%",
+				"--radius": "0.5rem",
+				"--chart-1": "12 76% 61%",
+				"--chart-2": "173 58% 39%",
+				"--chart-3": "197 37% 24%",
+				"--chart-4": "43 74% 66%",
+				"--chart-5": "27 87% 67%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+			dark: {
+				"--background": "224 71.4% 4.1%",
+				"--foreground": "210 20% 98%",
+				"--card": "224 71.4% 4.1%",
+				"--card-foreground": "210 20% 98%",
+				"--popover": "224 71.4% 4.1%",
+				"--popover-foreground": "210 20% 98%",
+				"--primary": "263.4 70% 50.4%",
+				"--primary-foreground": "210 20% 98%",
+				"--secondary": "215 27.9% 16.9%",
+				"--secondary-foreground": "210 20% 98%",
+				"--muted": "215 27.9% 16.9%",
+				"--muted-foreground": "217.9 10.6% 64.9%",
+				"--accent": "215 27.9% 16.9%",
+				"--accent-foreground": "210 20% 98%",
+				"--destructive": "0 62.8% 30.6%",
+				"--destructive-foreground": "210 20% 98%",
+				"--border": "215 27.9% 16.9%",
+				"--input": "215 27.9% 16.9%",
+				"--ring": "263.4 70% 50.4%",
+				"--chart-1": "220 70% 50%",
+				"--chart-2": "160 60% 45%",
+				"--chart-3": "30 80% 55%",
+				"--chart-4": "280 65% 60%",
+				"--chart-5": "340 75% 55%",
+				"--sidebar": "221 39% 11%",
+				"--sidebar-foreground": "0 0% 98%",
+				"--sidebar-primary": "217.2 91.2% 59.8%",
+				"--special": "227 21% 8%",
+				"--special-muted-background": "240 10% 4%",
+				"--special-border": "240 4% 16%",
+				"--special-foreground": "240 5% 84%",
+				"--special-muted-foreground": "240 4% 46%",
+			},
+		},
+	},
+};
+const DSA = forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Root
+		ref={ref}
+		className={cn(
+			'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+			className
+		)}
+		{...props}
+	/>
+))
+DSA.displayName = AvatarPrimitive.Root.displayName
+
+const DSAImage = forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Image>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Image
+		ref={ref}
+		className={cn('aspect-square h-full w-full', className)}
+		{...props}
+	/>
+))
+DSAImage.displayName = AvatarPrimitive.Image.displayName
+
+const DSAFallback = forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Fallback
+		ref={ref}
+		className={cn(
+			'flex h-full w-full items-center justify-center rounded-full bg-muted',
+			className
+		)}
+		{...props}
+	/>
+))
+DSAFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+function DSDM({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DSDMPortal({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+	return (
+		<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+	)
+}
+
+function DSDMTrigger({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
+			{...props}
+		/>
+	)
+}
+
+function DSDMContent({
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+	return (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Content
+				data-slot="dropdown-menu-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					className
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	)
+}
+
+function DSDMGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+	return (
+		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+	)
+}
+
+function DSDMItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean
+	variant?: "default" | "destructive"
+}) {
+
+	return (
+		<DropdownMenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground cursor-pointer data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function DSDMAnchor({
+	className,
+	children,
+	to,
+	variant = "default",
+	newTab = true,
+	...props
+}: {
+	className?: string
+	children: React.ReactNode
+	to: string
+	newTab?: boolean
+}) {
+	const anchorProps = newTab ? {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	} : {};
+	return (
+		<a
+			href={to}
+			{...anchorProps}
+			className={cn(className)}
+			{...props}
+		>
+			<DSDMItem variant={variant}>
+				<span className="flex-1 truncate">{children}</span>
+			</DSDMItem>
+		</a>
+	);
+}
+
+function DSDMCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+	return (
+		<DropdownMenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<Check className="size-4" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.CheckboxItem>
+	)
+}
+
+function DSDMRadioGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+	return (
+		<DropdownMenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	)
+}
+
+function DSDMRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+	return (
+		<DropdownMenuPrimitive.RadioItem
+			data-slot="dropdown-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<Circle className="size-2 fill-current" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.RadioItem>
+	)
+}
+
+function DSDMLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean
+}) {
+	return (
+		<DropdownMenuPrimitive.Label
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function DSDMSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+	return (
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	)
+}
+
+function DSDMShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function DSDMSub({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DSDMSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean
+}) {
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRight className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	)
+}
+
+function DSDMSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+const DSC = CollapsiblePrimitive.Root;
+const DSCTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+interface CollapsibleContentProps
+	extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent> { }
+
+const DSCContent = forwardRef<
+	React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+	CollapsibleContentProps
+>(({ className, ...props }, ref) => {
+	return (
+		<CollapsiblePrimitive.CollapsibleContent
+			ref={ref}
+			className={cn(
+				"text-border",
+				className
+			)}
+			{...props}
+		/>
+	);
+});
+DSCContent.displayName = "DSCContent";
+const data = {
+	nav: [
+		{ name: "Notifications", icon: Bell },
+		{ name: "Navigation", icon: Menu },
+		{ name: "Home", icon: Home },
+		{ name: "Appearance", icon: Paintbrush },
+		{ name: "Messages & media", icon: MessageCircle },
+		{ name: "Language & region", icon: Globe },
+		{ name: "Accessibility", icon: Keyboard },
+		{ name: "Mark as read", icon: Check },
+		{ name: "Audio & video", icon: Video },
+		{ name: "Connected accounts", icon: Link },
+		{ name: "Privacy & visibility", icon: Lock },
+		{ name: "Advanced", icon: Settings },
+	],
+}
+export function DialogSidebar() {
+	const [open, setOpen] = useState(false)
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<DSMenuButton className="px-2.5 md:px-2"><Bot /></DSMenuButton>
+			</DialogTrigger>
+			<DialogContent className="overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]">
+				<DialogTitle className="sr-only">Settings</DialogTitle>
+				<DialogDescription className="sr-only">
+					Customize your settings here.
+				</DialogDescription>
+				<SidebarProvider className="items-start">
+					<Sidebar collapsible="none" className="hidden md:flex">
+						<SidebarContent>
+							<SidebarGroup>
+								<SidebarGroupContent>
+									<SidebarMenu>
+										{data.nav.map((item) => (
+											<SidebarMenuItem key={item.name}>
+												<SidebarMenuButton
+													asChild
+													isActive={item.name === "Messages & media"}
+												>
+													<a href="#">
+														<item.icon />
+														<span>{item.name}</span>
+													</a>
+												</SidebarMenuButton>
+											</SidebarMenuItem>
+										))}
+									</SidebarMenu>
+								</SidebarGroupContent>
+							</SidebarGroup>
+						</SidebarContent>
+					</Sidebar>
+					<main className="flex h-[480px] flex-1 flex-col overflow-hidden">
+						<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+							<div className="flex items-center gap-2 px-4">
+								<Breadcrumb>
+									<BreadcrumbList>
+										<BreadcrumbItem className="hidden md:block">
+											<BreadcrumbLink href="#">Settings</BreadcrumbLink>
+										</BreadcrumbItem>
+										<BreadcrumbSeparator className="hidden md:block" />
+										<BreadcrumbItem>
+											<BreadcrumbPage>Messages & media</BreadcrumbPage>
+										</BreadcrumbItem>
+									</BreadcrumbList>
+								</Breadcrumb>
+							</div>
+						</header>
+						<div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0">
+							{Array.from({ length: 10 }).map((_, i) => (
+								<div
+									key={i}
+									className="bg-muted/50 aspect-video max-w-3xl rounded-xl"
+								/>
+							))}
+						</div>
+					</main>
+				</SidebarProvider>
+			</DialogContent>
+		</Dialog>
+	)
+}
+
+export {
+	// DS stands for DualSidebar
+	// use sidebar
+	useDS,
+	// sidebar rails
+	DSLeftRail,
+	DSRightRail,
+	// sidebar layouts
+	DSHeader,
+	DSContent,
+	DSFooter,
+	// sidebar avatar 
+	DSA,
+	DSAImage,
+	DSAFallback,
+	// sidebar menu items
+	DSGroup,
+	DSGroupAction,
+	DSGroupContent,
+	DSGroupLabel,
+	DSInput,
+	DSMenu,
+	DSMenuAction,
+	DSMenuBadge,
+	DSMenuButton,
+	DSMenuItem,
+	DSMenuSkeleton,
+	DSMenuSub,
+	DSMenuSubButton,
+	DSMenuSubItem,
+	DSSeparator,
+	// optimistic ui nav links and loading ui
+	DSMenuAnchor,
+	DSMenuLink,
+	DSLoading,
+	// theme selector
+	useDSTheme,
+	DSThemeSelector,
+	type DSTheme,
+	DSThemeProvider,
+	// sidebar provider
+	DSProvider,
+	// sidebar inset
+	DSInset,
+	// left trigger
+	DSTrigger,
+	// left sidebar
+	DSLeft,
+	DSLeftIcon,
+	// right sidebar
+	DSRight,
+	DSRightIcon,
+	// DSD stands for DualSidebarDrawer
+	DSD,
+	DSDTrigger,
+	DSDPortal,
+	DSDClose,
+	DSDOverlay,
+	DSDContent,
+	DSDHeader,
+	DSDFooter,
+	DSDTitle,
+	DSDDescription,
+	// DSDM
+	DSDM,
+	DSDMPortal,
+	DSDMTrigger,
+	DSDMContent,
+	DSDMGroup,
+	DSDMLabel,
+	DSDMItem,
+	DSDMCheckboxItem,
+	DSDMRadioGroup,
+	DSDMRadioItem,
+	DSDMSeparator,
+	DSDMShortcut,
+	DSDMSub,
+	DSDMSubTrigger,
+	DSDMSubContent,
+	DSDMAnchor,
+	// Collapsible
+	DSC,
+	DSCTrigger,
+	DSCContent,
+	DS_COOKIE_NAME,
+	DS_COOKIE_NAME_RIGHT,
+	DS_COOKIE_MAX_AGE,
+	DS_WIDTH,
+	DS_WIDTH_MOBILE,
+	DS_WIDTH_ICON,
+	DS_KEYBOARD_SHORTCUT_LEFT,
+	DS_KEYBOARD_SHORTCUT_RIGHT,
+	THEME_VERSION,
+	THEME_OPTIONS,
+	LOCAL_DS_STORAGE_KEY,
+};