@srcroot/ui 0.0.43 → 0.0.45

package/src/registry/themes/v4/slate.css

@@ -126,54 +126,52 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background: hsl(222.2 84% 4.9%);
-        --foreground: hsl(210 40% 98%);
+.dark {
+    --background: hsl(222.2 84% 4.9%);
+    --foreground: hsl(210 40% 98%);
 
-        --card: hsl(222.2 84% 4.9%);
-        --card-foreground: hsl(210 40% 98%);
+    --card: hsl(222.2 84% 4.9%);
+    --card-foreground: hsl(210 40% 98%);
 
-        --popover: hsl(222.2 84% 4.9%);
-        --popover-foreground: hsl(210 40% 98%);
+    --popover: hsl(222.2 84% 4.9%);
+    --popover-foreground: hsl(210 40% 98%);
 
-        --primary: hsl(210 40% 98%);
-        --primary-foreground: hsl(222.2 47.4% 11.2%);
+    --primary: hsl(210 40% 98%);
+    --primary-foreground: hsl(222.2 47.4% 11.2%);
 
-        --secondary: hsl(217.2 32.6% 17.5%);
-        --secondary-foreground: hsl(210 40% 98%);
+    --secondary: hsl(217.2 32.6% 17.5%);
+    --secondary-foreground: hsl(210 40% 98%);
 
-        --muted: hsl(217.2 32.6% 17.5%);
-        --muted-foreground: hsl(215 20.2% 65.1%);
+    --muted: hsl(217.2 32.6% 17.5%);
+    --muted-foreground: hsl(215 20.2% 65.1%);
 
-        --accent: hsl(217.2 32.6% 17.5%);
-        --accent-foreground: hsl(210 40% 98%);
+    --accent: hsl(217.2 32.6% 17.5%);
+    --accent-foreground: hsl(210 40% 98%);
 
-        --destructive: hsl(0 62.8% 30.6%);
-        --destructive-foreground: hsl(210 40% 98%);
-
-        --success: hsl(142.1 70.6% 45.3%);
-        --success-foreground: hsl(222.2 47.4% 11.2%);
-
-        --warning: hsl(48 96.5% 53.1%);
-        --warning-foreground: hsl(222.2 47.4% 11.2%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(210 40% 98%);
 
-        --info: hsl(199.4 95.5% 53.8%);
-        --info-foreground: hsl(222.2 47.4% 11.2%);
+    --success: hsl(142.1 70.6% 45.3%);
+    --success-foreground: hsl(222.2 47.4% 11.2%);
 
-        --border: hsl(217.2 32.6% 17.5%);
-        --input: hsl(217.2 32.6% 17.5%);
-        --ring: hsl(212.7 26.8% 83.9%);
+    --warning: hsl(48 96.5% 53.1%);
+    --warning-foreground: hsl(222.2 47.4% 11.2%);
 
-        --sidebar-background: hsl(222.2 84% 10%);
-        --sidebar-foreground: hsl(210 40% 98%);
-        --sidebar-primary: hsl(210 40% 98%);
-        --sidebar-primary-foreground: hsl(222.2 47.4% 11.2%);
-        --sidebar-accent: hsl(217.2 32.6% 17.5%);
-        --sidebar-accent-foreground: hsl(210 40% 98%);
-        --sidebar-border: hsl(217.2 32.6% 17.5%);
-        --sidebar-ring: hsl(212.7 26.8% 83.9%);
-    }
+    --info: hsl(199.4 95.5% 53.8%);
+    --info-foreground: hsl(222.2 47.4% 11.2%);
+
+    --border: hsl(217.2 32.6% 17.5%);
+    --input: hsl(217.2 32.6% 17.5%);
+    --ring: hsl(212.7 26.8% 83.9%);
+
+    --sidebar-background: hsl(222.2 84% 10%);
+    --sidebar-foreground: hsl(210 40% 98%);
+    --sidebar-primary: hsl(210 40% 98%);
+    --sidebar-primary-foreground: hsl(222.2 47.4% 11.2%);
+    --sidebar-accent: hsl(217.2 32.6% 17.5%);
+    --sidebar-accent-foreground: hsl(210 40% 98%);
+    --sidebar-border: hsl(217.2 32.6% 17.5%);
+    --sidebar-ring: hsl(212.7 26.8% 83.9%);
 }
 
 body {

package/src/registry/themes/v4/stone.css

@@ -126,54 +126,52 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background: hsl(24 9.8% 10%);
-        --foreground: hsl(60 9.1% 97.8%);
+.dark {
+    --background: hsl(24 9.8% 10%);
+    --foreground: hsl(60 9.1% 97.8%);
 
-        --card: hsl(24 9.8% 10%);
-        --card-foreground: hsl(60 9.1% 97.8%);
+    --card: hsl(24 9.8% 10%);
+    --card-foreground: hsl(60 9.1% 97.8%);
 
-        --popover: hsl(24 9.8% 10%);
-        --popover-foreground: hsl(60 9.1% 97.8%);
+    --popover: hsl(24 9.8% 10%);
+    --popover-foreground: hsl(60 9.1% 97.8%);
 
-        --primary: hsl(60 9.1% 97.8%);
-        --primary-foreground: hsl(24 9.8% 10%);
+    --primary: hsl(60 9.1% 97.8%);
+    --primary-foreground: hsl(24 9.8% 10%);
 
-        --secondary: hsl(12 6.5% 15.1%);
-        --secondary-foreground: hsl(60 9.1% 97.8%);
+    --secondary: hsl(12 6.5% 15.1%);
+    --secondary-foreground: hsl(60 9.1% 97.8%);
 
-        --muted: hsl(12 6.5% 15.1%);
-        --muted-foreground: hsl(24 5.4% 63.9%);
+    --muted: hsl(12 6.5% 15.1%);
+    --muted-foreground: hsl(24 5.4% 63.9%);
 
-        --accent: hsl(12 6.5% 15.1%);
-        --accent-foreground: hsl(60 9.1% 97.8%);
+    --accent: hsl(12 6.5% 15.1%);
+    --accent-foreground: hsl(60 9.1% 97.8%);
 
-        --destructive: hsl(0 62.8% 30.6%);
-        --destructive-foreground: hsl(60 9.1% 97.8%);
-
-        --success: hsl(142.1 70.6% 45.3%);
-        --success-foreground: hsl(24 9.8% 10%);
-
-        --warning: hsl(48 96.5% 53.1%);
-        --warning-foreground: hsl(24 9.8% 10%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(60 9.1% 97.8%);
 
-        --info: hsl(199.4 95.5% 53.8%);
-        --info-foreground: hsl(24 9.8% 10%);
+    --success: hsl(142.1 70.6% 45.3%);
+    --success-foreground: hsl(24 9.8% 10%);
 
-        --border: hsl(12 6.5% 15.1%);
-        --input: hsl(12 6.5% 15.1%);
-        --ring: hsl(24 5.7% 82.9%);
+    --warning: hsl(48 96.5% 53.1%);
+    --warning-foreground: hsl(24 9.8% 10%);
 
-        --sidebar-background: hsl(24 9.8% 14%);
-        --sidebar-foreground: hsl(60 9.1% 97.8%);
-        --sidebar-primary: hsl(60 9.1% 97.8%);
-        --sidebar-primary-foreground: hsl(24 9.8% 10%);
-        --sidebar-accent: hsl(12 6.5% 15.1%);
-        --sidebar-accent-foreground: hsl(60 9.1% 97.8%);
-        --sidebar-border: hsl(12 6.5% 15.1%);
-        --sidebar-ring: hsl(24 5.7% 82.9%);
-    }
+    --info: hsl(199.4 95.5% 53.8%);
+    --info-foreground: hsl(24 9.8% 10%);
+
+    --border: hsl(12 6.5% 15.1%);
+    --input: hsl(12 6.5% 15.1%);
+    --ring: hsl(24 5.7% 82.9%);
+
+    --sidebar-background: hsl(24 9.8% 14%);
+    --sidebar-foreground: hsl(60 9.1% 97.8%);
+    --sidebar-primary: hsl(60 9.1% 97.8%);
+    --sidebar-primary-foreground: hsl(24 9.8% 10%);
+    --sidebar-accent: hsl(12 6.5% 15.1%);
+    --sidebar-accent-foreground: hsl(60 9.1% 97.8%);
+    --sidebar-border: hsl(12 6.5% 15.1%);
+    --sidebar-ring: hsl(24 5.7% 82.9%);
 }
 
 body {

package/src/registry/themes/v4/violet.css

@@ -126,54 +126,52 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background: hsl(246 20% 6%);
-        --foreground: hsl(0 0% 98%);
+.dark {
+    --background: hsl(246 20% 6%);
+    --foreground: hsl(0 0% 98%);
 
-        --card: hsl(246 20% 8%);
-        --card-foreground: hsl(0 0% 98%);
+    --card: hsl(246 20% 8%);
+    --card-foreground: hsl(0 0% 98%);
 
-        --popover: hsl(246 20% 8%);
-        --popover-foreground: hsl(0 0% 98%);
+    --popover: hsl(246 20% 8%);
+    --popover-foreground: hsl(0 0% 98%);
 
-        --primary: hsl(246 80% 65%);
-        --primary-foreground: hsl(246 20% 6%);
+    --primary: hsl(246 80% 65%);
+    --primary-foreground: hsl(246 20% 6%);
 
-        --secondary: hsl(320 85% 60%);
-        --secondary-foreground: hsl(0 0% 100%);
-
-        --muted: hsl(246 20% 15%);
-        --muted-foreground: hsl(246 10% 60%);
-
-        --accent: hsl(320 85% 60%);
-        --accent-foreground: hsl(0 0% 100%);
+    --secondary: hsl(320 85% 60%);
+    --secondary-foreground: hsl(0 0% 100%);
 
-        --destructive: hsl(0 62.8% 30.6%);
-        --destructive-foreground: hsl(0 0% 98%);
+    --muted: hsl(246 20% 15%);
+    --muted-foreground: hsl(246 10% 60%);
 
-        --success: hsl(142.1 70.6% 45.3%);
-        --success-foreground: hsl(246 80% 60%);
+    --accent: hsl(320 85% 60%);
+    --accent-foreground: hsl(0 0% 100%);
 
-        --warning: hsl(48 96.5% 53.1%);
-        --warning-foreground: hsl(246 80% 60%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(0 0% 98%);
 
-        --info: hsl(199.4 95.5% 53.8%);
-        --info-foreground: hsl(246 80% 60%);
+    --success: hsl(142.1 70.6% 45.3%);
+    --success-foreground: hsl(246 80% 60%);
 
-        --border: hsl(246 20% 18%);
-        --input: hsl(246 20% 18%);
-        --ring: hsl(246 80% 65%);
+    --warning: hsl(48 96.5% 53.1%);
+    --warning-foreground: hsl(246 80% 60%);
 
-        --sidebar-background: hsl(246 20% 10%);
-        --sidebar-foreground: hsl(0 0% 98%);
-        --sidebar-primary: hsl(246 80% 65%);
-        --sidebar-primary-foreground: hsl(246 20% 6%);
-        --sidebar-accent: hsl(320 85% 60%);
-        --sidebar-accent-foreground: hsl(0 0% 100%);
-        --sidebar-border: hsl(246 20% 18%);
-        --sidebar-ring: hsl(246 80% 65%);
-    }
+    --info: hsl(199.4 95.5% 53.8%);
+    --info-foreground: hsl(246 80% 60%);
+
+    --border: hsl(246 20% 18%);
+    --input: hsl(246 20% 18%);
+    --ring: hsl(246 80% 65%);
+
+    --sidebar-background: hsl(246 20% 10%);
+    --sidebar-foreground: hsl(0 0% 98%);
+    --sidebar-primary: hsl(246 80% 65%);
+    --sidebar-primary-foreground: hsl(246 20% 6%);
+    --sidebar-accent: hsl(320 85% 60%);
+    --sidebar-accent-foreground: hsl(0 0% 100%);
+    --sidebar-border: hsl(246 20% 18%);
+    --sidebar-ring: hsl(246 80% 65%);
 }
 
 body {

package/src/registry/themes/v4/zinc.css

@@ -126,54 +126,52 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --background: hsl(240 10% 3.9%);
-        --foreground: hsl(0 0% 98%);
+.dark {
+    --background: hsl(240 10% 3.9%);
+    --foreground: hsl(0 0% 98%);
 
-        --card: hsl(240 10% 3.9%);
-        --card-foreground: hsl(0 0% 98%);
+    --card: hsl(240 10% 3.9%);
+    --card-foreground: hsl(0 0% 98%);
 
-        --popover: hsl(240 10% 3.9%);
-        --popover-foreground: hsl(0 0% 98%);
+    --popover: hsl(240 10% 3.9%);
+    --popover-foreground: hsl(0 0% 98%);
 
-        --primary: hsl(0 0% 98%);
-        --primary-foreground: hsl(240 5.9% 10%);
+    --primary: hsl(0 0% 98%);
+    --primary-foreground: hsl(240 5.9% 10%);
 
-        --secondary: hsl(240 3.7% 15.9%);
-        --secondary-foreground: hsl(0 0% 98%);
+    --secondary: hsl(240 3.7% 15.9%);
+    --secondary-foreground: hsl(0 0% 98%);
 
-        --muted: hsl(240 3.7% 15.9%);
-        --muted-foreground: hsl(240 5% 64.9%);
+    --muted: hsl(240 3.7% 15.9%);
+    --muted-foreground: hsl(240 5% 64.9%);
 
-        --accent: hsl(240 3.7% 15.9%);
-        --accent-foreground: hsl(0 0% 98%);
+    --accent: hsl(240 3.7% 15.9%);
+    --accent-foreground: hsl(0 0% 98%);
 
-        --destructive: hsl(0 62.8% 30.6%);
-        --destructive-foreground: hsl(0 0% 98%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(0 0% 98%);
 
-        --success: hsl(142.1 70.6% 45.3%);
-        --success-foreground: hsl(240 5.9% 10%);
+    --success: hsl(142.1 70.6% 45.3%);
+    --success-foreground: hsl(240 5.9% 10%);
 
-        --warning: hsl(48 96.5% 53.1%);
-        --warning-foreground: hsl(240 5.9% 10%);
+    --warning: hsl(48 96.5% 53.1%);
+    --warning-foreground: hsl(240 5.9% 10%);
 
-        --info: hsl(199.4 95.5% 53.8%);
-        --info-foreground: hsl(240 5.9% 10%);
+    --info: hsl(199.4 95.5% 53.8%);
+    --info-foreground: hsl(240 5.9% 10%);
 
-        --border: hsl(240 3.7% 15.9%);
-        --input: hsl(240 3.7% 15.9%);
-        --ring: hsl(240 4.9% 83.9%);
+    --border: hsl(240 3.7% 15.9%);
+    --input: hsl(240 3.7% 15.9%);
+    --ring: hsl(240 4.9% 83.9%);
 
-        --sidebar-background: hsl(240 5.9% 10%);
-        --sidebar-foreground: hsl(240 4.8% 95.9%);
-        --sidebar-primary: hsl(224.3 76.3% 48%);
-        --sidebar-primary-foreground: hsl(0 0% 100%);
-        --sidebar-accent: hsl(240 3.7% 15.9%);
-        --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-        --sidebar-border: hsl(240 3.7% 15.9%);
-        --sidebar-ring: hsl(217.2 91.2% 59.8%);
-    }
+    --sidebar-background: hsl(240 5.9% 10%);
+    --sidebar-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-primary: hsl(224.3 76.3% 48%);
+    --sidebar-primary-foreground: hsl(0 0% 100%);
+    --sidebar-accent: hsl(240 3.7% 15.9%);
+    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-border: hsl(240 3.7% 15.9%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);
 }
 
 body {

package/src/registry/ui/chart.tsx

@@ -1,7 +1,11 @@
 "use client"
 
 import * as React from "react"
-import { ResponsiveContainer } from "recharts"
+import {
+    Legend as ChartLegendPrimitive,
+    ResponsiveContainer,
+    Tooltip as ChartTooltipPrimitive,
+} from "recharts"
 
 import { cn } from "@/lib/utils"
 
@@ -102,13 +106,19 @@ const ChartTooltip = ChartTooltipPrimitive
 
 const ChartTooltipContent = React.forwardRef<
     HTMLDivElement,
-    React.ComponentProps<typeof ChartTooltipPrimitive> &
+    Omit<React.ComponentProps<typeof ChartTooltipPrimitive>, "payload"> &
     React.ComponentProps<"div"> & {
         hideLabel?: boolean
         hideIndicator?: boolean
         indicator?: "line" | "dot" | "dashed"
         nameKey?: string
         labelKey?: string
+        payload?: any[]
+        label?: any
+        labelFormatter?: any
+        labelClassName?: string
+        formatter?: any
+        color?: string
     }
 >(
     (
@@ -181,7 +191,7 @@ const ChartTooltipContent = React.forwardRef<
             >
                 {!nestLabel ? tooltipLabel : null}
                 <div className="grid gap-1.5">
-                    {payload.map((item, index) => {
+                    {payload.map((item: any, index: number) => {
                         const key = `${nameKey || item.name || item.dataKey || "value"}`
                         const itemConfig = getPayloadConfigFromPayload(config, item, key)
                         const indicatorColor = color || item.payload.fill || item.color
@@ -257,7 +267,9 @@ const ChartLegend = ChartLegendPrimitive
 const ChartLegendContent = React.forwardRef<
     HTMLDivElement,
     React.ComponentProps<"div"> &
-    Pick<React.ComponentProps<typeof ChartLegendPrimitive>, "payload" | "verticalAlign"> & {
+    {
+        payload?: any[]
+        verticalAlign?: "top" | "middle" | "bottom"
         hideIcon?: boolean
         nameKey?: string
     }
@@ -281,7 +293,7 @@ const ChartLegendContent = React.forwardRef<
                     className
                 )}
             >
-                {payload.map((item) => {
+                {(payload as any[]).map((item) => {
                     const key = `${nameKey || item.dataKey || "value"}`
                     const itemConfig = getPayloadConfigFromPayload(config, item, key)
 
@@ -351,16 +363,6 @@ function getPayloadConfigFromPayload(
         : config[key as keyof typeof config]
 }
 
-// Recharts Primitive Imports - We import specific components to avoid large bundle reference but for now let's just use * and assume tree shaking or specific imports in consuming app.
-// However, the above code uses RechartsPrimitive.Tooltip and Legend.
-// Ideally we should import them from recharts.
-
-import {
-    Legend as ChartLegendPrimitive,
-    Tooltip as ChartTooltipPrimitive,
-    ResponsiveContainer,
-} from "recharts"
-
 export {
     ChartContainer,
     ChartTooltip,

package/src/registry/ui/dropdown-menu.tsx

@@ -14,6 +14,7 @@ interface DropdownMenuProps {
     open?: boolean
     onOpenChange?: (open: boolean) => void
     defaultOpen?: boolean
+    className?: string
 }
 
 /**
@@ -32,7 +33,7 @@ interface DropdownMenuProps {
  *   </DropdownMenuContent>
  * </DropdownMenu>
  */
-function DropdownMenu({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: DropdownMenuProps) {
+function DropdownMenu({ children, open: controlledOpen, onOpenChange, defaultOpen = false, className }: DropdownMenuProps) {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
     const triggerRef = React.useRef<HTMLButtonElement>(null)
 
@@ -41,13 +42,14 @@ function DropdownMenu({ children, open: controlledOpen, onOpenChange, defaultOpe
 
     return (
         <DropdownMenuContext.Provider value={{ open, onOpenChange: setOpen, triggerRef }}>
-            <div className="relative inline-block text-left">
+            <div className={cn("relative inline-block text-left", className)}>
                 {children}
             </div>
         </DropdownMenuContext.Provider>
     )
 }
 
+
 interface DropdownMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     asChild?: boolean
 }
@@ -107,6 +109,11 @@ const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContent
         const context = React.useContext(DropdownMenuContext)
         if (!context) throw new Error("DropdownMenuContent must be used within DropdownMenu")
         const contentRef = React.useRef<HTMLDivElement>(null)
+        const [currentSide, setCurrentSide] = React.useState(side)
+
+        React.useEffect(() => {
+            setCurrentSide(side)
+        }, [side])
 
         React.useEffect(() => {
             const handleClickOutside = (e: MouseEvent) => {
@@ -129,17 +136,53 @@ const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContent
                 }
             }
 
+            const checkPosition = () => {
+                if (context.open && contentRef.current && context.triggerRef.current) {
+                    const triggerRect = context.triggerRef.current.getBoundingClientRect()
+                    const contentRect = contentRef.current.getBoundingClientRect()
+                    const viewportHeight = window.innerHeight
+
+                    const spaceBelow = viewportHeight - triggerRect.bottom
+                    const spaceAbove = triggerRect.top
+                    const neededHeight = contentRect.height + sideOffset
+
+                    if (side === 'bottom') {
+                        if (spaceBelow < neededHeight && spaceAbove > neededHeight) {
+                            setCurrentSide('top')
+                        } else {
+                            setCurrentSide('bottom')
+                        }
+                    } else if (side === 'top') {
+                        if (spaceAbove < neededHeight && spaceBelow > neededHeight) {
+                            setCurrentSide('bottom')
+                        } else {
+                            setCurrentSide('top')
+                        }
+                    }
+                }
+            }
+
+            if (context.open) {
+                // Check position immediately after render cycle (via timeout to allow ref to populate and layout to occur)
+                // Using requestAnimationFrame for better timing in layout cycle
+                requestAnimationFrame(checkPosition)
+            }
+
             const timer = setTimeout(() => {
                 document.addEventListener("click", handleClickOutside)
             }, 0)
             document.addEventListener("keydown", handleEscape)
+            window.addEventListener("resize", checkPosition)
+            window.addEventListener("scroll", checkPosition, true) // Capture scroll to update pos
 
             return () => {
                 clearTimeout(timer)
                 document.removeEventListener("click", handleClickOutside)
                 document.removeEventListener("keydown", handleEscape)
+                window.removeEventListener("resize", checkPosition)
+                window.removeEventListener("scroll", checkPosition, true)
             }
-        }, [context.open, context])
+        }, [context.open, context, side, sideOffset])
 
         if (!context.open) return null
 
@@ -150,12 +193,6 @@ const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContent
             end: 'right-0',
         }
 
-        // Calculate side classes
-        const sideClasses = {
-            bottom: `top-full mt-${sideOffset}`,
-            top: `bottom-full mb-${sideOffset}`,
-        }
-
         return (
             <div
                 ref={(node) => {
@@ -169,12 +206,12 @@ const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContent
                     "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
                     "animate-in fade-in-0 zoom-in-95",
                     alignmentClasses[align],
-                    side === 'bottom' ? 'top-full' : 'bottom-full',
+                    currentSide === 'bottom' ? 'top-full' : 'bottom-full',
                     className
                 )}
                 style={{
-                    marginTop: side === 'bottom' ? sideOffset : undefined,
-                    marginBottom: side === 'top' ? sideOffset : undefined,
+                    marginTop: currentSide === 'bottom' ? sideOffset : undefined,
+                    marginBottom: currentSide === 'top' ? sideOffset : undefined,
                 }}
                 {...props}
             />
@@ -183,16 +220,54 @@ const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContent
 )
 DropdownMenuContent.displayName = "DropdownMenuContent"
 
+const DropdownMenuGroup = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("", className)} {...props} />
+))
+DropdownMenuGroup.displayName = "DropdownMenuGroup"
+
+const DropdownMenuPortal = ({ children }: { children: React.ReactNode }) => {
+    return <>{children}</>
+}
+DropdownMenuPortal.displayName = "DropdownMenuPortal"
+
 const DropdownMenuItem = React.forwardRef<
     HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement> & { inset?: boolean; disabled?: boolean }
->(({ className, inset, disabled, onClick, ...props }, ref) => {
+    React.HTMLAttributes<HTMLDivElement> & { inset?: boolean; disabled?: boolean; asChild?: boolean; closeOnSelect?: boolean }
+>(({ className, inset, disabled, onClick, asChild = false, closeOnSelect = true, ...props }, ref) => {
     const context = React.useContext(DropdownMenuContext)
 
     const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
         if (disabled) return
         onClick?.(e)
-        context?.onOpenChange(false)
+        if (closeOnSelect) {
+            context?.onOpenChange(false)
+        }
+    }
+
+    if (asChild) {
+        const child = React.Children.only(props.children) as React.ReactElement<any>
+        return React.cloneElement(child, {
+            ref,
+            className: cn(
+                "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground",
+                inset && "pl-8",
+                disabled && "pointer-events-none opacity-50",
+                className,
+                child.props.className
+            ),
+            onClick: (e: React.MouseEvent<HTMLDivElement>) => {
+                handleClick(e)
+                child.props.onClick?.(e)
+            },
+            "data-disabled": disabled || undefined,
+            "data-inset": inset || undefined,
+            tabIndex: disabled ? -1 : 0,
+            ...props,
+            children: child.props.children
+        })
     }
 
     return (
@@ -403,4 +478,6 @@ export {
     DropdownMenuSub,
     DropdownMenuSubTrigger,
     DropdownMenuSubContent,
+    DropdownMenuGroup,
+    DropdownMenuPortal,
 }