@srcroot/ui 0.0.44 → 0.0.46

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,
 }

package/src/registry/ui/popover.tsx

@@ -83,8 +83,8 @@ PopoverTrigger.displayName = "PopoverTrigger"
 
 const PopoverContent = React.forwardRef<
     HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
+    React.HTMLAttributes<HTMLDivElement> & { align?: "start" | "center" | "end" }
+>(({ className, children, align = "center", ...props }, ref) => {
     const context = React.useContext(PopoverContext)
     if (!context) throw new Error("PopoverContent must be used within Popover")
 
@@ -121,6 +121,7 @@ const PopoverContent = React.forwardRef<
             ref={ref}
             className={cn(
                 "absolute z-50 mt-2 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+                align === "end" ? "right-0" : align === "start" ? "left-0" : "left-1/2 -translate-x-1/2",
                 className
             )}
             onClick={(e) => e.stopPropagation()}

package/src/registry/ui/sidebar.tsx

@@ -492,6 +492,159 @@ const SidebarMenuButton = React.forwardRef<
 )
 SidebarMenuButton.displayName = "SidebarMenuButton"
 
+const SidebarMenuAction = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean; showOnHover?: boolean }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+    if (asChild) {
+        const child = React.Children.only(props.children) as React.ReactElement<any>
+        return React.cloneElement(child, {
+            ref,
+            "data-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",
+                // Increases the hit area of the button on mobile.
+                "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,
+                child.props.className
+            ),
+            ...props,
+            children: child.props.children
+        })
+    }
+
+    return (
+        <button
+            ref={ref}
+            data-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",
+                // Increases the hit area of the button on mobile.
+                "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}
+        />
+    )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuSub = React.forwardRef<
+    HTMLUListElement,
+    React.HTMLAttributes<HTMLUListElement>
+>(({ className, ...props }, ref) => (
+    <ul
+        ref={ref}
+        data-sidebar="menu-sub"
+        className={cn(
+            "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+            "group-data-[collapsible=icon]:hidden",
+            className
+        )}
+        {...props}
+    />
+))
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<
+    HTMLLIElement,
+    React.LiHTMLAttributes<HTMLLIElement>
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+    HTMLAnchorElement,
+    React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+        asChild?: boolean
+        size?: "sm" | "md"
+        isActive?: boolean
+    }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+    if (asChild) {
+        const child = React.Children.only(props.children) as React.ReactElement<any>
+        return React.cloneElement(child, {
+            ref,
+            "data-sidebar": "menu-sub-button",
+            "data-size": size,
+            "data-active": isActive,
+            className: cn(
+                "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 group-data-[collapsible=icon]:hidden",
+                size === "sm" && "text-xs",
+                size === "md" && "text-sm",
+                "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+                className,
+                child.props.className
+            ),
+            ...props,
+            children: child.props.children
+        })
+    }
+
+    return (
+        <a
+            ref={ref}
+            data-sidebar="menu-sub-button"
+            data-size={size}
+            data-active={isActive}
+            className={cn(
+                "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 group-data-[collapsible=icon]:hidden",
+                size === "sm" && "text-xs",
+                size === "md" && "text-sm",
+                "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+                className
+            )}
+            {...props}
+        />
+    )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+const SidebarInput = React.forwardRef<
+    HTMLInputElement,
+    React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, ...props }, ref) => {
+    return (
+        <input
+            ref={ref}
+            data-sidebar="input"
+            className={cn(
+                "flex h-8 w-full bg-background rounded-md px-3 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 group-data-[collapsible=icon]:w-0 group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:border-0 group-data-[collapsible=icon]:hidden",
+                className
+            )}
+            {...props}
+        />
+    )
+})
+SidebarInput.displayName = "SidebarInput"
+
+
+const SidebarSeparator = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+    return (
+        <div
+            ref={ref}
+            data-sidebar="separator"
+            className={cn("mx-2 w-auto bg-sidebar-border h-px", className)}
+            {...props}
+        />
+    )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
 export {
     Sidebar,
     SidebarContent,
@@ -500,12 +653,18 @@ export {
     SidebarGroupContent,
     SidebarGroupLabel,
     SidebarHeader,
+    SidebarInput,
     SidebarInset,
     SidebarMenu,
+    SidebarMenuAction,
     SidebarMenuButton,
     SidebarMenuItem,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem,
     SidebarProvider,
     SidebarRail,
+    SidebarSeparator,
     SidebarTrigger,
     useSidebar,
 }

package/src/registry/ui/theme-switcher.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+import { FiSun, FiMoon, FiMonitor } from "react-icons/fi"
+
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu"
+
+/**
+ * ThemeSwitcher component for use within a DropdownMenu
+ * Toggles between light, dark, and system themes
+ * 
+ * @example
+ * <DropdownMenu>
+ *   <DropdownMenuContent>
+ *     <ThemeSwitcher />
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ */
+export function ThemeSwitcher() {
+    const { setTheme, theme, resolvedTheme } = useTheme()
+    const [mounted, setMounted] = React.useState(false)
+
+    // Avoid hydration mismatch
+    React.useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    const toggleTheme = () => {
+        // Cycle: light -> dark -> system -> light
+        if (theme === "light") {
+            setTheme("dark")
+        } else if (theme === "dark") {
+            setTheme("system")
+        } else {
+            setTheme("light")
+        }
+    }
+
+    const getIcon = () => {
+        if (!mounted) {
+            return <FiSun className="mr-2 h-4 w-4" />
+        }
+        if (theme === "system") {
+            return <FiMonitor className="mr-2 h-4 w-4" />
+        }
+        if (resolvedTheme === "dark") {
+            return <FiMoon className="mr-2 h-4 w-4" />
+        }
+        return <FiSun className="mr-2 h-4 w-4" />
+    }
+
+    const getLabel = () => {
+        if (!mounted) return "Theme"
+        if (theme === "system") return "System"
+        if (theme === "dark") return "Dark"
+        return "Light"
+    }
+
+    return (
+        <DropdownMenuItem onClick={toggleTheme} closeOnSelect={false}>
+            {getIcon()}
+            <span>Theme: {getLabel()}</span>
+        </DropdownMenuItem>
+    )
+}