@srcroot/ui 0.0.48 → 0.0.52

package/src/registry/ui/popover.tsx

@@ -1,9 +1,12 @@
 import * as React from "react"
+import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
+import { Slot } from "@/components/ui/slot"
 
 interface PopoverContextValue {
     open: boolean
     onOpenChange: (open: boolean) => void
+    triggerRef: React.RefObject<HTMLButtonElement | null>
 }
 
 const PopoverContext = React.createContext<PopoverContextValue | null>(null)
@@ -30,12 +33,13 @@ interface PopoverProps {
  */
 function Popover({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: PopoverProps) {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+    const triggerRef = React.useRef<HTMLButtonElement>(null)
 
     const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen
     const setOpen = onOpenChange || setUncontrolledOpen
 
     return (
-        <PopoverContext.Provider value={{ open, onOpenChange: setOpen }}>
+        <PopoverContext.Provider value={{ open, onOpenChange: setOpen, triggerRef }}>
             <div className="relative inline-block">
                 {children}
             </div>
@@ -57,25 +61,25 @@ const PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(
             context.onOpenChange(!context.open)
         }
 
-        if (asChild && React.isValidElement(children)) {
-            return React.cloneElement(children as React.ReactElement<any>, {
-                onClick: handleClick,
-                "aria-expanded": context.open,
-                "aria-haspopup": true,
-                ref,
-            })
+        // Combine refs
+        const combinedRef = (node: HTMLButtonElement | null) => {
+            (context.triggerRef as any).current = node
+            if (typeof ref === 'function') ref(node)
+            else if (ref) ref.current = node
         }
 
+        const Comp = asChild ? Slot : "button"
+
         return (
-            <button
-                ref={ref}
+            <Comp
+                ref={combinedRef}
                 aria-expanded={context.open}
                 aria-haspopup={true}
                 onClick={handleClick}
                 {...props}
             >
                 {children}
-            </button>
+            </Comp>
         )
     }
 )
@@ -83,14 +87,30 @@ PopoverTrigger.displayName = "PopoverTrigger"
 
 const PopoverContent = React.forwardRef<
     HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement> & { align?: "start" | "center" | "end" }
->(({ className, children, align = "center", ...props }, ref) => {
+    React.HTMLAttributes<HTMLDivElement> & { align?: "start" | "center" | "end"; sideOffset?: number; portal?: boolean }
+>(({ className, children, align = "center", sideOffset = 4, portal = true, ...props }, ref) => {
     const context = React.useContext(PopoverContext)
     if (!context) throw new Error("PopoverContent must be used within Popover")
+    const contentRef = React.useRef<HTMLDivElement>(null)
+    const [position, setPosition] = React.useState({ top: 0, left: 0 })
+
+    // Reset scroll on mount/unmount if needed, but mainly we just need a portal container
+    const [mounted, setMounted] = React.useState(false)
+    React.useEffect(() => {
+        setMounted(true)
+    }, [])
 
     React.useEffect(() => {
-        const handleClickOutside = () => {
+        const handleClickOutside = (e: MouseEvent) => {
             if (context.open) {
+                const target = e.target as Node
+                const content = contentRef.current
+                const trigger = context.triggerRef.current
+
+                // Don't close if clicking inside content or trigger
+                if (content?.contains(target) || (trigger && trigger.contains(target))) {
+                    return
+                }
                 context.onOpenChange(false)
             }
         }
@@ -101,35 +121,103 @@ const PopoverContent = React.forwardRef<
             }
         }
 
-        // Delay adding the listener to prevent immediate close
+        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 viewportWidth = window.innerWidth
+
+                let top = 0
+                let left = 0
+
+                // Vertical
+                const spaceBelow = viewportHeight - triggerRect.bottom
+                const spaceAbove = triggerRect.top
+                const neededHeight = contentRect.height + sideOffset
+                const onBottom = spaceBelow >= neededHeight || spaceBelow > spaceAbove
+
+                if (onBottom) {
+                    top = triggerRect.bottom + sideOffset
+                } else {
+                    top = triggerRect.top - contentRect.height - sideOffset
+                }
+
+                // Horizontal (Alignment)
+                if (align === 'start') {
+                    left = triggerRect.left
+                } else if (align === 'end') {
+                    left = triggerRect.right - contentRect.width
+                } else {
+                    // center
+                    left = triggerRect.left + (triggerRect.width - contentRect.width) / 2
+                }
+
+                // Clamping
+                if (left < 4) left = 4
+                if (left + contentRect.width > viewportWidth - 4) {
+                    left = viewportWidth - contentRect.width - 4
+                }
+
+                setPosition({ top, left })
+            }
+        }
+
+        if (context.open) {
+            requestAnimationFrame(checkPosition)
+        }
+
         const timer = setTimeout(() => {
             document.addEventListener("click", handleClickOutside)
         }, 0)
         document.addEventListener("keydown", handleEscape)
+        window.addEventListener("resize", checkPosition)
+        window.addEventListener("scroll", checkPosition, true)
 
         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, align, sideOffset])
 
     if (!context.open) return null
+    if (portal && !mounted) return null
 
-    return (
+    const content = (
         <div
-            ref={ref}
+            ref={(node) => {
+                (contentRef as any).current = node
+                if (typeof ref === 'function') ref(node)
+                else if (ref) ref.current = node
+            }}
             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",
+                "z-50 min-w-[10rem] rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+                "animate-in fade-in-0 zoom-in-95",
+                !portal && "absolute",
+                !portal && "mt-2",
+                portal && "fixed",
                 className
             )}
+            style={{
+                top: portal ? position.top : undefined,
+                left: portal ? position.left : undefined,
+                ...props.style
+            }}
             onClick={(e) => e.stopPropagation()}
             {...props}
         >
             {children}
         </div>
     )
+
+    if (portal) {
+        return createPortal(content, document.body)
+    }
+
+    return content
 })
 PopoverContent.displayName = "PopoverContent"
 

package/src/registry/ui/select.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { createPortal } from "react-dom"
 import { cn } from "@/lib/utils"
 
 interface SelectContextValue {
@@ -6,6 +7,7 @@ interface SelectContextValue {
     onValueChange: (value: string) => void
     open: boolean
     setOpen: (open: boolean) => void
+    triggerRef: React.RefObject<HTMLButtonElement | null>
 }
 
 const SelectContext = React.createContext<SelectContextValue | null>(null)
@@ -34,12 +36,13 @@ interface SelectProps {
 function Select({ children, value: controlledValue, onValueChange, defaultValue = "" }: SelectProps) {
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)
     const [open, setOpen] = React.useState(false)
+    const triggerRef = React.useRef<HTMLButtonElement>(null)
 
     const value = controlledValue !== undefined ? controlledValue : uncontrolledValue
     const setValue = onValueChange || setUncontrolledValue
 
     return (
-        <SelectContext.Provider value={{ value, onValueChange: setValue, open, setOpen }}>
+        <SelectContext.Provider value={{ value, onValueChange: setValue, open, setOpen, triggerRef }}>
             <div className="relative">
                 {children}
             </div>
@@ -54,9 +57,16 @@ const SelectTrigger = React.forwardRef<
     const context = React.useContext(SelectContext)
     if (!context) throw new Error("SelectTrigger must be used within Select")
 
+    // Combine refs
+    const combinedRef = (node: HTMLButtonElement | null) => {
+        (context.triggerRef as any).current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+    }
+
     return (
         <button
-            ref={ref}
+            ref={combinedRef}
             type="button"
             role="combobox"
             aria-expanded={context.open}
@@ -98,52 +108,142 @@ function SelectValue({ placeholder }: SelectValueProps) {
     )
 }
 
-const SelectContent = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-    const context = React.useContext(SelectContext)
-    if (!context) throw new Error("SelectContent must be used within Select")
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    sideOffset?: number
+    portal?: boolean
+    align?: "start" | "center" | "end"
+    side?: "top" | "bottom"
+}
+
+const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(
+    ({ className, children, sideOffset = 4, portal = true, align = "start", side = "bottom", ...props }, ref) => {
+        const context = React.useContext(SelectContext)
+        if (!context) throw new Error("SelectContent must be used within Select")
+        const contentRef = React.useRef<HTMLDivElement>(null)
+        const [position, setPosition] = React.useState({ top: 0, left: 0 })
+        const [mounted, setMounted] = React.useState(false)
+
+        React.useEffect(() => {
+            setMounted(true)
+        }, [])
+
+        React.useEffect(() => {
+            const handleClickOutside = (e: MouseEvent) => {
+                if (context.open) {
+                    const target = e.target as Node
+                    const content = contentRef.current
+                    const trigger = context.triggerRef.current
+
+                    if (content?.contains(target) || (trigger && trigger.contains(target))) {
+                        return
+                    }
+                    context.setOpen(false)
+                }
+            }
+
+            const handleEscape = (e: KeyboardEvent) => {
+                if (e.key === "Escape" && context.open) {
+                    context.setOpen(false)
+                }
+            }
+
+            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 viewportWidth = window.innerWidth
+
+                    let top = 0
+                    let left = 0
+
+                    // Vertical
+                    const spaceBelow = viewportHeight - triggerRect.bottom
+                    const spaceAbove = triggerRect.top
+                    const neededHeight = contentRect.height + sideOffset
+                    const onBottom = spaceBelow >= neededHeight || spaceBelow > spaceAbove
+
+                    if (onBottom) {
+                        top = triggerRect.bottom + sideOffset
+                    } else {
+                        top = triggerRect.top - contentRect.height - sideOffset
+                    }
+
+                    // Horizontal - Select usually matches trigger width or starts aligned
+                    left = triggerRect.left
+
+                    // Clamping
+                    if (left < 4) left = 4
+                    if (left + contentRect.width > viewportWidth - 4) {
+                        left = viewportWidth - contentRect.width - 4
+                    }
+
+                    // Match width if it fits, or at least min-width of trigger
+                    // For now keeping simple positioning
+
+                    setPosition({ top, left })
+                }
+            }
 
-    React.useEffect(() => {
-        const handleClickOutside = (e: MouseEvent) => {
             if (context.open) {
-                context.setOpen(false)
+                requestAnimationFrame(checkPosition)
             }
-        }
 
-        const handleEscape = (e: KeyboardEvent) => {
-            if (e.key === "Escape" && context.open) {
-                context.setOpen(false)
+            const timer = setTimeout(() => {
+                document.addEventListener("mousedown", handleClickOutside)
+            }, 0)
+            document.addEventListener("keydown", handleEscape)
+            window.addEventListener("resize", checkPosition)
+            window.addEventListener("scroll", checkPosition, true)
+
+            return () => {
+                clearTimeout(timer)
+                document.removeEventListener("mousedown", handleClickOutside)
+                document.removeEventListener("keydown", handleEscape)
+                window.removeEventListener("resize", checkPosition)
+                window.removeEventListener("scroll", checkPosition, true)
             }
-        }
+        }, [context.open, context, sideOffset])
 
-        document.addEventListener("mousedown", handleClickOutside)
-        document.addEventListener("keydown", handleEscape)
+        if (!context.open) return null
+        if (portal && !mounted) return null
 
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside)
-            document.removeEventListener("keydown", handleEscape)
-        }
-    }, [context.open, context])
+        const content = (
+            <div
+                ref={(node) => {
+                    (contentRef as any).current = node
+                    if (typeof ref === 'function') ref(node)
+                    else if (ref) ref.current = node
+                }}
+                role="listbox"
+                className={cn(
+                    "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",
+                    !portal && "absolute",
+                    !portal && "mt-1",
+                    portal && "fixed",
+                    className
+                )}
+                style={{
+                    top: portal ? position.top : undefined,
+                    left: portal ? position.left : undefined,
+                    width: context.triggerRef.current ? context.triggerRef.current.offsetWidth : undefined,
+                    ...props.style
+                }}
+                onClick={(e) => e.stopPropagation()}
+                {...props}
+            >
+                {children}
+            </div>
+        )
 
-    if (!context.open) return null
+        if (portal) {
+            return createPortal(content, document.body)
+        }
 
-    return (
-        <div
-            ref={ref}
-            role="listbox"
-            className={cn(
-                "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-                className
-            )}
-            onClick={(e) => e.stopPropagation()}
-            {...props}
-        >
-            {children}
-        </div>
-    )
-})
+        return content
+    }
+)
 SelectContent.displayName = "SelectContent"
 
 interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/registry/ui/sheet.tsx

