@srcroot/ui 0.0.1 → 0.0.2

package/registry/resizable.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+// Resizable Context
+interface ResizablePanelGroupContextValue {
+    direction: "horizontal" | "vertical"
+    sizes: number[]
+    setSizes: React.Dispatch<React.SetStateAction<number[]>>
+    registerPanel: () => number
+}
+
+const ResizablePanelGroupContext = React.createContext<ResizablePanelGroupContextValue | null>(null)
+
+function useResizablePanelGroup() {
+    const context = React.useContext(ResizablePanelGroupContext)
+    if (!context) {
+        throw new Error("useResizablePanelGroup must be used within a ResizablePanelGroup")
+    }
+    return context
+}
+
+// ResizablePanelGroup
+interface ResizablePanelGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: "horizontal" | "vertical"
+    onLayout?: (sizes: number[]) => void
+}
+
+const ResizablePanelGroup = React.forwardRef<HTMLDivElement, ResizablePanelGroupProps>(
+    ({ className, direction = "horizontal", children, onLayout, ...props }, ref) => {
+        const [sizes, setSizes] = React.useState<number[]>([])
+        const panelCountRef = React.useRef(0)
+
+        const registerPanel = React.useCallback(() => {
+            const index = panelCountRef.current
+            panelCountRef.current += 1
+            return index
+        }, [])
+
+        // Notify layout changes
+        React.useEffect(() => {
+            if (sizes.length > 0) {
+                onLayout?.(sizes)
+            }
+        }, [sizes, onLayout])
+
+        return (
+            <ResizablePanelGroupContext.Provider value={{ direction, sizes, setSizes, registerPanel }}>
+                <div
+                    ref={ref}
+                    data-panel-group
+                    data-direction={direction}
+                    className={cn(
+                        "flex h-full w-full",
+                        direction === "horizontal" ? "flex-row" : "flex-col",
+                        className
+                    )}
+                    {...props}
+                >
+                    {children}
+                </div>
+            </ResizablePanelGroupContext.Provider>
+        )
+    }
+)
+ResizablePanelGroup.displayName = "ResizablePanelGroup"
+
+// ResizablePanel
+interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    defaultSize?: number
+    minSize?: number
+    maxSize?: number
+}
+
+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)
+
+        React.useEffect(() => {
+            if (indexRef.current === null) {
+                indexRef.current = registerPanel()
+                setSizes(prev => {
+                    const newSizes = [...prev]
+                    newSizes[indexRef.current!] = defaultSize
+                    return newSizes
+                })
+            }
+        }, [registerPanel, setSizes, defaultSize])
+
+        const size = indexRef.current !== null ? sizes[indexRef.current] ?? defaultSize : defaultSize
+
+        return (
+            <div
+                ref={ref}
+                data-panel
+                data-panel-index={indexRef.current}
+                className={cn("overflow-hidden", className)}
+                style={{
+                    ...style,
+                    [direction === "horizontal" ? "width" : "height"]: `${size}%`,
+                    flexShrink: 0,
+                    flexGrow: 0,
+                }}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+ResizablePanel.displayName = "ResizablePanel"
+
+// ResizableHandle
+interface ResizableHandleProps extends React.HTMLAttributes<HTMLDivElement> {
+    withHandle?: boolean
+}
+
+const ResizableHandle = React.forwardRef<HTMLDivElement, ResizableHandleProps>(
+    ({ className, withHandle = false, ...props }, ref) => {
+        const { direction, sizes, setSizes } = useResizablePanelGroup()
+        const [isDragging, setIsDragging] = React.useState(false)
+        const handleRef = React.useRef<HTMLDivElement>(null)
+
+        const handleMouseDown = (e: React.MouseEvent) => {
+            e.preventDefault()
+            setIsDragging(true)
+
+            const startX = e.clientX
+            const startY = e.clientY
+            const startSizes = [...sizes]
+            const container = handleRef.current?.parentElement
+
+            if (!container) return
+
+            const containerRect = container.getBoundingClientRect()
+            const containerSize = direction === "horizontal" ? containerRect.width : containerRect.height
+
+            const handleMouseMove = (moveEvent: MouseEvent) => {
+                const delta = direction === "horizontal"
+                    ? moveEvent.clientX - startX
+                    : moveEvent.clientY - startY
+                const deltaPercent = (delta / containerSize) * 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))
+                    }
+                    return newSizes
+                })
+            }
+
+            const handleMouseUp = () => {
+                setIsDragging(false)
+                document.removeEventListener("mousemove", handleMouseMove)
+                document.removeEventListener("mouseup", handleMouseUp)
+            }
+
+            document.addEventListener("mousemove", handleMouseMove)
+            document.addEventListener("mouseup", handleMouseUp)
+        }
+
+        return (
+            <div
+                ref={handleRef}
+                data-panel-resize-handle
+                className={cn(
+                    "relative flex items-center justify-center bg-border",
+                    direction === "horizontal"
+                        ? "w-px cursor-col-resize hover:w-1 hover:bg-primary/50"
+                        : "h-px cursor-row-resize hover:h-1 hover:bg-primary/50",
+                    isDragging && (direction === "horizontal" ? "w-1 bg-primary" : "h-1 bg-primary"),
+                    "transition-all",
+                    className
+                )}
+                onMouseDown={handleMouseDown}
+                {...props}
+            >
+                {withHandle && (
+                    <div
+                        className={cn(
+                            "z-10 flex items-center justify-center rounded-sm border bg-border",
+                            direction === "horizontal" ? "h-4 w-3" : "h-3 w-4"
+                        )}
+                    >
+                        <svg
+                            className={cn(
+                                "h-2.5 w-2.5 text-muted-foreground",
+                                direction === "vertical" && "rotate-90"
+                            )}
+                            viewBox="0 0 6 10"
+                            fill="currentColor"
+                        >
+                            <circle cx="1" cy="2" r="1" />
+                            <circle cx="1" cy="5" r="1" />
+                            <circle cx="1" cy="8" r="1" />
+                            <circle cx="5" cy="2" r="1" />
+                            <circle cx="5" cy="5" r="1" />
+                            <circle cx="5" cy="8" r="1" />
+                        </svg>
+                    </div>
+                )}
+            </div>
+        )
+    }
+)
+ResizableHandle.displayName = "ResizableHandle"
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/registry/scroll-area.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Orientation of scrollbar */
+    orientation?: "vertical" | "horizontal" | "both"
+}
+
+/**
+ * ScrollArea - Custom scrollbar container
+ * 
+ * Provides a styled scrollbar that is thin and consistent across browsers.
+ * Uses CSS scrollbar styling for webkit and Firefox.
+ */
+const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
+    ({ className, children, orientation = "vertical", ...props }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    "relative",
+                    // 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",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+            </div>
+        )
+    }
+)
+ScrollArea.displayName = "ScrollArea"
+
+// ScrollBar component for explicit scrollbar styling reference
+interface ScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "vertical" | "horizontal"
+}
+
+const ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(
+    ({ className, orientation = "vertical", ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn(
+                "flex touch-none select-none transition-colors",
+                orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+                orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+ScrollBar.displayName = "ScrollBar"
+
+export { ScrollArea, ScrollBar }

package/registry/search.tsx

@@ -97,7 +97,8 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
                         "flex h-10 w-full rounded-md border border-input bg-transparent pl-10 pr-10 py-2 text-sm shadow-sm transition-colors",
                         "placeholder:text-muted-foreground",
                         "focus:outline-none focus:ring-1 focus:ring-ring",
-                        "disabled:cursor-not-allowed disabled:opacity-50"
+                        "disabled:cursor-not-allowed disabled:opacity-50",
+                        "[&::-webkit-search-cancel-button]:appearance-none"
                     )}
                     {...props}
                 />

package/registry/sheet.tsx

@@ -1,3 +1,4 @@
+'use client'
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"