@srcroot/ui 0.0.2 → 0.0.3

package/registry/hover-card.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils"
 // HoverCard Context
 interface HoverCardContextValue {
     open: boolean
-    triggerRef: React.RefObject<HTMLDivElement>
+    triggerRef: React.RefObject<HTMLDivElement | null>
 }
 
 const HoverCardContext = React.createContext<HoverCardContextValue | null>(null)

package/registry/image.tsx

@@ -69,8 +69,8 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
         }, [src])
 
         const containerStyle: React.CSSProperties = aspectRatio
-            ? { paddingBottom: `${100 / aspectRatio}%`, ...style }
-            : style
+            ? { paddingBottom: `${100 / aspectRatio}%`, ...(style || {}) }
+            : (style || {})
 
         // Render fallback
         if (status === "error" && fallback) {

package/registry/menubar.tsx

@@ -22,7 +22,7 @@ function useMenubar() {
 // MenubarMenu Context
 interface MenubarMenuContextValue {
     menuId: string
-    triggerRef: React.RefObject<HTMLButtonElement>
+    triggerRef: React.RefObject<HTMLButtonElement | null>
 }
 
 const MenubarMenuContext = React.createContext<MenubarMenuContextValue | null>(null)

package/registry/resizable.tsx

@@ -9,6 +9,7 @@ interface ResizablePanelGroupContextValue {
     sizes: number[]
     setSizes: React.Dispatch<React.SetStateAction<number[]>>
     registerPanel: () => number
+    getPanelCount: () => number
 }
 
 const ResizablePanelGroupContext = React.createContext<ResizablePanelGroupContextValue | null>(null)
@@ -32,12 +33,21 @@ const ResizablePanelGroup = React.forwardRef<HTMLDivElement, ResizablePanelGroup
         const [sizes, setSizes] = React.useState<number[]>([])
         const panelCountRef = React.useRef(0)
 
+        // Reset panel count on each render to handle re-renders properly
+        React.useLayoutEffect(() => {
+            panelCountRef.current = 0
+        })
+
         const registerPanel = React.useCallback(() => {
             const index = panelCountRef.current
             panelCountRef.current += 1
             return index
         }, [])
 
+        const getPanelCount = React.useCallback(() => {
+            return panelCountRef.current
+        }, [])
+
         // Notify layout changes
         React.useEffect(() => {
             if (sizes.length > 0) {
@@ -46,7 +56,7 @@ const ResizablePanelGroup = React.forwardRef<HTMLDivElement, ResizablePanelGroup
         }, [sizes, onLayout])
 
         return (
-            <ResizablePanelGroupContext.Provider value={{ direction, sizes, setSizes, registerPanel }}>
+            <ResizablePanelGroupContext.Provider value={{ direction, sizes, setSizes, registerPanel, getPanelCount }}>
                 <div
                     ref={ref}
                     data-panel-group
@@ -76,32 +86,30 @@ interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
 const ResizablePanel = React.forwardRef<HTMLDivElement, ResizablePanelProps>(
     ({ className, defaultSize = 50, minSize = 10, maxSize = 90, children, style, ...props }, ref) => {
         const { direction, sizes, setSizes, registerPanel } = useResizablePanelGroup()
-        const indexRef = React.useRef<number | null>(null)
+        const [index] = React.useState(() => registerPanel())
 
-        React.useEffect(() => {
-            if (indexRef.current === null) {
-                indexRef.current = registerPanel()
-                setSizes(prev => {
-                    const newSizes = [...prev]
-                    newSizes[indexRef.current!] = defaultSize
-                    return newSizes
-                })
-            }
-        }, [registerPanel, setSizes, defaultSize])
+        // Initialize size
+        React.useLayoutEffect(() => {
+            setSizes(prev => {
+                const newSizes = [...prev]
+                if (newSizes[index] === undefined) {
+                    newSizes[index] = defaultSize
+                }
+                return newSizes
+            })
+        }, [index, defaultSize, setSizes])
 
-        const size = indexRef.current !== null ? sizes[indexRef.current] ?? defaultSize : defaultSize
+        const size = sizes[index] ?? defaultSize
 
         return (
             <div
                 ref={ref}
                 data-panel
-                data-panel-index={indexRef.current}
+                data-panel-index={index}
                 className={cn("overflow-hidden", className)}
                 style={{
                     ...style,
-                    [direction === "horizontal" ? "width" : "height"]: `${size}%`,
-                    flexShrink: 0,
-                    flexGrow: 0,
+                    flex: `0 0 ${size}%`,
                 }}
                 {...props}
             >
@@ -119,7 +127,7 @@ interface ResizableHandleProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ResizableHandle = React.forwardRef<HTMLDivElement, ResizableHandleProps>(
     ({ className, withHandle = false, ...props }, ref) => {
-        const { direction, sizes, setSizes } = useResizablePanelGroup()
+        const { direction, setSizes } = useResizablePanelGroup()
         const [isDragging, setIsDragging] = React.useState(false)
         const handleRef = React.useRef<HTMLDivElement>(null)
 
@@ -127,29 +135,59 @@ const ResizableHandle = React.forwardRef<HTMLDivElement, ResizableHandleProps>(
             e.preventDefault()
             setIsDragging(true)
 
-            const startX = e.clientX
-            const startY = e.clientY
-            const startSizes = [...sizes]
-            const container = handleRef.current?.parentElement
+            const startPos = direction === "horizontal" ? e.clientX : e.clientY
+            const handle = handleRef.current
+            if (!handle) return
+
+            // Find adjacent panels
+            const prevPanel = handle.previousElementSibling as HTMLElement
+            const nextPanel = handle.nextElementSibling as HTMLElement
+            if (!prevPanel || !nextPanel) return
 
-            if (!container) return
+            const prevIndex = parseInt(prevPanel.dataset.panelIndex || "0")
+            const nextIndex = parseInt(nextPanel.dataset.panelIndex || "1")
 
-            const containerRect = container.getBoundingClientRect()
-            const containerSize = direction === "horizontal" ? containerRect.width : containerRect.height
+            // Get current sizes
+            const prevRect = prevPanel.getBoundingClientRect()
+            const nextRect = nextPanel.getBoundingClientRect()
+            const totalSize = direction === "horizontal"
+                ? prevRect.width + nextRect.width
+                : prevRect.height + nextRect.height
 
             const handleMouseMove = (moveEvent: MouseEvent) => {
-                const delta = direction === "horizontal"
-                    ? moveEvent.clientX - startX
-                    : moveEvent.clientY - startY
-                const deltaPercent = (delta / containerSize) * 100
+                const currentPos = direction === "horizontal" ? moveEvent.clientX : moveEvent.clientY
+                const delta = currentPos - startPos
+                const deltaPercent = (delta / totalSize) * 100
 
                 setSizes(prev => {
                     const newSizes = [...prev]
-                    // Adjust first two panels (simple implementation)
-                    if (newSizes.length >= 2) {
-                        newSizes[0] = Math.max(10, Math.min(90, startSizes[0] + deltaPercent))
-                        newSizes[1] = Math.max(10, Math.min(90, startSizes[1] - deltaPercent))
+                    const prevSize = prev[prevIndex] ?? 50
+                    const nextSize = prev[nextIndex] ?? 50
+
+                    // Calculate new sizes with constraints
+                    let newPrevSize = prevSize + deltaPercent
+                    let newNextSize = nextSize - deltaPercent
+
+                    // Apply min/max constraints
+                    if (newPrevSize < 10) {
+                        newPrevSize = 10
+                        newNextSize = prevSize + nextSize - 10
                     }
+                    if (newNextSize < 10) {
+                        newNextSize = 10
+                        newPrevSize = prevSize + nextSize - 10
+                    }
+                    if (newPrevSize > 90) {
+                        newPrevSize = 90
+                        newNextSize = prevSize + nextSize - 90
+                    }
+                    if (newNextSize > 90) {
+                        newNextSize = 90
+                        newPrevSize = prevSize + nextSize - 90
+                    }
+
+                    newSizes[prevIndex] = newPrevSize
+                    newSizes[nextIndex] = newNextSize
                     return newSizes
                 })
             }

package/registry/scroll-area.tsx

@@ -3,17 +3,47 @@ import { cn } from "@/lib/utils"
 
 interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Orientation of scrollbar */
-    orientation?: "vertical" | "horizontal" | "both"
+    orientation?: "vertical" | "horizontal"
+    /** Scrollbar size: "thin" (4px), "default" (8px), "thick" (12px) */
+    scrollbarSize?: "thin" | "default" | "thick"
+    /** Hide scrollbar until hover */
+    hideScrollbar?: boolean
+}
+
+// CSS for custom scrollbar styling
+const scrollbarStyles = {
+    thin: {
+        width: "4px",
+        height: "4px",
+    },
+    default: {
+        width: "8px",
+        height: "8px",
+    },
+    thick: {
+        width: "12px",
+        height: "12px",
+    },
 }
 
 /**
  * ScrollArea - Custom scrollbar container
  * 
  * Provides a styled scrollbar that is thin and consistent across browsers.
- * Uses CSS scrollbar styling for webkit and Firefox.
+ * Supports customizable scrollbar size and orientation.
  */
 const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
-    ({ className, children, orientation = "vertical", ...props }, ref) => {
+    ({ className, children, orientation = "vertical", scrollbarSize = "thin", hideScrollbar = false, style, ...props }, ref) => {
+        const sizes = scrollbarStyles[scrollbarSize]
+
+        const scrollbarCSS: React.CSSProperties = {
+            ...style,
+            // Webkit browsers (Chrome, Safari, Edge)
+            // @ts-ignore - CSS custom properties for scrollbar
+            "--scrollbar-width": sizes.width,
+            "--scrollbar-height": sizes.height,
+        }
+
         return (
             <div
                 ref={ref}
@@ -22,13 +52,42 @@ const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
                     // Container overflow based on orientation
                     orientation === "vertical" && "overflow-y-auto overflow-x-hidden",
                     orientation === "horizontal" && "overflow-x-auto overflow-y-hidden",
-                    orientation === "both" && "overflow-auto",
-                    // Custom scrollbar styling
-                    "scrollbar-thin",
+                    // Custom scrollbar classes
+                    "scrollbar-custom",
+                    hideScrollbar && "scrollbar-hide hover:scrollbar-show",
                     className
                 )}
+                style={scrollbarCSS}
                 {...props}
             >
+                <style>{`
+                    .scrollbar-custom::-webkit-scrollbar {
+                        width: var(--scrollbar-width, 4px);
+                        height: var(--scrollbar-height, 4px);
+                    }
+                    .scrollbar-custom::-webkit-scrollbar-track {
+                        background: transparent;
+                        border-radius: 9999px;
+                    }
+                    .scrollbar-custom::-webkit-scrollbar-thumb {
+                        background: hsl(var(--muted-foreground) / 0.3);
+                        border-radius: 9999px;
+                    }
+                    .scrollbar-custom::-webkit-scrollbar-thumb:hover {
+                        background: hsl(var(--muted-foreground) / 0.5);
+                    }
+                    .scrollbar-custom {
+                        scrollbar-width: thin;
+                        scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+                    }
+                    .scrollbar-hide::-webkit-scrollbar {
+                        opacity: 0;
+                    }
+                    .scrollbar-hide:hover::-webkit-scrollbar,
+                    .scrollbar-show::-webkit-scrollbar {
+                        opacity: 1;
+                    }
+                `}</style>
                 {children}
             </div>
         )
@@ -36,7 +95,7 @@ const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
 )
 ScrollArea.displayName = "ScrollArea"
 
-// ScrollBar component for explicit scrollbar styling reference
+// ScrollBar component for explicit scrollbar styling reference (optional usage)
 interface ScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {
     orientation?: "vertical" | "horizontal"
 }

package/registry/sheet.tsx

@@ -18,20 +18,7 @@ interface SheetProps {
 }
 
 /**
- * Sheet (slide-in panel) component
- * 
- * @example
- * <Sheet>
- *   <SheetTrigger asChild>
- *     <Button>Open Sheet</Button>
- *   </SheetTrigger>
- *   <SheetContent side="right">
- *     <SheetHeader>
- *       <SheetTitle>Title</SheetTitle>
- *       <SheetDescription>Description</SheetDescription>
- *     </SheetHeader>
- *   </SheetContent>
- * </Sheet>
+ * Sheet (slide-in panel) component with smooth animations
  */
 function Sheet({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: SheetProps) {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
@@ -77,7 +64,7 @@ const SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTriggerProps>(
 SheetTrigger.displayName = "SheetTrigger"
 
 const sheetVariants = cva(
-    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out",
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg",
     {
         variants: {
             side: {
@@ -93,6 +80,26 @@ const sheetVariants = cva(
     }
 )
 
+// Animation classes for each side
+const animationClasses = {
+    top: {
+        open: "translate-y-0",
+        closed: "-translate-y-full",
+    },
+    bottom: {
+        open: "translate-y-0",
+        closed: "translate-y-full",
+    },
+    left: {
+        open: "translate-x-0",
+        closed: "-translate-x-full",
+    },
+    right: {
+        open: "translate-x-0",
+        closed: "translate-x-full",
+    },
+}
+
 interface SheetContentProps
     extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof sheetVariants> { }
@@ -102,6 +109,29 @@ const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
         const context = React.useContext(SheetContext)
         if (!context) throw new Error("SheetContent must be used within Sheet")
 
+        const [isVisible, setIsVisible] = React.useState(false)
+        const [isAnimating, setIsAnimating] = React.useState(false)
+
+        React.useEffect(() => {
+            if (context.open) {
+                // First make visible (off-screen)
+                setIsVisible(true)
+                // Use a small timeout to ensure the browser has painted the initial state
+                const timer = setTimeout(() => {
+                    setIsAnimating(true)
+                }, 10)
+                return () => clearTimeout(timer)
+            } else {
+                // Start close animation
+                setIsAnimating(false)
+                // Wait for animation to complete before hiding
+                const timer = setTimeout(() => {
+                    setIsVisible(false)
+                }, 300)
+                return () => clearTimeout(timer)
+            }
+        }, [context.open])
+
         React.useEffect(() => {
             const handleEscape = (e: KeyboardEvent) => {
                 if (e.key === "Escape") {
@@ -120,19 +150,33 @@ const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
             }
         }, [context.open, context])
 
-        if (!context.open) return null
+        if (!isVisible) return null
+
+        const sideKey = side || "right"
 
         return (
             <>
+                {/* Overlay with fade animation */}
                 <div
-                    className="fixed inset-0 z-50 bg-black/80"
+                    className={cn(
+                        "fixed inset-0 z-50 bg-black/80 transition-opacity duration-300",
+                        isAnimating ? "opacity-100" : "opacity-0"
+                    )}
                     onClick={() => context.onOpenChange(false)}
                 />
+                {/* Sheet content with slide animation */}
                 <div
                     ref={ref}
                     role="dialog"
                     aria-modal="true"
-                    className={cn(sheetVariants({ side }), className)}
+                    className={cn(
+                        sheetVariants({ side }),
+                        "transition-transform duration-300 ease-out",
+                        isAnimating
+                            ? animationClasses[sideKey].open
+                            : animationClasses[sideKey].closed,
+                        className
+                    )}
                     {...props}
                 >
                     {children}

package/registry/sidebar.tsx

@@ -281,6 +281,13 @@ const SidebarInset = React.forwardRef<
             ref={ref}
             className={cn(
                 "relative flex min-h-svh flex-1 flex-col bg-background",
+                // Width calculation based on sidebar state
+                "w-full md:w-[calc(100%-var(--sidebar-width))]",
+                "md:peer-data-[state=collapsed]:w-[calc(100%-var(--sidebar-width-icon))]",
+                "md:peer-data-[collapsible=offcanvas]:peer-data-[state=collapsed]:w-full",
+                // Transition for smooth resize
+                "transition-[width] duration-200 ease-linear",
+                // Inset variant styles
                 "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
                 className
             )}