@@ -1,7 +1,9 @@
 'use client'
 import * as React from "react"
+import { createPortal } from "react-dom"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
+import { Slot } from "@/components/ui/slot"
 
 interface SheetContextValue {
     open: boolean
@@ -19,6 +21,18 @@ interface SheetProps {
 
 /**
  * Sheet (slide-in panel) component with smooth animations
+ * 
+ * @example
+ * <Sheet>
+ *   <SheetTrigger>Open</SheetTrigger>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitle>Edit profile</SheetTitle>
+ *       <SheetDescription>Make changes to your profile here.</SheetDescription>
+ *     </SheetHeader>
+ *     <div>Content</div>
+ *   </SheetContent>
+ * </Sheet>
  */
 function Sheet({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: SheetProps) {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
@@ -47,17 +61,12 @@ const SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTriggerProps>(
             context.onOpenChange(true)
         }
 
-        if (asChild && React.isValidElement(children)) {
-            return React.cloneElement(children as React.ReactElement<any>, {
-                onClick: handleClick,
-                ref,
-            })
-        }
+        const Comp = asChild ? Slot : "button"
 
         return (
-            <button ref={ref} onClick={handleClick} {...props}>
+            <Comp ref={ref} onClick={handleClick} {...props}>
                 {children}
-            </button>
+            </Comp>
         )
     }
 )
@@ -150,11 +159,18 @@ const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
             }
         }, [context.open, context])
 
+        const [mounted, setMounted] = React.useState(false)
+
+        React.useEffect(() => {
+            setMounted(true)
+        }, [])
+
         if (!isVisible) return null
+        if (!mounted) return null
 
         const sideKey = side || "right"
 
-        return (
+        return createPortal(
             <>
                 {/* Overlay with fade animation */}
                 <div
@@ -190,7 +206,8 @@ const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
                         <span className="sr-only">Close</span>
                     </button>
                 </div>
-            </>
+            </>,
+            document.body
         )
     }
 )

package/src/registry/ui/sidebar.tsx

@@ -6,6 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { Slot } from "@/components/ui/slot"
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/ui/sheet"
 
 
@@ -102,6 +103,25 @@ const SidebarProvider = React.forwardRef<
 })
 SidebarProvider.displayName = "SidebarProvider"
 
+
+/**
+ * Sidebar component for application layout
+ * 
+ * @example
+ * <SidebarProvider>
+ *   <Sidebar>
+ *     <SidebarHeader />
+ *     <SidebarContent>
+ *       <SidebarGroup />
+ *       <SidebarMenu />
+ *     </SidebarContent>
+ *     <SidebarFooter />
+ *   </Sidebar>
+ *   <SidebarInset>
+ *     <main>Content</main>
+ *   </SidebarInset>
+ * </SidebarProvider>
+ */
 const Sidebar = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement> & {
@@ -355,25 +375,10 @@ const SidebarGroupLabel = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-    // Only supporting div rendering for now
-    if (asChild) {
-        const child = React.Children.only(props.children) as React.ReactElement<any>
-        return React.cloneElement(child, {
-            ref,
-            "data-sidebar": "group-label",
-            className: cn(
-                "duration-200 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] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-                "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-                className,
-                child.props.className
-            ),
-            ...props,
-            children: child.props.children,
-        })
-    }
+    const Comp = asChild ? Slot : "div"
 
     return (
-        <div
+        <Comp
             ref={ref}
             data-sidebar="group-label"
             className={cn(
@@ -467,26 +472,10 @@ const SidebarMenuButton = React.forwardRef<
             }
         }
 
-        if (asChild) {
-            const child = React.Children.only(props.children) as React.ReactElement<any>
-
-            return React.cloneElement(child, {
-                ref,
-                className: cn(buttonClass, child.props.className),
-                "data-active": isActive,
-                "data-sidebar": "menu-button",
-                "data-size": size,
-                ...props,
-                onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
-                    handleClick(e)
-                    child.props.onClick?.(e)
-                },
-                children: child.props.children
-            })
-        }
+        const Comp = asChild ? Slot : "button"
 
         return (
-            <button
+            <Comp
                 ref={ref}
                 data-sidebar="menu-button"
                 data-size={size}
@@ -504,31 +493,10 @@ 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
-        })
-    }
+    const Comp = asChild ? Slot : "button"
 
     return (
-        <button
+        <Comp
             ref={ref}
             data-sidebar="menu-action"
             className={cn(
@@ -580,28 +548,10 @@ const SidebarMenuSubButton = React.forwardRef<
         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
-        })
-    }
+    const Comp = asChild ? Slot : "a"
 
     return (
-        <a
+        <Comp
             ref={ref}
             data-sidebar="menu-sub-button"
             data-size={size}